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

    --secondary-bg: #2C2C2C;
    --secondary-color: #BFBFBF;
    --secondary-border: color-mix(in srgb, var(--primary-border) 90%, white 10%); /* used for the border of ui components */

    --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,
    #DataTables_Table_3,
    #DataTables_Table_4,
    #DataTables_Table_5 {
        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 {
            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;
                }
            }
        }
    }

    input {
        &[type="checkbox"],
        &[type="radio"] {
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--tertiary-bg);
            border: 1px solid var(--secondary-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);

            &:checked {
                background-color: var(--isl-blue);
                border-color: var(--isl-blue);
            }
        }

        &[type="radio"] {
            border-radius: 50% !important;

            &:checked {
                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");
            }
        }

        &[type="checkbox"]:checked {
            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");
        }

    }

    .datepicker {
        .datepicker-switch {
            &:hover {
                background-color: color-mix(in srgb, var(--secondary-bg) 80%, var(--info-color) 20%) !important;
            }
        }

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

        .day,
        .prev,
        .next {
            color: var(--primary-color) !important;
        }

        .day,
        .month,
        .year,
        .decade,
        .century {
            &.active {
                background-color: var(--info-color) !important;
                color: var(--secondary-bg) !important;
            }
        }

        .day {

            &.old,
            &.new {
                color: var(--secondary-color) !important;
            }

            &.today:not(.active) {
                background-color: color-mix(in srgb, var(--secondary-bg) 60%, var(--info-color) 40%) !important;
                background-image: unset !important;
            }
        }

        .month,
        .year,
        .decade,
        .century {
            color: var(--primary-color);

            &.focused:not(.active) {
                background-color: color-mix(in srgb, var(--secondary-bg) 60%, var(--info-color) 40%) !important;
                background-image: unset !important;
            }
        }

        .dow {
            color: var(--link-color) !important;
        }

        table td {
            border: unset !important;
        }
    }

    .pagination .page-item.disabled a {
        color: var(--secondary-color) !important;
    }

    .msg_button {
        padding: 4px 8px;
        border-style: dottet;
        border-color: var(--primary-border) !important;
        border-width: 1px !important;

        &:hover {
            background-color: var(--tertiary-bg) !important;
            text-decoration: none !important;
        }
    }

    .main-sidebar {
        background-color: var(--isl-blue);
    }

    .sidebar {
        li.nav-item {
            > a.nav-link,
            :is(li a, a.nav-link) {
                background-color: unset !important;
                color: var(--secondary-color) !important;
                transition: .25s !important;
            }
        }

        :is(li a, a.nav-link).active {
            background-color: var(--tertiary-bg) !important;
            border-radius: 5px !important;
            color: var(--primary-color) !important;
        }

        :is(li a, a.nav-link).menu-open {
            background-color: unset !important;
            color: var(--primary-color) !important;
        }

        li.nav-item:hover > a.nav-link,
        li.nav-item.default:hover > a.nav-link,
        :is(li a, a.nav-link):hover {
            background-color: color-mix(in srgb, var(--tertiary-bg) 80%, white 20%) !important;
            border-radius: 5px !important;
            color: var(--primary-color) !important;
            text-decoration: unset !important;
        }
    }

    #quickOverview {
        #Meldungen,
        #Messages,
        #Messaggi,
        #Sensoren,
        #Sensors,
        #Sensori,
        #Capteurs,
        #Hosts,
        #IPs,
        #MACs,
        #Ports {
            h2 {
                color: var(--primary-color) !important
            }

            .filtered {
                a:first-of-type .value {
                    color: var(--danger-color) !important;
                    font-weight: bolder !important;
                }

                .value {
                    color: var(--warning-color) !important;
                    font-weight: bolder !important
                }

                a:last-of-type .value {
                    color: var(--success-color) !important;
                    font-weight: bolder !important;
                }
            }
        }
    }

    .ARPText {
        color: var(--primary-color);
    }
}

body.color-dark .action-list-default .form-group .form-check {
    background-color: transparent;
    border: 1px solid var(--primary-border) !important;
    height: 50px;

    &.active {
        border-color: var(--info-color) !important;

        &:hover {
            background-color: transparent;
        }
    }
}

body.color-dark .table-bordered {

    th, td {
        border-color: color-mix(in srgb, var(--primary-border) 50%, var(--primary-color) 50%) !important;
        border-color: color-mix(in srgb, var(--primary-border) 50%, var(--primary-color) 50%) !important;
        color: var(--primary-color) !important;
    }
    tbody tr:first-of-type th {
        background-color: var(--tertiary-bg) !important;
    }
}

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 .guideBoxMenuHeader,
body.color-dark .popover .popover-body {
    color: var(--primary-color) !important
}

body.color-dark .text-danger,
body.color-dark #error_msg,
body.color-dark #error_msg span {
    color: var(--danger-color) !important;
    font-weight: bolder !important
}

body.color-dark .text-warning {
    color: var(--warning-color) !important;
    font-weight: bolder !important
}

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 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 .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 .topology-popover .badge-light:not(.navbar-badge) {
    color: var(--primary-bg) !important
}

body.color-dark .badge-danger:not(.navbar-badge):not(.topology-popover *) {
    border: solid 1px color-mix(in srgb, var(--danger-color) 70%, #000 30%) !important;
    background-color: var(--danger-bg) !important;
    color: var(--danger-color) !important;

    code {
        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 .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 * {
    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) {
    border: solid 1px color-mix(in srgb, var(--tertiary-bg) 80%, #fff 20%) !important;
    background-color: var(--tertiary-bg) !important;
    color: var(--secondary-color) !important
}

body.color-dark .badge-success:not(.navbar-badge) {
    border: solid 1px color-mix(in srgb, var(--success-color) 70%, #000 30%) !important;
    background-color: var(--success-bg) !important;
    color: var(--success-color) !important
}

body.color-dark .badge-warning:not(.navbar-badge) {
    border: solid 1px color-mix(in srgb, var(--warning-color) 70%, #000 30%) !important;
    background-color: var(--warning-bg) !important;
    color: var(--warning-color) !important
}

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-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
}

/* Karten-Kontextmenue (Drei-Punkte, Cluster-Statusseite): Menue hat dieselbe
   Farbe wie die Karte, braucht daher Rand + kraeftigeren Schatten; Hover/Active
   dunkel statt Bootstrap-Hellgrau */
body.color-dark .card-tools .dropdown-menu {
    border: 1px solid var(--primary-border) !important;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .5) !important
}

body.color-dark .card-tools .dropdown-item {
    color: var(--secondary-color) !important
}

body.color-dark .card-tools .dropdown-item:not(:disabled):hover,
body.color-dark .card-tools .dropdown-item:not(:disabled):focus {
    color: var(--primary-color) !important;
    background-color: var(--tertiary-bg) !important
}

body.color-dark .card-tools .dropdown-item:active {
    color: var(--primary-color) !important;
    background-color: rgba(255, 255, 255, .1) !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(--secondary-border) !important;
    color: var(--primary-color) !important
}

body.color-dark .form-control:disabled {
    background-color: #ffffff06 !important;
    border: 1px dashed var(--primary-border) !important;
    color: var(--secondary-color) !important;
    opacity: 0.65 !important;

    &:hover {
        cursor: not-allowed;
    }
}

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 {
    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 .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 .role_table_one td.table_title {
    background-color: var(--tertiary-bg);
}

body.color-dark .role_table_one td {
    border-color: color-mix(in srgb, var(--primary-border) 80%, white 20%);
}

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

body.color-dark .role_table tr {
    background-color: var(--secondary-bg);
}

body.color-dark .role_table td {
    color: var(--primary-color) !important;
    border-color: color-mix(in srgb, var(--primary-border) 80%, white 20%);
    background-color: var(--secondary-bg);
}

body.color-dark .text-info,
body.color-dark #info_msg,
body.color-dark #info_msg span {
    color: var(--info-color) !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):not(.page-link):not(.dropdown-item.active):not(.dropdown-item:hover) {
    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(--secondary-border) !important;
    margin-bottom: 1rem !important;
    margin-top: 1rem !important
}

body.color-dark .modal-header,
body.color-dark .modal-footer {
    border-color: var(--secondary-border) !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-bg) !important;
    background-color: var(--info-color) !important;
}

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

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;
}

body.color-dark .tag-badge {
    color: var(--tag-color);
    background-color: color-mix(in srgb, var(--tag-color) 30%, black 70%);
    border: 1px solid var(--secondary-border);
}

body.color-dark .tag-badge-preview {
    border: 1px dashed var(--secondary-border);
}


body.color-dark .tag-badge span.tg_delete{
  color: var(--secondary-color);
}

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