body,
 html {
 	background: #f4f4f5;
 	padding: 0px;
 	margin: 0px;
	font-size: 14px;
 }
 
 
 body.lock{
	pointer-events: none;
}

body.lock::before{
	position: fixed;
	content: ' ';
	width: 100%;
	height: 100%;
	background: rgb(0,0,0,0.5);
	z-index: 30;
}
body.lock::after{
	position: fixed;
	content: ' ';
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-block;
	border-top: 3px solid #FFF;
	border-right: 3px solid transparent;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
	top: 50%;
	left: 50%;
	margin-top: -24px;
	margin-left: -24px;
	z-index: 31;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-ExtraLight.ttf') format('truetype');
    font-weight: 200;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-ExtraBold.ttf') format('truetype');
    font-weight: 600;
}


 * {
 	font-family: "Roboto";
 	box-sizing: border-box;
 }
	
	
a{
	color: inherit;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

 body {
 	width: 100%;
 	height: 100%;
 }

 body.lock {
 	pointer-events: none;
 }

 .job {
 	position: fixed;
 	width: 100%;
 	bottom: 0px;
 	left: 0px;
 	padding: 10px;
 	background-color: #ff614b;
 	color: #ffffff;
 	text-align: center;
 	z-index: 50;
 	opacity: 0.8;
 }

 input[type=number] {
 	-moz-appearance: textfield;
 }

 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
 	-webkit-appearance: none;
 	margin: 0;
 }

 *.wait {
 	pointer-events: none;
 	background-image: var(--wait) !important;
 	background-position: 0px 0px;
 	background-size: cover;
 	background-repeat: repeat-x;
 	animation: animatedBackground 3s linear infinite;
 }

 @keyframes animatedBackground {
 	from {
 		background-position: 50% 100%;
 	}

 	to {
 		background-position: 100% 0%;
 	}
 }

 *.noedit {
 	pointer-events: none;
 	color: #959595;
 	background-color: #fcfcfc !important;
 }

 #menu {
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	width: 200px;
 	height: 100%;
 	overflow-y: auto;
 	padding: 0px;
 	#border: 1px solid red;
 }

 #menu #company-logo {
 	background-image: url(../imgs/logo.svg);
 	background-repeat: no-repeat;
 	background-position: 20px 60%;
 	background-size: 30px;
 	padding: 30px 20px 20px 60px;
 	font-size: 1.2rem;
 	font-weight: bold;
 	color: #374e65;
 	border-bottom: 1px solid #cbcbdf;
 	white-space: nowrap;
	text-transform: uppercase;
	
 }

 #menu #nav {
 	padding: 30px 10px 30px 10px;
 }

 #menu #nav>div {
 	padding: 15px 0px 15px 55px;
 	cursor: pointer;
 	position: relative;
 	font-size: 1rem;
 	border-radius: 10px;
 	margin-bottom: 5px;
	font-weight: 300;
 }

 #menu #nav>div::first-letter {
 	text-transform: uppercase;
 }

 #menu #nav>div::after {
 	position: absolute;
 	content: " ";
 	width: 35px;
 	height: 35px;
 	background-size: 20px !important;
 	background-position: 50% !important;
 	background-color: #fff !important;
 	top: 50%;
 	left: 5px;
 	vertical-align: top;
 	border-radius: 5px;
 	box-shadow: 4px 6px 17px -10px rgba(66, 68, 90, 1);
 	transform: translateY(-50%);
 }

 #menu #nav>div.nav_dashboard::after {
 	background: var(--dashboard_png);
 	background-repeat: no-repeat;
 }
	
 #menu #nav>div[data-page="reports"]::after {
 	background: var(--dashboard_png);
 	background-repeat: no-repeat;
 }
 
 #menu #nav>div[data-page="inventory"]::after {
 	background: var(--store_png);
 	background-repeat: no-repeat;
 }
	
#menu #nav>div[data-page="users"]::after {
 	background: url(../imgs/group.png);
 	background-repeat: no-repeat;
 }
 #menu #nav>div[data-page="purchasing"]::after {
 	background: var(--packages);
 	background-repeat: no-repeat;
 }
	
 #menu #nav>div[data-page="usage"]::after {
 	background: var(--usage);
 	background-repeat: no-repeat;
 }
 
 #menu #nav>div[data-page="suppliers"]::after {
 	background: var(--agreement);
 	background-repeat: no-repeat;
 }
 
 #menu #nav>div[data-page="accounting"]::after {
 	background: var(--inventory);
 	background-repeat: no-repeat;
 }

 #menu #nav>div.nav_purchases::after {
 	background: var(--packages);
 	background-repeat: no-repeat;
 }

 #menu #nav>div.nav_usage::after {
 	background: var(--usage);
 	background-repeat: no-repeat;
 }

 #menu #nav>div.nav_inventory::after {
 	background: var(--inventory);
 	background-repeat: no-repeat;
 }

 #menu #nav>div:hover,
 #menu #nav>div.selected {
 	background-color: #fff;
 	box-shadow: 3px 4px 13px -10px rgba(66, 68, 90, 1);
 }

 #menu #nav>div:hover::after,
 #menu #nav>div.selected::after {
 	box-shadow: none;
 }

 #main {
 	margin-left: 200px;
 	width: calc(100% - 200px);
 	height: 100%;
 }

 #main > .head {
 	display: flex;
 	width: 100%;
 	padding: 20px 20px 10px 20px;
 	white-space: nowrap;
 	background-color: #f4f4f5;
 	position: relative;
 }

 #main > .head>div:nth-child(1) {
 	width: 70px;
 }

 #main > .head>div:nth-child(2) {
 	flex: 0 1 auto;
 	padding-right: 0px;
 }

 #main > .head>div:nth-child(3) {
 	flex: 1;
 }

 #main > .head>div:nth-child(4) {
 	flex: 0 1 auto;
 	white-space: nowrap;
 }

 .hystory-button {
 	position: absolute;
 	top: 27px;
 	right: 27px;
 	width: 18px;
 	height: 18px;
 	background: var(--hystory);
 	background-repeat: no-repeat;
 	background-size: contain;
 	background-position: 50%;
 	cursor: pointer;
 }

 .hystorypage {
 	position: absolute;
 	top: 0px;
 	left: 0px;
 	z-index: 20;
 	min-width: 100%;
 	height: 100%;
 	padding: 30px 30px;
 }

 .hystorypage::before {
 	content: ' ';
 	background-color: rgb(0, 0, 0, 0.7);
 	position: fixed;
 	width: 100%;
 	height: 100%;
 	top: 0px;
 	left: 0px;
 }

 .hystorypage .close {
 	position: absolute;
 	top: 40px;
 	right: 40px;
 	width: 20px;
 	height: 20px;
 	background: var(--close);
 	background-repeat: no-repeat;
 	background-size: contain;
 	background-position: 50%;
 	cursor: pointer;
 }

 .hystorypage .close:hover {
 	background-color: rgb(0, 0, 0, 0.1);
 	border-radius: 5px;
 }

 .hystorypage>div:nth-child(1) {
 	position: relative;
 	background-color: #fff;
 	border-radius: 10px;
 	padding: 30px 20px;
 	min-height: 600px;
 	display: flex;
 }

 .hystorypage>div .table {
 	position: relative;
 	margin-left: 10px;
 	display: inline-block;
 	vertical-align: top;
 	min-width: calc(95% - 230px);
 }

 .hystorypage>div .table:empty:after {
 	content: "Select the backup date on the left side";
 	margin-top: 200px;
 	display: block;
 	text-align: center;
 	color: #bdc6c4;
 }

 .hystorypage>div .navigation {
 	width: 230px;
 	display: inline-block;
 	vertical-align: top;
 	max-height: 500px;
 	overflow-y: auto;
 }

 .hystorypage>div .navigation .dates {
 	white-space: nowrap;
 	display: flex;
 	width: 95%;
 	margin-bottom: 10px;
 	border: 1px solid #b6b6b6;
 	border-radius: 5px;
 }

 .hystorypage>div .navigation .dates input {
 	width: 50%;
 	padding: 8px 5px;
 	outline: none;
 	border: 0px solid #b6b6b6;
 	font-size: 0.8rem;
 	border-radius: 5px;
 }

 .hystorypage>div .navigation>div:nth-child(n+2) {
 	padding: 10px;
 	font-size: 1rem;
 	cursor: pointer;
 	border-radius: 10px;
 	margin-bottom: 5px;
 	width: 95%;
 }

 .hystorypage>div .navigation>div:nth-child(n+2)>span {
 	display: block;
 	font-size: 1rem;
 	color: #bdc8c6;
 }

 .hystorypage>div .navigation>div:nth-child(n+2):hover,
 .hystorypage>div .navigation>div:nth-child(n+2).active {
 	background-color: #f4fbfa;
 }

 .hystorypage .button-update {
 	margin-top: 30px;
 	float: right;
 }

 .sticky {
 	position: sticky !important;
 	top: 0px;
 	z-index: 4;
 }

 #main > .head>div {
 	display: inline-block;
 }

 #main > .head .search {
 	position: relative;
 }

 #main > .head .search input:focus+.dataset {
 	display: block;
 }

 #main > .head .search .dataset {
 	position: absolute;
 	top: 43px;
 	left: 0px;
 	width: 100%;
 	z-index: 4;
 	background-color: #fff;
 	box-shadow: 3px 4px 13px -10px rgba(66, 68, 90, 1);
 	display: none;
 	max-height: 400px;
 	overflow-y: auto;
 }

 #main > .head .search .dataset:empty {
 	display: none !important;
 }

 #main > .head .search .dataset>div[type="product"] {
 	background: var(--product);
 	background-repeat: no-repeat;
 	background-size: 20px;
 	background-position: 10px 50%;
 }

 #main > .head .search .dataset>div[type="supplier"] {
 	background: var(--usage);
 	background-repeat: no-repeat;
 	background-size: 20px;
 	background-position: 10px 50%;
 }

 #main > .head .search .dataset>div {
 	padding: 10px 10px 10px 40px;
 	font-size: 0.85rem;
 	cursor: pointer;
 }

 #main > .head .search .dataset>div>span {
 	display: block;
 	font-size: 0.75rem;
 	color: #bbbbbb;
 }

 #main > .head .search .dataset>div:hover {
 	background-color: #ebf0ee;
 }
 
 #main > .head .search .dataset>div.hide {
 	display: none;
 }

 #main > .head .menu {
 	white-space: nowrap;
 	vertical-align: top;
 	text-align: right;
 }

 #main > .head .title>span[onclick] {
 	font-weight: 100;
 	margin-right: 10px;
 	font-size: 1rem;
 	color: #5f606e;
 	cursor: pointer;
 	text-decoration: underline;
 }

 #main > .head .title * {
 	vertical-align: top;
 }

 #main > .head .title>span {
 	font-weight: bold;
 	margin-right: 10px;
 	font-size: 1.2rem;
 	color: #40414b;
 	display: inline-block;
 	padding: 10px;
 	max-width: 200px;
 	overflow: hidden;
 }

 .button-update {
 	display: inline-block;
 	padding: 10px 13px 10px 35px;
 	color: #fff;
 	background: var(--refresh);
 	background-repeat: no-repeat;
 	background-position: 10px 45%;
 	background-size: 20px;
 	background-color: #1885da;
 	color: #ffffff;
 	cursor: pointer;
 	border-radius: 3px;
 	border-bottom: 1px solid #0f65a8;
 	font-weight: 100;
 	margin-left: 10px;
 }

 .button-create {
 	display: inline-block;
 	padding: 10px 13px 10px 32px;
 	color: #fff;
 	background: var(--add_png);
 	background-repeat: no-repeat;
 	background-position: 10px 45%;
 	background-size: 20px;
 	background-color: #00ac47;
 	cursor: pointer;
 	border-radius: 3px;
 	border-bottom: 1px solid #00832d;
 	font-weight: 100;
 	margin-left: 10px;
 }

 .button-export {
 	position: relative;
 	width: 100px;
 	overflow: hidden;
 	border-radius: 3px;
 }

 .button-export::-webkit-file-upload-button {
 	visibility: hidden;
 }

 .button-export::before {
 	content: 'Import';
 	display: inline-block;
 	padding: 10px 13px 10px 35px;
 	color: #fff;
 	background: var(--export);
 	background-repeat: no-repeat;
 	background-position: 10px 45%;
 	background-size: 20px;
 	background-color: #3368ff;
 	cursor: pointer;
 	border-bottom: 1px solid #1945c2;
 	font-weight: 100;
 	margin-left: 10px;
 	font-size: 1.2rem;
 }

 #main .editPanel>div.load {
 	position: relative;
 	color: #1885da;
 }

 #main .editPanel>div.load::after {
 	position: absolute;
 	content: " ";
 	border: 4px solid #fff;
 	border-top-color: rgba(255, 255, 255, .2);
 	border-radius: 50%;
 	width: 15px;
 	height: 15px;
 	animation: loading-spinner 2s linear infinite;
 	top: 7px;
 	left: 50%;
 	margin-left: -10px;
 	transform: rotate(0deg);
 }

 .button-export.load::before {
 	background: #c7e5e0;
 	border-bottom: 1px solid #c5ddd9;
 }

 .button-export.load::after {
 	position: absolute;
 	content: " ";
 	border: 4px solid #fff;
 	border-top-color: rgba(255, 255, 255, .2);
 	border-radius: 50%;
 	width: 15px;
 	height: 15px;
 	animation: loading-spinner 2s linear infinite;
 	top: 7px;
 	left: 17px;
 	transform: rotate(0deg);
	
 }

 @keyframes loading-spinner {
 	0% {
 		transform: rotate(0deg);
 	}

 	100% {
 		transform: rotate(360deg);
 	}
 }

 .table-full .pagenumber {
 	display: inline-block;
 	padding: 5px 10px;
 	cursor: pointer;
 	font-weight: normal;
 	font-size: 1.1rem;
 	border-radius: 3px;
 }

 .pagenumber.select {
 	text-decoration: underline;
 	font-weight: 200;
 	background-color: #dff3f4;
 }

 .table-full .pagenumber:hover {
 	text-decoration: underline;
 	font-weight: 200;
 }

 td.remove {
 	width: 20px !important;
 	background: var(--trash);
 	background-repeat: no-repeat;
 	background-size: 20px;
 	background-position: 50%;
 	opacity: 0.5;
 	cursor: pointer;
 }

 td.remove:hover {
 	opacity: 1;
 }

 div.button-load {
 	background: #ddd7d7;
 	border-bottom: 1px solid #c8bfbf;
 	position: relative;
 	pointer-events: none;
 	cursor: default !important;
 }

 div.button-load::after {
 	position: absolute;
 	content: " ";
 	border: 4px solid #fff;
 	border-top-color: rgba(255, 255, 255, .2);
 	border-radius: 50%;
 	width: 15px;
 	height: 15px;
 	animation: loading-spinner 2s linear infinite;
 	top: 7px;
 	left: 5px;
 	transform: rotate(0deg);
 }

 @keyframes loading-spinner {
 	0% {
 		transform: rotate(0deg);
 	}

 	100% {
 		transform: rotate(360deg);
 	}
 }

 .button-save {
 	display: inline-block;
 	padding: 10px 13px 10px 35px;
 	color: #fff;
 	background: var(--check-mark);
 	background-repeat: no-repeat;
 	background-position: 10px 45%;
 	background-size: 20px;
 	background-color: #00ac47;
 	cursor: pointer;
 	border-radius: 3px;
 	border-bottom: 1px solid #00832d;
 }

 #main > .head .search>input {
 	outline: none;
 	border: 1px solid #e4e4ec;
 	border-radius: 5px;
 	padding: 12px 10px;
 	width: calc(100% - 10px);
 	font-size: 0.8rem;
 	margin-top: 1px;
 }

 .supplier_center {
 	text-align: center;
 }

 .supplier_center>div {
 	margin-bottom: 20px;
 	font-size: 0.8rem;
 	font-weight: bold;
 }

 .supplier_center>div>span {
 	display: block;
 	padding: 20px 0px;
 	width: 60px;
 	margin: 10px auto;
 	background-color: #1288f0;
 	border-radius: 20px;
 	color: #fff;
 	font-weight: bold;
 	font-size: 1.25rem;
 	text-align: center;
 }

 .supplier_center>div:nth-child(1)>span {
 	background-color: #92ce1d;
 }

 .supplier_center>div:nth-child(2)>span {
 	background-color: #f55b20;
 }

 .supplier_center>div:nth-child(3)>span {
 	background-color: #f53320;
 }

 .supplier_center>div:nth-child(4)>span {
 	background-color: #3b3f50;
 }

 .button-settings {
 	display: inline-block;
 	width: 40px;
 	height: 40px;
 	background: var(--setting_png);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 20px;
 	background-color: #ffffff;
 	cursor: pointer;
 	border-radius: 5px;
 	box-shadow: 3px 4px 13px -10px rgba(66, 68, 90, 1);
 }

 .button-exit {
 	display: inline-block;
 	width: 40px;
 	height: 40px;
 	background: var(--logout_png);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 20px;
 	background-color: #ffffff;
 	cursor: pointer;
 	border-radius: 5px;
 	box-shadow: 3px 4px 13px -10px rgba(66, 68, 90, 1);
 }

 .button-sheet {
 	display: inline-block;
 	width: 40px;
 	height: 40px;
 	background: var(--sheet_png);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 20px;
 	background-color: #ffffff;
 	cursor: pointer;
 	border-radius: 5px;
 	box-shadow: 3px 4px 13px -10px rgba(66, 68, 90, 1);
 }

 #main > .body {
 	padding: 0px 20px;
 	position: relative;
 	display: table;
 	min-width: 100%;
 	min-height: 500px;
 	box-sizing: border-box;
 }

 

 .table-full:has(.tabs) {
 	margin-top: 5px;
 }

 #main > .body .tabs {
 	position: absolute;
 	top: -7px;
 	left: 40px;
 	white-space: npwrap;
 }

 #main > .body .tabs>div {
 	display: inline-block;
 	margin-right: 10px;
 	padding: 10px 15px 3px 15px;
 	background-color: #d1d1d9;
 	color: #fff;
 	border-radius: 8px 8px 0px 0px;
 	cursor: pointer;
 	border-bottom: 2px solid #fff;
 }

 #main > .body .tabs>div.active {
 	background-color: #fff;
 	font-weight: bolder;
 	color: #000000;
 	pointer-events: none;
 	cursor: default;
 }

 .loader {
 	width: 100%;
 	height: 100%;
 }

 

 .table-full {
 	width: 100%;
 	border: 0px;
 	border-radius: 10px;
 	background-color: #fff;
 	padding: 20px;
 	border-spacing: 0px;
 	border-collapse: separate;
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
 }

 .table-full td {
 	padding: 10px 10px;
 	border-bottom: 1px solid #f6f6f6;
 	font-size: 0.9rem;
 	#max-width: 200px;
 	position: relative;
 	vertical-align: center;
 	min-width: 20px;
 }

 .table-full td div[data-img] {
 	position: absolute;
 	top: 50%;
 	left: 5px;
 	transform: translateY(-50%);
 	width: 35px;
 	height: 35px;
 	background-repeat: no-repeat;
 	background-size: contain;
 }

 .product_blocks div[data-img] {
 	position: absolute;
 	top: 20px;
 	left: 10px;
 	width: 100px;
 	height: 100px;
 	background-repeat: no-repeat;
 	background-size: contain;
 	background-image: var(--boxes);
 }

 .product_blocks div[data-img]>div {
 	position: absolute;
 	width: 100px;
 	text-align: center;
 	padding: 5px 0;
 	border-radius: 0 0 10px 10px;
 	bottom: 0;
 	background: var(--edit-image) no-repeat;
 	background-size: 15px;
 	background-position: 10px 50%;
 	background-color: rgb(194, 231, 255);
 	color: #001d35;
 	font-size: 0.8rem;
 	cursor: pointer;
 	display: none;
 	transition: transform 0.3s ease-out;
 }

 .product_blocks div[data-img]:hover>div {
 	display: block;
 }

 .product_blocks div[data-img]+div {
 	padding-left: 105px;
 	min-height: 105px;
 }

 .table-full td.long {
 	min-width: 100px;
 }

 .table-full td.extralong {
 	min-width: 250px;
 	max-width: 400px;
 }

 .table-full tbody td {
 	border-bottom: 0px solid #bbbbbb;
 }

 .table-full tbody td:last-child {
 	border-right: none;
 }

 .table-full td[hint]:hover::before {
 	content: attr(hint);
 	position: absolute;
 	padding: 5px;
 	background-color: rgb(0, 0, 0, 0.7);
 	color: #fff;
 	font-size: 0.8rem;
 	bottom: 45px;
 	left: 10px;
 	z-index: 3;
 	border-radius: 5px;
 	white-space: nowrap;
 }

 .table-full tbody tr:nth-child(even) td {
 	background-color: #f6f8f9;
 }

 .table-full td .perpack>span {
 	display: block;
 	font-size: 0.75rem;
 	font-weight: 100;
 	color: #74779e;
 }

 .table-full td div[hint] {
 	display: inline-block;
 	width: 14px;
 	height: 14px;
 	margin-left: 5px;
 	background: var(--info);
 	background-repeat: no-repeat;
 	background-size: contain;
 	background-position: 50%;
 	opacity: 0.8;
 }

 .table-full td div[hint]:hover::before {
 	content: attr(hint);
 	position: absolute;
 	padding: 5px;
 	background-color: rgb(0, 0, 0, 0.7);
 	color: #fff;
 	font-size: 0.8rem;
 	bottom: 45px;
 	left: 10px;
 	z-index: 3;
 	border-radius: 5px;
 	white-space: nowrap;
 }

 .table-full thead tr td {
 	color: #3e3e3e;
 	font-size: 0.9rem;
 	font-weight: bolder;
 	vertical-align: top;
 	cursor: pointer;
 }

 td.clickable:hover {
 	cursor: pointer;
 }

 td.clickable:hover {
 	text-decoration: underline;
 }

 .table-full tfoot>tr {
 	display: table-row !important;
 }

 .table-full tfoot>tr td {
 	text-align: center;
 	font-weight: bold;
 	cursor: pointer;
 }

 .table-full tfoot>tr td:hover {
 	text-decoration: underline;
 }

 .table-full thead {
 	position: sticky;
 	background-color: #fff;
 	top: 0px;
 	z-index: 2;
 }

 .table-full .union {
 	font-size: 0.7rem;
 	color: #8d8d8d;
 	max-width: 100px;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }

 .table-full tbody {
 	overflow: auto;
 	height: 100%;
 }

 .table-full select.fast-input {
 	padding: 8px 5px;
 	outline: none;
 	border: 1px solid #b6b6b6;
 	border-radius: 3px;
 	width: 100%;
 	min-width: 100px;
 	font-size: 0.9rem;
 }

 .table-full select.fast-input option {
 	padding: 15px 5px;
 	display: block;
 }

 .table-full.import-table tfoot td {
 	cursor: default;
 	text-align: right;
 }

 .table-full.import-table tfoot td>div {
 	margin-left: 10px;
 }

 #main .editPanel {
 	position: fixed;
 	padding: 15px;
 	left: 50%;
 	bottom: 0px;
 	background: #fff;
 	transform: translateX(-50%);
 	box-shadow: 0px 0px 18px -4px rgba(66, 68, 90, 1);
 	border-radius: 10px 10px 0px 0px;
 	animation: editPanel 0.5s;
 	z-index: 5;
 }

 #main .editPanel>div {
 	display: inline-block;
 	padding: 12px 10px;
 	cursor: pointer;
 	font-size: 0.8rem;
 	color: #fff;
 	background-color: #1885da;
 	border-bottom: 1px solid #0f65a8;
 	border-radius: 5px;
 	margin-right: 10px;
 }

 @keyframes editPanel {
 	from {
 		bottom: -100px;
 	}

 	to {
 		bottom: 0px;
 	}
 }

 #main .editPanel>div:nth-child(1) {
 	pointer-events: none;
 	background-color: #fff;
 	border-bottom: 1px solid #fff;
 	color: #000;
 	padding: 10px;
 	font-size: 1.1rem;
 }

 #main .editPanel>div.inactive {
 	pointer-events: none;
 	background-color: #efefef;
 	border-bottom: 1px solid #efefef;
 }

 #main .editPanel>div:hover {
 	background-color: #127aca;
 }

 .table-full .form_title {
 	font-size: 1rem !important;
 }

 .table-full .form_title>span {
 	display: block;
 	font-size: 0.75rem;
 	font-weight: 100;
 	color: #74779e;
 }

 .table-full input[type="text"],
 .table-full input[type="number"],
 .table-full input[type="date"],
 .table-full input[type="datetime-local"],
 .table-full input[type="password"] {
 	padding: 8px 5px;
 	outline: none;
 	border: 1px solid #b6b6b6;
 	border-radius: 3px;
 	width: 100%;
 	font-size: 0.9rem;
 }

 .table-full input:focus+.list {
 	display: block;
 }

 .table-full input.invalid {
 	border: 1px solid #f0b411;
 	background: #fff5f5 !important;
 }

 .table-full td:has(input.invalid)::after {
 	content: "Incorrect";
 	position: absolute;
 	padding: 3px 3px 0px 3px;
 	top: 4px;
 	left: 20px;
 	background-color: #fff;
 	border-radius: 5px;
 	color: #f0b411;
 	font-size: 0.6rem;
 }

 .table-full td:has(input.createnew)::after,
 .table-full td:has(input[is_settings]):has(.list.notfound)::after,
 .table-full td:has(input.invalid[create_id])::after {
 	content: "Create new";
 	position: absolute;
 	padding: 3px 3px 0px 3px;
 	top: 4px;
 	left: 20px;
 	background-color: #fff;
 	border-radius: 5px;
 	color: #27d027;
 	font-size: 0.6rem;
 }

 .table-full input.createnew,
 .table-full td:has(input[is_settings]):has(.list.notfound) input {
 	border: 1px solid #27d027;
 	background: #f9fff5 !important;
 }

 .table-full input:has(+ .list) {
 	background: var(--down_png);
 	background-repeat: no-repeat;
 	background-size: 8px;
 	background-position: right 10px top 50%;
 	padding-right: 25px;
 }

 .table-full input:focus:has(+ .list) {
 	background: var(--up_png);
 	background-repeat: no-repeat;
 	background-size: 8px;
 	background-position: right 10px top 50%;
 }

 .table-full tbody>tr.filtered {
 	display: none !important;
 }

 .table-full tbody>tr.noonpage {
 	display: none;
 }

 .searchmode .table-full tbody>tr:not(.filtered) {
 	display: none;
 }

 .searchmode .table-full tbody>tr:not(.filtered).show {
 	display: table-row !important;
 }

 .searchmode .table-full tfoot {
 	display: none !important;
 }

 .sort {
 	padding-right: 18px !important;
 }

 .sort.down {
 	background: var(--down_png);
 	background-repeat: no-repeat;
 	background-size: 8px;
 	background-position: right 4px top 20px;
 }

 .sort.up {
 	background: var(--up_png);
 	background-repeat: no-repeat;
 	background-size: 8px;
 	background-position: right 4px top 20px;
 }

 .table-full .list {
 	position: absolute;
 	display: none;
 	min-width: 300px;
 	width: calc(100% - 20px);
 	background-color: #fff;
 	border: 1px solid #b6b6b6;
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
 	z-index: 1;
 	max-height: 300px;
 	overflow-x: hidden;
 	overflow-y: auto;
 	min-height: 40px;
 }

 .table-full .list.notfound {
 	display: none !important;
 }

 .table-full .list.notfound["is_settings"]::after {
 	content: attr(message);
 	padding: 20px;
 	color: #acacac;
 	display: block;
 }

 .table-full .list>div {
 	padding: 10px;
 	font-size: 0.9rem;
 	cursor: pointer;
 	white-space: nowrap;
 	font-weight: 100;
 }

 .table-full .list>div:hover {
 	background-color: #dee5f0;
 }

 .table-full .list>div.chosed {
 	background-color: #dee5f0;
 }

 .table-full .list>div>span {
 	display: inline-block;
 	padding: 2px 4px;
 	background-color: #f5f5f5;
 	border-radius: 10px;
 	font-size: 0.8rem;
 	margin-right: 3px;
 }

 .table-full.table-form tr>td:nth-child(1) {
 	width: 30%;
 }

 .gree_light {
 	background-color: #c8f573;
 }

 .green {
 	background-color: #92d01d;
 }

 .red {
 	background-color: #f4664a;
 }

 .orange {
 	background-color: #ffc66a;
 }

 .status {
 	padding: 3px;
 	border-radius: 7px;
 	font-size: 0.6rem;
 	margin-bottom: 2px;
 	text-align: center;
 }

 .tile {
 	padding: 10px;
 	background-color: #fff;
 	border-radius: 10px;
 	height: 300px;
 }

 .product_blocks {
 	display: grid;
 	row-gap: 15px;
 	column-gap: 15px;
 	grid-template-columns: fit-content(37%) fit-content(13%) fit-content(50%);
 }

 .product_blocks>div {
 	background-color: #fff;
 	border-radius: 10px;
 	padding: 10px 10px 20px 10px;
 	position: relative;
 }

 .product_blocks>div h2 {
 	margin-block-end: .2rem;
 	padding: 0px 10px;
 }

 .product_blocks>div h5 {
 	color: #848484;
 	margin-block-start: 0rem;
 	margin-block-end: 0rem;
 	padding: 0px 10px;
 	font-weight: 100;
 }

 .product_blocks>div .table-full {
 	box-shadow: none;
 	padding: 0px;
 }


 .settings_block {
 	margin-top: 15px;
 	display: grid;
 	row-gap: 15px;
 	column-gap: 15px;
 	grid-template-columns: auto auto auto;
 }

 .settings_block>div {
 	background-color: #fff;
 	border-radius: 10px;
 	padding: 10px 10px 20px 10px;
 	position: relative;
 }

 .settings_block>div .table-full {
 	box-shadow: none;
 	padding: 0px;
 }

 .dashboard2 {
 	display: grid;
 	row-gap: 10px;
 	column-gap: 10px;
 	grid-template-columns: 
        minmax(150px, 37%)
        minmax(100px, 13%)
        minmax(200px, 50%);
 }
 
  .dashboard {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 1rem;
	  padding-bottom: 2rem;
  }

 .dashboard > div {
 	background-color: #fff;
 	border-radius: 10px;
 	padding: 10px 10px 20px 10px;
 	position: relative;
	width: calc(50% - 1rem);
	#min-width: 300px;
	#min-height: 300px;
 }
	
	.dashboard > div:nth-child(1){
		width: 35%;
	}
	.dashboard > div:nth-child(2){
		width: 15%;
	}
	.dashboard > div:nth-child(3){
		width: calc(50% - 2rem);
	}
	
	
 .dashboard>div .table-full {
 	box-shadow: none;
 	padding: 0px;
 }

 .dashboard>div>.datepicker {
 	position: relative;
 	width: 46%;
 	display: inline-block;
 	margin-bottom: 10px;
 }

 .dashboard>div>.datepicker input {
 	outline: none;
 	border: 1px solid #b0b2d0;
 	border-radius: 5px;
 	padding: 10px;
 	width: 100%;
 }

 .dashboard>div>.datepicker:nth-child(3) {
 	margin-left: 3%;
 }

 .dashboard>div .created {
 	position: absolute;
 	top: 5px;
 	right: 8px;
 	font-size: 0.6rem;
 	color: #d1d1d1;
 }

 .dashboard>div>.datepicker::after {
 	content: attr(placeholder);
 	position: absolute;
 	top: -8px;
 	left: 5px;
 	background-color: #fff;
 	padding: 0px 5px;
 	font-size: 0.75rem;
 	color: #bfbfbf;
 }

 .dashboard>div>h3 {
 	padding: 20px 10px;
 	margin-block-start: 0rem;
 	margin-block-end: 0rem;
 }

 .dashboard>div:nth-child(3) {
 	background: #fff;
 	border-radius: 20px;
 	padding: 10px;
 }

 .dashboard-storage-pie {
 	display: inline-grid;
 	background: #fff;
 	border-radius: 20px;
 	padding: 10px;
 }
 
 .dashboard .report{
	 padding: 1rem;
 }
 .dashboard .report .row.head{
	font-weight: 400;
 }
 
 .dashboard .report .row{
	 display: flex;
	 font-weight: 300;
	 align-items: center;
 }
 .dashboard .report .row > div{
	flex: 1;
	padding: 0.5rem;
 }
 .dashboard .report .row > div:nth-child(1){
	flex: 0 0 200px;
 }
 
 .dashboard .report .row > div:has(img){
	 box-sizing: border-box;
	 position: relative;
 }
 .dashboard .report .row > div img{
	position: absolute;
	top: 0.5rem;
	left: 0;
	width: 35px;
	height: 35px;
	object-fit: contain;
 }
 
 .dashboard .report .row > span.product-id{
	display: block;
	padding: 0.2rem 0.5rem;
	background-color: #f3f6f9;
	font-size: 0.8rem;
	width: auto;
	max-width: fit-content;
	border-radius: 5px;
	font-weight: 300;
}
 
 
 .cards .card .units[data-unitstatus="0"]{
	 color: #28c76f;
 }
 .cards .card .units[data-unitstatus="1"]{
	 color: #7367f0;
 }
 .cards .card .units[data-unitstatus="2"]{
	 color: #ff4c51;
 }
 .cards .card .units[data-unitstatus="3"]{
	 color: #d3a136;
 }
 
 div[data-stockstatus="0"]{
	background: #ddf6e8;
	color: #28c76f;
	padding: 0.2rem 0.4rem;
	border-radius: 10px;
	font-size: 0.8rem;
	text-align: center;
	font-size: 0.7rem;
	text-align: center;
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
 }
 div[data-stockstatus="1"]{
	background: #e9e7fd;
	color: #7367f0;
	padding: 0.2rem 0.4rem;
	border-radius: 10px;
	font-size: 0.7rem;
	text-align: center;
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;	
 }
 div[data-stockstatus="2"]{
	background: #ffe2e3;
	color: #ff4c51;
	padding: 0.2rem 0.4rem;
	border-radius: 10px;
	font-size: 0.7rem;
	text-align: center;
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
 }
 div[data-stockstatus="3"]{
	background: #fdeecd;
	color: #d3a136;
	padding: 0.2rem 0.4rem;
	border-radius: 10px;
	font-size: 0.7rem;
	text-align: center;
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
 }
 .column12 {
 	grid-column: 1 / 3;
 }

 .column13 {
 	grid-column: 1 / 4;
 }

 .column23 {
 	grid-column: 2 / 4;
 }

 .row23 {
 	grid-row: 2 / 4;
 }

 .switcher {
 	position: relative;
 	display: inline-block;
 	border-radius: 18px;
 	background-color: #5a8fe5;
 	padding: 4px;
 	font-size: 0;
 }

 .switcher:has(input[value="0"]:checked) {
 	background-color: #f3f6fc;
 }

 .switcher input {
 	display: none;
 }

 .switcher label {
 	display: inline-block;
 	width: 28px;
 	height: 28px;
 	background-color: inherit;
 	border-radius: 16px;
 }

 .switcher label:has(input:checked) {
 	background-color: #fff;
 	border: 1px solid #d3e3fd;
 }

 .storageinfo {
 	background: #fff;
 	border-radius: 20px;
 	padding: 10px;
 }

 .storageinfo>div {
 	position: relative;
 	padding: 70px 10px 10px 10px;
 	font-size: 0.75rem;
 	color: #a4a8b6;
 	text-align: center;
 }

 .storageinfo>div>span {
 	font-weight: bolder;
 	font-size: 1.5rem;
 	color: #32384d;
 	display: block;
 }

 .storageinfo>div::after {
 	content: " ";
 	position: absolute;
 	top: 10px;
 	left: 50%;
 	transform: translateX(-50%);
 	width: 50px;
 	height: 50px;
 	border-radius: 10px;
 }

 .storageinfo>div:nth-child(1)::after {
 	background: var(--check-mark);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 25px;
 	background-color: #92ce1d;
 }

 .storageinfo>div:nth-child(2)::after {
 	background: var(--chart);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 25px;
 	background-color: #f55b20;
 }

 .storageinfo>div:nth-child(3)::after {
 	background: var(--emptywhitebox);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 25px;
 	background-color: #f53320;
 }

 .storageinfo>div:nth-child(4)::after {
 	background: var(--sum);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 25px;
 	background-color: #3b3f50;
 }

 .center {
 	text-align: center;
 }

 .showmore {
 	text-align: center;
 	font-weight: bold;
 	cursor: pointer;
 }

 .showmore:hover {
 	text-decoration: underline;
 }

 .auth {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	padding: 30px 50px 30px 50px;
 	background: #fff;
 	border-radius: 20px;
 	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
 }
	

 .auth h3 {
	font-weight: 500;
 }
 
 .auth .error {
	position: relative;
	background-color: #fde8e4;
	padding: 0.5rem 0.5rem 0.5rem 3rem;
	border-radius: 5px;
	overflow: hidden;
	color: #f06548;
	margin: 0.3rem 0;
 }
  .auth .error:empty{
	  display: none;
  }
 .auth .error::before {
	 content: '⚠';
	 font-family: Arial;
	 position: absolute;
	 padding: 0.1rem 0.5rem 0.5rem 0.5rem;
	 font-size: 1.4rem;
	 background-color: #f06548;
	 color: #fff;
	 top: 0;
	 left: 0;
 }
 
 .auth input {
 	border: 0px solid #b0b2d0;
 	border-bottom: 1px solid #e9ebec;
 	padding: 10px;
 	width: 100%;
 	margin: 5px 0px;
 	outline: none;
	background: #fff !important;
	transition: background-color 5000s ease-in-out 0s;
 }
	
	.auth input::placeholder {
      color: grey; 
      font-size: 1rem;
	  font-weight: 100;
    }
	
 .auth .button {
 	display: block;
 	padding: 10px 13px 10px 32px;
 	color: #fff;
 	cursor: pointer;
 	border-radius: 5px;
 	border-bottom: 1px solid #00832d;
 	background-color: #1398ce;
 	margin-top: 1rem;
 	text-align: center;
	font-weight: 500;
 }

 .auth .button:hover {
 	background-color: #17a7e2;
 }

 .mobilemenu {
 	display: none !important;
 	width: 40px;
 	height: 40px;
 	vertical-align: top;
 	border-radius: 5px;
 	background: var(--menu);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 30px;
 }

 @keyframes showsidebar {
 	0% {
 		left: -300px;
 	}

 	100% {
 		left: 0px;
 	}
 }

 #menu .close {
 	display: none;
 	position: absolute;
 	width: 40px;
 	height: 40px;
 	background: var(--close);
 	background-repeat: no-repeat;
 	background-position: 50%;
 	background-size: 30px;
 	top: 20px;
 	right: 20px;
 	transform: rotate(90deg);
 	animation: closerotate 1s;
 }

 @keyframes closerotate {
 	0% {
 		transform: rotate(270deg);
 	}

 	100% {
 		transform: rotate(90deg);
 	}
 }

 #menu.show {
 	display: block !important;
 }

 .dashboard .trigger {
 	position: absolute;
 	top: 25px;
 	right: 5px;
 	background-image: var(--trigget);
 	background-repeat: no-repeat;
 	background-size: contain;
 	width: 25px;
 	height: 25px;
 	z-index: 3;
 }

 .dashboard .trigger.context {
 	background: #fff;
 	padding: 10px;
 	box-shadow: 0px 0px 3px -1px rgba(66, 68, 90, 1);
 	border-radius: 8px;
 	width: auto;
 	height: auto;
 	max-height: 300px;
 }

 .dashboard .trigger.context>div {
 	display: block;
 }

 .dashboard .trigger>div {
 	display: none;
 }

 body.bigtable #main > .head {
 	position: fixed;
 	width: 100%;
 	z-index: 4;
 }

 body.bigtable #main > .body {
 	padding-top: 86px;
 }

 body.bigtable #menu {
 	position: fixed;
 	left: 0px;
 	top: 0px;
 	display: none;
 	animation: showsidebar 0.5s;
 	background-color: #f4f4f5;
 	box-shadow: 0px 0px 18px -4px rgba(66, 68, 90, 1);
 	z-index: 10;
 	width: 300px;
 }

 body.bigtable #menu.show {}

 body.bigtable .mobilemenu {
 	display: inline-block !important;
 }

 body.bigtable #menu .close {
 	display: block;
 }

 body.bigtable #main {
 	margin-left: 0px;
 	width: 100%;
 }

 @media only screen and (max-width: 1500px) {
 	#menu {
 		position: fixed;
 		left: 0px;
 		top: 0px;
 		display: none;
 		animation: showsidebar 0.5s;
 		background-color: #f4f4f5;
 		box-shadow: 0px 0px 18px -4px rgba(66, 68, 90, 1);
 		z-index: 10;
 		width: 300px;
 	}
	
 	.mobilemenu {
 		display: inline-block !important;
 	}

 	#menu .close {
 		display: block;
 	}

 	#main {
 		margin-left: 0px;
 		width: 100%;
 	}
	
	
 }
 
 @media only screen and (max-width: 1200px) {
 	
	.dashboard > div{
		width: 100%;
	}
	.dashboard > div:nth-child(1){
		width: 70%;
	}
	.dashboard > div:nth-child(2){
		width: calc(30% - 1rem);
	}
	.dashboard > div:nth-child(3){
		width: 100%;
	}
	.page > .head p{
		display: none;
	}
	.users > div{
		width: calc(25% - 1.5rem) !important;
	}
 }

 @media only screen and (max-width: 1050px) {
	 
	 body,
	 html {
		font-size: 18px;
	 }
	
	
	
 
 	#main>.body {
 		padding: 86px 1rem 10px 1rem;
 		min-height: 100%;
 	}

 	#main > .head {
 		position: fixed !important;
 		background-color: #f4f4f5;
 		width: 100%;
 		height: 85px;
 		z-index: 5;
 	}

 	.table-full {
 		border-radius: 0px;
 	}

 	#main .editPanel {
 		width: 100%;
 		text-align: center;
 		border-radius: 0px;
 		top: 0px;
 		bottom: auto;
 		min-height: 85px;
 		z-index: 5;
 	}

 	#main .editPanel>div {
 		font-size: 1.2rem;
 		padding: 15px 15px;
 	}

 	@keyframes editPanel {
 		from {
 			top: -100px;
 		}

 		to {
 			top: 0px;
 		}
 	}

 	#main > .head .search {
 		width: calc(100% - 560px);
 	}

	.dashboard > div{
		width: 100%;
	}
	.dashboard > div:nth-child(1){
		width: 70%;
	}
	.dashboard > div:nth-child(2){
		width: calc(30% - 1rem);
	}
	.dashboard > div:nth-child(3){
		width: 100%;
	}

 	.auth {
 		font-size: 1.5rem;
 		top: 45%;
 	}

 	.auth input {
 		font-size: 1.5rem;
 	}

 	.auth h3 {
 		font-size: 2rem;
 	}

 	.table-full thead {
 		top: 86px;
 	}
	
	
	.page > .head p{
		display: none !important;
	}
	
	
	.page > .head .totals{
		display: none !important;
	}
	
	.product-data > div:nth-child(1) {
		width: calc(100%-130px) !important;
	}
	.product-data > div:nth-child(2) {
		width: 100px !important;
		border-right: none !important;
	}
	.product-data > div:nth-child(3) {
		width: 100% !important;
	}
	
	.form-buttons > button{
		white-space: nowrap;
	}
	
	.page > .head:has(.order-checker) > div:nth-child(1){
		display: none;
	}
	
	.users > div{
		width: calc(33% - 1.3rem) !important;
	}
 }



 
 
 
 
 
.table-big{
	position: relative;
	display: none;
	border-radius: 5px;
	background: #fff;
    padding: 0;
	text-align: center;
	outline: 1px solid #f3f3f9;
	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
	min-height: 400px;
}


.table-big .head-row{
	position: sticky;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1rem;
	background: #fff;
	border-bottom: 1px solid #f3f3f9;
	border-radius: 5px 5px 0 0 ;
	z-index: 1;
}
.table-big .head-row > div{
	flex: 1;
	text-align: center;
	padding: 1.5rem 0.5rem;
	font-weight: 400;
	
}
.table-big .body:empty::after{
	display: block;
	content: 'This table is currently empty.';
	text-align: center;
	padding-top: 100px;
	color: #aeaeb6;
	font-weight: 300;
	font-size: 0.9rem;
}
.table-big .body .row{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1rem;
	border-bottom: 0.5px solid #f3f3f9;
}
.table-big .body .row > div{
	flex: 1;
	text-align: center;
	padding: 0.5rem;
	font-weight: 300;
	outline: none;
	white-space: normal;
    word-break: break-word;
}

.table-big .body .row[data-ordertype="4"]{
	background-color: #e2e5f4;
}

.table-big .body .row > div.details{
	padding: 0 0.5rem;
	font-size: 0.8rem;
}
.table-big .body .row > div > input[type="text"],
.table-big .body .row > div > input[type="number"]{
	border: 1px solid #f3f3f9;
	outline: none;
	font-weight: 300;
	padding: 0.5rem;
	text-align: center;
}
.table-big .body .row > div > input::placeholder {
  color: #c9c7de;
  font-weight: 300;
}
.table-big .body .row > div > input[data-stat="success"]{
	background-image: url(../imgs/mark.png);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: top 50% left 0.5rem;
	color: #1c8149;
}
.table-big .body .row > div > input[data-stat="warning"]{
	background-image: url(../imgs/caution.png);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: top 45% left 0.5rem;
	color: #c86f1a;
}
.table-big .body .row > div[data-state='1']{
	background-image: url(../imgs/mark.png);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: top 50% left 1rem;
	color: #1c8149;
}
.table-big .body .row > div[data-state='3']{
	background-image: url(../imgs/lower.png);
	background-repeat: no-repeat;
	background-size: 1.5rem;
	background-position: top 50% left 1rem;
	color: #be3030;
}
.table-big .body .row > div[data-state='2']{
	background-image: url(../imgs/higher.png);
	background-repeat: no-repeat;
	background-size: 1.5rem;
	background-position: top 50% left 1rem;
	color: #8e2acc;
}
.table-big .body .row > div[data-stat="success"]{
	background-image: url(../imgs/mark.png);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: top 50% left 0.5rem;
	color: #1c8149;
}

.table-big .body .row > div[data-stat="warning"]{
	background-image: url(../imgs/caution.png);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: top 45% left 0.5rem;
	color: #c86f1a;
}


.table-big .body .row > div:focus{
	min-height: 100%;
	background-color: #f5fbfc;
}

.table-big .body .row > div > a{
	cursor: pointer;
	font-weight: 300;
	
}
.table-big .body .row > div > a:hover{
	text-decoration: underline;
}

.table-big .size2{
	flex: 2 !important;
}

.table-big .size3{
	flex: 3 !important;
}

.imgcont{
	padding-left: 3.6rem !important;
}

.table-big .left{
	text-align: left !important;
}

.table-big .body .row > div:has(.product-id){
	#font-weight: 400;
}

.table-big .body .row > div > img{
	position: absolute;
	left: 0.5rem;
	top: 0.2rem;
	width:  2.5rem;
	height: 2.5rem;
	object-fit: contain;
}

.table-big .body .row > div:has(img){
	position: relative;
}

.table-big .control{
	position: sticky;
	bottom: 0px;
	display: none;
	border-top: 1px solid #f1f3f4;
	background-color: #fff;
	text-align: left;
	padding: 0.5rem 0;
	background-color: #fafcfc;
	z-index: 2;
}
.table-big:has(.chouse input:checked) .control{
	display: block;
}
.table-big .control > div{
	display: inline-block;
	text-align: left;
	padding: 1rem 0.8rem;
	position: relative;
	font-weight: bold;
	margin-right: 0.5rem;
}
.table-big .control .count{
	padding-left: 2.5rem;
	background-image: url(../imgs/selected.png);
	background-repeat: no-repeat;
	background-size: 8px;
	background-position: left 1.2rem top 45%;
}
.table-big .row > div.chouse,
.table-big .head-row > div.chouse{
	flex: 0 0 45px;
	text-align: center;
}

.table-big .row > div:nth-child(1){
	padding-left: 1rem;
}
.table-big .head-row > div:nth-child(1){
	padding-left: 1rem;
}

.table-big .control .edit{
	padding: 0.5rem 1rem 0.5rem 2.2rem;
	background-image: url(../imgs/edit.png);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-color: #1890ff;
	background-position: left 0.8rem top 45%;
	color: #FFF;
	border-radius: 5px;
	font-weight: 500;
	font-size: 0.9rem;
	cursor: pointer;
}
.table-big .control .copy{
	padding: 0.4rem 1rem 0.4rem 2.2rem;
	background-image: url(../imgs/copy.png);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-color: #28c76f;
	background-position: left 0.8rem top 45%;
	color: #FFF;
	border-radius: 5px;
	font-weight: 500;
	font-size: 0.9rem;
	cursor: pointer;
}
.table-big .control .remove{
	padding: 0.4rem 1rem 0.4rem 2.2rem;
	background-image: url(../imgs/trash.png);
	background-repeat: no-repeat;
	background-size: 1rem;
	background-color: #f75b5b;
	background-position: left 0.8rem top 45%;
	color: #FFF;
	border-radius: 5px;
	font-weight: 500;
	font-size: 0.9rem;
	cursor: pointer;
}


.table-big .slider {
	min-width: max-content;
	background-color: #fafafa;
}

.table-big .slider label.hidder{
	display: block;
	width: 100%;
	padding: 0.5rem 1.5rem;
	min-width: max-content;
	font-weight: 500;
	font-size: 0.8rem;
	background-image: url(../imgs/slide_visible.png);
	background-repeat: no-repeat;
	background-size: 12px;
	background-position: left 0rem top 45%;
	cursor: pointer;
}

.table-big .slider label.hidder input{
	display: none;
}

.table-big .slider label.hidder:has(input:checked){
	background-image: url(../imgs/slide_hidden.png);
}

.table-big .slider:has(label.hidder > input:checked) + div.order-items{
	display: none;
}
.table-big .order-items .row{
	border-bottom: 0px solid #fff;
}


.pieces{
	padding: 0.1rem 0.5rem;
	background-color: #d7bde2;
	font-size: 0.8rem;
	width: auto;
	max-width: fit-content;
	border-radius: 5px;
	margin-top: 0.2rem;
	margin-left: 0.2rem;
	font-weight: 300;
}
.product-id{
	display: block;
	padding: 0.2rem 0.5rem;
	background-color: #f3f6f9;
	font-size: 0.8rem;
	width: auto;
	max-width: fit-content;
	border-radius: 5px;
	margin-top: 0.2rem;
	font-weight: 300;
}
.product-id:empty{
	display: none;
}


.page{
	
}

.page > .head{
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1.5rem;
	border-bottom: 1px solid #f3f3f9;
	gap: 1rem;
	margin-bottom: 1rem;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
	min-height: 6rem;
}

.page > .head > div:nth-child(1){
	flex-grow: 1;
}
.page > .head > div:not(.first) {
    flex-shrink: 0;
    flex-basis: auto;
}


.page > .head h2{
	font-weight: 500;
	color: #374e65;
	#text-transform: uppercase;
	font-size: 1.2rem;
	margin-block: 0;
}
.page > .head p{
	font-weight: 300;
	color: #374e65;
	font-size: 0.8rem;
	margin: 0;
	padding-top: 0.5rem;
	margin-block: 0;
}


.page > .head .totals{
	display: flex;
	gap: 0px;
	padding: 1rem;
}
.page > .head .totals > div{
	padding: 0 1rem;
	border-right: 1px solid #f3f3f9;
	font-weight: 300;
	font-size: 0.8rem;
	color: #878a99;
	text-align: left;
}
.page > .head .totals > div:last-child{
	border-right: none;
	
}
.page > .head .totals > div > span{
	display: block;
	font-weight: 500;
	color: #374e65;
	font-size: 1.2rem;
	text-align: left;
	padding-top: 0.5rem;
}

.page > .head .table-switcher{
	
}

.page:has(.table-switcher input[value="cards"]:checked) .cards{
	display: flex;
}
.page:has(.table-switcher input[value="table"]:checked) .table-big{
	display: block;
}
.page:not(:has(.table-switcher)) .table-big{
	display: block;
}

.page > .head .buttons {
	display: flex;
	gap: 0.5rem;
	
	align-items: center;
}

.page > .head .buttons > div{
	flex: 1;
	background-color: #1890ff;
	color: #fff;
	padding: 0.7rem 1rem;
	white-space: nowrap;
	font-weight: 500;
	font-size: 0.9rem;
	border-radius: 5px;
	cursor: pointer;
}
.page > .head .buttons > div:hover{
	background-color: #1272cb;
}
.page > .head .buttons > div.create{
	padding-left: 2.2rem;
	background-image: url(../imgs/but-product.png);
	background-repeat: no-repeat;
	background-size: 1.3rem;
	background-position: top 50% left 0.5rem;
}
.page > .head .buttons > div.order{
	padding-left: 2.3rem;
	background-image: url(../imgs/but-order.png);
	background-repeat: no-repeat;
	background-size: 1.3rem;
	background-position: top 50% left 0.5rem;
}
		 
.page-nav{
	position: sticky !important;
 	bottom: 0px;
 	z-index: 1;
	padding: 0.5rem 1.5rem;
	margin: 1rem 0;
	border-radius: 5px;
	white-space: nowrap;
	overflow: hidden;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
}

.page-nav > div{
	display: none;
	padding: 0.45rem 0;
	background-color: #d3d3e6;
	width: 2rem;
	height: 2rem;
	border-radius: 1rem;
	text-align: center;
	position: relative;
	font-size: 0.9rem;
	cursor: pointer;
}
.page-nav > div[data-checked]{
	background-color: #28c76f;
	color: #fff;
	pointer-events: none;
	cursor: default;
}
.page-nav > div[data-checked],
.page-nav > div:first-child,
.page-nav > div:last-child,
.page-nav > div[data-checked] + div,
.page-nav > div[data-checked] + div + div,
.page-nav > div[data-checked] + div + div + div,
.page-nav > div:has(+ div[data-checked]),
.page-nav > div:has(+ div + div[data-checked]),
.page-nav > div:has(+ div + div + div[data-checked]){
	display: block;
}
.page-nav > div:has(+ div + div + div[data-checked]):not(:first-child) {
	margin-left: 1rem;
}
.page-nav > div:has(+ div + div + div[data-checked]):not(:first-child)::before {
  content: '...';
  position: absolute;
  left: -1.2rem;
}
.page-nav > div[data-checked] + div + div + div:not(:last-child) {
	margin-right: 1rem;
}
.page-nav > div[data-checked] + div + div + div:not(:last-child)::after {
  content: '...';
  position: absolute;
  right: -1.2rem;
}



.table-switcher > label{
	display: inline-block;
	width: 20px;
	height: 20px;
	opacity: 0.2;
	cursor: pointer;
}

.table-switcher > label:has(input:checked){
	opacity: 1;
	
}
.table-switcher > label:nth-child(1){
	background: url(../imgs/switch2.png) no-repeat;
	background-size: 18px;
	background-position: 50%;
}
.table-switcher > label:nth-child(2){
	background: url(../imgs/switch1.png) no-repeat;
	background-size: 18px;
	background-position: 50%;
}

.table-switcher input{
	display: none;
}

.cards{
	display: none;
	flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.cards .card {
    flex: 1 1 200px;
    #max-width: 250px;
    background: #fff;
    padding: 0.5rem 1rem 1rem 1rem;
	text-align: center;
	outline: 1px solid #f3f3f9;
	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
	border-radius: 5px;
}

.cards .card > img{
	width: 120px;
	height: 120px;
	object-fit: cover;
    object-position: center;
}
.cards .card > a{
	display: block;
	font-weight: 400;
	color: #495057;
	margin: 0.5rem 0;
	text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 200px;
}


.cards .card .units{
	margin: 1rem 0;
	font-weight: 500;
	text-align: left;
	color: #0ab39c;
}
.cards .card .price{
	margin: 1rem 0;
	font-weight: 500;
	text-align: left;
	font-size: 1.2rem;
	
}

.cards .card .params{
	display: flex;
	gap: 0.5rem;
	font-size: 0.8rem;
}
.cards .card .params > span{
	display: inline-block;
	padding: 0.2rem 0.5rem;
	background-color: #e1ebfd;
	color: #0ab4af;
	border-radius: 5px;
	text-align: left;
}

.cards .card .params > span.location{
	background-color: #dff0fa;
	color: #299cdb;
}


#modals{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	padding: 40px 5%;
}
#modals::before{
	content: ' ';
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgb(0,0,0,0.5);
	z-index: 1;
}
#modals:has(.tabs:empty){
	display: none;
}

#modals > .tabs{
	display: flex;
	flex-direction: row;
	width: 100%;
	background-color: #fff;
	
	position: relative;
	z-index: 2;
	padding: 1rem 1rem 0 1rem;
	border-radius: 5px 5px 0 0;
	gap: 0px;
	border-bottom: 1px solid #f1f3f4;
	flex-wrap: nowrap;
	
}
#modals > .tabs > label{
	position: relative;
	display: inline-block;
	padding: 0.5rem 35px 1rem 1.3rem;
	font-size: 0.9rem;
	font-weight: 400;
	border-bottom: 3px solid #cecece;
	opacity: 0.5;
	overflow: hidden;
	min-width: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	cursor: pointer;
}
#modals > .tabs > label:has(input:checked){
	background-color: #fff;
	border-bottom: 3px solid #1890ff;
	opacity: 1;
}

#modals > .tabs > label input{
	display: none;
}

#modals > .tabs > label .close{
	position: absolute;
	top: 0.5rem;
	right: 0.8rem;
	background-image: url(../imgs/x.png);
	background-repeat: no-repeat;
	background-size: 16px;
	background-position: 50%;
	width: 14px;
	height: 14px;
	cursor: pointer;
	border-radius: 5px;
	opacity: 0.5;
}

#modals > .tabs > label .close:hover{
	opacity: 1;
}

#modals > .pages{
	position: relative;
	background: #fff;
	padding: 0rem 2rem 1rem 2rem;
	z-index: 2;
	border-radius: 0 0 5px 5px;
	width: 100%;
}

#modals .title{
	padding: 1rem 0;
	margin-bottom: 1rem;
	border-bottom: 1px solid #f1f3f4;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#modals .title > div.form-buttons{
	margin: 0;
}


#modals .title > :first-child {
    flex-grow: 1;
    min-width: 0;
}

#modals .title h2{
	font-weight: 500;
	color: #374e65;
	#text-transform: uppercase;
	font-size: 1.2rem;
	margin-block: 0;
}
#modals .title p{
	font-weight: 300;
	color: #374e65;
	font-size: 0.8rem;
	margin: 0;
	padding-top: 0.5rem;
	margin-block: 0;
}



.table-big .body .row > div:has(.mini-selector){
	position: relative;
	#padding: 0.2rem 0 !important;
}


.mini-selector{
	outline: 0px solid #fff;
	border: 0px solid #fff;
	font-size: 0.8rem;
	background: inherit;
	padding: 0;
	margin: 0;
}

.mini-selector:focus{
	background: #fff;
	padding: 0.5rem 0.5rem;
	border-radius: 5px;
	border: 1px solid #f3f3f9;
	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
	position: absolute;
	top: -1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}

.mini-selector:focus > label{
	display: block;
	font-size: 0.8rem;
	margin-bottom: 0.5rem;
}

.mini-selector > label:has(input:checked) {
	display: block;
	background: #28c76f;
	color: #fff;
}

.mini-selector > label {
	display: none;
	padding: 0.5rem;
	border-radius: 1rem;
	background: #eeeeef;
	white-space: nowrap;
	cursor: pointer;
}

.mini-selector > label > input{
	display: none;
}


.mini-selector > label:has(input:checked).delivered{
	background-color: #28c76f !important;
}
.mini-selector > label:has(input:checked).ordered{
	background-color: #00bad1 !important;
}
.mini-selector > label:has(input:checked).approval{
	background-color: #ff9f43 !important;
}
.mini-selector > label:has(input:checked).canceled{
	background-color: #ff4c51 !important;
}


.order-checker{
	white-space: nowrap;
}

.order-checker > label{
	font-weight: 300;
	font-size: 1rem;
	display: inline-block;
	margin-right: 1rem;
	cursor: pointer;
}

.order-checker > label:hover{
	text-decoration: underline;
}

.order-checker > label::before{
	content: ' ';
	display: inline-block;
	width: 1rem;
	height: 1rem;
	border-radius: 5px;
	border: 1px solid #00bad1;
	background-color: #fff;
	vertical-align: bottom;
	margin-right: 0.2rem;
}

.order-checker > label:has(input:checked)::before{
	background-color: #00bad1;
	background-image: url(../imgs/markw.png);
 	background-repeat: no-repeat;
 	background-size: contain;
 	background-position: 50%;
}

.order-checker > label > input{
	display: none;
}

.single-selector{
	position: relative;
	min-width: 120px;
	min-height: 1rem;
	background-color: #fff;
	z-index: 5;
}

.single-selector:has(button:empty){
	display: none;
}

.single-selector button{
	display: block;
	position: relative;
	outline: 0px solid #fff;
	border: 0px solid #fff;
	font-size: 0.9rem;
	background-color: inherit;
	padding-inline: 0;
	padding-block: 0;
	margin: 0;
	width: 100%;
	text-align: left;
	background-image: url(../imgs/arrow.png);
	background-repeat: no-repeat;
	background-size: 0.7rem;
	background-position: top 0.7rem right 0.5rem;
	border: 1px solid #f3f3f9;
	border-radius: 5px;
}
.single-selector button > label:has(input:checked){
	display: block;
}
.single-selector button:focus > label:has(input:checked){
	background-color: #9a91fa;
	color: #fff;
	background-image: url(../imgs/markw.png);
	background-repeat: no-repeat;
	background-size: 0.9rem;
	background-position: top 50% right 0.5rem;
}
.single-selector button > label{
	display: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.5rem 1.5rem 0.5rem 0.5rem;
	cursor: pointer;
	font-weight: 300;
}
.single-selector button > label > input{
	display: none;
}

.single-selector button:focus{
	position: absolute;
	top: -0.6rem;
	left: 0;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
}
.single-selector button:focus label{
	display: block;
}
.single-selector button:focus label:hover{
	background-color: #f2f4f6;
}


.sorts{
	position: relative;
	width: 120px;
	padding-top: 0.1rem;
}

.sorts button{
	display: block;
	position: relative;
	outline: 0px solid #fff;
	border: 0px solid #fff;
	font-size: 0.8rem;
	background: inherit;
	padding: 0;
	margin: 0;
	width: 100%;
}

.sorts button:focus{
	background: #fff;
	padding: 0.5rem 0.5rem;
	border-radius: 5px;
	border: 1px solid #f3f3f9;
	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
	position: absolute;
	top: -1.4rem;
	left: -0.5rem;
	z-index: 3;
	width: auto;
}

.sorts button:focus > label{
	display: block;
	font-size: 0.8rem;
	margin-bottom: 0.5rem;
	min-width: 100%;
	white-space: nowrap;
	background: #fff;
	color: #808390;
	
}

.sorts button > label:hover{
	background: #e9e7fd;
}

.sorts button > label:has(input:checked) {
	display: block;
	background: #e9e7fd;
	color: #1875f4;
	
	background-image: url(../imgs/sort.png);
 	background-repeat: no-repeat;
 	background-size: 1.2rem;
 	background-position: left 0.5rem top 50%;
	padding-left: 2rem;
}

.sorts button > label {
	display: none;
	padding: 0.6rem;
	border-radius: 0.5rem;
	background: #ebebed;
	cursor: pointer;
	width: 100%;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sorts button > label > input{
	display: none;
}

.table-big .row > div.remove,
.table-big .head-row > div.remove{
	display: none !important;
}


.product-data{
	min-height: 200px;
	display: flex;
	flex-wrap: wrap;
	column-gap: 2rem;
	row-gap: 2rem;
	justify-content: flex-start;
}

.product-data .page > .head{
	box-shadow: none;
	border-bottom: none;
	margin-bottom: 5px;
	padding: 0;
}
	
.product-data > div:nth-child(1){
	width: 25rem;
	border-right: 1px solid #f1f3f4;
	padding-right: 1rem;
}
.product-data > div:nth-child(2){
	width: 10%;
	border-right: 1px solid #f1f3f4;
	padding: 0 1rem;
}
.product-data > div:nth-child(3) {
	width: calc(90% - 30rem);
}
.product-data > div:nth-child(4){
	width: 100%;
	padding: 0;
}
.product-data > div > img{
	display: block;
	width: 100%;
	max-height: 200px;
	object-fit: contain;
	margin-bottom: 2rem;
}

.product-data .pies {
 	text-align: center;
 }

 .product-data .pies .pie {
 	display: block;
 	width: 120px;
 	height: 120px;
 	border-radius: 50%;
 	position: relative;
 	margin: 0px auto 30px auto;
 	color: #006a71;
 }

 .product-data .pies .pie::before {
 	content: attr(title);
 	padding-top: 125px;
 	top: 0px;
 	vertical-align: top;
 	display: block;
 	font-size: 0.75rem;
 	text-align: center;
 	font-weight: bold;
 	color: #000;
 }

 .product-data .pies .pie::after {
 	content: attr(count);
 	position: absolute;
 	padding-top: 20px;
 	width: 70px;
 	height: 70px;
 	top: 50%;
 	left: 50%;
 	background: #fff;
 	transform: translate(-50%, -50%);
 	font-weight: 900;
 	border-radius: 50%;
 	box-sizing: border-box;
 	font-size: 1.8rem;
 }


.prms > div{
	margin-bottom: 0.5rem;
	font-size: 1rem;
	font-weight: 300;
	display: flex;
	gap: 0.5rem;
	border-right: 1px solid #f3
}

.prms > div > span{
	flex: 1;
}
.prms > div > span:nth-child(1){
	font-weight: 400;
	color: #374e65;
}

.product-data .chart{
	flex: 1;
	height: 450px;
	padding-left: 1rem;
}

.product-data .chart > canvas{
	height: 450px;
}




.users {
	display: flex;
	flex-wrap: wrap;
	column-gap: 2rem;
	row-gap: 2rem;
	justify-content: flex-start;
}
.users > div{
	width: calc(20% - 1.6rem);
	position: relative;
	padding: 0;
	border-radius: 5px;
	padding: 20px 10px;
	text-align: center;
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
}
.users > div:has(.control){
	padding-bottom: 30px;
}
.users > div img{
	display: inline-block;
	width: 80px;
	height: 80px;
	#overflow: hidden;
	border-radius: 50%;
	margin-bottom: 1rem;
}
.users > div .id{
	position: absolute;
	top: 10px;
	left: 10px;
	color: #dbe7e7;
	font-weight: 400;
	font-size:0.8rem;
}
.users > div .name{
	color: #495057;
	font-weight: 400;
}
.users > div .role{
	color: #495057;
	font-weight: 200;
	font-size:0.8rem;
}


.users > div .menu{
	position: absolute;
	right: 1rem;
	top: 1rem;
	width: 1rem;
	height: 1rem;
	background-image: url(../imgs/points.png);
	background-repeat: no-repeat;
	background-size: 0.9rem;
	background-position: 50%;
	border: 0px solid #fff;
	background-color: #fff;
	cursor: pointer;
}

.users > div .menu > div{
	display: none;
	position: absolute;
	top: 1rem;
	right: 0;
	box-shadow: 0 1px 2px rgba(56, 65, 74, 0.15);
	border-radius: 5px;
	background-color: #fff;
	
}

.users > div .menu > div > div{
	white-space: nowrap;
	text-align: left;
	padding: 0.5rem 1rem;
	font-weight: 300;
}

.users > div .menu > div > div:hover{
	background-color: #e1e3e6;
}

.users > div .menu:focus > div{
	display: block;
}


.users > div .contacts{
	display: inline-block;
	margin: 1.5rem;
	text-align: left;
	max-width: 80%;
}

.users > div .contacts > div{
	margin-bottom: 0.5rem;
	word-break: break-all;
	font-weight: 300;
	font-size: 0.9rem;
}

.users > div .email{
	padding-left: 2rem;
	background-image: url(../imgs/socials/email.png);
	background-repeat: no-repeat;
	background-size: 0.9rem;
	background-position: top 0.1rem left 0.5rem;
	
}


.users > div .phone{
	padding-left: 2rem;
	background-image: url(../imgs/socials/phone.png);
	background-repeat: no-repeat;
	background-size: 0.9rem;
	background-position: top 0.1rem left 0.5rem;
	
}

.product-name{
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.9rem;
	font-weight: 300;
}

.product-name img{
	max-width: 40px;
	max-height: 40px;
}
.product-name span{
	display: block;
	padding: 0.2rem 0.5rem;
	background-color: #f3f6f9;
	font-size: 0.8rem;
	width: auto;
	max-width: fit-content;
	border-radius: 5px;
	font-weight: 300;
	margin-top: 0.25rem;
}


table.table-simple{
	width: 100%;
	border-collapse: collapse;
}

table.table-simple td{
	padding: 0.5rem;
	font-size: 1rem;
	font-weight: 300;
	max-width: 200px;
}

table.table-simple a{
	color: inherit;
	text-decoration: none;
}

table.table-simple a:hover{
	text-decoration: underline;
}

table.table-simple thead td{
	font-size: 0.8rem;
	font-weight: 400;
	border-bottom: 1px solid #e6e6f0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	
}



table.table-simple td.center{
	text-align: center;
}
table.table-simple td.left{
	text-align: left;
}
table.table-simple td.right{
	text-align: right;
}
table.table-simple tbody > tr:first-child > td{
	padding-top: 1rem;
}
.report {
	min-height: 600px;
}
.report .head{
	display: flex;
	align-items: center;
	margin: 1rem 0.5rem;
	gap: 1rem;
}

.report .head > div{
	flex: 0 0 auto;
	padding: 0.5rem 0;
}

.report .head > div.sorts{
	padding: 0;
}

.report .head > div:first-child{
	flex: 1;
}

.report .head h2{
	font-weight: 500;
	color: #374e65;
	font-size: 1.2rem;
	margin-block: 0;
}

.report .head > div.select-range{
	font-weight: 300;
	font-family: Roboto;
	font-size: 0.8rem;
	padding: 0.5rem 1rem;
	border: 1px solid #b6b6b6;
	border-radius: 5px;
}