$white: rgb(255, 255, 255);

body.light {
    .login-card {
        background-color: $white;
        -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);
    }

    lib-card {
        border: 1px solid var(--gray-border);
        .card-container {
            color: var(--dark-gray-opaque);
        }
    }

    table.data-table {
        background-color: var(--white) !important;
        outline: 1px solid var(--dark-gray);

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

        td,
        th {
            color: var(--dark-gray-opaque);
        }
    }

    .filter {
        color: var(--dark-gray-opaque);
    }

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

    .overlay {
        background-color: var(--dark-overlay);

        .modal-container {
            border: 1px solid var(--dark-gray);

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

                span {
                    color: var(--dark-gray-opaque);
                }
            }
        }
    }

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

    .application-container .main-icon {
        color: var(--dark-black);
    }
    .filter.data-table-filter{
        background-color: var(--white) !important;
    }
}