.theme-dark {
    --border-color: rgba(209, 213, 219, .1);
    --background-color: #343a40;
    --color: #c2c7d0;
    --body-color-bg: rgb(14, 23, 39);
    --primary-bg: rgb(52, 58, 64);
    --soft-background: rgba(255, 255, 255, .1);
    --card-background: rgba(255, 255, 255, .1);
    --box-shadow: rgba(0, 0, 0, 0.1);
    --box-shadow-soft: #322d2d;
    --bg-gray: #444;
}

.theme-light {
    --body-color-bg: #ecf0f5;
    --background-color: #fff;
    --color: #000;
    --border-color: #f1f1ff;
    --soft-background: #f8f8f8;
    --card-background: #fff;
    --box-shadow: #eee;
    --box-shadow-soft: #eee;
    --bg-gray: #f3f5fa;
}

html {
    background-color: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--color) !important;
}

body {
    background-color: var(--background-color) !important;
    border-color: var(--border-color) !important;
    color: var(--color) !important;
}

.content-wrapper {
    background: var(--body-color-bg) !important;
}

.card {
    background: var(--card-background) !important;
    box-shadow: 0 0.2rem 0.2rem var(--soft-background) !important;
    border-color: var(--border-color) !important;
}


.card .card-header :where(.card-title, .h5) {
    color: var(--color) !important;
}

.card .card-header,
.card-footer {
    border-color: var(--border-color);
}

.posMenu ul {
    background-color: var(--card-background) !important;
    box-shadow: 0 0.2rem 0.2rem var(--soft-background) !important;
}

.posMenu ul li a {
    background-color: var(--background-color) !important;
}

.customerInput .select2-selection.select2-selection--single {
    border-color: var(--border-color) !important;
}

.sidebar-mini.sidebar-collapse .content-wrapper {
    background-color: var(--body-color-bg) !important;
}



table.dataTable thead th,
table.dataTable thead td {
    border-color: var(--border-color) !important;
    background-color: var(--background-color) !important;
}

table.dataTable.no-footer {
    border-color: var(--border-color) !important;
}

.theme-dark .table-striped>tbody>tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05) !important;
}

.features label:hover {
    background-color: rgba(0, 0, 0, .05) !important;
}

.table-striped>tbody>tr:nth-of-type(even):hover {
    background-color: inherit;
}

.sidebar-menu li.active>a {
    background-color: var(--card-background) !important;
}

.skin-black .sidebar-menu>li>.treeview-menu {
    background-color: var(--soft-background) !important;
}


.slider-selection {
    background-color: var(--bg-gray) !important;
}

.theme-light .custom-checkbox input[type=checkbox] {
    background-color: #ddd !important;
}

.custom-checkbox input[type=checkbox] {
    background-color: var(--soft-background) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color) !important;
}

.skin-black .main-header .navbar .nav>li>a:hover,
.skin-black .main-header .navbar .nav>li>a:active,
.skin-black .main-header .navbar .nav>li>a:focus,
.skin-black .main-header .navbar .nav .open>a,
.skin-black .main-header .navbar .nav .open>a:hover,
.skin-black .main-header .navbar .nav .open>a:focus,
.skin-black .main-header .navbar .nav>.active>a {
    background-color: var(--soft-background) !important;
}

.theme-dark .customerInfo p,
.uid {
    color: var(--color) !important;
}

.theme-dark .bg-light-purple-soft {
    color: var(--color) !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--soft-background) !important;
}








.skin-black .main-header .navbar {
    background-color: var(--background-color);
}

.skin-black .main-header .navbar .sidebar-toggle {
    color: var(--color);
}

.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav>li>a,
.skin-black .main-header .navbar .navbar-right>li>a {
    border-left: 1px solid var(--border-color);
}

.skin-black .main-header .navbar .nav>li>a {
    color: var(--color);
}

.skin-black .main-header .navbar .navbar-nav>li>a {
    border-right: 1px solid var(--border-color);
}

.skin-black .main-header>.logo {
    background-color: var(--background-color);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.skin-black .main-header>.logo {
    color: var(--color);
}

.skin-black .main-header .navbar .sidebar-toggle:hover {
    color: var(--color);
    background: var(--soft-background);
}

.dropdown-menu {
    box-shadow: none;
    border-color: var(--border-color);
}

.dropdown-menu {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
}

.dropdown-menu>li>a {
    color: var(--color);
}


.dropdown-menu>li>a:hover {
    background-color: var(--soft-background);
    color: var(--color);
}

.navbar-nav>.user-menu>.dropdown-menu>li.user-header>p {
    color: var(--color);
}

.navbar-nav>.user-menu>.dropdown-menu>.user-footer {
    background-color: var(--background-color);
}

.btn-default {
    background-color: var(--soft-background);
    color: var(--color);
    border-color: var(--border-color);
}

.navbar-nav>.user-menu>.dropdown-menu>.user-footer .btn-default {
    color: var(--color);
}

.btn-default:hover,
.btn-default:active,
.btn-default.hover {
    background-color: var(--background-color);
}

.btn-default:hover {
    border-color: var(--border-color);
}

.box-footer {
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
}

.nav-stacked>li>a {
    color: var(--color);
}

.nav>li>a:hover,
.nav>li>a:active,
.nav>li>a:focus {
    color: var(--color);
    background: var(--soft-background);
}

.box .nav-stacked>li {
    border-bottom: 1px solid var(--border-color);
}

.box .border-right {
    border-right: 1px solid var(--border-color);
}


.widget-user-header * {
    color: #fff !important;
}

.profile_btn a {
    border-top: 1px solid var(--border-color);
    color: var(--color);
    background: var(--soft-background);
}

.profile_btn a:hover {
    color: var(--color);
    background: var(--background-color);
}

.box {
    background: var(--background-color);
    border-top: 3px solid var(--border-color);
}

.box-header.with-border {
    border-bottom: 1px solid var(--border-color);
}



.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border-color);
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    box-shadow: none !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid var(--border-color);
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:before {
    color: var(--color);
}


.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
    border-top: 1px solid var(--border-color);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--color);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: var(--color) !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--color) !important;
    border: 1px solid var(--border-color);
    background: var(--soft-background);
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--border-color);
}

.main-footer {
    background: var(--background-color);
    padding: 15px;
    color: var(--color);
    border-top: 1px solid var(--border-color);
}

.theme-dark .main-sidebar,
.theme-dark .left-side {
    background-color: var(--background-color);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px var(--soft-background) !important;
}

.filtercontentBody {
    background: var(--background-color);
}

input.form-control,
select.form-control {
    background: transparent;
    color: var(--color);
}

.btn-primary {
    color: var(--color);
    border-color: var(--border-color) !important;
}

.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {
    border: 1px solid var(--border-color);
}

.label-default {
    color: #444 !important;
}

a.link_profile {
    font-size: 15px;
    font-weight: bold;
    color: var(--color);
}

td a {
    color: var(--color);
}

ul.ci-pagination {
    background: var(--soft-background);
}

.btn.btn-light-secondary {
    background: var(--soft-background);
    color: var(--color);
}

.select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 1px solid var(--border-color);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--border-color) !important;
    background: transparent;
}

.form-control {
    border-color: var(--border-color) !important;
    color: var(--color) !important;
    background-color: transparent;
}

.theme-light .form-control {
    border-color: #ddd !important;
    color: var(--color) !important;
    background-color: transparent;
}

.panel-default>.panel-heading {
    color: var(--color);
    background-color: var(--background-color);
    border-color: var(--border-color);
}

.note-editor.note-airframe,
.note-editor.note-frame {
    border: 1px solid var(--border-color) !important;
}

.panel {
    background-color: transparent;
}

.input-group .input-group-addon {
    border-color: var(--border-color);
    background-color: var(--body-color-bg);
}

.card-footer {
    border-top: 1px solid var(--border-color);
}

.card .leftSidebar ul>li {
    border-bottom: 1px solid var(--border-color);
}

.leftSidebar ul li a:not(.active):hover {
    color: var(--color) !important;
    background: var(--soft-background);
}

.leftSidebar ul li a.active {
    color: var(--color);
    background: var(--soft-background);
}

.prefrence-item {
    border: 1px solid var(--border-color);
    background: var(--soft-background);
}

.text-muted {
    color: var(--color) !important;
}

.preText label {
    color: var(--body-bg-color);
}

hr {
    border-top: 1px solid var(--border-color) !important;
}

.codeContent {
    background: transparent;
}

.dynamic_mail_form code span {
    background: var(--soft-background);
}

.callout {
    border-left: 5px solid var(--border-color);
}

.btn-default.active,
.btn-default:active,
.open>.dropdown-toggle.btn-default {
    color: var(--color);
    background-color: var(--soft-background);
    border-color: var(--border-color);
}

.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover {
    color: var(--color);
    background-color: var(--background-color);
    border-color: var(--border-color);
}

.table-bordered {
    border: 1px solid var(--border-color);
}

.package_type_area {
    border: 1px solid var(--border-color);
    box-shadow: 0 0 5px var(--soft-background);
}

.package_header_count span {
    background: var(--soft-background);
}

.defaultPacakge {
    background: var(--soft-background) !important;
}

input[type=file] {
    display: block;
    color: var(--color);
}

input[type=file]:focus-visible {
    outline: none !important;
}

input[type=file]:focus {
    outline: none !important;
}

input[type=file]::-webkit-file-upload-button {
    background-color: var(--soft-background) !important;
    color: var(--color) !important;
    border: none !important;
}

.btn-default:hover {
    color: var(--color);
}

.features-wrap {
    background: var(--soft-background) none repeat scroll 0 0;
    border-radius: 10px;
    padding: 16px 15px 13px;
    display: flex;
    justify-content: flex-end;
    transition: all .4s ease-out;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    background-color: var(--soft-background);
    border: 1px solid var(--border-color);
}

.nav-tabs>li>a:hover {
    border-color: var(--border-color);
}

.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.table .table {
    background-color: transparent;
}

.shopReviews ul li {
    background: var(--background-color);
}

.ratingInfo {
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 0 5px var(--soft-background);
}

.payment_info .ci-info-box {
    background: var(--background-color);
    border: 1px solid var(--border-color);
}

#frame {
    background: var(--soft-background) !important;
}

#frame .content .messages ul li.replies p {
    background: var(--body-bg-color) !important;
}

#frame .content .message-input .wrap input {
    background: var(--body-bg-color) !important;
}

#frame .content .message-input .wrap input {
    color: var(--color) !important;
}

.table>thead>tr>th {
    border-bottom: 2px solid var(--border-color);
}

fieldset {
    border: 1px solid var(--border-color);
}

legend {
    width: auto !important;
    background: var(--soft-background);
    border-bottom: 1px solid var(--border-color);
    color: var(--color);
}

a.navLink {
    color: var(--color);
    border: 1px solid var(--border-color);
}

a.navLink:hover {
    background: var(--soft-background);
}

.share_able_link span {
    background: var(--background-color);
    border-bottom: 2px solid var(--border-color);
}

.box.box-solid>.box-header>.box-tools .btn {
    background: transparent;
    color: var(--color);
}

.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
    background: var(--soft-background);
    color: var(--color);
}

span.removeText {
    background: var(--background-color);
}

.singleOrderStatistics {
    box-shadow: 0 0 5px var(--soft-background);
    color: var(--color);
}

.singleOrderStatistics::before {
    background: var(--soft-background);
}

.active_package_btn a {
    border: 1px solid var(--border-color);
}

.bg-gray {
    background-color: var(--background-color) !important;
}

.info-box-icon {
    color: white !important;
}

.progress-description,
.info-box-text {
    color: white !important;
}

.info-box-number {
    color: white !important;
}

.info-box.bg-gray * {
    color: var(--color) !important;
}

.bg-gray {
    color: var(--color);
    background-color: var(--background-color) !important;
}

.input-group.date .input-group-addon {
    cursor: pointer;
    color: var(--color);
}

.daterangepicker {
    background-color: var(--body-bg-color);
    border: 1px solid var(--border-color);
}

.daterangepicker .ranges li:hover {
    background-color: var(--background-color);
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid var(--border-color);
}

.daterangepicker .calendar-table {
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    color: var(--color);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--soft-background);
    color: var(--color);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: var(--soft-background) !important;
    color: var(--color) !important;
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    color: #fff;
    border: solid var(--color);
    border-width: 0 2px 2px 0;
    border-radius: 0;
    display: inline-block;
    padding: 3px;
}

.btn-secondary {
    color: var(--color);
    background-color: var(--soft-background);
    border-color: var(--border-color);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--soft-background);
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    color: var(--color);
}

.singleProduct {
    box-shadow: 0 0 5px var(--soft-background);
}

.singleProduct:hover {
    background: var(--soft-background);
}

.modal-content {
    background-color: var(--background-color);
}

.modal-header {
    border-bottom-color: var(--border-color);
}

.modal-header {
    border-bottom: 1px solid var(--border-color);
}

.close {
    color: var(--color);
}

.modalIncreateArea span {
    background: var(--soft-background) !important;
}

.modalIncreateArea input {
    background: transparent;
    color: var(--color);
    border: 1px solid var(--border-color) !important;
}

.modal-footer {
    border-top-color: var(--border-color);
}

.modal-footer {
    border-top: 1px solid var(--border-color);
}

input.extraQty.prevent-default {
    background: var(--soft-background);
}



.categoryArea {
    background: var(--background-color) !important;
    box-shadow: 0 0 5px var(--soft-background) !important;
}

.catHeader {
    color: var(--color);
    border-bottom: 1px solid var(--border-color);
}

.posMenu ul {
    background: var(--background-color);
    box-shadow: 0 0.2rem 0.2rem var(--soft-background) !important;
}

.posMenu ul li a {
    background: var(--soft-background);
}

.skin-black .wrapper {
    background: var(--body-bg-color);
}

tr.colspan_area {
    background: var(--body-bg-color) !important;
}

.dataTables_wrapper .dataTables_length select:focus-visible {
    outline: none !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--border-color);
}

.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
    background: var(--soft-background) !important;
    cursor: pointer;
}

.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
    background: var(--soft-background) none repeat scroll 0 0 !important;
}

.earningTables .table {
    background: var(--background-color) !important;
}

.earningTables tr:hover {
    background: rgb(182 183 185 / 6%) !important;
}

.callout-default {
    background: var(--background-color);
    box-shadow: 0 0 5px var(--soft-background);
    color: var(--color);
}

small {
    color: var(--color);
}

.select2-container--default .select2-selection--multiple {
    background-color: transparent;
    border: 1px solid var(--border-color);
}

select.tax_status_area,
code,
.bg_white {
    background: var(--soft-background) !important;
}

.theme-dark .d_flex_alert h4,
.theme-dark .double_text h5,
.theme-dark .text-left p,
.theme-dark .alert .close {
    color: white !important;
}

.bootstrap-timepicker-widget table td a:hover,
span.input-group-addon select,
.home_layouts,
.dial-code {
    background: var(--soft-background) !important;
    border-color: var(--border-color) !important;
}

li.search-choice,
label.defaultImg {
    background-color: var(--soft-background) !important;
    border-color: var(--border-color) !important;
    background-image: none !important;
}


.border-card .ci-info-box {
    background-color: var(--background-color) !important;
    border-color: var(--border-color) !important;
}

.chosen-container-multi .chosen-choices {
    border: 1px solid var(--border-color) !important;
    background-color: var(--background-color) !important;
    background-image: none;
}

.popover-content,
.chosen-container .chosen-drop {
    border: 1px solid var(--border-color);
    background: var(--background-color);
}

.popover,
.fill-background::before,
.bg-fill::before,
.ci-info-box {
    background: var(--background-color) !important;
}

.btn-default.focus,
.btn-default:focus,
.select2-dropdown {
    color: var(--color) I !important;
    background-color: var(--background-color) !important;
    border-color: var(--border-color) !important;
}

label.pointer.layoutImg.menu_style img,
.image_upload_box,
.info-icon i {
    border-color: var(--border-color) !important;
}

label.pointer.layoutImg.menu_style img,
.home_layouts {
    box-shadow: 0 0 5px var(--soft-background);
}

.theme-light .itemVariants label.variant-btn.active {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}