$blackBackground: rgb(86, 86, 86);
$blackOverlay: rgba(0, 0, 0, 0.4);
$lightGray: rgba(0, 0, 0, 0.4);

body.dark {
    .login-card {
        background-color: $blackBackground;
        -webkit-box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, 0.5);
        box-shadow: 0px 0px 9px 5px rgba(0, 0, 0, 0.5);

        .title {
            color: var(--white);
        }

        .highlight {
            color: var(--white);
        }

        div {
            color: var(--white);
        }
    }

    .back-icon {
        color: var(--white);
    }

    .login-container::before {
        background-color: $blackOverlay
    }

    select,
    textarea,
    input {
        border: 1px solid $lightGray;

    }

    select:focus-visible,
    input:focus-visible {
        outline: 1px solid var(--gray);
    }

    select:hover,
    input:hover {
        background-color: var(--white);
    }

    button {
        background-color: var(--blue-button);
    }

    button.disabled {
        background-color: var(--disabled-gray);
    }

    .header-container {
        background-color: var(--dark-black);

        fa-icon {
            color: $white;
        }
    }

    art-menu {
        background-color: var(--dark-black-less);
        color: $white;

        fa-icon {
            color: $white;
        }

        span {
            color: $white;
        }

        .toggle {
            background-color: var(--dark-black-less) !important;
            border: 1px solid var(--gray-border) !important;
        }
    }

    .list-container {
        background-color: var(--menu-gray);
    }

    lib-card {
        .card-container {
            border: 1px solid var(--gray-border);
            background-color: var(--dark-black-less);
            color: var(--white);
        }
    }

    table.data-table {
        background-color: var(--dark-black-less) !important;
        outline: none;

        tr {
            border-bottom: 1px solid var(--gray-border);
        }

        td,
        th {
            color: var(--white);
            font-size: 14px;
        }
    }

    .table-wrapper{
        border: 1px solid var(--gray-border);
    }

    label {
        color: var(--white);
    }

    .paginator-container .box-container {
        .box.current {
            background-color: var(--blue-button) !important;
        }
    }

    .overlay {
        background-color: rgb(255 255 255 / 79%);

        .modal-container {
            .header {
                background-color: var(--dark-black);
                color: var(--white);

                span {
                    color: var(--white);
                }
            }
            .body{
                background-color: var(--menu-gray) !important; 
                color: var(--white);
            }
            .footer{
                background-color: var(--menu-gray) !important;
            }
        }
    }

    .applications-container {
        .row {
            .empty-image,
            img {
                border: 1px solid var(--gray-border);
            }
        }
    }

    .container-title {
        color: var(--white);
    }

    .application-container {
        .main-icon {
            color: var(--dark-black);
        }

        .empty-image fa-icon {
            color: var(--dark-black-less);
        }

        .header-background {
            border-top: 1px solid var(--dark-gray-opaque) !important;
        }
    }

    lib-card .card-container {
        border: 0;
    }
    .filter.data-table-filter{
        background-color: var(--dark-black-less) !important;
    }
}