@font-face {
	font-family: itim;
	src: url(Itim-Regular.ttf);
}

:root {
	--body-background-color: rgb(231, 211, 231);
	--order-detail-prepare-color: #bbe6bb;
	--order-detail-cancel-color: #f19c9c;
	--item-row-bgcolor-0: #bbe6bb;
	--item-row-bgcolor-1: #a6dcdd;
	--item-row-bgcolor-disable: #b0b0b0;
	--nav-menu-bgcolor: #f18fbf;
	--nav-menu-hover-color: #6691bd;
	--nav-menu-text-color: #303030;
	--nav-menu-logo-color: #303030;
	--nav-menu-icon-color: #000000;
	--float-button-bgcolor: #f296d233;
	--vegetable-status-active: #a5dcbc;
	--vegetable-status-inactive: #bcbcbc;
}

/*ให้ตัวอักษรใหญ่ขึ้นหน่อย*/
* {
	font-size: 1.03em;
}

body {
	padding: 15px;
	background-color: var(--body-background-color);
}

/* print only */
.print-only,
.print-only * {
	display: none !important;
}

/* ไม่ได้ใช้ พยายามจะให้ฟอร์มอยู่บรรทัดเดียวกัน ใช้ col ได้เลยแล้ว */
.form-group {
	margin-bottom: 1rem;
}

.form-inline .form-control {
	display: inline-block;
	width: auto;
	vertical-align: middle;
}

.form-row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -5px;
	margin-left: -5px;
}

.form-row>.col {
	padding-left: 5px;
	padding-right: 5px;
}

/* button toTop toBottom */
.float-button-to-top {
	position: fixed;
	right: 8px;
	top: 8px;
	background-color: var(--float-button-bgcolor);
	padding: 13px;
	padding-top: 8px;
	padding-bottom: 8px;
	display: none;
}

.float-button-to-bottom {
	position: fixed;
	right: 8px;
	bottom: 8px;
	background-color: var(--float-button-bgcolor);
	padding: 13px;
	padding-top: 8px;
	padding-bottom: 8px;
	display: none;
}

/* รายการสั่งใหม่ */
.order-detail-order-new {
	/* หน้าจอแสดงสี พิมพ์แสดงแค่ขอบ */
	background-color: #0dcaf0;
}

/* สีข้อมูลรายงานจัดแล้ว */
.order-detail-order-prepare {
	/* หน้าจอแสดงสี พิมพ์แสดงแค่ขอบ */
	background-color: #0dcaf0;
}

/* สีแถบสถานะรายการสั่งซื้อ */
.order-detail-prepare-completed {
	background-color: var(--order-detail-prepare-color);
}

.order-detail-status-cancel {
	/* สีแดงที่หน้าจอ ขีดทับเวลาพิมพ์ */
	background-color: var(--order-detail-cancel-color);
}

/* รายการในแอดมิน สลับสีแต่ล่ะแถว */
.item-row-bgcolor-0 {
	background-color: var(--item-row-bgcolor-0);
}

.item-row-bgcolor-1 {
	background-color: var(--item-row-bgcolor-1);
}

.item-row-bgcolor-disable {
	background-color: var(--item-row-bgcolor-disable);
	opacity: 0.2;
}

/* ขนาดตัวอักษร Toast */
.jq-toast-single {
	font-size: 18px;
}

/* เวลาโหลด ให้จอมืดลง */
#dim-overlay {
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* หน้าจัดผัก สถานะผัก สีพื้น */
.vegetable-status-active {
	background-color: var(--vegetable-status-active);
}

.vegetable-status-inactive {
	background-color: var(--vegetable-status-inactive);
}

/* จะปรับราคา และจำนวนสินค้าได้ */
.order-detail-item-amount {
	background-color: rgba(0, 0, 255, 0.03);
}

.order-detail-item-price {
	background-color: rgba(255, 0, 0, 0.05);
}


/* NAV MENU */
.navigation {
	height: 40px;
	background: var(--nav-menu-bgcolor);
	font-family: itim, sans-serif;
	font-weight: 400;
	font-style: normal;
	opacity: 0.88;
}

.brand {
	position: absolute;
	padding-left: 10px;
	float: left;
	line-height: 40px;
	text-transform: uppercase;
	font-size: 1.2em;
}

.brand a,
.brand a:visited {
	color: var(--nav-menu-logo-color);
	text-decoration: none;
}

.nav-container {
	max-width: 1000px;
	margin: 0 auto;
}

nav {
	float: right;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav ul li {
	float: left;
	position: relative;
}

nav ul li hr {
	background: var(--nav-menu-bgcolor);
}

nav ul li a,
nav ul li a:visited {
	display: block;
	padding: 0 20px;
	line-height: 30px;
	background: var(--nav-menu-bgcolor);
	color: var(--nav-menu-text-color);
	text-decoration: none;
	font-size: 1.0em;
}

nav ul li a:hover,
nav ul li a:visited:hover {
	background: var(--nav-menu-hover-color);
	color: var(--nav-menu-text-color);
}

nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
	padding-left: 4px;
	content: " ▾";
}

nav ul li ul li {
	min-width: 190px;
}

nav ul li ul li a {
	padding: 15px;
	line-height: 20px;
}

.nav-dropdown {
	position: absolute;
	display: none;
	z-index: 1;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.nav-mobile {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	background: var(--nav-menu-bgcolor);
	height: 40px;
	width: 70px;
}

/* MOBILE CSS */
@media only screen and (max-width: 798px) {
	.nav-mobile {
		display: block;
	}

	nav {
		width: 100%;
		padding: 40px 0 15px;
	}

	nav ul {
		display: none;
	}

	nav ul li {
		float: none;
	}

	nav ul li a {
		padding: 15px;
		line-height: 15px;
	}

	nav ul li ul li a {
		padding-left: 30px;
	}

	.nav-dropdown {
		position: static;
	}
}

/* TABLET - DESKTOP CSS */
@media screen and (min-width: 799px) {
	/* .nav-list {
		display: block !important;
	} */

	.nav-mobile {
		display: block;
	}

	nav {
		width: 100%;
		padding: 40px 0 15px;
	}

	nav ul {
		display: none;
	}

	nav ul li {
		float: none;
	}

	nav ul li a {
		padding: 15px;
		line-height: 15px;
	}

	nav ul li ul li a {
		padding-left: 30px;
	}

	.nav-dropdown {
		position: static;
	}
}

/* .order-detail-order-new {

} */

#nav-toggle {
	position: absolute;
	left: 15px;
	top: 20px;
	cursor: pointer;
	/* padding: 0px 5px 16px 0px; */
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
	cursor: pointer;
	border-radius: 1px;
	height: 4px;
	width: 35px;
	background: var(--nav-menu-icon-color);
	position: absolute;
	display: block;
	content: "";
	transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
	top: -10px;
}

#nav-toggle span:after {
	bottom: -10px;
}

#nav-toggle.active span {
	background-color: transparent;
}

#nav-toggle.active span:before,
#nav-toggle.active span:after {
	top: 0;
}

#nav-toggle.active span:before {
	transform: rotate(45deg);
}

#nav-toggle.active span:after {
	transform: rotate(-45deg);
}

article {
	max-width: 1000px;
	margin: 0 auto;
	padding: 10px;
}


/* PRINTER CSS */
@media print {
	body {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		background-color: white !important;
		margin: 0px !important;
		padding: 0px !important;
	}

	.no-print,
	.no-print * {
		display: none !important;
	}

	.print-only,
	.print-only * {
		display: block !important;
	}

	/* ออเดอร์ ส่วนหัว พิมพ์แยกบรรทัด */
	.order-detail-row-header {
		width: 100% !important;
		text-align: left !important;
		padding-left: 0px !important;
		margin-left: 0px !important;
		/* background-color: #6691bd; */
	}

	.order-detail-row-header-col {
		width: 100% !important;
		text-align: left !important;
		padding-left: 5px !important;
		margin-left: 0px !important;
		/* font-size: large; */
		/* background-color: #6691bd; */
	}

	/* รายการสั่งใหม่ */
	.order-detail-order-new {
		background-color: white;
		border: #777777;
		border-style: dashed;
	}

	/* สีข้อมูลรายงานจัดแล้ว */
	.order-detail-order-prepare {
		/* หน้าจอแสดงสี พิมพ์แสดงแค่ขอบ */
		background-color: white;
		border: #777777;
		border-style: dashed;
	}

	/* สีแถบสถานะรายการสั่งซื้อ */
	.order-detail-prepare-completed {
		background-color: white;
		border-bottom: 1px dashed black;
		/* border-style: dashed; */
		/* no-background */
	}

	/* รายการไม่ได้จัด */
	.order-detail-prepare-normal {
		background-color: #e5e5f7;
		opacity: 0.4;
		background: repeating-linear-gradient(45deg, #c0c0c0, #c0c0c0 2px, #ffffff 2px, #ffffff 35px);
	}

	/* รายการไม่มีของ */
	.order-detail-status-cancel {
		/* สีแดงพิมพ์ไม่ได้ ขาว-ดำ */
		background-color: #e5e5f7;
		opacity: 0.4;
		background: repeating-linear-gradient(135deg, #f03232, #ec2e2e 2px, #ffffff 2px, #ffffff 35px);
	}
}