/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
[data-theme="semidark"] { --gap: 10px; }
[data-theme="semidark"] .datatable table td { padding: 0 .75rem; }
[data-theme="semidark"] .datatable table thead tr { color: black; font-weight: 500; }
[data-theme="semidark"] .datatable table thead td { height: 60px; background: var(--navyblue); color: white; }
[data-theme="semidark"] .datatable table thead td[data-field] > div.asc:after { background: white; }
[data-theme="semidark"] .datatable table thead td[data-field] > div.desc:after { background: white; }
/*[data-theme="semidark"] .datatable table tbody.sortable { box-shadow: 0 0 30px rgba(0,0,0,0.3); border-radius: var(--borderRadius); }*/
[data-theme="semidark"] .datatable table tbody.sortable tr { background: var(--ultralightblue); }
[data-theme="semidark"] .datatable table tbody tr { background: #fff; font-weight: 300; color: black; }
[data-theme="semidark"] .datatable table tbody tr:hover { background: var(--ultralightblue); }
[data-theme="semidark"] .datatable table tbody tr.selected { background: var(--lightblue) !important; }
[data-theme="semidark"] .datatable table tbody tr.dragging { background: var(--lightblue) !important; border-radius: var(--borderRadius); box-shadow: 0 6px 10px rgba(0,0,0,0.15); overflow: hidden; transition: initial; display: table; }
[data-theme="semidark"] .datatable table tbody tr.dragging td { border-color: transparent !important; }
[data-theme="semidark"] .datatable table tbody tr:not(:last-child) td { border-bottom: 1px solid #f4f6f9; }
[data-theme="semidark"] .datatable table tbody tr td { height: 54px; }
[data-theme="semidark"] .datatable.collapsed table thead td { height: 46px; }
[data-theme="semidark"] .datatable.collapsed table tbody td { height: 38px; border-radius: 0px !important; font-size: 12.5px; }
[data-theme="semidark"] .table-controls .search-wrapper:before { background: black; }
[data-theme="semidark"] .table-controls .buttons button { border: 1px solid var(--lightblue); background: var(--ultralightblue); color: black; }
[data-theme="semidark"] .table-controls .buttons button:before { background: black; }
[data-theme="semidark"] .table-controls .buttons button:hover { background: var(--lightblue); }
[data-theme="semidark"] .table-controls .buttons button.on, .table-controls .buttons button.on:hover { background: var(--navyblue); color: white; }
[data-theme="semidark"] .table-controls .buttons button.on:before { background: white; }
[data-theme="semidark"] .table-controls .group-operation button { border: 1px solid var(--lightblue); background: var(--ultralightblue); color: black; }
[data-theme="semidark"] .table-controls .group-operation button:hover { background: var(--lightblue); }
[data-theme="semidark"] .table-controls .group-operation:before { background: black; }
[data-theme="semidark"] .table-controls ul.pagination a { color: black; background-color: var(--ultralightblue); border-radius: var(--borderRadius); border-color: var(--lightblue); }
[data-theme="semidark"] .table-controls ul.pagination a.active { background: var(--navyblue); color: white; border-color: var(--navyblue); }
[data-theme="semidark"] .table-controls ul.pagination a:not(.active):hover { background-color: #d1d9e0; border-color: #d1d9e0; color: black; }
[data-theme="semidark"] .table-controls ul.pagination a:not(.active):focus { box-shadow: 0 0 0 0.2rem #d1d9e0; }
[data-theme="semidark"] .table-controls ul.pagination li.prev a:before, ul.pagination li.next a:before { background-color: black; }
[data-theme="semidark"] .dropdown-menu > div:hover { background: var(--lightblue); }
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.card[style] .datatable table thead { top: -32px; }
.datatable { position: relative; padding-bottom: 20px; }
.datatable h2 { font-size: 16px; margin-bottom: 20px; }
.datatable table { width: 100%; table-layout: fixed; font-size: 12.6px; border: 0; border-collapse: collapse; border-spacing: 0; transition: 0.3s; margin: var(--gap) auto; }
.datatable table a { color: inherit !important; }
.datatable table td { vertical-align: middle; }
.datatable table td:not(.cb):nth-child(1) { padding-left: 40px; }
.datatable table thead { position: sticky; top: 0px; z-index: 1; }
.datatable table thead td { position: relative; transition: 0.2s; font-size: 14px; }
.datatable table thead td[data-field] { cursor: pointer; }
.datatable table thead td[data-field] > div { user-select: none; display: inline-flex; align-items: center; position: relative; text-align: left; }
.datatable table thead td[data-field] > div:after { content: ""; position: relative; top: 0; padding-left: 10px; width: 20px; height: 20px; display: inline-flex; align-items: center; -webkit-mask-image: url('/libraries/Feather/chevron-down.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 20px; transition: 0.3s transform; background: transparent; }
.datatable table thead td[data-field] > div.desc:after { transform: rotate(-180deg); }
.datatable table thead td:nth-child(2) > * { min-width: 35%; }
.datatable table tbody { transition: 0.2s; }
.datatable table tbody tr { transition: 0.1s; cursor: pointer; position: relative; }
.datatable table tbody tr td { transition: 0.1s; }
.datatable table tbody td > div:not(.checkbox) { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.datatable table td:first-child { border-top-left-radius: var(--borderRadius); border-bottom-left-radius: var(--borderRadius); }
.datatable table td:last-child { border-top-right-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); }
.datatable table .cb { width: 50px; min-width: 50px; padding-right: 0px !important; }
.datatable table .cb .checkbox input { border-width: 1px; }

.datatable table tbody .cb input { opacity: 0.2; transition: 0.1s; }
.datatable table tbody .cb input:hover, .datatable table tbody .cb input:checked { opacity: 1; }
/*.datatable table tbody tr:hover .cb, .datatable table tbody tr.selected .cb { opacity: 1; }*/

.datatable table td.cb .checkbox { justify-content: center; xpadding-right: 10px; }
.datatable table td.cb input[type="checkbox"] { margin: 0; font-size: 19px; }
.datatable div.subtext { opacity: 0.6; font-size: 90%; line-height: 170%; }
.datatable .product-list-wrapper { display: flex; align-items: center; justify-content: flex-start; position: relative; }
.datatable .product-list-wrapper .product { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.datatable .product-list-wrapper .image { transition: 0.3s; min-width: 40px; max-width: 40px; height: 40px; border-radius: var(--borderRadius); overflow: hidden; margin: 0 15px 0 0; display: inline-flex; align-items: center; justify-content: center; cursor: zoom-in; }
.datatable .product-list-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.datatable.collapsed .product-list-wrapper .image { width: 0px; height: 0px; min-width: 0px; margin: 0; opacity: 0; border-radius: 100%; }
.datatable.collapsed table div.subtext { display: inline-block; margin-left: 6px; }
.datatable-preview-image { position: fixed; z-index: 9999; max-width: 30vw; box-shadow: 0 0 15px rgba(0,0,0,0.5); border-radius: 6px; transition: 0.25s; transform: scale(0,1); transform-origin: left center; opacity: 0; }
.datatable-preview-image.show { transform: scale(1,1); opacity: 1; }
.datatable-preview-image img { width: 100%; display: block; }
.datatable span.status { display: inline-block; border-radius: 12px; padding: 6px 12px; color: white; }
.datatable span.status.on { background: #1cad1c; }
.datatable span.status:not(.on) { background: #eb0000; }
.table-controls { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: var(--gap); }
.table-controls.bottom .flex { align-items: flex-start; }
.table-controls.bottom p.total { font-size: 14px; font-weight: 400; position: absolute; left: 50%; transform: translateX(-50%); }
.table-controls .flex { width: 100%; display: flex; align-items: flex-end; justify-content: flex-start; flex-wrap: wrap; gap: var(--gap); z-index: 2; position: relative; }
.table-controls .filters { display: none; }
.table-controls .filters .floating { flex: 0 0 calc(20% - 6px); min-width: 260px; }
.table-controls .search-wrapper input { padding-left: 46px !important; padding-right: 40px !important; }
.table-controls .search-wrapper label { padding-left: 52px; }
.table-controls .search-wrapper:before { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 100%; -webkit-mask-image: url('/libraries/Feather/search.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 20px; }
.table-controls .search-wrapper .close { position: absolute; top: 50%; transform: translateY(-50%); right: 0px; opacity: 1; display: none; }
.table-controls .limit-wrapper { min-width: initial; width: 140px; }
.table-controls .group-operation { width: 260px; position: relative; display: none; border-radius: var(--borderRadius); }
.table-controls .group-operation > div { border-radius: var(--borderRadius); }
.table-controls .group-operation button { height: 50px; padding-left: 52px; text-align: left; }
.table-controls .group-operation .select2-container .select2-selection--single { height: 50px !important; padding-left: 52px !important; display: flex; align-items: center; justify-content: flex-start; }
.table-controls .group-operation .select2-container--default .select2-selection--single .select2-selection__arrow b { margin-top: 2px; }
.table-controls .group-operation:before { content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 100%; -webkit-mask-image: url('/libraries/Feather/settings.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 20px; z-index: 2; }
.table-controls .buttons { display: flex; align-items: stretch; justify-content: flex-end; margin: 0 0 0 auto; flex-wrap: wrap; gap: 8px; }
.table-controls .buttons button { position: relative; padding: 0; width: 54px; height: 48px; border-radius: var(--borderRadius); transition: 0.1s; }
.table-controls .buttons button:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: 18px; transition: 0.1s; }
.table-controls .buttons button.long { width: initial; padding: 0 25px 0 44px; }
.table-controls .buttons button.long:before { -webkit-mask-position: 18px center; }
.table-controls .buttons button.refresh:before { -webkit-mask-image: url('/libraries/Feather/refresh-cw.svg'); }
.table-controls .buttons button.refresh:active:before { transform: rotate(180deg); }
.table-controls .buttons button.toggle-filters:before { -webkit-mask-image: url('/libraries/Feather/filter.svg'); }
.table-controls .buttons button.toggle-collapse:before { -webkit-mask-image: url('/libraries/Feather/minimize-2.svg'); }
.table-controls .buttons button.toggle-collapse.on:before { -webkit-mask-image: url('/libraries/Feather/maximize-2.svg'); }
.table-controls .buttons button.import:before { -webkit-mask-image: url('/libraries/Feather/upload.svg'); }
.table-controls .buttons button.export:before { -webkit-mask-image: url('/libraries/Feather/file-text.svg'); }
.table-controls .buttons button.settings:before { -webkit-mask-image: url('/libraries/Feather/settings.svg'); }
.table-controls .buttons button.create:before { -webkit-mask-image: url('/libraries/Feather/plus.svg'); }
.table-controls .buttons button.toggle-sortable:before { -webkit-mask-image: url('/libraries/Feather/shuffle.svg'); }
.table-controls .buttons button.sortable { display: none; transition: initial; }
.table-controls .buttons button.sortable.cancel:before { -webkit-mask-image: url('/libraries/Feather/x.svg'); }
.table-controls .buttons button.sortable.save:before { -webkit-mask-image: url('/libraries/Feather/save.svg'); }

.table-controls ul.pagination { margin: 0 0 0 auto; }

@media (max-width: 992px){
.datatable { padding: 10px 0; }
.datatable table { overflow-x: auto; display: block; min-width: 100%; }
.datatable table::-webkit-scrollbar { height: 2px !important; }
.datatable table thead { top: initial; z-index: initial; }
.datatable table thead td:not(.blank) { min-width: 30vw; white-space: nowrap; }
.table-controls ul.pagination { margin: 15px auto 0; max-width: initial; }
.table-controls .pagination { order: 3; }
.table-controls .search-wrapper input, .table-controls .limit-wrapper, .table-controls .filters .floating { width: 100%; flex: 100%; }
.table-controls .buttons { justify-content: flex-start; flex-wrap: initial; overflow-x: auto; width: 100%; }
.table-controls .buttons::-webkit-scrollbar { display: none; }
.table-controls .buttons button { flex-shrink: 0; }
.table-controls.bottom p.total { font-size: 14px; font-weight: 400; position: relative; left: initial; transform: initial; text-align: center; width: 100%; margin-bottom: 0; }
.table-controls .filters { width: 100%; }
}





.modal-table { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; background: rgba(0,0,0,0.5); }