@font-face {
    font-family: "Montserrat-Regular";
    src: url("../fonts/Montserrat-Regular.woff");
    font-weight: 400;
}

@font-face {
    font-family: "BebasNeue";
    src: url("../fonts/BebasNeue.woff");
}

a {
    color: #ebebeb;
}

body {
    background-color: #1d1d1d;
    color: #d7d7d7;
}

input[type=checkbox].custom-switch-btn {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dddddd'/%3e%3c/svg%3e") !important;
    background-color: #282828;
}

    input[type=checkbox].custom-switch-btn:hover {
        background-color: #3c3c3c;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23bbbbbb'/%3e%3c/svg%3e") !important;
    }

    input[type=checkbox].custom-switch-btn:checked {
        background-color: #378dde;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dddddd'/%3e%3c/svg%3e") !important;
        border-color: none;
    }

        input[type=checkbox].custom-switch-btn:checked:hover {
            background-color: #2b72dd;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cccccc'/%3e%3c/svg%3e") !important;
        }

    input[type=checkbox].custom-switch-btn:focus {
        box-shadow: none;
        border-color: none !important;
    }

.card {
    background-color: #333;
}

.card-header {
    color: #d7d7d7;
    background-color: #212529 ;
}

/* Adjust scrollbar width if necessary */
::-webkit-scrollbar {
    background-color: #505050;
}

::-webkit-scrollbar-thumb {
    background-color: #afafaf;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(24, 93, 183, 0.5333333333);
    }

.account-select,
.location-select {
    color: #d7d7d7;
}

    .account-select:hover, .account-select.aria-expanded,
    .location-select:hover,
    .location-select.aria-expanded {
        background-color: #3c3c3c;
    }

.ba-sidebar {
    box-shadow: 3px 0px 6px 0px rgba(0, 0, 0, 0.1607843137);
    background-image: linear-gradient(to left, #212529, #1a1d1f 90%);
    background-color: #ededed;
    color: #3e3e3e;
}

    .ba-sidebar .ba-sidebar-btn-list {
        color: #3e3e3e;
    }

        .ba-sidebar .ba-sidebar-btn-list .ba-sidebar-btn {
            color: #d7d7d7;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            transition: background 0.5s;
        }

            .ba-sidebar .ba-sidebar-btn-list .ba-sidebar-btn:hover {
                color: #1d1d1d;
                background-color: #afafaf;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            }

                .ba-sidebar .ba-sidebar-btn-list .ba-sidebar-btn:hover .ba-sidebar-btn-icon {
                    filter: none;
                }

            .ba-sidebar .ba-sidebar-btn-list .ba-sidebar-btn.ba-active {
                color: #d7d7d7;
                background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
                border-bottom: 1px solid transparent;
            }

                .ba-sidebar .ba-sidebar-btn-list .ba-sidebar-btn.ba-active .ba-sidebar-btn-icon {
                    filter: invert(98%) sepia(44%) saturate(0%) hue-rotate(36deg) brightness(112%) contrast(98%);
                }

    .ba-sidebar .ba-sidebar-btn-icon {
        filter: invert(98%) sepia(44%) saturate(0%) hue-rotate(36deg) brightness(70%) contrast(98%);
    }

    .ba-sidebar.ba-sidebar-collapse .ba-sidebar-btn-list {
        color: #3e3e3e;
    }

        .ba-sidebar.ba-sidebar-collapse .ba-sidebar-btn-list .ba-sidebar-btn {
            color: #ebebeb;
        }

            .ba-sidebar.ba-sidebar-collapse .ba-sidebar-btn-list .ba-sidebar-btn:hover {
                background-color: #282828;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            }

            .ba-sidebar.ba-sidebar-collapse .ba-sidebar-btn-list .ba-sidebar-btn.ba-active {
                color: #1d1d1d;
                background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
                border-radius: 8px;
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2509803922);
            }

                .ba-sidebar-btn-shape, .ba-sidebar .ba-sidebar-btn-list .ba-sidebar-btn.ba-active:before, .ba-sidebar.ba-sidebar-collapse .ba-sidebar-btn-list .ba-sidebar-btn.ba-active:before {
                    background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
                }

.ba-sidebar-btn-shape-collapse {
    background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
}

.signout-btn {
    border-radius: 10px;
}

    .signout-btn:hover {
        background-color: #afafaf;
        border-radius: 10px;
        color: #1d1d1d;
    }

        .signout-btn:hover i {
            filter: grayscale(53%) sepia(72%) brightness(78%) hue-rotate(305deg) saturate(2500%) contrast(135%);
        }

    .signout-btn.focus:focus {
        background-color: #afafaf;
    }

.ba-nav {
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.16);
}

.dark-mode {
    background-color: #212529 !important;
}

.nav-dropdown-list ul li a:hover {
    color: #d7d7d7;
    background-color: #282828;
}

.nav-dropdown-select {
    border: #3c3c3c solid 1px;
    box-shadow: 0px 2px 6px 0.3px rgba(0, 0, 0, 0.2) inset;
}

    .nav-dropdown-select:hover {
        background-color: #282828;
        color: #d7d7d7;
        border: 1px solid #777;
        box-shadow: 0px 0px 3px 0.3px rgba(0, 0, 0, 0.2) inset;
    }

.DRP-nav {
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.16);
    border: 1px solid gray;
}

.ba-notification {
    filter: invert(1);
}

    .ba-notification:hover {
        background-color: #c3c3c3;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.06) inset;
    }

.notification-btn {
    color: #3e3e3e;
}

.theme-btn:hover {
    background-color: #3c3c3c;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.06) inset;
}

.progress-fill.ba-active {
    background-color: #3c76db;
}

.ba-footer {
    box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.16);
}

    .ba-footer .dark-mode {
        background-color: #212529;
    }

.ba-footer-link {
    color: #602398;
}

    .ba-footer-link:hover {
        color: #7260c1;
    }

.custom-form-control {
    color: #212529;
    background-color: var(--bs-body-bg);
    border: 2px solid #dee2e6;
}

    .custom-form-control:focus {
        border-color: #afafaf;
    }

    .custom-form-control:hover {
        box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.6392156863) inset;
    }

.testbtn {
    background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
    color: #ebebeb;
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.16);
}

    .testbtn:hover {
        color: #1d1d1d;
        background-image: linear-gradient(to bottom, #378dde, #378dde);
        box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.16) inset;
    }

.permission-checkbox,
.complexe-checklist {
    color: #d7d7d7;
}

    .permission-checkbox:hover,
    .complexe-checklist:hover {
        background-color: #9b9b9b;
        color: #3c3c3c;
    }

    .permission-checkbox:checked,
    .complexe-checklist:checked {
        color: #602398;
    }

.form-check-input:checked {
    background-color: #378dde;
    border-color: #378dde;
}

.complexe-checklist.ba-active {
    background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
    color: #1d1d1d;
}

    .complexe-checklist.ba-active:hover {
        background-color: #378dde !important;
    }

.update-role-btn {
    background-image: linear-gradient(to bottom, #602398, #7260c1);
    color: #d7d7d7;
}

    .update-role-btn:hover {
        background-image: linear-gradient(to bottom, #7260c1, #602398);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.262745098);
    }

    .update-role-btn.ba-disabled:hover {
        background-image: linear-gradient(to bottom, #602398, #7260c1);
    }

.cancel-role-btn {
    background-image: linear-gradient(to bottom, #505050, #afafaf);
    color: #d7d7d7;
}

    .cancel-role-btn:hover {
        background-image: linear-gradient(to bottom, #afafaf, #505050);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.262745098);
    }

    .cancel-role-btn.ba-disabled:hover {
        background-image: linear-gradient(to bottom, #505050, #afafaf);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.262745098);
    }

.descriptive-card,
.permissions-card {
    transition: none;
    background: linear-gradient(to top right, transparent, #282828);
}

.ba-btn.ba-primary-btn {
    background-image: linear-gradient(to bottom, #7260c1, #602398);
    color: #ffffff;
}

    .ba-btn.ba-primary-btn.ba-disabled:hover {
        background-image: none;
        background-color: #9b9b9b;
    }

    .ba-btn.ba-primary-btn:hover {
        background-image: none;
        background-color: #7260c1;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.262745098);
    }

.ba-btn.bulk-delete-btn {
    background-image: linear-gradient(to bottom, #505050, #3c3c3c);
    color: #ebebeb;
}

    .ba-btn.bulk-delete-btn:hover {
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.262745098);
        background-image: linear-gradient(to bottom, rgb(124, 44, 44), rgb(190, 47, 47));
    }

.ba-btn.ba-secondary-btn {
    transition: 0.3s;
}

    .ba-btn.ba-secondary-btn:hover {
        background-color: #c3c3c3;
        color: #1d1d1d;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.262745098);
    }

.modal-content {
    color: #d7d7d7;
    background-color: #282828;
}

.validation-error {
    color: #ea868f;
}

.form-label {
    color: #555;
}

.custom-hr {
    border-bottom: 1px solid #dee2e6;
}

.popup {
    background-color: #efefef;
    color: #333;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.25);
}

.modal-select {
    border: 1px solid #838383;
}

.modal-label {
    color: #d7d7d7;
}

.modal-input,
.modal-select {
    border: 1px solid #1d1d1d;
}

    .modal-input.ba-disabled,
    .modal-select.ba-disabled {
        background-color: transparent;
        box-shadow: 0px 2px 6px 0px hsla(0, 0%, 0%, 0.25) inset;
        border: 1px solid #505050;
        color: #3c3c3c;
    }

.pdf-export-btn {
    color: #d7d7d7;
    border: 1px solid #1d1d1d;
    background-color: #3e3e3e;
}

    .pdf-export-btn:hover {
        background-color: #e65052;
        color: #ebebeb;
    }

.excel-export-btn {
    color: #d7d7d7;
    border: 1px solid #1d1d1d;
    background-color: #3e3e3e;
}

    .excel-export-btn:hover {
        background-color: #4aaa75;
        color: #ebebeb;
    }

.ba-table th {
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
    background-color: #1d1d1d;
}

    .ba-table th.arrow-up-down:after {
        color: #505050;
        text-shadow: 0px 0px 1px #505050;
    }

    .ba-table th.arrow-up-down.ba-active:after {
        color: #d7d7d7;
        text-shadow: 0px 0px 1px #1d1d1d;
    }

    .ba-table th.arrow-up-down.ba-active-down:after {
        color: #d7d7d7;
        text-shadow: 0px 0px 1px #1d1d1d;
    }

.ba-table tr:nth-of-type(2n) {
    background-color: #1d1d1d;
    color: #d7d7d7;
}

.ba-table tr:nth-of-type(2n + 1) {
    background-color: #282828;
    color: #d7d7d7;
}

.responsive-table-container .page-wrapper tr:nth-of-type(2n) {
    background-image: linear-gradient(to right, #eeeeee, #afafaf);
    color: #ebebeb;
}

.action-btn:hover,
.note-btn:hover {
    background-color: #3c3c3c;
    box-shadow: 0px 0px 2px 0px #000000;
}

.note-btn img {
    filter: hue-rotate(144deg) saturate(100%) brightness(90%) contrast(10%);
}

    .note-btn img.ba-active {
        filter: invert(43%) sepia(99%) saturate(2472%) hue-rotate(195deg) brightness(81%) contrast(97%);
    }

.daterangepicker .applyBtn {
    background-image: linear-gradient(to bottom, #602398, #7260c1);
    background-color: #7260c1;
    border: none;
    transition: 0.1s;
}

    .daterangepicker .applyBtn:hover {
        background-color: #7260c1 !important;
        background-image: none;
    }

.on-change-img {
    filter: invert(1) brightness(0.7);
}

.page-link {
    color: #7260c1;
}

    .page-link:hover {
        background-color: rgba(201, 102, 35, 0.4666666667);
        color: #1d1d1d;
        box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2666666667) inset;
    }

    .page-link:focus {
        background-color: #602398;
        color: #1d1d1d;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.262745098);
    }

tr.hovered {
    background: radial-gradient(circle at center, #5b5b5b 20%, #484848 40%, #5b5b5b 60%);
}

tr.tr-checked {
    background: radial-gradient(circle at center, rgba(26, 52, 90, 0.1450980392) 10%, rgba(32, 53, 86, 0.0823529412) 40%, rgba(32, 62, 107, 0.1450980392) 70%);
}

.form-check-input {
    border: 1px solid #afafaf;
}

.row-page-select {
    color: #d7d7d7;
    background-color: #282828;
}

    .row-page-select:hover {
        border: 1px solid #282828;
    }

    .row-page-select.test-page {
        border: 1px solid #282828;
    }

.pager__item.active .pager__link {
    background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
    color: #fff;
}

.pager__item .pager__link-next img,
.pager__item .pager__link-prev img {
    filter: invert(1);
}

.pager__item.ba-disabled .pager__link {
    color: #505050;
}

.pager__item.ba-disabled .pager__link-next img,
.pager__item.ba-disabled .pager__link-prev img {
    filter: invert(0) brightness(1.5);
}

.pager__link {
    color: #c3c3c3;
}

    .pager__link.ba-active {
        background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
        color: #fff;
    }

        .pager__link.ba-active:hover {
            color: #ffffff;
        }

        .pager__link.ba-active img {
            filter: invert(1);
        }

    .pager__link:hover {
        color: #2a66c2;
        text-shadow: 0px 0px 2px #2a66c2;
    }

.tank {
    background-color: #fff;
    border: 5px solid #aaa;
}

    .tank .wave {
        background-color: #4973ff;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.5) inset;
    }

        .tank .wave:before, .tank .wave:after {
            box-shadow: 0px 0px 10px 0.3px rgba(255, 255, 255, 0.4) inset;
        }

        .tank .wave:before {
            background: rgba(255, 255, 255, 0.8);
        }

        .tank .wave:after {
            background: rgba(255, 255, 255, 0.5);
            box-shadow: 0px 0px 10px 0.3px rgba(0, 0, 0, 0.4);
        }

    .tank .wave-text {
        color: #ffffff;
    }

.water-state {
    background-color: #282828;
}

.version-card {
    background-color: #282828;
    border: 1px solid #ccc;
}

    .version-card.version-super-access:hover {
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2666666667);
    }

.radio-container input:checked ~ .dotmark {
    background-color: rgb(187, 0, 0);
}

.radio-container .dotmark:after {
    background: white;
}

.dotmark {
    background-color: #eee;
}

.release-date {
    color: #888;
}

.current-version {
    color: white;
    background-image: linear-gradient(to bottom right, #3d882b, #29a025);
}

.descriptive-card {
    color: #d7d7d7;
    background: linear-gradient(to right, transparent, #282828, transparent);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1450980392);
}

@keyframes gradient-slide {
    0% {
        background-position: 100% 0;
    }

    50% {
        background-position: 0 0;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
    }

    100% {
        background-position: 100% 0;
    }
}

.tab-list .tab-button:hover {
    color: #282828;
    background-color: #d7d7d7;
}

.tab-list .tab-button-active {
    border-bottom: 2px solid #2a66c2;
    color: #378dde;
    background-color: rgba(24, 93, 183, 0.0823529412);
}

    .tab-list .tab-button-active:hover {
        color: #2a66c2;
        background-color: rgba(24, 93, 183, 0.0823529412);
    }

.gradient-border-black {
    border-image-source: linear-gradient(to left, #505050, #1d1d1d, #505050);
}

.gradient-border-black-transparent {
    border-image-source: linear-gradient(to bottom, #1d1d1d 1%, transparent);
}

.calibration-group .calibration-text-input,
.calibration-group .motor-text-input,
.motor-group .calibration-text-input,
.motor-group .motor-text-input {
    background-color: #505050;
    border: 1px solid #5b5b5b;
    color: #282828;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.267) inset;
}

    .calibration-group .calibration-text-input:focus,
    .calibration-group .motor-text-input:focus,
    .motor-group .calibration-text-input:focus,
    .motor-group .motor-text-input:focus {
        outline: solid 1px #888888;
    }

.custom-input-group-text {
    background-color: #656565 !important;
    border-color: #5b5b5b !important;
    color: #d7d7d7 !important;
}

.input-theme,
.ip-input-container {
    background-color: #3b3b3b !important;
    border-color: #5b5b5b !important;
    color: #d7d7d7;
    box-shadow: none;
}

    .input-theme:focus,
    .ip-input-container:focus {
        box-shadow: 0 0 0 0.1rem rgb(77, 77, 77) !important;
        border: 1px solid transparent;
        color: #d7d7d7;
        background-color: #3b3b3b;
    }

    .input-theme::-moz-placeholder, .ip-input-container::-moz-placeholder {
        color: #9b9b9b;
    }

    .input-theme::placeholder,
    .ip-input-container::placeholder {
        color: #9b9b9b;
    }

    .input-theme input,
    .ip-input-container input {
        background-color: transparent;
        color: #d7d7d7;
    }

input::-moz-placeholder {
    color: #646464 !important;
}

input::placeholder {
    color: #646464 !important;
}

.date-picker {
    border: 1px solid rgba(52, 69, 67, 0.2705882353);
}

.daterangepicker {
    background-color: #505050;
    color: #d7d7d7;
}

    .daterangepicker .calendar-table {
        background-color: #282828;
        border: none;
        border-radius: 10px;
    }

        .daterangepicker .calendar-table .weekend:hover {
            background-color: #d7d7d7;
        }

        .daterangepicker .calendar-table .active {
            background-image: linear-gradient(to bottom, #602398, #7260c1);
        }

        .daterangepicker .calendar-table .off {
            background-color: #343434;
            color: #d7d7d7;
        }

            .daterangepicker .calendar-table .off:hover {
                color: #282828;
                background-color: #d7d7d7;
            }

        .daterangepicker .calendar-table .table-condensed {
            color: #d7d7d7;
        }

            .daterangepicker .calendar-table .table-condensed .available:hover {
                color: #282828;
            }

            .daterangepicker .calendar-table .table-condensed .off {
                background-color: transparent;
                color: gray;
            }

                .daterangepicker .calendar-table .table-condensed .off:hover {
                    background-color: #d7d7d7;
                    color: #282828;
                }

            .daterangepicker .calendar-table .table-condensed .in-range {
                background-color: #b0a0e0;
                color: #282828;
            }

                .daterangepicker .calendar-table .table-condensed .in-range:hover {
                    background-color: rgba(167, 148, 225, 0.831372549);
                }

            .daterangepicker .calendar-table .table-condensed .end-date {
                color: #d7d7d7;
            }

.custom-switch-btn {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4039215686) inset;
}

.water-tank:hover {
    border: 4px solid #282828;
}

.water-tank.selected-water-tank {
    border: 4px solid #2a66c2;
}

    .water-tank.selected-water-tank::after {
        color: white;
    }

    .water-tank.selected-water-tank::before {
        border-left-color: #2a66c2;
        border-top-color: #2a66c2;
    }

.main-water-tank img,
.water-tank img {
    filter: brightness(0.8) saturate(0.8);
}

.pass-eye::before {
    color: #d7d7d7;
}

.pass-eye.hide:before {
    color: #d7d7d7;
}

.shining-button {
    background-image: linear-gradient(to bottom, #1d1d1d, #282828);
}

    .shining-button::before {
        background-image: linear-gradient(to bottom, #1d1d1d, #282828);
    }

    .shining-button.active::before {
        left: 152%;
    }

.is-modify {
    color: #1d1d1d;
    background-color: #c3c3c3;
}

.restor-previous-btn {
    color: #1d1d1d;
    background-image: linear-gradient(to bottom, #602398dd, #7260c1dd);
}

    .restor-previous-btn:hover {
        background-image: linear-gradient(to bottom, #7260c1dd, #602398dd);
    }

.is-applied {
    color: #206a0b;
    background-color: rgba(32, 106, 11, 0.1333333333);
}

.is-pending {
    color: rgb(57, 57, 57);
    background-color: rgba(151, 146, 0, 0.1333333333);
}

.device-state {
    color: #d7d7d7;
}

    .device-state.ba-active {
        box-shadow: 4px 0px 3px 0px rgba(0, 0, 0, 0.2666666667) inset;
    }

    .device-state.is-offline {
        background-color: #d43f3f;
    }

    .device-state.is-online {
        background-color: #3ca34d;
    }

    .device-state.is-sync {
        background-color: #444343;
    }

.exit-btn:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

.swal2-confirm {
    background-image: linear-gradient(to bottom, #602398, #7260c1) ;
    color: #1d1d1d ;
}

    .swal2-confirm:hover {
        background-image: linear-gradient(to bottom, #7260c1, #602398) ;
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.262745098);
    }

.network-divider {
    color: #c3c3c3;
    border-right: 1px solid rgba(0, 0, 0, 0.6);
}

.wifi-divider {
    color: #c3c3c3;
}

    .wifi-divider input {
        background-color: #ebebeb;
    }

.checkbox-select1,
.checkbox-select2,
.checkbox-select3 {
    border: 1px #dadada solid;
}

    .checkbox-select1 label:hover,
    .checkbox-select2 label:hover,
    .checkbox-select3 label:hover {
        background-color: #1e90ff;
    }

.basic-crud-item:hover {
    background-color: #555;
    color: #1d1d1d;
}

.basic-crud-item.ba-active {
    background: #666;
    color: #d7d7d7;
}

.basic-crud-item-img-container {
    border: 1px solid black;
    background-color: white;
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2666666667);
}

.basic-crud-item,
.basic-crud-item {
    color: #ebebeb;
    background-color: #444;
    border: 1px solid transparent;
}

    .basic-crud-item input,
    .basic-crud-item input {
        background-color: transparent !important;
        color: #282828;
    }

    .basic-crud-item.ba-active,
    .basic-crud-item.ba-active {
        background-image: linear-gradient(to bottom, #3e3e3e, #3c3c3c);
        color: #d7d7d7 !important;
    }

        .basic-crud-item.ba-active .role-text-input,
        .basic-crud-item.ba-active .basic-crud-text-input,
        .basic-crud-item.ba-active .role-text-input,
        .basic-crud-item.ba-active .basic-crud-text-input {
            color: #c3c3c3;
        }

    .basic-crud-item .role-text-input.edit-role-name,
    .basic-crud-item .basic-crud-text-input.edit-role-name,
    .basic-crud-item .role-text-input.edit-role-name,
    .basic-crud-item .basic-crud-text-input.edit-role-name {
        background-color: inherit;
        color: #000;
    }

        .basic-crud-item .role-text-input.edit-role-name:focus,
        .basic-crud-item .basic-crud-text-input.edit-role-name:focus,
        .basic-crud-item .role-text-input.edit-role-name:focus,
        .basic-crud-item .basic-crud-text-input.edit-role-name:focus {
            outline: #185db7;
            border-color: #888;
        }

    .basic-crud-item span i,
    .basic-crud-item span i {
        color: #d7d7d7;
    }

.add-basic-crud-li,
.add-basic-crud-li {
    background-color: #3c3c3c;
}

    .add-basic-crud-li .add-role-btn-container .add-role-btn,
    .add-basic-crud-li .add-role-btn-container .add-basic-crud-li-btn,
    .add-basic-crud-li .add-basic-crud-li-btn-container .add-role-btn,
    .add-basic-crud-li .add-basic-crud-li-btn-container .add-basic-crud-li-btn,
    .add-basic-crud-li .add-role-btn-container .add-role-btn,
    .add-basic-crud-li .add-role-btn-container .add-basic-crud-li-btn,
    .add-basic-crud-li .add-basic-crud-li-btn-container .add-role-btn,
    .add-basic-crud-li .add-basic-crud-li-btn-container .add-basic-crud-li-btn {
        color: #d7d7d7;
    }

        .add-basic-crud-li .add-role-btn-container .add-role-btn:hover,
        .add-basic-crud-li .add-role-btn-container .add-basic-crud-li-btn:hover,
        .add-basic-crud-li .add-basic-crud-li-btn-container .add-role-btn:hover,
        .add-basic-crud-li .add-basic-crud-li-btn-container .add-basic-crud-li-btn:hover,
        .add-basic-crud-li .add-role-btn-container .add-role-btn:hover,
        .add-basic-crud-li .add-role-btn-container .add-basic-crud-li-btn:hover,
        .add-basic-crud-li .add-basic-crud-li-btn-container .add-role-btn:hover,
        .add-basic-crud-li .add-basic-crud-li-btn-container .add-basic-crud-li-btn:hover {
            color: #282828;
        }

.role-page-card,
.basic-crud-page-card {
    color: #d7d7d7;
    background-color: #3c3c3c;
    border-bottom: 1px solid #282828;
}

.role-action-btn {
    color: #282828;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1333333333);
}

    .role-action-btn.edit-role-btn {
        background-image: linear-gradient(to bottom, #60239801, #7260c101);
        background-color: #505050;
    }

        .role-action-btn.edit-role-btn:hover {
            background-image: linear-gradient(to bottom, #602398, #7260c1);
        }

    .role-action-btn.delete-role-btn {
        background-image: linear-gradient(to bottom, rgba(156, 31, 33, 0.0039215686), rgba(183, 61, 63, 0.0039215686));
        background-color: #505050;
    }

        .role-action-btn.delete-role-btn:hover {
            background-image: linear-gradient(to bottom, #9c1f21, #b73d3f);
        }

.entity-info-card,
.user-role-card {
    background-color: #3b3b3b;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2666666667);
}

    .entity-info-card input,
    .user-role-card input {
        border: none;
    }

.entity-info-card-body,
.user-role-card-body {
    background-color: #212529 ;
    border-color: #5b5b5b;
    color: #d7d7d7;
    box-shadow: none;
}

    .entity-info-card-body #entityImgLable,
    .user-role-card-body #entityImgLable {
        border: 2px solid black;
        box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.2666666667);
    }

    .entity-info-card-body .entity-cancel-btn:hover,
    .entity-info-card-body .general-info-cancel-btn:hover,
    .user-role-card-body .entity-cancel-btn:hover,
    .user-role-card-body .general-info-cancel-btn:hover {
        background-image: linear-gradient(to bottom, #9c1f21, #b73d3f);
        color: #1d1d1d;
    }

    .entity-info-card-body.disable-color,
    .user-role-card-body.disable-color {
        background-color: transparent !important;
    }

    .entity-info-card-body:focus,
    .user-role-card-body:focus {
        box-shadow: 0 0 0 0.2rem rgb(77, 77, 77) !important;
        border: none;
        color: #d7d7d7;
        background-color: #3b3b3b;
    }

    .entity-info-card-body .entity-save-btn,
    .entity-info-card-body .general-info-save-btn,
    .user-role-card-body .entity-save-btn,
    .user-role-card-body .general-info-save-btn {
        color: #d7d7d7;
    }

        .entity-info-card-body .entity-save-btn:hover,
        .entity-info-card-body .general-info-save-btn:hover,
        .user-role-card-body .entity-save-btn:hover,
        .user-role-card-body .general-info-save-btn:hover {
            background-image: linear-gradient(to bottom, #602398, #7260c1);
            color: #d7d7d7;
        }

.entity-primary-group input,
.entity-primary-group span,
.entity-secondary-group input,
.entity-secondary-group span {
    color: #d7d7d7;
}

    .entity-primary-group input img,
    .entity-primary-group span img,
    .entity-secondary-group input img,
    .entity-secondary-group span img {
        filter: invert(1) brightness(75%);
    }

.entity-primary-input span i {
    color: #d7d7d7;
}

.ba-edit #entityImgLable {
    background-color: rgba(226, 226, 226, 0.8666666667);
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2666666667) inset;
}

    .ba-edit #entityImgLable:hover {
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4) inset;
    }

.ba-edit.clean-img #entityImgLable {
    background-color: transparent;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2666666667) inset;
}

    .ba-edit.clean-img #entityImgLable:hover {
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4) inset;
        background-color: rgba(226, 226, 226, 0.3764705882);
    }

.ba-edit input,
.ba-edit span {
    border: 1px solid #505050 !important;
}

.entity-action-btn,
.general-info-action-btn {
    color: #d7d7d7;
}

    .entity-action-btn:hover,
    .general-info-action-btn:hover {
        color: #d7d7d7;
        background-color: #282828;
        box-shadow: 0px 0px 2px 0px #000000;
    }

.profile-btn {
    border-radius: 10px;
}

    .profile-btn:hover {
        border-radius: 10px;
        background-color: #c3c3c3;
    }

.rows-num {
    color: #c3c3c3;
}

.dropdown-theme {
    background-color: #1d1d1d;
}

    .dropdown-theme .dropdown-item {
        color: #d7d7d7 !important;
    }

        .dropdown-theme .dropdown-item:hover {
            color: #282828 !important;
        }

        .dropdown-theme .dropdown-item:focus {
            color: #282828 !important;
        }

.cpyright-text {
    color: #c3c3c3;
}

.user-select-disabled {
    filter: invert(0);
}

.input-header {
    color: #d7d7d7;
}

    .input-header input {
        color: #d7d7d7;
        background-color: #3b3b3b !important;
        border-color: #5b5b5b !important;
    }

    .input-header select {
        background-color: #3b3b3b;
        color: #d7d7d7;
        background-image: url("/images/downarrow.svg");
    }

    .input-header .input-group-text {
        color: #1d1d1d;
        background-color: #d7d7d7;
    }

.icon_water-tank {
    filter: brightness(0.8) saturate(0.8);
}

.motor-input {
    color: #c3c3c3;
}

.icon_motor {
    filter: brightness(0.8);
}

    .icon_motor.ba-disabled::before {
        background-image: url("../images/Motor-off -dark.svg") !important;
    }

.horizontal-line,
.outside-circle {
    filter: brightness(0.7);
}

.loader-spinner img {
    filter: invert(1);
}

.update-section {
    color: #c3c3c3;
}

.ba-content {
    color: #d7d7d7;
}

.custom-card-header {
    display: flex;
    position: relative;
    background-color: #3c3c3c;
    color: #d7d7d7;
    border-top: 1px solid white;
}

.user-role-card-body {
    background-color: #505050;
    color: #c3c3c3;
}

.user-role-card-item {
    border: none;
}

.user-role-btn {
    background-image: linear-gradient(to bottom, #602398, #7260c1);
}

    .user-role-btn:not(.collapsed) {
        background-image: linear-gradient(to bottom, #602398, #7260c1);
        box-shadow: none;
    }

.card-body {
    color: #d7d7d7;
    /*background-color: #292b2c;*/
}

.tab-table {
    color: #d7d7d7;
}

    .tab-table.active {
        background-color: #d7d7d7 !important;
    }

.on-off-icon:before {
    color: rgb(134, 28, 28) !important;
}

.ba-active .on-off-icon:before {
    content: "ON";
    color: rgb(0, 87, 0) !important;
}

.outside-circle.second-outside-circle .inside-circle {
    box-shadow: 0 0 0 20px rgb(99, 46, 46) !important;
}

.setting-content input {
    background-color: #5b5b5b;
}

    .setting-content input:checked {
        background-color: #919191;
        box-shadow: 0 0 0 1px #9b9b9b;
        outline: none;
        border: #2b2b2b;
    }

    .setting-content input:focus {
        box-shadow: none;
    }

.popup-content {
    background-color: #1d1d1d;
}

.device-list {
    border: 2px solid #3b3b3b;
    border-radius: 10px;
}

#splineChart {
    filter: invert(1) brightness(50%);
}

.loader-wrapper {
    background: #212529;
}

.loader h3 {
    color: rgba(82, 56, 255, 0.19);
}

.side-section-setting {
    background: #2c3136;
}

    .side-section-setting .side-section-btn {
        color: #c3c3c3;
    }

.border-up {
    border-color: #afafaf;
}

.description-text {
    color: #9b9b9b;
}

.btn-secondary {
    background-color: #3c3c3c;
}

    .btn-secondary:hover {
        background-color: #d7d7d7;
        color: #282828;
    }

.offcanvas {
    background-color: #333;
    color: #fff;
}

.offcanvas-header {
    background-color: #222;
    border-bottom: 1px solid #444;
    color: #fff;
}

    .offcanvas-header .btn-close {
        color: #fff;
    }

.offcanvas-body {
    padding: 1rem;
}

.save-profile-setting {
    color: white;
    background-image: linear-gradient(to bottom, #602398, #7260c1);
}

    .save-profile-setting:hover {
        background-image: linear-gradient(to bottom, #7260c1, #602398);
        color: white;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2509803922);
    }

.text-input-error {
    border: 1px solid rgba(189, 39, 39, 0.7529411765) !important;
}

    .text-input-error:focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.2509803922) !important;
    }
/*# sourceMappingURL=styles-dark.css.map */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid #dbdbdb;
    -webkit-text-fill-color: #dbdbdb;
    -webkit-box-shadow: 0 0 0px 1000px #3b3b3b inset !important;
    box-shadow: 0 0 0 1000px #3b3b3b inset !important;
    background-image: linear-gradient(#fff,#fff);
    transition: background-color 10000s ease-in-out 0s;
}

/* For older browsers that may not support :autofill */
/*input:-webkit-autofill {
    box-shadow: 0 0 0 30px #3b3b3b inset !important;
    
}*/

.main_logo:hover {
    background: url("/images/Logo-dark-dashboard.svg");
}

input[type=tel],
[type=number],
[type=password],
[type=text], [type=search],
[type=email]{
    background-color: #3b3b3b ;
    border-color: #5b5b5b ;
    color: #d7d7d7;
    box-shadow: none;
}

    input[type=tel]:focus,
    [type=number]:focus,
    [type=password]:focus,
    [type=text]:focus,
    [type=search]:focus,
    [type=email]:focus {
        box-shadow: 0 0 0 0.1rem rgb(77, 77, 77) ;
        border: 1px solid transparent;
        color: #d7d7d7;
        background-color: #3b3b3b;
    }

    input[type=tel]::-moz-placeholder, [type=number]::-moz-placeholder, [type=password]::-moz-placeholder, [type=text]::-moz-placeholder {
        color: #9b9b9b;
    }

    input[type=tel]::placeholder,
    [type=number]::placeholder,
    [type=password]::placeholder,
    [type=text]::placeholder,
    [type=search]::placeholder,
    [type=email]::placeholder {
        color: #9b9b9b;
    }