
/* ----------------------------------------------------------- */
/* ---------------------- Waiter Dashboard ------------------- */
/* ----------------------------------------------------------- */

div.workplace.waiter p#info {
	float:left;
	width:75%;
	margin:1.1% 0 0 2%;
	padding:0.5% 2%;
	font-size:0.9em;
	color:#9434a7;
	background:#fff;
	border:1px dotted #9434a7;
}
div.workplace.waiter p#info {
	margin:0;
	padding:0.9% 2%;
	font-size:1em;
}
div.workplace.waiter div.workArea a#btnCancel, 
div.workplace.waiter div.showRecord #rightSide a#back{
	float:right;
	width:8%;
	margin:1% 2% 0 0;
	height:30px; line-height:30px;
	font-family:raspoutine;
	color:#666666;
	text-align:center;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	cursor:pointer;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));
	background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);
	background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
	background-color:#ededed;
	border:1px solid #dcdcdc;
}
div.workplace.waiter div.workArea a#btnCancel {
	width:12%;
	margin:0;
	height:38px; line-height:38px;
	font-size:1.05em;
}
div.workplace.waiter div.workArea div.theForm {
	float:left;
	width:96%;
	margin:1% 2%;
	background:#ffffff;
	display:none;
}
div.workplace.waiter div.workArea div.theForm {
	width:100%;
	margin:1% 0;
}
div.workplace.waiter div.workArea div.theForm div.record {
	float:left;
	width:100%;
	padding:1% 2.1% 1%;
	border-bottom:1px dotted #cccccc;
	box-sizing:border-box;
}
div.workplace.waiter div.workArea div.record .column {
	float:left;
	width:49%;
}
div.workplace.waiter div.workArea div.record .column.right {
	float:right;
}
div.workplace.waiter div.workArea div.record #leftPrt {
	float:left;
	width:30%;
	height:29px; line-height:29px; 
	color:#444444; 
	font-size:0.95em;
}
div.workplace.waiter div.workArea div.record #leftPrt {
	font-size:1em;
	height:36px; line-height:36px; 
}
div.workplace.waiter div.workArea div.record #rghtPrt {
	float:left;
	width:70%;
}
div.workplace.waiter div.theForm div.clear {
	float:left;
	width:100%;
	height:8px;
	border-bottom:1px dotted #cccccc;
}
div.workplace.waiter div.theForm div.clear.transparent {
	background:#f1f6f4;
}
div.workplace.waiter div.theForm div.clear.hidden {
	height:0px;
	visibility:hidden;
}
div.workplace.waiter div.theForm div.record span#red {
	position:relative;
	left:3px;
	color:#ff0000;
	font-weight:bold;
}
div.workplace.waiter div.theForm div.record span#red {
	left:5px;
}
div.workplace.waiter input.inputText, div.workplace.waiter select, div.workplace.waiter textarea {
	float:left;
	height:28px;
	padding-left:8px;
	color:#666666;
	border:1px solid #cccccc;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}
div.workplace.waiter input.inputText, div.workplace.waiter select, div.workplace.waiter textarea {
	font-size:1.05em;
	height:36px;
	border-radius:0px;
	-webkit-border-radius:0px;
	-moz-border-radius:0px;
}
div.workplace.waiter textarea {
	height:auto;
	padding:1% 0 0 1.5%;
}
div.workplace.waiter textarea {
	font-size:1.2em;
}
div.workplace.waiter input.inputText.second, div.workplace.waiter select.second {
	margin-left:10px;
}
div.workplace.waiter select {
	padding-left:8px;
	height:30px;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	background:#ffffff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wMdBhAJ/fwnjwAAAGFJREFUKM9jYBh+gBFKuzEwMKQwMDB8xaOWlYGB4T4DA0MrsuapDAwM//HgNwwMDDbYTJuGQ8MHBgYGJ1xOYGNgYJiBpuEpAwODHSF/siDZ+ISBgcGClEDqZ2Bg8B6CkQsAPRga0cpRtDEAAAAASUVORK5CYII=') 96% center no-repeat;
}
div.workplace.waiter select {
	height:38px;
}
div.workplace.waiter input.inputText:focus, div.workplace.waiter select:focus, div.workplace.waiter textarea:focus {
	outline:none;
	background-color:#eefaeb;
	border:1px solid #aaaaaa;
}
div.workplace.waiter div label.error {
	float:left;
	margin:0.7% 0 0;
	width:auto;
	padding:0 0 0 20px;
	font-size:0.95em;
	color:#ff0000;
	line-height:18px;
	background:url(../images/system/error_s.png) left 3px no-repeat;
	display:none;
}
div.workplace.waiter div label.error {
	line-height:32px;
	background:url(../images/system/error_s.png) left 12px no-repeat;
}
#workplace div.theForm label.error.inline {
	margin:0 0 0 2%;
}
div.workplace.waiter div.theForm button.btnSubmit {
	float:right;
	margin-left:2%;
	padding:0.7% 3%;
	font-size:1em;
}
div.workplace.waiter div.theForm button.btnSubmit {
	padding:0.9% 5%;
}

div.workplace.waiter div.topHeadBar {
	float:left;
	width:80%;
	padding:1% 10%;
	color:#ffffff;
	background:#7e2862;
}
div.workplace.waiter div.topHeadBar .logoWrap {
	float:left;
	width:49%;
	margin-top:0.5%;
}
div.workplace.waiter div.topHeadBar .userInfo {
	float:right;
	width:50%;
	text-align:right;
}
div.workplace.waiter div.topHeadBar .logoWrap img {
	position:relative;
	width:114px;
}
div.workplace.waiter div.topHeadBar div.icon {
	float:right;
	width:8%;
}
div.workplace.waiter div.topHeadBar div.infoRec {
	float:left;
	width:92%;
}
div.workplace.waiter div.topHeadBar div.icon img {
	float:left;

	width:100%;
	height:100%;
	margin:0;
	background-size:cover;
	background-position:center center;
	-webkit-border-radius:99em;
	-moz-border-radius:99em;
	border-radius:99em;
	box-sizing:border-box;
	cursor:pointer;
}
div.workplace.waiter div.topHeadBar div.icon img:hover .overlay {
	height:100%;
	background:#6d3179;
	cursor:pointer;
	border:1px solid #999;
}
div.workplace.waiter div.topHeadBar div.infoRec > label, 
div.workplace.waiter div.topHeadBar div.infoRec > a {
	float:left;
	width:98%;
	font-size:1.05em;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}
div.workplace.waiter div.topHeadBar div.infoRec > a {
	margin-top:3px;
	color:#fff;
}
/* --- */
div.workplace.waiter div.topMenu {
	float:left;
	width:80%;
	padding:0 10%;
	background:#ffd4f1;
}
div.workplace.waiter div.topMenu ul {
	position:relative;
	height:42px;
	list-style:none;
}
div.workplace.waiter div.topMenu > ul > li {
	float:left;
	min-width:auto;
	height:42px; line-height:42px;
	
	border-right:1px dotted #c6b5c9;
	cursor:pointer;
	box-sizing:border-box;
}
div.workplace.waiter div.topMenu > ul > li a {
	font-family:raspoutine;
	font-size:0.9em;
	color:#1a1a1a;
	display:block;
	padding:0 18px;
	text-decoration:none;
}
div.workplace.waiter div.topMenu > ul > li:first-child a {
	padding-left:0;
}
div.workplace.waiter div.topMenu > ul > li.active:first-child a {
	padding-left:18px;
}
div.workplace.waiter div.topMenu ul li:hover, 
div.workplace.waiter div.topMenu ul li.active {
	background:#ccc;
}
/* --- */
div.workplace.waiter div.workArea {
	float:left;
	width:80%;
	margin:0 10%;
	min-height:400px;
	font-family:leelawadee;
	font-size:1.05em;
}
div.workplace.waiter div.workArea div.theForm div.record .column.short {
	float:left;
	width:20%;
}
div.workplace.waiter div.workArea div.record .column.right {
	float:right;
}
div.workplace.waiter div.workArea div.record .column.long {
	width:79%;
}
div.workplace.waiter div.workArea div.record .column.full {
	width:100%;
}
div.workplace.waiter div.theForm div.record input#eatTable {
	display:none;
}
/* --- */
div.workplace.waiter div.theForm div.record div.tables {
	float:left;
	width:50%;
	min-height:38px; max-height:38px;
	overflow-y:scroll;border:1px solid #ccc;
}
div.workplace.waiter div.theForm div.record div.tables div.table {
	position:relative;
	float:left;
	width:25%;
	border:1px solid #777;
	border-left:none; border-top:none;
	box-sizing:border-box;
}
div.workplace.waiter div.theForm div.record div.tables div.table:nth-child(1), 
div.workplace.waiter div.theForm div.record div.tables div.table:nth-child(2), 
div.workplace.waiter div.theForm div.record div.tables div.table:nth-child(3), 
div.workplace.waiter div.theForm div.record div.tables div.table:nth-child(4) {
	border-top:1px solid #777;
}
div.workplace.waiter div.theForm div.record div.tables div.table:nth-child(5), 
div.workplace.waiter div.theForm div.record div.tables div.table:nth-child(9), 
div.workplace.waiter div.theForm div.record div.tables div.table:nth-child(13) {
	border-left:1px solid #777;
}
div.workplace.waiter div.theForm div.record div.tables div.table:first-child {
	border-left:1px solid #777;
}
div.workplace.waiter div.theForm div.record div.tables input[type="radio"] {
	display:none;
}
div.workplace.waiter div.tables input[type="radio"]:checked + div.klassType:before {
	position:absolute;
	top:10px; left:8px;
	font-family:FontAwesome;
	content:'\f00c';
	width:16px; height:16px;
	color:#f00;
	background-color:#fff;
	border:1px solid #7e2862;
}
div.workplace.waiter div.tables div.klassType {
	float:left;
	width:100%;
	height:36px;
	display:inline-block;
	text-align:center;
	cursor:pointer;
}
div.workplace.waiter div.tables div.klassType span {
	line-height:36px;
	font-size:1.05em;
	user-select:none;
}
div.workplace.waiter div.workArea div.theForm p#notFound {
	float:left;
	width:100%;
	line-height:38px;
	font-style:italic;
	color:#666;
	text-align:center;
}
/* --- */
div.workplace.waiter div.theForm div.record div.filter {
	float:right;
	width:34px; height:40px; line-height:40px;
	cursor:pointer; text-align:center;
	font-family:FontAwesome;
	color:#fff;
	background-color:rgb(126, 40, 98);
}
div.workplace.waiter div.theForm div.record div.filter.property::before {
	content:"\f015";
}
div.workplace.waiter div.theForm div.record div.filter.book::before {
	content:"\f007";
}
div.workplace.waiter div.theForm div.record div.filter.book {
	color:#333;
	background-color:rgba(255, 168, 10, 0.5);
}
div.workplace.waiter div.theForm div.record div.selects {
	float:right;
	width:40%;
	margin-left:20px;
}
div.workplace.waiter div.theForm div.record div.selects select {
	margin:0;
	width:49%; 
}
div.workplace.waiter div.theForm div.record div.selects select.second {
	margin-left:2%;
}
div.workplace.waiter div.theForm div.record div.selects select#slcClient {
	width:100%;
	display:none;
}
div.workplace.waiter div.theForm div.record div.packages {
	float:left;
	width:100%;
	min-height:30px; max-height:95px;
	overflow-y:scroll;
}
div.workplace.waiter div.theForm div.record div.packages div.package {
	float:left;
	position:relative;
	width:9%; height:95px;
	margin-left:1%; margin-bottom:1.5%;
	border:1px solid #999;
	text-align:center;
	overflow:hidden;
	box-sizing:border-box;
	cursor:pointer;
}
div.workplace.waiter div.theForm div.record div.packages div.package:first-child, 
div.workplace.waiter div.theForm div.record div.packages div.package:nth-child(11), 
div.workplace.waiter div.theForm div.record div.packages div.package:nth-child(21) {
	margin-left:0;
}
div.workplace.waiter div.theForm div.record div.packages div.package input[type="radio"] {
	display:none;
}
div.workplace.waiter div.theForm div.record div.packages div.package div.imgWrap {
	float:left;
	width:193px; height:65px;
	overflow:hidden;
}
div.workplace.waiter div.theForm div.record div.packages div.package img {
	position:relative;
	width:100%; top:-30px;
	opacity:0.8;
	filter:alpha(opacity=80);
	cursor:pointer;
}
div.workplace.waiter div.theForm div.record div.packages div.package:hover img, 
div.workplace.waiter div.theForm div.record div.packages div.package:focus img {
	opacity:1;
	filter:alpha(opacity=100);
}
div.workplace.waiter div.theForm div.record div.packages div.package span {
	position:absolute;
	left:0; bottom:0;
	width:100%; height:30px; line-height:30px;
	font-size:0.9em;
	background:#FFFFFF;
	border-top:2px solid #999;
	box-sizing:border-box;
	cursor:pointer;
}
/* --- */
div.workplace.waiter div.theForm div.record div.mealPart {
	float:left;
	width:50%;
	height:270px;
	border:1px solid #bbb;
	box-sizing:border-box;
	overflow-y:scroll;
}
div.workplace.waiter div.theForm div.record div.mealPart.center {
	width:30%;
	margin-left:1%;
}
div.workplace.waiter div.theForm div.record div.mealPart.right {
	float:right;
	width:17.5%;
	overflow:hidden;
}
div.workplace.waiter div.workArea div.theForm div.mealPart div.mealItem {
	float:left;
	width:100%;
	border-bottom:1px dotted #ccc;
	box-sizing:border-box;
}
div.workplace.waiter div.workArea div.theForm div.mealItem div.itemPart {
	float:left;
	width:50%;
	padding:10px 10px;height:65px;
	color:#777;
	border-right:1px dotted #ccc;
	box-sizing:border-box;
}
div.workplace.waiter div.workArea div.theForm div.mealItem div.itemPart.center {
	width:29%;
}
div.workplace.waiter div.workArea div.theForm div.mealItem div.itemPart.right {
	width:21%;
	border:none;
}
div.workplace.waiter div.workArea div.theForm div.mealItem div.itemPart:first-child {
	cursor:pointer;
}
div.workplace.waiter div.workArea div.theForm div.mealItem img {
	float:left;
	width:18%;
	border:1px solid #bbb;
}
div.workplace.waiter div.workArea div.theForm div.mealItem p {
	float:left;
	width:100%;
	margin-bottom:0.5%;
	color:#333;
	font-size:0.85em;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
div.workplace.waiter div.workArea div.theForm div.mealItem p.meal {
	float:none;
	position:relative;
	width:73%;
	margin-left:23%;
}
div.workplace.waiter div.workArea div.theForm div.mealItem p.meal.item {
	font-size:0.95em;
	font-weight:600;
}
div.workplace.waiter div.workArea div.theForm div.mealItem span.qty {
	float:left;
	margin-top:5px;
	margin-right:10px;
	height:32px; line-height:32px;
}
div.workplace.waiter div.workArea div.theForm div.mealItem input[type="number"] {
	float:left;
	width:50%;
	height:28px;
	padding-left:10px;
	margin-top:6px;
}
div.workplace.waiter div.workArea div.theForm div.mealItem a.addToCart {
	float:left;
	width:86%;
	margin-top:5px;
	height:30px; line-height:30px;
	text-align:center;
	font-size:1.25em;
	background-color:#eee;
	border:1px solid #aaa;
	cursor:pointer;
}
div.workplace.waiter div.workArea div.theForm div.mealItem a.addToCart:hover, 
div.workplace.waiter div.workArea div.theForm div.mealItem a.addToCart:focus {
	background-color:#7e2862;
	color:#fff;
}
/* --- selected meal --- */
div.workplace.waiter div.workArea div.theForm div.slctedMeal {
	float:left;
	width:100%;
	border-bottom:1px solid #bbb;
}
div.workplace.waiter div.workArea div.theForm div.slctedMeal.header {
	background-color:#ffd4f1;
}
div.workplace.waiter div.workArea div.theForm div.slctedMeal div.selected {
	position:relative;
	float:left;
	width:65%;
	padding:0 15px; 
	height:44px; line-height:44px;
	box-sizing:border-box;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
div.workplace.waiter div.workArea div.theForm div.slctedMeal div.selected.quantity {
	width:20%;
	border-left:1px solid #bbb;
}
div.workplace.waiter div.workArea div.theForm div.slctedMeal div.selected.remove {
	width:15%;
	padding:0;
	text-align:center;
	font-size:1.1em;
	color:#c00;
	border-left:1px solid #bbb;
	cursor:pointer;
}
div.workplace.waiter div.workArea div.theForm div.slctedMeal div.selected.remove:focus, 
div.workplace.waiter div.workArea div.theForm div.slctedMeal div.selected.remove:hover {
	background-color:#eee;
}
div.workplace.waiter div.workArea div.theForm div.slctedMeal div.selected img {
	position:relative;
	width:42px;
}
div.workplace.waiter div.workArea div.theForm div.slctedMeal div.selected span {
	position:absolute;
	width:80%;
	margin-left:7px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
/* --- */
div.workplace.waiter div.workArea div.theForm div.mealPart.right > div {
	float:left;
	width:100%;
	padding:10px;
	box-sizing:border-box;
}
div.workplace.waiter div.theForm.mealOrder div.record div.switch.direct {
	width:45px;
	height:29px;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
}
div.workplace.waiter div.theForm.mealOrder div.record div.switch.direct:before {
	width:45px;
	height:29px;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
}
div.workplace.waiter div.theForm.mealOrder div.record div.switch.direct:after {
	height:23px;
	width:19px;
	border-radius:0px;
	-webkit-box-shadow:0 2px 3px #bbb;
	box-shadow:0 2px 3px #bbb;
} 
div.workplace.waiter div.theForm.mealOrder div.record div.switch.direct.switchOn:after {
	left:24px !important;
}
div.workplace.waiter div.workArea div.theForm div.mealPart.right > div label {
	float:left;
	width:100%;
	padding-bottom:5px;
	font-size:0.95em;
	color:#444;
}
div.workplace.waiter div.workArea div.theForm div.mealPart.right > div input#directRcpt {
	display:none;
}
div.workplace.waiter div.workArea div.theForm div.mealPart.right > div input[type="text"] {
	width:80%;
	height:30px;
	padding-left:10px;
}
div.workplace.waiter div.workArea div.theForm div.mealPart.right > div #btnSave {
	float:left;
	width:100%;
	margin:0;
	border:none;
	height:100px;
	background:url(../images/system/printImage.png) no-repeat center;
	background-size:120px;
	cursor:pointer;
}
div.workplace.waiter div.workArea div.theForm div.mealPart.right > div #btnUpdate {
	float:left;
	width:100%;
	border:none;
	height:60px;
	font-family:raspoutine;
	font-size:1.1em;
	background-size:120px;
	cursor:pointer;
}
/* --- update meal order, waiter form --- */
div.workplace.waiter div.workArea div.theForm div.record div.displayInfo {
	float:left;
	width:100%;
	margin:0.5% 0 0;
}
div.workplace.waiter div.workArea div.theForm div.record div.displayInfo p {
	float:left;
	width:100%;
	min-height:32px; line-height:32px;
	font-size:0.9em;
	border:1px dotted #999999;
	border-bottom:none;
	box-sizing:border-box;
}
div.workplace.waiter div.workArea div.theForm div.record div.displayInfo p:last-child {
	border-bottom:1px dotted #999999;
}
div.workplace.waiter div.workArea div.theForm div.record div.displayInfo p label {
	float:left;
	width:25%;
	padding-left:3%;
	box-sizing:border-box;
}
div.workplace.waiter div.workArea div.theForm div.record div.displayInfo p span {
	float:left;
	width:74%;
	padding-left:3%;
	font-style:italic;
	border-left:1px dotted #999999;
	box-sizing:border-box;
}
div.workplace.waiter #loadPage div.suggest #time {
	float:left;
	width:90%;
	margin:0 2.5%;
	padding-left:6%;
	padding-bottom:1%;
	min-height:42px;
	background:url(../images/system/timeline-bg.png) no-repeat;
}
div.workplace #loadPage #lastActivity {
	float:left;
	width:96%;
	margin-top:1%;
	padding:1% 2%;
	border:1px dotted #999999;
	background:#fff;
}
div.workplace #loadPage #lastActivity input {
	float:left;
	width:20%;
	height:30px;
	margin-right:15px;
	padding:0 0 0 10px;
	color:#666666;
	border:1px solid #cccccc;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
div.workplace #loadPage #lastActivity input:focus {
	outline:none;
	background:#eefaeb;
	border:1px solid #aaaaaa;
}
div.workplace #loadPage #lastActivity a.print {
	float:left;
	width:19.5%;
	height:30px; line-height:30px;
	text-align:center;
	color:#fff;
	font-size:0.9em;
	text-decoration:none;
	background:#390644;
	border:1px solid #ccc;
	cursor:pointer;
}
div.workplace #loadPage #lastActivity a.print::before {
	position:relative;
	left:-5px;
	font-family:FontAwesome;
	content:"\f02f";
	font-size:1.1em;
}