.loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28,27,27,0.2); z-index: 999999; transition: 0.4s; opacity: 0; }
.loader.show { opacity: 1; }
.loader .box { position: absolute; top: calc(50% - 64px); left: calc(50% - 64px); width: 128px; height: 128px; border-radius: 50%; perspective: 800px; }
.loader .box .i { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; }
.loader .box .i:nth-child(1) { left: 0%; top: 0%; animation: rotate-one 1s linear infinite; border-bottom: 8px solid #EFEFFA; border-color: var(--purple); }
.loader .box .i:nth-child(2) { right: 0%; top: 0%; animation: rotate-two 1s linear infinite; border-right: 8px solid #EFEFFA; border-color: var(--purple2); }
.loader .box .i:nth-child(3) { right: 0%; bottom: 0%; animation: rotate-three 1s linear infinite; border-top: 8px solid #EFEFFA; border-color: var(--purple3); }

.percentage-box { position: fixed; background: rgba(0,0,0,0.3); top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 9999999999; }
.percentage-box .circular-chart { display: block; margin: 10px auto; max-width: 80%; max-height: 300px; filter: drop-shadow(0 0 20px rgba(182,175,255,0.5)); }
.percentage-box .circle-bg { fill: none; stroke: #534d9f; stroke-width: 0.8; }
.percentage-box .circle { fill: #2a2743; stroke-width: 2.8; stroke-linecap: round; animation: progress 1s ease-out forwards; stroke: var(--purple); }
.percentage-box .percentage { fill: #FFF; font-family: sans-serif; font-size: 0.4em; text-anchor: middle; }

.site-container { display: flex; align-items: stretch; }
.site-container.blur { filter: brightness(70%); }

nav { min-width: 260px; max-width: 260px; transition: all 0.25s ease-in-out; background: linear-gradient(#201d3c,#06060c); color: white; box-shadow: 10px 0px 15px rgba(0,0,0,0.3); }
nav.collapsed { margin-left: -260px; }
nav .nav-bar { position: sticky; top: 0; left: 0; padding: 0px 0px 0; height: 100vh; }
nav .nav-wrapper { height: 100%; overflow: hidden auto; max-height: 100%; position: relative; } /* hidden scroll */
nav .nav-wrapper::-webkit-scrollbar { width: 0; height: 0; }
/*
nav a.logo { text-align: center; font-weight: 600; font-size: 22px; position: relative; line-height: 70px; letter-spacing: 1px; display: block; color: white; }
nav a.logo:hover { text-decoration: none; }
nav a.logo:before { font-family: "Fontawesome"; content: "\f192"; font-weight: normal; color: var(--purple3); position: absolute; margin-left: -30px; top: 50%; transform: translateY(-50%); }
*/
nav a.logo img { margin: 15px auto 4px; display: block; height: 40px; }
nav a.logo { text-align: center; color: white !important; font-weight: 500; font-size: 11px; display: block; letter-spacing: 1px; opacity: 0.7; }

nav ul.sidebar { list-style: none; padding: 0; }
nav ul.sidebar .title { padding: 1.5rem 1.5rem .375rem; font-size: .75rem; color: #ced4da; }
nav ul.sidebar a { display: flex; align-items: center; padding: .9rem 1.525rem; font-size: 0.95em; font-weight: 400; transition: color 75ms ease-in-out; position: relative; text-decoration: none; cursor: pointer; color: rgba(233,236,239,.5); }
nav ul.sidebar li.active a { color: #568fed; }
nav ul.sidebar a:hover { color: rgba(233,236,239,.95); }
nav ul.sidebar a[data-toggle="collapse"]:after { content: " "; border: solid; border-width: 0 .1rem .1rem 0; display: inline-block; padding: 2px; transform: rotate(45deg); position: absolute; top: 1rem; right: 1.7rem; transition: all .2s ease-out; }
nav ul.sidebar a[aria-expanded=true]:after, nav ul.sidebar a[data-toggle=collapse]:not(.collapsed):after { transform: rotate(-135deg); top: 1.2rem; }
nav ul.sidebar-dropdown { display: none; padding: 0; margin: 0; list-style-type: none; background: #201d3c; }
nav ul.sidebar-dropdown.show { display: block; }
nav ul.sidebar-dropdown a { padding: .7rem 1.5rem .7rem 3.7rem; font-weight: 400; color: #adb5bd; }
nav ul.sidebar-dropdown li a:hover { background: #393562; }
nav ul.sidebar a[data-icon]:before { -webkit-mask-size: cover; display: inline-block; background: rgba(233,236,239,.5); width: 18px; height: 18px; content: " "; margin-right: .95rem; transition: 75ms ease-in-out; }
nav ul.sidebar a[data-icon]:hover:before { background: rgba(233,236,239,.95); }
nav ul.sidebar a[data-icon="sliders"]:before { -webkit-mask-image: url("/libraries/Feather/sliders.svg"); }
nav ul.sidebar a[data-icon="edit"]:before { -webkit-mask-image: url("/libraries/Feather/edit.svg"); }
nav ul.sidebar a[data-icon="users"]:before { -webkit-mask-image: url("/libraries/Feather/users.svg"); }
nav ul.sidebar a[data-icon="shopping-cart"]:before { -webkit-mask-image: url("/libraries/Feather/shopping-cart.svg"); }
nav ul.sidebar a[data-icon="shopping-bag"]:before { -webkit-mask-image: url("/libraries/Feather/shopping-bag.svg"); }
nav ul.sidebar a[data-icon="settings"]:before { -webkit-mask-image: url("/libraries/Feather/settings.svg"); }
nav ul.sidebar a[data-icon="inbox"]:before { -webkit-mask-image: url("/libraries/Feather/inbox.svg"); }
nav ul.sidebar a[data-icon="logout"]:before { -webkit-mask-image: url("/libraries/Feather/log-out.svg"); }

main { width: 100%; min-height: 100vh; transition: all 0.25s ease-in-out; }
main > .head-bar { background: #2a2650; box-shadow: 5px 5px 5px rgba(0,0,0,0.5); position: sticky; top: 0; padding: .6rem 0.4rem; display: flex; justify-content: flex-start; align-items: center; width: 100%; z-index: 99; }
main > .head-bar .right-box { margin: 0 20px 0 auto; display: flex; align-items: center; }
main > .head-bar .right-box button:not(:first-child) { margin-left: 10px; }
main > .head-bar .dropdown-wrapper button:before { font-family: "Fontawesome"; content: "\f2c0"; margin-right: 12px; }
main > .head-bar .hamburger { transform: scale(0.7); }
main > .head-bar .hamburger-inner:before, main .hamburger-inner:after, main .hamburger-inner, main .hamburger:hover .hamburger-inner, main .hamburger:hover .hamburger-inner:before, main .hamburger:hover .hamburger-inner:after { background: var(--purple) !important; }
main > .contents { padding: 20px; min-height: 100vh; position: relative; }

.col:not(:first-child) { padding-left: 8px; }

.card { width: 100%; padding: 30px; background: radial-gradient(at top right, #1F1B41 0%, #1c1b1b 70%) no-repeat; border-radius: 20px; border: 2px solid #8176FF00; transition: all .4s ease; box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 15%); position: relative; }
.card:hover { border-color: #534d9f; }
.card h2 { color: var(--purple); font-size: 22px; }
.card h3 { color: var(--purple4); font-size: 19px; font-weight: bold; }

.row:not(:last-child) .card { margin-bottom: 24px; }
.card:not(:last-child) { margin-bottom: 24px; }
.card .maximize { opacity: 0; transition: 0.25s; position: absolute; top: 18px; right: 18px; padding: 10px; cursor: pointer; background-color: var(--purple2); -webkit-mask-image: url("/libraries/Feather/maximize.svg"); -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; transition: 0.2s ease-in-out; }
.card .maximize.minimize { -webkit-mask-image: url("/libraries/Feather/minimize.svg"); -webkit-mask-size: cover; }
.card.full-size { position: fixed; top: 0; left: 0; overflow-y: scroll; transition: 1s; z-index: 100; border-radius: 0; margin: 0; border-color: transparent; }
.card:hover .maximize { opacity: 0.5; }
.card .maximize:hover { opacity: 1; transform: scale(1.1); }
.card .maximize:active { transform: scale(0.7); }

.card .col { padding: 0; }
.card .row { margin: 0 -4px; }                                          
.card .row:not(:nth-child(1 of .row)), .card .price-wrapper .row:not(:first-child) { margin: 8px -4px 0; }
.card .col { margin-left: 4px; margin-right: 4px; }
.card .col12 { max-width: calc(100% - 8px); }
.card .col10 { max-width: calc(83.333333% - 8px); }
.card .col9 { max-width: calc(75% - 8px); }
.card .col8 { max-width: calc(66.666667% - 8px); }
.card .col7 { max-width: calc(58.333334% - 8px); }
.card .col6 { max-width: calc(50% - 8px); }
.card .col5 { max-width: calc(41.666667% - 8px); }
.card .col4 { max-width: calc(33.33333333333333% - 8px); }
.card .col3 { max-width: calc(25% - 8px); }
.card .col2 { max-width: calc(16.666667% - 8px); }
.card .col1 { max-width: calc(8.333333333333333% - 8px); }

.hide { display: none; }

.btn, a.btn { padding: 15px 22px; font-size: 12px; font-weight: 400; letter-spacing: 0.8px; font-family: 'Work Sans', sans-serif; text-transform: uppercase; display: flex; align-items: center; line-height: 1; color: #fff !important; text-align: center; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; border: 0px; border-radius: 50px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.btn:before, a.btn:before { content: " "; display: inline-block; padding-right: 6px; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain; background: #fff; width: 18px; height: 18px; }
.btn.small:before { width: 18px; height: 16px; -webkit-mask-size: 22px 16px; -webkit-mask-position: center center; }
.btn.disabled { pointer-events: none; opacity: 0.5; }
.btn.small { padding: 12px 15px; border-radius: 3px; font-size: 11px; }
.btn.blue { background-color: #0d6efd; border-color: #0d6efd; }
.btn.blue:hover, .btn.blue:active { background-color: #0b5ed7; border-color: #0a58ca; }
.btn.blue:focus { background-color: #0b5ed7; border-color: #0a58ca; box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); }
.btn.purple { background: linear-gradient(60deg, #6B5EFF 0%, #8176ff 82%); }
.btn.purple:hover, .btn.purple:active { background: linear-gradient(180deg, #5849FF 0%, #5849FF 100%); }
.btn.purple:focus { background-color: var(--purple3); box-shadow: 0 0 0 0.25rem rgba(88, 73, 255, 0.5); }
.btn.gray { background-color: #6c757d; border-color: #6c757d; }
.btn.gray:hover, .btn.gray:active { background-color: #5a6268; border-color: #545b62; }
.btn.gray:focus { background-color: #6c757d; border-color: #565e64; box-shadow: 0 0 0 0.25rem rgb(130 138 145 / 50%); }
.btn.green { background-color: #198754; border-color: #198754; }
.btn.green:hover, .btn.green:active { background-color: #157347; border-color: #146c43; }
.btn.green:focus { background-color: #157347; border-color: #146c43; box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5); }
.btn.red { background-color: #dc3545; border-color: #dc3545; }
.btn.red:hover, .btn.red:active { background-color: #bb2d3b; border-color: #b02a37; }
.btn.red:focus { background-color: #bb2d3b; border-color: #b02a37; box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5); }
.btn.save:before { -webkit-mask-image: url("/libraries/Feather/save.svg"); }
.btn.add:before { -webkit-mask-image: url("/libraries/Feather/plus.svg"); }
.btn.delete:before { -webkit-mask-image: url("/libraries/Feather/trash-2.svg"); width: 15px; height: 14px; margin-top: -2px; }
.btn.send:before { -webkit-mask-image: url("/libraries/Feather/send.svg"); }
.btn.close_revenue:before { -webkit-mask-image: url("/libraries/Feather/power.svg"); }
.btn.filters:before { -webkit-mask-image: url("/libraries/Feather/filter.svg"); }
.btn.import:before { -webkit-mask-image: url("/libraries/Feather/upload.svg"); }
.btn.export:before { -webkit-mask-image: url("/libraries/Feather/download.svg"); }
.btn.settings:before { -webkit-mask-image: url("/libraries/Feather/settings.svg"); }
.btn.upload:before { -webkit-mask-image: url("/libraries/Feather/upload.svg"); }
.btn.create:before { -webkit-mask-image: url("/libraries/Feather/plus.svg"); }
.btn.sortable:before { -webkit-mask-image: url("/libraries/Feather/sliders.svg"); }

.btn.create { padding-left: 6px; }
.btn.filters.on { background: var(--purple2); }
.btn.filters, .btn.toggle-collapse { background: #3b3570; }
.btn.toggle-collapse:before { -webkit-mask-image: url("/libraries/Feather/menu.svg"); -webkit-mask-size: initial !important; }
.table-wrapper.collapsed .btn.toggle-collapse:before { -webkit-mask-image: url("/libraries/Feather/align-justify.svg"); }
.table-wrapper.collapsed .btn.toggle-collapse { background: var(--purple2); }
.btn.callback:before, .btn.cancel:before, .btn.remove_purchase_item:before { content: initial; }
a.btn:hover { text-decoration: none; }
a.btn.back:before { -webkit-mask-image: url("/libraries/Feather/arrow-left.svg"); }
 


/* DATATABLE --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.table-wrapper table { width: 100%; table-layout: fixed; font-size: 13px; border: 0; border-collapse: collapse; border-spacing: 0; transition: 0.25s; }
.table-wrapper table thead tr { background: #413b85; width: 100%; font-weight: 500; }
.table-wrapper table tbody tr { background: #2a2743; width: 100%; transition: 0.07s; font-weight: 300; color: #dedede; cursor: pointer; position: relative; }
.table-wrapper table thead td { padding: 22px .75rem; position: relative; transition: 0.07s padding; }
.table-wrapper table thead td:not(.blank) { cursor: pointer; }
.table-wrapper table thead td:not(.blank) > div { user-select: none; display: inline-block; position: relative; padding-left: 8px; text-align: left; }
.table-wrapper table thead td:not(.blank) > div:after { font-family: "Fontawesome"; content: "\f0dc"; color: var(--purple); font-weight: normal; position: absolute; left: -6px; height: 100%; top: 0; display: flex; align-items: center; }
.table-wrapper table thead td:not(.blank) > div.asc:after { content: "\f0de"; color: var(--purple4); }
.table-wrapper table thead td:not(.blank) > div.desc:after { content: "\f0dd"; color: var(--purple4); }
.table-wrapper table thead td:nth-child(2) > * { min-width: 35%; }
.table-wrapper table tbody td { padding: 1rem .75rem; transition: 0.07s padding; }
.table-wrapper table tbody tr:not(:last-child) td { border-bottom: 1px solid #2f2c57; }
.table-wrapper table td { vertical-align: middle; }
.table-wrapper table tbody tr:hover { background: #363358; }
.table-wrapper table tbody tr.selected { background: var(--purple2) !important; color: white; }
.table-wrapper table tbody tr.custom { top: -8px; }
.table-wrapper table tbody tr.custom:hover { background: #2a2743; }
.table-wrapper table tbody tr.custom td { border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; }
.table-wrapper table tbody td > div { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.table-wrapper table td:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.table-wrapper table td:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.table-wrapper table .cb { width: 50px; padding-right: 0; }
.table-wrapper table .cb.low { width: 36px; padding-right: 0; position: relative; text-align: right; }
.table-wrapper table tbody .cb.low:after { content: " "; -webkit-mask-image: url('/libraries/Feather/arrow-right.svg'); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 14px 14px; background: var(--purple); width: 14px; height: 14px; display: block; opacity: 0.6; margin: auto; }
.table-wrapper table td.cb .checkbox { justify-content: center; }
.table-wrapper table td.over { opacity: 0.1; }
.table-wrapper table td.cb input[type="checkbox"] { margin: 0; font-size: 21px; }
.table-wrapper table td.control { width: 80px; min-width: 80px; text-align: center; }
.table-wrapper table .item-control { cursor: pointer; font-size: 22px; padding: 0 10px; }
.table-wrapper table .item-control:before { font-family: "Fontawesome"; content: "\f142"; font-weight: normal; color: var(--purple2); transition: 0.4s; }
.table-wrapper table tbody tr.selected .item-control:before { color: #eee; }
.table-wrapper table img { width: 100%; }
.table-wrapper table .image { transition: 0.1s; min-width: 50px; max-width: 50px; height: 50px; border-radius: 5px; background: #474473; background: rgba(71,68,115,0.4); margin: 0 15px 0 0; display: inline-flex; align-items: center; justify-content: center; xdisplay: none; cursor: zoom-in; }
.table-wrapper table a { color: inherit !important; }
.table-wrapper div.small { opacity: 0.6; font-size: 90%; line-height: 170%; }
.table-wrapper div.gtins { opacity: 0.6; font-size: 90%; line-height: 170%; }
.table-wrapper input.table_input { /*box-shadow: 0 0 4px rgba(112,100,255,0.5); */ background: #363357; }
.table-wrapper div.unit { position: relative; width: 90px; }
.table-wrapper div.unit input { text-align: right; padding-right: 35px; padding-left: 5px; }
.table-wrapper div.unit span, .table-wrapper div.currency span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.7; }
.table-wrapper div.currency { position: relative; width: 130px; }
.table-wrapper div.currency input { text-align: right; padding-right: 44px; padding-left: 5px; }
.table-wrapper div.tax_rate { width: 100px; position: relative; }
.table-wrapper div.warehouse { width: 200px; }
.table-wrapper div.warehouse .select2 { font-size: 12px; }

.table-wrapper.collapsed .image { width: 0px; height: 0px; min-width: 0px; margin: 0; }
.table-wrapper.collapsed table .small { display: inline-block; margin-left: 6px; }
.table-wrapper.collapsed table tbody td { padding: 6px 1px; border-radius: 0px !important; font-size: 12.5px; }
.table-wrapper.collapsed table thead td { padding: 18px 1px 18px 10px; }

.table-foot-wrapper { display: flex; width: 100%; }
.table-foot-wrapper > div:nth-child(1) { flex-grow: 1; text-align: right; opacity: 0.7; }
.table-foot-wrapper > div:nth-child(2) { min-width: 130px; text-align: right; padding: 0 20px; }

.table-wrapper .product-list-wrapper { display: flex; align-items: center; justify-content: flex-start; position: relative; }
.table-wrapper .product-list-wrapper .product { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.table-filters { margin: 6px 0; display: none; }
.table-filters.show { display: block; }
.table-filters .wrapper { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; }
.table-filters .wrapper > div { margin-right: 6px; }

.table-control { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; margin: 0 0 6px; }
.table-control > *:not(:first-child) { margin-left: 6px; }
.table-control.bottom { margin-top: 6px; }
.table-control .table-buttons { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 0 0 auto; }
.table-control .table-buttons > * { margin: 0 0 0 6px; } 
.table-control .group-operation { min-width: 0; flex-shrink: 1; max-width: 30%; }
.table-control .group-operation:before { content: "\f013"; color: var(--purple); }
.table-control .row-limit, .table-control ul.pagination { margin: 0 0 0 auto; }
.table-control .row-limit:before { content: "\f03a"; }
.table-control h2 { padding-bottom: 12px; }
.preview-image { position: fixed; max-width: 30vw; padding: 20px; background: #474473; 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; }
.preview-image.show { transform: scale(1,1); opacity: 1; }
.preview-image img { width: 100%; }


/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


@keyframes progress { 0% { stroke-dasharray: 0 100; } }

@keyframes rotate-one {
  0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
  100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
}

@keyframes rotate-two {
  0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); }
  100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
}

@keyframes rotate-three {
  0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); }
  100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
}




@media (max-width: 1280px){
nav { margin-left: -260px; }
nav.collapsed { margin-left: 0; }
main { overflow-y: hidden; }
main > .contents, main > .head-bar { width: 100vw; max-width: 100vw; }
main > .contents { padding: 1rem; }
}

@media (max-width: 992px){
.table-wrapper { padding: 10px 0; }
main > .contents { padding: 0.5rem; }
.card .maximize { top: 15px; right: 15px; }
.card { padding: 16px; border-radius: 8px; margin-bottom: 12px; }
.table-wrapper table { overflow-x: auto; display: block; }
.table-wrapper table thead td:not(.blank) { min-width: 20vh; white-space: nowrap; }
.table-control ul.pagination { margin: 25px auto 0; max-width: initial; }
.table-control .pagination { order: 3; }
.table-control .table-buttons { justify-content: flex-end; }
.table-control .table-buttons > button { width: 49%; } 
.table-control .table-buttons > button:nth-child(1), .table-control .table-buttons > button:nth-child(3) { margin: 4px 1% 4px 0; }
.table-control .table-buttons > button:nth-child(2), .table-control .table-buttons > button:nth-child(4) { margin: 4px 0 4px 1%; }
.table-control .icon-wrapper { max-width: 49%; }
.table-control .icon-wrapper.group-operation { margin-right: 2%; }
.table-control.bottom .icon-wrapper.group-operation { max-width: initial; margin: 0; }
.table-filters { margin: 0; }
.table-filters .wrapper { flex-direction: column; }
.table-filters .wrapper > * { margin: 8px 0 0; }
}