#header_row {text-align:center}
#header {background-color:#F26334}
#header_brand {margin: 0 auto; max-width:980px;padding-top:30px; padding-bottom:10px;text-align:left}
#footer {color:#77871e}

.navbar {
    padding: 0;
}

.navbar-brand {
    font-size: 23px;
}

.navbar-light .navbar-brand {
    color: #77871e;
}

.navbar-light .nav-link {
    color: #77871e;
}

.label-online{
	background-color:  #77871e;
	border: 0px;
}

.label-site{
	background-color:  #77871e;
}

p, div {font-size:14px}
/* label, .col-form-label {font-size:18px;font-weight:normal} */
p.fieldnote {font-size:12px}
a {color:#3333ff}
.container-medium {margin: 0 auto;max-width:980px;text-align:left}
.container-full {margin: 0 auto;max-width:100%;text-align:left}
/*#tbbodyalert, #tbbodyalertinfo {position:absolute; top:5px; width:100%; text-align:left}*/

/*.navbar-default {background-color:#77871e;	background-image: none;	background-repeat: no-repeat;}
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {color:#fff}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
	color:#fff; background-color:#77871e;
}
.navbar-brand {padding:6px 0 0 12px;position:relative}

.btn-primary {color: #fff;background-color: #77871e;border-color: #485112;}
.btn-primary:hover, .btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .open > .dropdown-toggle.btn-primary {background-color: #485112;border-color: #485112;}
.btn-primary.disabled, .btn-primary.disabled.active, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled:focus, .btn-primary.disabled:hover, .btn-primary[disabled], .btn-primary[disabled].active, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled]:focus, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary.active, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:hover {
	background-color: #9eb427; border-color: #77871e;}
*/
	
/* margins */
.mtop5 {margin-top:5px;}
.mtop10 {margin-top:10px;}
.mtop20 {margin-top:20px;}
.mtop30 {margin-top:30px;}
.mtop50 {margin-top:50px;}
.mbot5 {margin-bottom:5px;}
.mbot10 {margin-bottom:10px;}
.mbot20 {margin-bottom:20px;}
.mbot30 {margin-bottom:30px;}
.mbot50 {margin-bottom:50px;}
.mleft5 {margin-left:5px;}
.mright5 {margin-right:5px;}

/* padding */
.pad2 {padding:2px;}
.pad5 {padding:5px;}
.pad10 {padding:10px;}
.pad20 {padding:20px;}
.padleft10 {padding-left:10px;}
.padleft20 {padding-left:20px;}
.padleft30 {padding-left:30px;}
.padleft50 {padding-left:50px;}
.padleft0 {padding-left:0px;}
.padright5 {padding-right:5px;}
.padright10 {padding-right:10px;}
.padright20 {padding-right:20px;}
.padright30 {padding-right:30px;}
.padtop10 {padding-top:10px;}
.padtop20 {padding-top:20px;}
.padbot20 {padding-bottom:20px;}

/* rounding */
.rounded10 {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-khtml-border-radius:10px;}
.rounded5, .radius5 {border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;}
.bordergray {border:1px solid #dadada}
.bordergray3 {border:3px solid #dadada}
.borderorange {border:1px solid #ffbd00}

/* general layout and color */
.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
.white {color:#fff;}
.gray {color:#636363;}
.navy {color:#3366cc;}
.black {color:#000;}
.size8 {font-size: 8px;}
.size10 {font-size: 10px;}
.size12 {font-size: 12px;}
.size14 {font-size: 14px;line-height:16px;}
.size16 {font-size: 16px;line-height:18px;}
.size18 {font-size: 18px;line-height:20px;}
.size20 {font-size: 20px;line-height:22px;}
.size32 {font-size: 32px;}
.height20 {line-height: 20px;}
.height24 {line-height: 24px;}
.h40 {height:40px}
.w16 {width:16px}
.w160 {width:160px}
.bold {font-weight:bold}
.plain {font-weight:normal}
.italic {font-style:italic}
.hide {display:none}
.show {display:block}
.required {color:#dd1111; font-size:10px;}
.fullwidth {width:100%}
.maxwidth1k {max-width:1000px}
.maxwidth13 {max-width:1300px}
.up {color:#3f9066; font-weight:bold;}
.down {color:#9d3831; font-weight:bold;}
.animate {-webkit-transition:height 0.2s;-moz-transition:height 0.2s;transition:height 0.2s;}
.fieldnote {color:#8a8a8a;}
.ferrmsg {color:#ff3333;padding-left:10px;font-size:12px;display:none}
.block{display: block;}
.inline{display: inline;}
.inline-block{display:inline-block}

/* background colors */
.bgblue {background-color: #ebf2f9}
.bggray {background-color: #f2f2f2}
.bgnavy {background-color:#3366cc;}
.bgred {background-color:#dc3912;}
.bgyellow {background:#ffffdd;}

/* buttons */
.gbutton, input[type='submit'] {
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgba(0,0,0,0.2)),color-stop(1, rgba(255,255,255,0.2)));
	padding:8px 20px; font-size:16px; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.btgreen {color: #fff; border: solid 1px #4e7109; background: #81ab2d;}
.btgreen:hover {background: #64881c;color: #fff;}

/* floating */
.floatleft {float:left}
.floatright {float:right}
.clear {clear:both}

/* box and border */
.box {border:1px solid #e8eeff; background:#f6ffff;}
.boxgray {border:1px solid #ccc}

/* side bar */
.body-container {padding:8px 6px 8px 12px}
.body-container-center50 {padding:8px 6px 8px 12px;width:50%; margin:0 auto}
.center50 {width:50%; margin:0 auto}

/* tooltip */
.tooltip-navy + .tooltip > .tooltip-inner {background-color: #335d8e;}
.tooltip-navy + .tooltip > .tooltip-arrow {border-bottom-color: #335d8e;border-top-color: #335d8e;}

/* tags */
/* .badge{border-radius: 2px; font-size:14px; font-weight:normal} */
.label-info { background-color: #C7EFFF; border: solid #abc 1px;}
.label-info-action { background-color: #FFFBBF; border: solid #abc 1px;}
.tags {padding: 4px 6px;color: #555;border-radius: 4px;max-width: 100%;}
.tags .tag {margin-right: 5px; margin-bottom: 5px;color: #333; float:left;}
.remove-tag { color: #aaa; margin-left: 10px;cursor: pointer;font-weight: bold;}
.remove-tag:after {content: "x";padding: 0px 2px;}
.remove-tag:hover {text-decoration: none;}

.btn-circle {width:30px;height:30px;text-align:center;padding:6px 0;font-size:12px;line-height:1.428;border-radius:15px;}
.btn-circle .btn-lg {width:50px;height:50px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:25px;}
.btn-circle .btn-exlg {width:100px;height:100px;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:25px;}

/* auto-complete */
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 5px 5px; white-space: nowrap; overflow: hidden;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #3399FF; }

/* select option */
.selectoption option {
    font-size: 18px;
    padding: 10px;
}

.bootstrap-dialog .modal-header.bootstrap-dialog-draggable {
	cursor: move;
}

#item_table {
	overflow-y: auto;
}
#print_content, #template_content, #gst_template_content, #gst_full_tax_template_content, 
#kitchen_template_content, #order_template_content, #order_gst_template_content, 
#order_ko_template_content, #cust_order_template_content, #page_template_content, #print_qrcode {
	display: none;
}
.td_onclick_cursor {
	cursor: pointer;
}

/* location layout css */
.location-layout-div{
	width: 970px;
	height: 555px;
	background-color: #92A525;
	padding: 5px;
	font-size: 12px;
    font-family: tahoma,arial,verdana,sans-serif;
	margin-left:auto; 
    margin-right:auto; 
}
.x-table-layout{
	overflow: auto;
    width: 960px;
    height: 462px;
    left: 0px;
    top: 0px;
    background-color: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
}
.layout_empty {
	width: 80px;
	height: 46px;
	text-align: center;
	margin: 2px;
}
.layout-border-line {
	border-right: 1px solid #dcdcdc;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgb(220, 220, 220);
    
    border-bottom: 1px solid #dcdcdc;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(220, 220, 220);
}
.layout_available {
	-moz-box-shadow:inset 0px 1px 0px 0px #caefab;
	-webkit-box-shadow:inset 0px 1px 0px 0px #caefab;
	box-shadow:inset 0px 1px 0px 0px #caefab;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
	background:-moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
	background-color:#77d42a;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #268a16;
	display:inline-block;
	color:#306108;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:10px 12px;
	text-decoration:none;
	text-shadow:1px 1px 0px #aade7c;
	width: 80px;
	cursor: pointer;
}.layout_available:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
	background:-moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
	background-color:#5cb811;
}.layout_available:active {
	position:relative;
	top:1px;
}
.layout_inuse {
	-moz-box-shadow:inset 0px 1px 0px 0px #f29c93;
	-webkit-box-shadow:inset 0px 1px 0px 0px #f29c93;
	box-shadow:inset 0px 1px 0px 0px #f29c93;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fe1a00), color-stop(1, #ce0100) );
	background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fe1a00', endColorstr='#ce0100');
	background-color:#fe1a00;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #d83526;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:12px 12px;
	text-decoration:none;
	text-shadow:1px 1px 0px #b23e35;
	width: 80px;
	cursor: pointer;
}.layout_inuse:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ce0100), color-stop(1, #fe1a00) );
	background:-moz-linear-gradient( center top, #ce0100 5%, #fe1a00 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ce0100', endColorstr='#fe1a00');
	background-color:#ce0100;
}.layout_inuse:active {
	position:relative;
	top:1px;
}
.layout_inuse_massage {
	font-size:12px;
	padding:5px 2px;
}
.layout_inuse_end {
	-moz-box-shadow:inset 0px 1px 0px 0px #fed897;
	-webkit-box-shadow:inset 0px 1px 0px 0px #fed897;
	box-shadow:inset 0px 1px 0px 0px #fed897;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
	background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d', endColorstr='#d29105');
	background-color:#f6b33d;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #eda933;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:12px;
	font-weight:bold;
	padding:5px 2px;
	text-decoration:none;
	text-shadow:1px 1px 0px #cd8a15;
	width: 80px;
	cursor: pointer;
}.layout_inuse_end:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
	background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
	background-color:#d29105;
}.layout_inuse_end:active {
	position:relative;
	top:1px;
}

/* day-end closing css */
.day_end_closing_div{
	width: 710px;
	height: auto;
	background-color: #D6ECC1;
	font-weight: bold;
    font-size: 16px;
    font-family: tahoma,arial,verdana,sans-serif;
	margin-left:auto; 
    margin-right:auto; 
    padding: 15px 15px;
}

.day_end_closing_table{
	overflow: auto;
    width: 700px;
    margin-left: 40px;
    top: 0px;
    font-size: 14px;
    
    text-align:center; 
    margin-right:auto; 
}
.day_end_closing_table th{
	width: 80px;
}
.normal_td{
	width: 100px;
	padding: 3px;
	font-weight: normal;
}
.sales_activity_content{
	padding: 5px;
	padding-left: 50px;
	font-weight: normal;
	text-align: left;
}
.sales_activity_amount{
	padding: 5px;
	padding-right: 150px;
	font-weight: normal;
	text-align: right;
}
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.sphere_border_radius_50 {
	border-radius: 50%;
}
.sphere_border_radius_25 {
	border-radius: 25%;
}
.sphere {
  height: 30px;
  width: 30px;
  text-align: center;
  vertical-align: middle;
/*   font-size: 500%; */
  position: relative;
/*   box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; */
  box-shadow: inset -1px -1px 10px #000, 1px 0px 2px black, inset 0px 0px 1px black;
  display: inline-block;
  cursor: pointer;
  top: 9px;
/*   margin: 5%; */
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  transform: rotate(40deg);
}

.sphere_border_radius_50::after {
	border-radius: 50%;
}
.sphere_border_radius_25::after {
	border-radius: 25%;
}

.green_background {
  background-color: green;
}
.grey_background {
  background-color: grey;
}

/* Refer to main-1.0.js */
.req { }
.required {color:#dd1111; font-size:18px; font-weight: bold;}