:root {
    --primary-bg-color: #ebeff2;
    --secondary-bg-color: #fff;
    --input-bg-color: #fff;
    --primary-txt-color: #222

}
.card-box, .select2-container .select2-selection--multiple, .select2-dropdown {
    background-color: var(--secondary-bg-color)
}

body, html {
    background-color: #ebeff2 !important;
    color: #797979
}

input {
    color-scheme: light
}

.breadcrumb > .active, .dropdown-menu-lg .media-body p, .text-muted, body, h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    color: #777
}

h1, h2, h3, h4, h5, h6 {
    color: #505458;
    margin: 10px 0
}

a:hover {
    color: #333
}

.card-box {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .06), 0 1px 0 0 rgba(0, 0, 0, .02)
}

.form-control, .form-control:focus {
    color: #222
}

tbody {
    color: #797979
}

th {
    color: #666
}

.logo {
    color: #000 !important
}

.modal .modal-dialog .modal-content {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    border-color: #ddd;
    border-radius: 2px;
    box-shadow: none;
    padding: 25px
}

.form-control, .select2-selection--multiple {
    border: 1px solid #e3e3e3
}

div:where(.swal2-container) div:where(.swal2-popup) {
    background: rgba(255, 255, 255, .9)
}

div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
    background: rgba(0, 0, 0, .3)
}

.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    color: #555;
    background-color: rgba(255, 255, 255, .5);
    border-color: #ddd
}

.select2-container--default .select2-selection--multiple {
    min-height: 36px !important;
    background-color: var(--secondary-bg-color)
}

.nav.nav-tabs + .tab-content {
    background: var(--secondary-bg-color);
}