body.color-dark {
    --primary-bg: #1F1F1E;
    --primary-color: #e5e5e5;
    --primary-border: #424242;

    --secondary-bg: #2C2C2C;
    --secondary-color: #BFBFBF;

    --tertiary-bg: #383838;

    --info-bg: #1E2632;
    --info-bg-hover: rgb(42, 50, 62);
    --info-color: #63acff;

    --link-color: #7cc4f8;

    --success-bg: #162C25;
    --success-bg-hover: #223831;
    --success-color: #00dc82;

    --warning-bg: #2F2A18;
    --warning-bg-hover: #3b3624;
    --warning-color: #fdc700;

    --danger-bg: #302022;
    --danger-bg-hover: #3c2f32;
    --danger-color: #ff6467;

    --isl-blue: #005e8b;

    .btn {
        font-weight: 500;

        &.btn-primary,
        &.btn-outline-primary,
        &#action-collapse-button {
            background-color: var(--info-bg);
            color: var(--info-color);

            &:not(:disabled):hover {
                background-color: var(--info-bg-hover);
            }

            &:has(>.bi-info-lg) {
                background-color: var(--info-color);

                &:hover {
                    background-color: var(--info-color);
                }
            }


            .bi-info-lg {
                color: var(--info-bg) !important;
            }
        }

        &.btn-success,
        &.btn-outline-success {
            background-color: var(--success-bg);
            color: var(--success-color);

            &:not(:disabled):hover {
                background-color: var(--success-bg-hover);
            }
        }

        &.btn-warning,
        &.btn-outline-warning {
            background-color: var(--warning-bg);
            color: var(--warning-color) !important;

            &:not(:disabled):hover {
                background-color: var(--warning-bg-hover);
            }
        }


        &.btn-danger,
        &.btn-outline-danger {
            background-color: var(--danger-bg);
            color: var(--danger-color);

            &:not(:disabled):hover {
                background-color: var(--danger-bg-hover);
            }
        }

        &.btn-secondary,
        &.btn-outline-secondary:not(.msg_icon_btn),
        &.btn-dark,
        &.btn-outline-dark {
            background-color: var(--secondary-bg);
            color: var(--primary-color);

            &:not(:disabled):hover {
                background-color: var(--tertiary-bg);
            }
        }

    }

    #DataTables_Table_0,
    #DataTables_Table_1,
    #DataTables_Table_2 {

        background-color: var(--primary-bg) !important;
        border: 1px solid var(--primary-border) !important;
        color: var(--primary-color) !important;

        a {
            color: var(--link-color) !important;
            text-decoration: none;

            &:hover {
                text-decoration: underline
            }
        }

        thead {
            --row-color: var(var(--secondary-bg));

            background-color: var(--secondary-bg);

            tr {
                background-color: var(--secondary-bg);

                th {
                    border-bottom: 2px solid var(--primary-border) !important;
                    border-top: none !important;
                    color: var(--primary-color);
                }
            }
        }

        tbody {
            tr {
                --row-bg: #000;

                background-color: var(--row-bg);

                &:hover {
                    background-color: color-mix(in srgb, var(--row-bg) 50%, #fff 12%) !important;
                }

                &.even {
                    --row-bg: var(--secondary-bg);
                }

                &.odd {
                    --row-bg: var(--primary-bg);
                }

                &.selected {
                    --row-bg: color-mix(in srgb, var(--info-color) 50%, #000 12%);
                }

                td {
                    border-color: var(--primary-border) !important;
                    padding: 8px !important
                }
            }
        }
    }
}


body.color-dark .cluster input[type="submit"],
body.color-dark input[type="button"],
body.color-dark .list-action-btn-group .btn-primary:not(#action-collapse-button),
body.color-dark .pagination .page-item a,
body.color-dark .custom-file-label::after {
    background-color: var(--secondary-bg) !important;
    border-color: var(--primary-border) !important;
    color: var(--primary-color) !important
}

body.color-dark .msg_icon_btn {
    color: var(--primary-color) !important;
}

body.color-dark .cluster input[type="submit"]:not(:disabled):hover,
body.color-dark input[type="button"]:not(:disabled):hover,
body.color-dark .list-action-btn-group .btn-primary:not(:disabled):hover,
body.color-dark .icon_buttons:not(:disabled):hover {
    background-color: var(--tertiary-bg) !important
}



body.color-dark .role_table tr:hover {
    background-color: var(--info-bg) !important;
}

body.color-dark .badge-danger:not(.navbar-badge) {
    background-color: var(--danger-bg) !important;
    color: var(--danger-color) !important
}

body.color-dark .badge-primary:not(.navbar-badge) body.color-dark #action-collapse-button {
    background-color: var(--info-bg) !important;
    color: var(--link-color) !important
}



body.color-dark .col-md-4.col-12 .tab-content .form-group {
    border-bottom: 1px dashed var(--primary-border);
}

body.color-dark .col-md-4.col-12 .tab-content .form-group:hover {
    transition: 0.1s;
    background-color: var(--tertiary-bg) !important;
}

body.color-dark table.std tr.selected td {
    background-color: unset;
}


body.color-dark #Meldungen .filtered a:last-of-type .value,
body.color-dark #Messages .filtered a:last-of-type .value,
body.color-dark #Messaggi .filtered a:last-of-type .value,
body.color-dark #Sensoren .filtered a:last-of-type .value,
body.color-dark #Sensors .filtered a:last-of-type .value,
body.color-dark #Sensori .filtered a:last-of-type .value,
body.color-dark #Capteurs .filtered a:last-of-type .value,
body.color-dark #Hosts .filtered a:last-of-type .value,
body.color-dark #IPs .filtered a:last-of-type .value,
body.color-dark #MACs .filtered a:last-of-type .value,
body.color-dark #Ports .filtered a:last-of-type .value {
    color: var(--success-color) !important;
    font-weight: bolder !important
}

body.color-dark #Meldungen h2,
body.color-dark #Sensoren h2,
body.color-dark #Hosts h2,
body.color-dark #IPs h2,
body.color-dark #MACs h2,
body.color-dark #Ports h2,
body.color-dark .tool table tbody td,
body.color-dark .action_icons .location_text,
body.color-dark .text-muted,
body.color-dark .nav-link,
body.color-dark .context_title,
body.color-dark .card-title,
body.color-dark .role_table td,
body.color-dark .role_table b,
body.color-dark .role_table_one td,
body.color-dark .guideBoxMenuHeader,
body.color-dark .popover .popover-body {
    color: var(--primary-color) !important
}

body.color-dark #action-collapse-menu .form-check {
    background-color: transparent !important;
    border: 1px solid var(--primary-border) !important
}

body.color-dark #action-collapse-menu .form-check:has(input[type="radio"]:checked) {
    border-color: var(--info-color) !important;
}

body.color-dark .sidebar {
    background-color: var(--primary-bg);
    border: 1px solid var(--primary-border) !important;
}

body.color-dark .navbar-nav>.user-menu>.dropdown-menu,
body.color-dark .modal-content,
body.color-dark .card,
body.color-dark .guideBox,
body.color-dark .popover {
    background-color: var(--secondary-bg) !important;
    border: 1px solid var(--primary-border) !important;
    color: var(--primary-color) !important
}

body.color-dark #error_list_msg,
body.color-dark #notification_list_msg,
body.color-dark #warning_list_msg {
    background-color: transparent !important;
    border: none !important;
}

body.color-dark .navbar-nav .dropdown-menu:has(>#error_list_msg) .row a,
body.color-dark .navbar-nav .dropdown-menu:has(>#notification_list_msg) .row a,
body.color-dark .navbar-nav .dropdown-menu:has(>#warning_list_msg) .row a {
    border: none !important;

}

body.color-dark .msg_button {
    max-width: fit-content;
    color: var(--primary-color) !important;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    margin-bottom: 3px;
}

body.color-dark .msg_button:hover {
    background-color: var(--tertiary-bg) !important;
    text-decoration: none !important;
}


body.color-dark * {
    scrollbar-color: var(--primary-color) var(--primary-bg);
    scrollbar-width: thin
}

body.color-dark .action_icons {
    background-color: var(--secondary-bg) !important;
    border: 1px solid var(--primary-border) !important
}

body.color-dark .badge-secondary:not(.navbar-badge) {
    background-color: var(--secondary-bg) !important;
    color: var(--secondary-color) !important
}

body.color-dark .badge-success:not(.navbar-badge) {
    background-color: var(--success-bg) !important;
    color: var(--success-color) !important
}

body.color-dark .badge-warning:not(.navbar-badge) {
    background-color: var(--warning-bg) !important;
    color: var(--warning-color) !important
}

body.color-dark .badge:not(.navbar-badge):not(td .badge) {
    padding: .5rem .4rem;
}

body.color-dark .border-danger {
    border-color: var(--danger-color) !important
}

body.color-dark .border-primary {
    border-color: var(--info-color) !important
}

body.color-dark .brand-link {
    border-color: transparent !important;
    color: var(--primary-color) !important;
    height: 57px !important
}

body.color-dark .text-dark {
    color: var(--secondary-color) !important;
}

body.color-dark .card.card-outline-tabs .card-header a {
    background-color: var(--tertiary-bg) !important;
    border-bottom: none;
    border-left: solid 1px var(--primary-border) !important;
    border-right: solid 1px var(--primary-border) !important;
    border-top: solid 1px var(--primary-border) !important;
    transition: .25s ease !important
}

body.color-dark .card.card-outline-tabs .card-header a.active {
    background: unset !important;
    background-color: #565656 !important
}

body.color-dark .card.card-outline-tabs .card-header a:not(.active):hover {
    background: color-mix(in srgb, var(--secondary-bg) 80%, #fff 20%) !important
}

body.color-dark .close {
    color: #fff
}

body.color-dark .cluster input[type="submit"],
body.color-dark input[type="button"] {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #212529;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: .375rem .75rem;
    text-align: center;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    user-select: none;
    vertical-align: middle
}

body.color-dark .content-wrapper,
body.color-dark #page,
body.color-dark,
body.color-dark .box,
body.color-dark .guideBoxHeader,
body.color-dark .guideBoxBody {
    background-color: var(--primary-bg) !important;
    color: var(--primary-color) !important
}

body.color-dark .custom-file-label {
    background-color: var(--secondary-bg) !important;
    border-color: var(--primary-border) !important;
    color: var(--primary-color) !important
}

body.color-dark .date .input-group-text:hover {
    background-color: var(--primary-color) !important;
    color: var(--secondary-bg) !important;
    cursor: pointer !important
}

body.color-dark .datepicker .datepicker-switch {
    border-radius: 1rem !important
}

body.color-dark .datepicker .day,
body.color-dark .datepicker .month,
body.color-dark .datepicker .year,
body.color-dark .datepicker .decade,
body.color-dark .datepicker .century,
body.color-dark .datepicker .prev,
body.color-dark .datepicker .next {
    border-radius: 100% !important;
    transition: .2s all ease
}

body.color-dark .datepicker .day,
body.color-dark .datepicker .prev,
body.color-dark .datepicker .next {
    color: var(--primary-color) !important;
    height: 2.25rem !important;
    padding: 0 !important;
    width: 2.25rem !important
}

body.color-dark .datepicker .day.active,
body.color-dark .datepicker .month.active,
body.color-dark .datepicker .year.active,
body.color-dark .datepicker .decade.active,
body.color-dark .datepicker .century.active {
    background: unset !important;
    background-color: var(--info-color) !important;
    color: var(--secondary-bg) !important;
    display: table-cell !important
}

body.color-dark .datepicker .day.old,
body.color-dark .datepicker .day.new,
body.color-dark .pagination .page-item.disabled a {
    color: var(--secondary-color) !important
}

body.color-dark .datepicker .day.today:not(.active),
body.color-dark .datepicker .month.focused:not(.active),
body.color-dark .datepicker .year.focused:not(.active),
body.color-dark .datepicker .decade.focused:not(.active),
body.color-dark .datepicker .century.focused:not(.active) {
    background-color: color-mix(in srgb, var(--secondary-bg) 60%, var(--info-color) 40%) !important;
    background-image: unset !important
}

body.color-dark .datepicker .day:hover,
body.color-dark .datepicker .prev:hover,
body.color-dark .datepicker .next:hover,
body.color-dark .datepicker .month:hover,
body.color-dark .datepicker .year:hover,
body.color-dark .datepicker .decade:hover,
body.color-dark .datepicker .century:hover,
body.color-dark .datepicker .datepicker-switch:hover {
    background-color: color-mix(in srgb, var(--secondary-bg) 80%, var(--info-color) 20%) !important
}

body.color-dark .datepicker .dow {
    color: var(--link-color) !important;
    font-size: .75rem !important
}

body.color-dark .datepicker .month,
body.color-dark .datepicker .year,
body.color-dark .datepicker .decade,
body.color-dark .datepicker .century {
    aspect-ratio: 1 / 1;
    border-radius: 100% !important;
    color: var(--primary-color);
    display: inline-block;
    margin: 4px;
    padding: 0;
    text-align: center;
    width: calc(25% - 8px)
}

body.color-dark .datepicker table {
    border-collapse: separate !important;
    border-spacing: 2px !important;
    max-width: 256px !important;
    table-layout: fixed !important
}

body.color-dark .datepicker table td,
body.color-dark .role_table td.access_mode_ro {
    border: unset !important
}

body.color-dark .datepicker-dropdown.dropdown-menu {
    background-color: var(--secondary-bg) !important;
    border: 1px solid var(--primary-border) !important;
    border-radius: .5rem !important;
    font-family: system-ui, sans-serif !important;
    padding: .5rem !important;
    width: fit-content !important
}

body.color-dark .dropdown-item.active {
    color: var(--primary-bg) !important
}

body.color-dark .dropdown-menu,
body.color-dark .user-body,
body.color-dark .user-footer {
    background-color: var(--secondary-bg) !important;
    border: unset !important;
    color: var(--primary-color) !important
}

body.color-dark .form-check input[type="radio"] {
    margin-left: 0 !important;
    margin-right: 1rem !important
}

body.color-dark .form-control,
body.color-dark .date .input-group-text {
    background-color: var(--tertiary-bg) !important;
    border: 1px solid var(--primary-border) !important;
    color: var(--primary-color) !important
}


body.color-dark .form-control:focus {
    box-shadow: unset;
    border: 1px solid var(--info-color) !important;
}

body.color-dark .form-group-one:not([class*="position-relative"]):focus-within {
    background: unset !important
}

body.color-dark .guideBoxFooter {
    background-color: transparent !important
}

body.color-dark .guideBoxMenu {
    border: 1px solid var(--primary-border) !important;
    box-shadow: unset !important
}

body.color-dark .icon_buttons {
    background-color: var(--secondary-bg) !important;
    border: none !important;
    color: var(--primary-color) !important;
    transition: .2s !important
}

body.color-dark .msg_li_ele {
    background-color: var(--tertiary-bg) !important;
    border: 1px solid var(--primary-border) !important;
    border-radius: 8px !important;
    color: var(--secondary-color) !important;
    margin-bottom: 1rem !important;
    margin-left: .6rem !important;
    margin-right: .6rem !important
}

body.color-dark .msg_li_ele:first-of-type {
    margin-top: .6rem !important
}

body.color-dark .msg_li_ele>h4,
body.color-dark .box.ag-table,
body.color-dark .bg-white {
    background-color: transparent !important;
    color: var(--primary-color) !important
}

body.color-dark .nav-link:hover {
    text-decoration: none !important
}

body.color-dark .nav-tabs,
body.color-dark .role_table tr,
body.color-dark .role_table tr,
body.color-dark .role_table_one tr {
    border-bottom: 1px solid var(--primary-border) !important
}

body.color-dark .pagination .page-item a,
body.color-dark .btn:not(.icon_buttons):not(.msg_icon_btn):not(.rounded-circle),
body.color-dark .date .input-group-text {
    border: 1px solid var(--primary-border) !important;
    transition: .2s ease !important
}

body.color-dark .pagination .page-item.disabled:hover {
    cursor: no-drop
}

body.color-dark .pagination .page-item:not(.disabled):hover a {
    background-color: var(--primary-color) !important;
    color: var(--secondary-bg) !important;
    cursor: pointer !important;
    text-decoration: none !important
}

body.color-dark .passStrengDiv {
    background-image: linear-gradient(45deg, #ffffff26 25%, transparent 25%, transparent 50%, #ffffff26 50%, #ffffff26 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    width: 0
}

body.color-dark .passStrengOutDiv {
    background-color: var(--secondary-bg) !important;
    border: solid 1px var(--primary-border) !important
}

body.color-dark .popover .arrow::before,
body.color-dark .popover .arrow::after {
    display: none
}

body.color-dark .role_table .first_submenu {
    color: var(--primary-color) !important;
    font-weight: 700;
    padding-left: 15px !important
}

body.color-dark .role_table .fourth_submenu {
    color: var(--primary-color) !important;
    font-size: .9rem;
    font-style: italic;
    padding-left: 60px !important
}

body.color-dark .role_table .second_submenu {
    font-weight: 500;
    padding-left: 30px !important
}

body.color-dark .role_table .third_submenu {
    color: var(--primary-color) !important;
    font-size: .95rem;
    padding-left: 45px !important
}

body.color-dark .role_table img {
    background: #ffffff0d;
    border-radius: 3px;
    filter: brightness(0.9) contrast(1.2);
    padding: 2px;
    vertical-align: middle
}

body.color-dark .role_table input[type="radio"],
body.color-dark .role_table_one input[type="radio"] {
    accent-color: var(--info-color);
    cursor: pointer;
    display: block;
    margin: 0 auto !important
}

body.color-dark .role_table td {
    border-bottom: unset !important
}

body.color-dark .role_table td a {
    color: var(--info-color) !important;
    text-decoration: underline
}

body.color-dark .role_table td:not([class*="_submenu"]),
body.color-dark .role_table_one td:not([class*="_submenu"]) {
    padding: 10px 5px !important;
    text-align: center !important;
    vertical-align: middle !important
}

body.color-dark .role_table tr td:nth-child(2) input[type="radio"]:checked,
body.color-dark .role_table_one tr td:nth-child(2) input[type="radio"]:checked {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important
}

body.color-dark .role_table tr td:nth-child(3) input[type="radio"]:checked,
body.color-dark .role_table_one tr td:nth-child(3) input[type="radio"]:checked {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important
}

body.color-dark .role_table tr td:nth-child(4) input[type="radio"]:checked,
body.color-dark .role_table_one tr td:nth-child(4) input[type="radio"]:checked {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important
}

body.color-dark .role_table_one tr:first-child td,
body.color-dark .role_table tr:first-child td {
    background-color: var(--tertiary-bg) !important;
    border-bottom: 2px solid var(--primary-border) !important;
    color: var(--info-color) !important;
    font-weight: 700;
    text-align: center !important;
    vertical-align: middle !important
}

body.color-dark .role_table_one,
body.color-dark .role_table {
    border: 1px solid var(--primary-border) !important;
    width: 100%
}

body.color-dark .role_td,
body.color-dark .role_table_one,
body.color-dark .role_table,
body.color-dark .submenu {
    background-color: var(--primary-bg) !important;
    border-collapse: collapse !important;
    color: var(--primary-color) !important;
    padding-right: unset !important
}

body.color-dark .sidebar a {
    color: var(--secondary-color) !important;
    transition: .25s !important
}

body.color-dark .sidebar a p span {
    display: inline-block;
    position: relative;
    width: max-content
}

body.color-dark .sidebar a p span::after {
    background-color: currentColor;
    bottom: -2px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    width: 100%
}

body.color-dark .sidebar a.active,
body.color-dark .sidebar a:hover,
body.color-dark .sidebar a.menu-open,
body.color-dark .sidebar li.menu-is-opening a:hover {
    background-color: var(--tertiary-bg) !important;
    border-radius: 5px !important;
    color: var(--primary-color) !important;
    text-decoration: unset !important
}

body.color-dark .sidebar a:hover>p>span::after,
body.color-dark .sidebar .active>a p span::after {
    transform: scaleX(1)
}

body.color-dark .sidebar li.menu-is-opening a,
body.color-dark .nav-tabs-custom,
body.color-dark .nav-tabs-custom>.tab-content,
body.color-dark [class*="sidebar-light-"] .nav-sidebar>.nav-item:hover>.nav-link {
    background-color: unset !important
}

body.color-dark .table td,
body.color-dark .table th {
    border-color: var(--primary-border) !important
}

body.color-dark .table-hover tbody tr:hover {
    background-color: #ffffff10 !important;
    color: var(--primary-color) !important
}

body.color-dark .text-danger,
body.color-dark #error_msg,
body.color-dark #error_msg span,
body.color-dark #Meldungen .filtered a:first-of-type .value,
body.color-dark #Messages .filtered a:first-of-type .value,
body.color-dark #Messaggi .filtered a:first-of-type .value,
body.color-dark #Sensoren .filtered a:first-of-type .value,
body.color-dark #Sensors .filtered a:first-of-type .value,
body.color-dark #Sensori .filtered a:first-of-type .value,
body.color-dark #Capteurs .filtered a:first-of-type .value,
body.color-dark #Hosts .filtered a:first-of-type .value,
body.color-dark #IPs .filtered a:first-of-type .value,
body.color-dark #MACs .filtered a:first-of-type .value,
body.color-dark #Ports .filtered a:first-of-type .value {
    color: var(--danger-color) !important;
    font-weight: bolder !important
}

body.color-dark .text-info,
body.color-dark #info_msg,
body.color-dark #info_msg span {
    color: var(--info-color) !important
}

body.color-dark .text-warning,
body.color-dark #Meldungen .filtered .value,
body.color-dark #Messages .filtered .value,
body.color-dark #Messaggi .filtered .value,
body.color-dark #Hosts .filtered .value {
    color: var(--warning-color) !important;
    font-weight: bolder !important
}

body.color-dark .ui-accordion .ui-accordion-header {
    background: var(--info-bg) !important;
    border: 1px solid var(--primary-border) !important
}

body.color-dark .ui-widget-content {
    background: var(--primary-bg) !important;
    border: 1px solid var(--primary-border) !important;
    color: var(--primary-color) !important
}

body.color-dark ::-webkit-scrollbar {
    height: 8px;
    width: 8px
}

body.color-dark ::-webkit-scrollbar-thumb {
    background-color: var(--secondary-bg);
    border: 1px solid var(--primary-bg);
    border-radius: 6px
}

body.color-dark ::-webkit-scrollbar-thumb:hover {
    background-color: var(--secondary-bg)
}

body.color-dark ::-webkit-scrollbar-track {
    background: var(--primary-bg)
}

body.color-dark a:not(.btn):not(.nav-link):not(.brand-link) {
    color: var(--link-color) !important;
    transition: .25s !important
}

body.color-dark a:not(.brand-link):not(.nav-link):not(.msg_button):hover {
    text-decoration: underline !important
}

body.color-dark div:has(> #pwd_check_title_password) {
    margin-bottom: .25rem;
    margin-top: .5rem
}

body.color-dark hr {
    background-color: var(--primary-border) !important;
    margin-bottom: .25rem !important;
    margin-top: .75rem !important
}

body.color-dark input:-webkit-autofill,
body.color-dark input:-webkit-autofill:hover,
body.color-dark input:-webkit-autofill:focus,
body.color-dark input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s
}

body.color-dark input:checked[type="checkbox"] {
    background-color: var(--info-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    border-color: var(--info-color)
}

body.color-dark input:checked[type="radio"] {
    background-color: var(--info-color);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    border-color: var(--info-color)
}

body.color-dark input[type="checkbox"],
body.color-dark input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--secondary-bg);
    border: 1px solid var(--primary-border);
    border-radius: .25rem;
    cursor: pointer;
    height: 1rem;
    position: relative;
    transition: border-color 0.15s, box-shadow 0.15s, background-color .15s;
    vertical-align: middle;
    width: 1rem;
    transform: translateY(-1px);
}

body.color-dark input[type="radio"] {
    border-radius: 50% !important
}

body.color-dark .bg-gradient-dark {
    border: solid 1px var(--primary-border) !important;
    background: var(--secondary-bg) !important;
    color: var(--primary-color) !important;
}


body.color-dark .grp-li-sortable {
    border: 1px solid var(--primary-border);
    background-color: var(--secondary-bg);
    color: var(--primary-color) !important;
}

body.color-dark .picklist_new {
    border-color: var(--primary-border) !important;
    background-color: var(--secondary-bg);
    color: var(--primary-color) !important;
}

body.color-dark .picklist_new option:hover {
    background-color: var(--tertiary-bg) !important;
}

body.color-dark pre {
    color: var(--primary-color);
}

body.color-dark .label-count-highlight {
    animation-name: unset;
}

body.color-dark .navbar-nav .dropdown-item.active,
body.color-dark .navbar-nav .dropdown-item:not(.active):hover {
    color: var(--primary-color) !important;
    background-color: var(--info-color) !important;
}

body.color-dark .navbar-nav .dropdown-menu {
    border: 1px solid var(--primary-border) !important;
    border-radius: 1rem;
}

body.color-dark .card.ui-sortable-placeholder {
    border-color: var(--secondary-color) !important;
    border-style: dashed !important;
}

body.color-dark .text-secondary {
    color: var(--secondary-color) !important;
}

body.color-dark #condition_table i {
    color: var(--primary-color);
}


body.color-dark .vlan-id {
    color: var(--info-bg) !important;
}

body.color-dark .switch_port_black .vlan-id {
    color: var(--primary-color) !important;
}


body.color-dark #sync-configuration {
    border: 1px solid var(--primary-border) !important;
}

body.color-dark #sync-configuration .bg-secondary {
    background-color: var(--tertiary-bg) !important;
}

body.color-dark #sync-configuration tr:not(.bg-secondary) {
    background-color: var(--primary-bg) !important;
}

body.color-dark #sync-configuration.table-bordered th,
body.color-dark #sync-configuration.table-bordered td {
    border-color: var(--primary-border) !important;
}