/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

:root {
    --color-primary: #1d4ed8;
    --color-primary-rgb: 29, 78, 216;
    --color-blue: #1c5dc1;
    --color-blue-rgb: 28, 93, 193;
}
body {
    line-height: 1;
    font-family: "Noto Sans Devanagari", sans-serif;
    background: #ffffff;
    &.modal-open {
        overflow: hidden !important;
    }
}
.btn-transparent {
    background-color: #ffffff;
    color: #333;
    border-radius: 10px;
    padding: 7px 20px;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #000000;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    &:hover {
        background-color: rgba(255, 255, 255, 0.8);
        color: #000000;
    }
}
.btn-white {
    background-color: #ffffff;
    color: var(--color-blue);
    border-radius: 10px;
    padding: 11.5px 20px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    &:hover {
        background-color: rgba(255, 255, 255, 0.8);
        color: var(--color-blue);
    }
}
.btn-blue {
    background-color: #44bef2;
    color: #ffffff;
    border-radius: 10px;
    padding: 11.5px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    &:hover {
        background-color: #23b3f1;
        color: #ffffff;
    }
}

.btn-light-blue {
    background-color: rgba(197, 237, 255, 0.5);
    color: #44bef2;
    border-radius: 10px;
    padding: 11.5px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    &:hover {
        background-color: #23b3f1;
        color: #ffffff;
    }
}
.btn-red {
    background-color: rgba(227, 56, 4, 0.3);
    color: #e33804;
    border-radius: 10px;
    padding: 11.5px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    &:hover {
        background-color: #c73407;
        color: #ffffff;
    }
}
.bg-white {
    background-color: #ffffff;
}
.bg-draft {
    background-color: rgba(85, 133, 208, 0.28); /* Light translucent blue */
    color: #2c3e50; /* Dark slate gray text */
}

.bg-proposed {
    background-color: #207dcf; /* Blue */
    color: #ffffff; /* White text */
}

.bg-in-progress {
    background-color: #ffeb3b; /* Yellow */
    color: #000000; /* Black text */
}

.bg-approved {
    background-color: #4caf50; /* Green */
    color: #ffffff; /* White text */
}

.bg-rejected {
    background-color: #f44336; /* Red */
    color: #ffffff; /* White text */
}

.bg-on-hold {
    background-color: #ff9800; /* Orange */
    color: #ffffff; /* White text */
}

.bg-completed {
    background-color: #8bc34a; /* Light green */
    color: #ffffff; /* White text */
}

.bg-default {
    background-color: #ffffff; /* White */
    color: #000000; /* Black text */
}

/* Padding utilities */
.pt-0 {
    padding-top: 0 !important;
}
.pb-0 {
    padding-bottom: 0 !important;
}
.pl-0 {
    padding-left: 0 !important;
}
.pr-0 {
    padding-right: 0 !important;
}
.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.p-0 {
    padding: 0 !important;
}

/* Margin utilities */
.mt-0 {
    margin-top: 0 !important;
}
.mb-0 {
    margin-bottom: 0 !important;
}
.ml-0 {
    margin-left: 0 !important;
}
.mr-0 {
    margin-right: 0 !important;
}
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.m-0 {
    margin: 0 !important;
}
.b-0 {
    border: 0;
}
.font-16 {
    font-size: 16px;
}
input:disabled {
    background: #f5f5f9 !important;
}
select option:disabled {
    color: lightgray !important;
}
.aside-fixed .wrapper {
    padding: 0 !important;
}
.aside-enabled .header.header-fixed {
    left: 0;
}
.input-icon.icon-right {
    .form-control {
        padding: 0.65rem 1rem;
        padding-right: (1.5em + 1.3rem + 2px);
    }
    select.form-control {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        -o-text-overflow: "";
        text-overflow: "";
    }
    span {
        left: auto;
        right: 0;
    }
}
.main-content-warpper {
    padding-top: 130px;
}
.login-page {
    height: 100vh;
    .container-fluid {
        padding: 0 13px;
    }
    .logo-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        figure {
            width: 100%;
            height: 300px;
            margin-bottom: 20px;
            img {
                width: 100%;
                height: 100%;
                -o-object-fit: contain;
                object-fit: contain;
            }
        }
        h1 {
            color: var(--color-primary);
            font-size: 30px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        p {
            font-size: 18px;
            margin-bottom: 0;
            line-height: 1.3;
        }
    }
    .login-part-wrapper {
        background-color: rgba(var(--color-blue-rgb), 0.75);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .login-part {
        color: #ffffff;
        width: 500px;
        margin: 0 auto 0 60px;
        h3 {
            font-weight: 600;
            font-size: 30px;
            margin-bottom: 40px;
        }
        form {
            padding-bottom: 40px;
            .form-wrapper {
                margin-bottom: 40px;
            }
            label {
                font-size: 18px;
                font-weight: 400;
                margin-bottom: 10px;
            }
            input {
                border: 2px solid #d9d9d9;
                background: transparent;
                border-radius: 10px;
                color: #ffffff;
                padding: 11px 20px;
                &::-webkit-input-placeholder {
                    color: inherit;
                }
                &::-moz-placeholder {
                    color: inherit;
                }
                &:-ms-input-placeholder {
                    color: inherit;
                }
                &::-ms-input-placeholder {
                    color: inherit;
                }
                &::placeholder {
                    color: inherit;
                }
            }
            .btn-white {
                width: 100%;
            }
        }
        .support-wrapper {
            p {
                font-size: 18px;
                font-weight: 400;
                margin-bottom: 16px;
            }
            a {
                color: #ffffff;
                font-size: 20px;
                font-weight: 600;
                text-decoration: underline;
            }
        }
    }
}
.aside-wrapper {
    background: none;
    border-right: 1px solid rgba(0, 0, 0, 0.16);
    .brand {
        background: none;
    }
    .aside-menu {
        background: none;
        margin: 0;
        .menu-nav {
            padding: 0;
            .menu-item {
                margin: 0;
                &:hover {
                    .menu-link {
                        background: none !important;
                    }
                }
                &.menu-item-active {
                    .menu-link {
                        background: none !important;
                        .menu-text {
                            color: var(--color-primary) !important;
                        }
                    }
                }
            }
            .menu-text {
                font-size: 18px !important;
                color: #000000 !important;
                font-weight: 400 !important;
                &:hover {
                    color: var(--color-primary) !important;
                }
            }
        }
    }
}
#kt_quick_user {
    top: 80px;
    width: 300px;
    min-height: 200px;
    padding: 20px;
    bottom: auto;

    .offcanvas-content {
        height: 100% !important;
    }
    .symbol {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        gap: 10px;
        h2 {
            margin-bottom: 0;
        }
    }
    .navi {
        .navi-item {
            display: inline-block;
            padding: 10px 20px;
            font-size: 14px;
            .fa-solid {
                color: #ffffff;
                margin-right: 10px;
            }
        }
    }
}
.header {
    background: rgb(85, 134, 209);

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    &.header-fixed {
        height: auto;
    }
    .login-btn-wrapper {
        display: none;
    }
    .header-menu-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 0;
    }
    .sub-menu {
        background: #fff;
        .menu-nav {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin: 0;
            list-style: none;
            .menu-link {
                padding: 15px 30px;
                font-size: 16px;
                display: inline-block;
                color: #33578f;
            }
        }
        .menu-item-submenu {
            position: relative;
            .menu-item {
                &:not(:last-child) {
                    border-bottom: 1px solid #ddd;
                }
            }
            &:hover {
                > .menu-submenu {
                    display: block;
                }
            }
        }
        .menu-submenu {
            -webkit-box-shadow: 2px 8px 8px 0px hsl(0deg 0% 0% / 10%);
            box-shadow: 2px 8px 8px 0px hsl(0deg 0% 0% / 10%);
            position: absolute;
            /* background: #5586d1; */
            background: #fff;
            border-radius: 0 0 20px 20px;
            /* overflow: hidden; */
            display: none;
            width: 210px;
            .menu-item-submenu {
                &::after {
                    position: absolute;
                    top: 16px;
                    left: auto;
                    right: 20px;
                    content: "\f054";
                    font-family: "Font Awesome 6 Free";
                    font-weight: 900;
                    color: #33578f;
                }
                .menu-submenu {
                    left: 100%;
                    top: 0;
                    background: #f5f5f5;
                }
            }
            .menu-subnav {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .menu-link {
                color: #33578f;
                width: 100%;
                &:hover {
                    /* background: #33578f; */
                    .menu-text {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}
.header-menu-wrapper {
    width: 100%;
}
.header-menu {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    figure {
        height: 60px;
        width: 60px;
        img {
            -o-object-fit: contain;
            object-fit: contain;
            height: 100%;
            width: 100%;
        }
    }
    .top-bar-info {
        list-style: none;
        color: #fff;
        margin: 0;
        padding: 0 0 0 10px;
        h1 {
            font-size: 18px;
            margin: 0 0 4px;
        }
        p {
            font-size: 14px;
            margin: 0;
            line-height: 1.4;
        }
    }
}
.topbar-item {
    .topmenu-bar .fa-solid {
        color: #fff;
    }
}
.card-head {
    padding: 20px 0 0;
    h2 {
        margin-bottom: 0;
    }
}
.custom-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}
.budget-table-wrapper {
    .card-custom {
        .card-body,
        .card-header {
            /* padding: 2.25rem 6rem; */
            padding: 15px 0 2.25rem;
        }
    }
    .table-bottom-bar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}
.custom-middle-pagination {
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.form-control.disabled {
    pointer-events: none;
    background: #f5f5f9 !important;
}
.cstm-form {
    .card-header {
        padding: 20px 0 0;

        .card-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 0;
        }
        .card-sub-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 0;
        }
    }
    .card-body {
        /* padding: 2.25rem 6rem; */
        padding: 2.25rem 0;
        /* max-width: 900px; */
        width: 100%;
        margin: auto;
        .form-group {
            margin-bottom: 20px;
        }
        .radio-group {
            > div {
                row-gap: 10px;
                column-gap: 20px;
                flex-wrap: wrap;
            }
        }
        .map-group {
            height: 90%;
        }
        .form-label {
            display: block;
            font-size: 16px;
        }
        .form-check {
            .form-check-label {
                vertical-align: sub;
                font-size: 14px;
                padding-top: 5px;
                padding-left: 5px;
            }
        }
        .form-control {
            border: 1px solid #d9d9d9;
            background: transparent;
            width: 100%;
            border-radius: 10px;
            color: #000000;
            padding: 8px 20px;
            font-size: 16px;
        }
        .form-photo-wrapper {
            position: relative;
            .form-control {
                opacity: 0;
                cursor: pointer;
            }
            .form-photo-btn {
                position: absolute;
                inset: 0;
                pointer-events: none;
                cursor: pointer;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                border: 1px solid #d9d9d9;
                border-radius: 10px;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                overflow: hidden;
                font-size: 16px;

                p {
                    padding: 0 20px;
                    margin: 0;
                    overflow: hidden;
                    white-space: nowrap;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    height: 100%;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                }
                span {
                    height: 100%;
                    background: #f5f5f9;
                    border-left: 1px solid #d9d9d9;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    width: 100px;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    justify-content: center;
                }
            }
        }
    }
    .map-wrapper {
        width: 100%;
        height: 100%;
        position: relative;
        #map {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 10px;
        }
        #resetMapBtn {
            position: absolute;
            background: #ffffff;
            border: 1px solid #ddd;
            color: #000;
            padding: 5px 10px;
            cursor: pointer;
            margin-top: 10px;
            z-index: 2;
            left: 50px;
        }
    }
    .card-footer {
        padding-left: 0;
    }
    #samitiInputField,
    #priorityInputField {
        display: none;
    }
}
/* .table-responsive {
    .custom-table {
        white-space: nowrap;
    }
} */
#budget_table_wrapper .dt-search {
    display: none;
}
/* .custom-pagination {
    a {
        border: 1px solid #dddddd;
        padding: 5px 10px;
        margin: 0 2px;
        color: #000;
        &.active {
            background: #1c5dc1;
            color: #fff;
            border: 1px solid #1c5dc1;
        }
    }
} */
#custom-export-buttons {
    margin-right: 20px;
    position: relative;
    /* &:hover {
        .dt-buttons {
            display: flex;
        }
    } */
    /* .print-toggler {
        .fa-solid {
            color: #1d4ed8;
        }
    } */
    .dt-buttons {
        /* display: none; */
        /* flex-direction: column;
        position: absolute;
        top: 100%;
        background: #fff;
        left: 0;
        right: 0;
        padding: 10px;
        width: 90%;
        margin: auto;
        box-shadow: 0px 9px 8px 0px #00000026;
        border-radius: 0 0px 10px 10px;
        z-index: 1; */
        button {
            border: 0;
            background: none;
            color: #333;
            padding: 8.5px 6px;
            border-radius: 10px;
            cursor: pointer;
            overflow: hidden;
            /* &:not(:last-child) {
                border-bottom: 1px solid #ddd;
            } */
            img {
                -webkit-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
                /* filter: grayscale(1) brightness(0); */
                width: 20px;
                height: 20px;
            }
            &:hover {
                img {
                    -webkit-filter: none;
                    filter: none;
                }
            }
        }
    }
}
#default-export-buttons-container {
    .print-btn {
        border: 0;
        background: none;
        color: #333;
        padding: 8.5px 6px;
        border-radius: 10px;
        cursor: pointer;
        overflow: hidden;

        img {
            -webkit-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
            /* filter: grayscale(1) brightness(0); */
            width: 20px;
            height: 20px;
        }
        span {
            vertical-align: sub;
        }
        &:hover {
            img {
                -webkit-filter: none;
                filter: none;
            }
        }
    }

    /* .excel-btn:hover {
        background: #218838;
    }

    .pdf-btn:hover {
        background: #1f5bff;
    } */
}
.budget-pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    position: relative;
    padding-top: 10px;
    #pagination-controls {
        text-align: right;
        font-family: Arial, sans-serif;
        position: absolute;
        top: 0;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        padding-top: 15px;
    }

    #pagination-controls a {
        display: inline-block;
        padding: 7px 12px;
        margin-left: 2px;
        margin-right: 2px;
        text-decoration: none;

        color: #333;
        font-size: 12px;
        cursor: pointer;
    }

    #pagination-controls a:hover {
        background-color: #e9e9e9;
        border-color: #999;
    }

    #pagination-controls a.active {
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        font-weight: bold;
    }

    #pagination-controls a.disabled {
        color: #999;
        cursor: default;
        border-color: #ddd;
        pointer-events: none;
    }

    #pagination-controls .ellipsis {
        display: inline-block;
        padding: 6px 12px;
        color: #666;
        font-size: 12px;
    }
}

.custom-table {
    font-size: 14px;
    div.dataTables_filter {
        display: none;
    }
    .group-header {
        display: none;
    }
    th .dt-column-title {
        font-size: 16px;
    }
    td {
        padding: 12px 10px !important ;
        vertical-align: middle;
    }
    .group-footer,
    .grand-total-tr {
        td {
            padding: 18px 10px !important ;
        }
    }
}

/* .modal-backdrop {
    display: none !important;
} */
.card-transparent {
    border: 0 !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.swal2-icon.swal2-warning {
    border: 0 !important;
}
.switch {
    input:empty ~ span {
        margin: 2px 0;
        height: 24px;
        width: 48px;
        &:before {
            width: 48px;
        }
        &:after {
            height: 18px;
            width: 18px;
        }
    }
}
.tick-cross-switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    &.disabled {
        cursor: not-allowed;
    }
}

.tick-cross-switch .indicator::before {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00d";
    color: #e32323;
}
.tick-cross-switch input[type="checkbox"]:disabled + .indicator {
    cursor: not-allowed;
}
.tick-cross-switch input[type="checkbox"]:checked + .indicator::before {
    content: "\f00c";
    color: #7aeb16;
}
.green-check {
    color: #7aeb16;
    font-size: 1.5rem;
    text-align: center;
}
img.green-check {
    width: 20px;
    height: 20px;
}
.red-close {
    color: #e32323;
    font-size: 1.5rem;
    text-align: center;
}
img.red-close {
    width: 20px;
    height: 20px;
}
.blue-icon {
    font-size: 1.5rem;
    text-align: center;
    color: #1d4ed8;
}
.single-type-form {
    .form-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .form-label {
        width: 400px;
        margin-bottom: 0;
    }
}
.dashboard-page {
    .area-charts {
        .chart-container {
            height: 450px;
        }
    }
    .area-charts-samiti {
        .chart-container {
            height: 450px;
        }
    }
    .area-charts-nagar {
        .chart-container {
            height: 450px;
        }
    }
    .area-line-charts {
        .chart-container {
            height: 600px;
        }
    }
    .total-info {
        list-style: none;
        padding-bottom: 20px !important;
        .text-dark > span {
            min-width: 120px;
            display: inline-block;
            > span {
                width: 100%;
                top: 100%;
                left: 0;
                font-size: 14px;
            }
        }
    }

    .disabled {
        pointer-events: none;
        -webkit-appearance: none; /* Safari/Chrome */
        -moz-appearance: none; /* Firefox */
        appearance: none;
    }
    .no-data-message {
        display: none;
        /* text-align: center; */
        font-size: 16px;
    }
    .card {
        border: none;
        border-radius: 12px;
        -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        -webkit-transition: -webkit-transform 0.2s;
        transition: -webkit-transform 0.2s;
        -o-transition: transform 0.2s;
        transition: transform 0.2s;
        transition: transform 0.2s, -webkit-transform 0.2s;
    }

    .form-label {
        font-weight: 500;
        color: #344767;
        font-size: 16px;
    }

    .form-select {
        border-radius: 8px;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ced4da;
        -webkit-transition: border-color 0.2s;
        -o-transition: border-color 0.2s;
        transition: border-color 0.2s;
    }

    .form-select:focus {
        border-color: #007bff;
        -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .budget-info {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .budget-info .font-weight-bold {
        font-size: 1.1rem;
        color: #344767;
    }

    .chart-container {
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    canvas {
        max-height: 100%;
        width: 100%;
    }

    @media (max-width: 768px) {
        .card {
            margin-bottom: 1.5rem;
        }

        .chart-container {
            height: 300px;
        }

        .sub-area-card {
            height: auto;
            padding: 1.5rem;
        }
    }
}
.budget-table-wrapper {
    .card-custom {
        -webkit-box-shadow: none;
        box-shadow: none;
        position: relative;
        .add-budget-model {
            position: absolute;
            padding-right: 0;
            margin-top: 17px;
            .modal-dialog {
                margin: 0;
                border-radius: 0;
                max-width: 100%;
            }
            .modal-content {
                -webkit-box-shadow: none;
                box-shadow: none;
                border-radius: 0;
            }
        }
    }
    .status-wrapper {
        border-radius: 11px;
        padding: 2px 11px;
        font-size: 13px;
    }
    .top-search-part {
        .custom-form-group {
            margin-bottom: 0;
            position: relative;
            font-size: 16px;
            &.show-reset span {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
            }

            span {
                position: absolute;
                right: 15px;
                top: 0;
                bottom: 0;
                padding: 0 9px;
                display: none;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }
        }
    }
    .filter-add-wrapper {
        .dropdown-menu {
            left: auto !important;
            -webkit-transform: translate3d(66px, 37px, 0px) !important;
            transform: translate3d(66px, 37px, 0px) !important;
            right: 0;
            width: 400px;
            border-radius: 10px;
        }
        h4 {
            padding: 10px 20px;
            font-weight: 400;
            font-size: 16px;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
                border-top: 1px solid #d9d9d9;
                padding: 10px 20px;
            }
        }

        .form-group {
            position: relative;
            label {
                font-size: 16px;
            }
            .form-control {
                border: 1px solid #d9d9d9;
                background: transparent;
                max-width: 300px;
                width: 100%;
                border-radius: 10px;
                color: #000000;
                padding: 11px 20px;
                font-size: 16px;
            }

            span {
                position: absolute;
                right: 0;
                top: 0;
                text-decoration: underline;
            }
        }
        .btn-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
        .btn-transparent {
            border-color: var(--color-primary);
            color: var(--color-primary);
            font-size: 15px;
            font-weight: 600;
            border-width: 1px;
        }
    }
    .approve-btn-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        .btn-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            gap: 20px;
        }
    }

    .new-add-btn {
        font-weight: 500;
    }
    .dropdown-toggle {
        &::after {
            display: none !important;
        }
    }

    .box-button {
        ul {
            list-style: none;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: end;
            margin: 0;
            padding: 0;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 10px;
        }
        a,
        button {
            height: 29px;
            width: 32px;
            text-align: center;
            line-height: 30px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            border-radius: 6px;
            padding: 4px;
            background: none;
            border: 2px solid #b5b5b5;
            -webkit-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            img {
                width: 100%;
                height: 100%;
                -o-object-fit: contain;
                object-fit: contain;
                -o-object-position: center;
                object-position: center;
                -webkit-filter: grayscale(1) brightness(0.3);
                filter: grayscale(1) brightness(0.3);
                -webkit-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }
            i {
                color: #7b7b7b;
            }
            &.close-icon {
                background: none;

                &:hover {
                    border-color: #ff2f2f;

                    img {
                        -webkit-filter: grayscale(0);
                        filter: grayscale(0);
                    }
                    i {
                        color: #ff2f2f;
                    }
                }
            }
            &.view-btn {
                background: none;
                &:hover {
                    border-color: #3ad925;

                    img {
                        -webkit-filter: grayscale(0);
                        filter: grayscale(0);
                    }
                    i {
                        color: #3ad925;
                    }
                }
            }
            &.edit-btn {
                &:hover {
                    border-color: #2458ff;

                    img {
                        -webkit-filter: grayscale(0);
                        filter: grayscale(0);
                    }
                }
            }
            &.unlock-btn {
                &:hover {
                    border-color: #d98f00;

                    img {
                        -webkit-filter: grayscale(0);
                        filter: grayscale(0);
                    }
                }
            }
            /* .fa-solid {
                font-size: 14px;
            } */
        }
        .icon-btn {
            background: #333333;
            height: 20px;
            width: 20px;
            line-height: 20px;
            padding: 0;
            .fa-solid {
                color: #ffffff;
                font-size: 14px;
                padding: 0;
            }
        }
        .locked-btn-wrapper {
            .view-btn {
                background: #dbdbdb;
            }
            .close-icon {
                background: #dbdbdb;

                &:hover {
                    border-color: #ff2f2f;

                    img {
                        -webkit-filter: grayscale(0);
                        filter: grayscale(0);
                    }
                }
            }
        }
    }
}
.view-page {
    .card.card-custom .card-header {
        padding: 20px 0 0;
        .card-title {
            font-size: 20px;
            text-decoration: underline;
        }
    }
    .card-body .row {
        gap: 8px 0;
    }
    .status-info {
        padding: 6px 17px;
        border-radius: 20px;
    }
    .form-view {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        .card-title {
            font-size: 20px;
            margin-bottom: 10px;
        }
        h4 {
            width: 230px;
            font-size: 16px;
            -webkit-box-flex: 0;
            -ms-flex: none;
            flex: none;
            & .card-title {
                font-size: 20px;
            }
        }
        p {
            font-size: 16px;
            margin-bottom: 0;
        }
    }
    .map-wrapper {
        width: 100%;
        height: 400px;
        position: relative;
        margin-bottom: 10px;
        #map {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 10px;
        }
    }
    .btn-light-blue {
        margin-left: 230px;
        padding: 8px 33px;
        margin-top: 20px;
    }
}

.suggestion-main {
    .header-menu-wrapper {
        width: auto;
    }
    .login-btn-wrapper {
        display: block;
        .btn-white {
            padding: 9px 26px;
            font-weight: 500;
            font-size: 15px;
        }
        .fa-solid {
            color: var(--color-blue);
            padding-right: 5px;
            font-size: 13px;
        }
    }
    .top-bar-info {
        display: none;
    }
    .suggestion-title {
        display: block !important;
        margin: 3px auto;
        color: white;
        /* font-size: 16px;
        font-weight: 500;
        text-align: center; */

        p {
            font-size: 15px;
            margin-bottom: 0;
            line-height: 1.3;
            color: #fff;
        }
    }
    #suggestion_table {
        font-size: 15px;
    }
    .lmc-logo {
        display: block !important;

        width: 60px;
        height: 60px;
        img {
            width: 100%;
            height: 100%;
            -o-object-fit: contain;
            object-fit: contain;
        }
    }
    .sub-menu {
        /* display: none; */
    }
    .login-btn-wrapper {
        display: none;
    }
    /* .main-content-warpper {
        padding-top: 85px;
    } */
    .box-button {
        ul {
            list-style: none;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: end;
            margin: 0;
            padding: 0;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 10px;
        }
        a,
        button {
            height: 29px;
            width: 32px;
            text-align: center;
            line-height: 30px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            border-radius: 6px;
            padding: 4px;
            border: 2px solid #b5b5b5;
            -webkit-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
            img {
                width: 100%;
                height: 100%;
                -o-object-fit: contain;
                object-fit: contain;
                -o-object-position: center;
                object-position: center;
                -webkit-filter: grayscale(1);
                filter: grayscale(1);
                -webkit-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
            }

            &.view-btn {
                background: none;
                &:hover {
                    border-color: #3ad925;

                    img {
                        -webkit-filter: grayscale(0);
                        filter: grayscale(0);
                    }
                }
            }
        }
        .icon-btn {
            background: #333333;
            height: 20px;
            width: 20px;
            line-height: 20px;
            padding: 0;
            .fa-solid {
                color: #ffffff;
                font-size: 14px;
                padding: 0;
            }
        }
    }
}
#ward-details-btn-wrapper {
    .btn {
        img {
            filter: brightness(10);
            width: 16px;
            height: 16px;
            margin-right: 6px;
        }
    }
}
.suggestion-form {
    .table-wrapper {
        padding-left: 3%;
    }
    .border-row {
        padding-right: 4%;
        border-right: 2px dashed #ddd;
    }
    .card-header {
        margin-bottom: 20px;
        .card-title {
            font-size: 20px;
            line-height: 1.4;
        }
    }
    .btn-wrapper {
        .btn-primary {
            width: 100%;
            font-size: 14px;
            font-weight: 600;
        }
    }
}
.suggestion-page {
    .card.card-custom > .card-header {
        padding: 20px 0 0;
        .card-title {
            font-size: 20px;
        }
    }
    .card-body {
        padding: 15px 0 2.25rem;
    }
    .status-wrapper {
        border-radius: 11px;
        padding: 2px 11px;
        font-size: 13px;
    }
    .box-group {
        .box-wrapper {
            -webkit-box-shadow: 3.21127px 4.8169px 32.1127px rgba(0, 0, 0, 0.05);
            box-shadow: 3.21127px 4.8169px 32.1127px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            padding: 30px 26px;
        }
        .box-header {
            position: relative;
            padding-right: 100px;
            .box-title {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 15px;
            }
            p {
                padding: 0 10px;
                color: rgba(0, 0, 0, 0.27);
                font-size: 16px;
                line-height: 1.4;
                margin-bottom: 0;
            }
            span {
                position: absolute;
                right: 0;
                top: 0;
                border-radius: 11px;
                padding: 5px 10px;
            }
        }
        .box-budget {
            padding: 20px 26px 16px;
            margin: 0 -26px 20px;
            border-width: 0 0 2px 0; /* Only bottom */
            border-style: none none dashed none;
            border-color: transparent;
            -o-border-image: -o-repeating-linear-gradient(
                    left,
                    rgba(0, 0, 0, 0.18) 0,
                    rgba(0, 0, 0, 0.18) 7px,
                    transparent 5px,
                    transparent 10px
                )
                0 0 1 0 / 0 0 1px 0 stretch;
            border-image: repeating-linear-gradient(
                    to right,
                    rgba(0, 0, 0, 0.18) 0,
                    rgba(0, 0, 0, 0.18) 7px,
                    transparent 5px,
                    transparent 10px
                )
                0 0 1 0 / 0 0 1px 0 stretch;
            h4 {
                font-weight: 400;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between;
                margin-bottom: 0;
                span {
                    font-size: 14px;
                }
            }
        }
        .box-body {
            h4 {
                font-weight: 400;
                margin-bottom: 16px;
            }
            ul {
                list-style: none;
                padding: 0;
                margin: 0;
                color: #9a9494;
                span {
                    font-size: 15px;
                    width: 50px;
                    display: inline-block;
                }
            }
        }
        .box-button {
            ul {
                list-style: none;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-pack: end;
                -ms-flex-pack: end;
                justify-content: end;
                margin: 0;
                padding: 0;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                gap: 10px;
            }
            a,
            button {
                height: 29px;
                width: 32px;
                text-align: center;
                line-height: 30px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                border-radius: 6px;
                padding: 4px;
                border: 2px solid #b5b5b5;
                -webkit-transition: all 0.3s ease;
                -o-transition: all 0.3s ease;
                transition: all 0.3s ease;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                background: none;
                img {
                    width: 100%;
                    height: 100%;
                    -o-object-fit: contain;
                    object-fit: contain;
                    -o-object-position: center;
                    object-position: center;
                    -webkit-filter: grayscale(1);
                    filter: grayscale(1);
                    -webkit-transition: all 0.3s ease;
                    -o-transition: all 0.3s ease;
                    transition: all 0.3s ease;
                }
                .icon-btn {
                    background: #333333;
                    height: 20px;
                    width: 20px;
                    line-height: 20px;
                    padding: 0;
                    .fa-solid {
                        color: #ffffff;
                        font-size: 14px;
                        padding: 0;
                    }
                }
                &.edit-btn {
                    &:hover {
                        border-color: #2458ff;
                        img {
                            -webkit-filter: grayscale(0);
                            filter: grayscale(0);
                        }
                    }
                }
                &.view-btn {
                    background: none;
                    &:hover {
                        border-color: #3ad925;

                        img {
                            -webkit-filter: grayscale(0);
                            filter: grayscale(0);
                        }
                    }
                }
                &.tick-btn {
                    &:hover {
                        border-color: #3ad925;
                        .fa-solid {
                            color: #3ad925;
                        }
                    }
                }
                &.close-btn {
                    &:hover {
                        border-color: #ff2f2f;
                        .fa-solid {
                            color: #ff2f2f;
                        }
                    }
                }
            }
        }
    }
}
.nagarpalika-page {
    .modal {
        .modal-dialog {
            max-width: 400px;
        }
        .modal-header {
            border-bottom: none;
            h5 {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 0;
            }
            .close .fa-xmark {
                font-size: 20px;
            }
        }
        .modal-body {
            padding: 10px 1.75rem 40px;
            p {
                font-size: 16px;
                margin-bottom: 0;
                line-height: 1.4;
            }
        }
        .modal-footer {
            .btn {
                padding: 8.5px 23px;
                font-size: 14px;
                font-weight: 500;
                &:first-child {
                    margin-right: 20px;
                }
            }
        }
    }
}
.paper-upload-page {
    .custom-body {
        h3 {
            font-size: 16px;
        }
        .text-red {
            font-size: 14px;
            padding-left: 40px;
        }
    }

    .img-wrapper {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 6px 8px;
    }
}
@media only screen and (max-width: 1199px) {
    .header .sub-menu {
        .menu-nav {
            padding: 0;
            .menu-link {
                padding: 15px 20px;
                font-size: 14px;
            }
        }
    }
    .budget-table-wrapper {
        .filter-add-wrapper {
            .btn-transparent {
                font-size: 14px;
                padding: 10px;
            }
        }
    }
}
@media only screen and (min-width: 992px) {
    #kt_header_mobile_toggle {
        display: none;
    }
}
@media only screen and (max-width: 991px) {
    .suggestion-main {
        .header-menu-wrapper {
            #kt_header_mobile_toggle {
                display: none;
            }
        }
    }
    .header.header-fixed {
        height: auto;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 97;
    }
    .header-mobile-fixed .header-mobile {
        display: none;
    }
    .header-menu-wrapper {
        position: initial;
        background: none;
        box-shadow: none;
        align-items: center;
    }
    .burger-icon span {
        background-color: #ffffff;
        &::before,
        &::after {
            background-color: #ffffff;
        }
    }
    .header-menu-mobile {
        background: none;
    }
    .header .sub-menu {
        position: fixed;
        z-index: 1001;
        right: 0;
        top: 0;
        bottom: 0;
        max-width: 320px;
        width: 100%;
        transition: 0.3s all;
        height: 100vh;
        overflow: auto;
        transform: translateX(100%);
        &.header-menu-wrapper-on {
            transform: none;
        }
        .menu-nav {
            flex-direction: column;
            align-items: baseline;
            .menu-item:not(:last-child) {
                border-bottom: 1px solid #dddddd;
            }
            .menu-item,
            .menu-link {
                width: 100%;
            }
        }
        .menu-item-submenu {
            &::after {
                position: absolute;
                top: 16px;
                left: auto;
                right: 20px;
                content: "\f078";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                color: #33578f;
            }

            &:hover {
                .menu-submenu {
                    display: none;
                }
            }
            &.active {
                > .menu-submenu {
                    display: block;
                }
                &::after {
                    content: "\f077";
                }
            }
        }
        .menu-submenu {
            position: static;
            width: 100%;
            box-shadow: none;
            background: #f3f3f3;
            border-radius: 0;
        }
        .menu-heading {
            background: rgb(85, 134, 209);
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            h2 {
                margin-bottom: 0;
                color: #ffffff;
                font-size: 20px;
            }
            .close-icon {
                span {
                    transform: rotateZ(45deg);
                    &::before {
                        top: 0px;
                        transform: rotateZ(90deg);
                    }
                    &::after {
                        display: none;
                    }
                }
            }
        }
    }
    .main-content-warpper {
        padding-top: 85px;
    }
    .suggestion-form {
        .btn-wrapper {
            text-align: left !important;
        }
        .table-wrapper {
            padding-top: 50px;
        }
        .login-btn-wrapper {
            display: block;
        }
    }
    .login-page {
        .login-part {
            max-width: 400px;
            width: 100%;
            margin: 0 auto;
        }
        .logo-wrapper {
            figure {
                height: 180px;
            }
        }
    }
    .mobile-table-responsive {
        padding-bottom: 70px;
        overflow: auto;
        .custom-table {
            white-space: nowrap;
        }
    }
    .budget-pagination {
        display: block;
        #pagination-controls {
            position: initial;
            transform: none;
            margin-bottom: 10px;
            text-align: center;
        }
        .budget-wrapper {
            text-align: right;
        }
    }
}
@media only screen and (max-width: 767px) {
    .suggestion-form {
        .login-btn-wrapper {
            div {
                position: static !important;
            }
        }
    }
    .budget-table-wrapper {
        .filter-add-wrapper {
            .btn-wrapper {
                margin-left: 5px !important;
            }
        }
    }
    .cstm-form {
        .map-wrapper {
            height: 400px;
        }
    }
    .login-page {
        .container-fluid {
            padding: 0 12px;
        }
        .login-part-wrapper {
            height: 100svh;
        }
        .login-part {
            h3 {
                display: none;
            }
        }
        .logo-wrapper {
            height: auto;
            flex-direction: row;
            justify-content: flex-start;
            gap: 10px;
            padding-bottom: 30px;
            figure {
                height: 80px;
                width: 80px;
            }
            h1 {
                font-size: 26px;
                color: #fff;
            }
            p {
                font-size: 16px;
            }
        }
    }
    .budget-table-wrapper {
        .top-search-part {
            /* gap: 10px; */
            row-gap: 10px;
        }
    }
}

@media only screen and (max-width: 575px) {
    .suggestion-main {
        .header {
            .header-menu-wrapper {
                width: auto !important;
            }
        }
        .suggestion-title {
            h3 {
                font-size: 14px;
            }
            p {
                font-size: 12px;
            }
        }
        .lmc-logo {
            width: 40px;
            height: 40px;
            margin: 0;
        }
    }
    .header {
        .header-menu-wrapper {
            width: 100% !important;
        }
        .header-menu {
            justify-content: flex-start;
            .top-bar-info {
                padding-left: 5px;
            }
            figure {
                height: 50px;
                width: 50px;
            }
        }
    }
    #kt_header_mobile_toggle {
        margin-left: 0 !important;
    }

    .custom-middle-pagination {
        width: 100%;
        text-align: center;
    }
    .budget-table-wrapper {
        .top-search-part {
            gap: 10px;
            .row {
                gap: 10px;
            }
        }
        .filter-add-wrapper {
            gap: 10px;
            flex-wrap: wrap;
        }
    }
    .view-page {
        .form-view {
            flex-direction: column;
            margin-bottom: 20px;
            h4,
            h3 {
                width: 100%;
                margin-bottom: 0 !important;
            }
        }
        .btn-light-blue {
            margin-left: 0;
        }
    }
}