@font-face {font-family: KhmerMuol;src: url(../font/KhmerOSmuollight.ttf);}
@font-face {font-family: KhmerOS;src: url(../font/KhmerOScontent.ttf);}
@font-face {font-family: Khmerfreehand;src: url(../font/KhmerOSfreehand.ttf);}

@-webkit-keyframes toggleUp {0% {top: 0px;} 25% {top: -5px;} 50% {top: 0px;} 75% {top: -5px;} 100% {top: 0px;} }
@keyframes toggleUp { 0% {top: 0px;} 25% {top: -5px;} 50% {top: 0px;} 75% {top: -5px;} 100% {top: 0px;} }
*{font-family: KhmerOS;	font-size:14px;	color:#666;	border:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
body{ color: #666;padding: 0px !important;margin: 0px !important;font-size: 14px;direction: ltr; overflow:hidden;}
h1,h2,h3,h4,h5,h6{ font-weight:300;  margin:0px !important; padding:0px !important;}
h1{ font-size:28px;} h2{ font-size:26px;} h3{ font-size:24px;}  h3{ font-size:24px;} h4{ font-size:20px;}  h5{ font-size:18px;} h6{ font-size:16px;}
a:hover,a{ text-decoration: none !important; cursor:pointer; }
button:disabled{ cursor:default !important; background-color:rgb(215, 215, 215) !important; }


.silver:hover{ position: relative; -webkit-animation: toggleUp .4s; animation: toggleUp .4s; }
.float-left{float:left;}
.float-right{float:right;}
.clearfloat{clear:both;}
.top-sm{ margin-top:30px;}

.slogen{ font-size:32px; padding:25px 0px; color:#c6117d; font-weight:bold; float:right;}
.logo{ float:left; height:130px;}
.white{ color:#FFF !important;}
.black{ color:#333 !important;}
.gray{ color:#aaa !important;}
.red{ color:#FF0000 !important;}
.blue{ color:#204b90 !important;}
.yellow{ color:#d2ba06 !important;}
/*.green{ color:#0AAEA2 !important;}*/
.lightgreen{ color:#0AAE59 !important;}
.purple{ color:#9c27b0 !important;}
.green{ color:#268b32 !important;}

.bglightgreen{ background-color:#0AAEA2 !important; color:#FFF;}
.bggreen{ background-color:#268b32 !important; color:#FFF;}
.bgwhite{ background-color:#FFF !important; color:#666;}
.bgblue{ background-color:#204b90 !important; color:#FFF;}
.bgred{ background-color:#d84a38 !important; color:#FFF;}
.bgpurple{ background-color:#9c27b0 !important; color:#FFF;}
.bggray{ background-color:#aaa !important; color:#666;}
.bgblack{ background-color:#666 !important; color:#FFF;}

.btn{line-height: 10px; height:28px; opacity: 1; font-size: 14px; padding: 8px 10px; cursor: pointer; border: none; background-color: #ddd;}
.btn:hover{ box-shadow: 1px 1px 3px 1px #aaa; }
a.btn{ padding:2px 10px 3px 10px; line-height: 1px; margin-left:2px;}
a.btn-icon{ margin:2px; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent;font-size: 12px;padding: 0px 3px;}
button.btn-icon{padding: 4px 3px; cursor: pointer;margin: 2px;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;border: 1px solid transparent;font-size: 12px;}
.btn-icon:hover{ box-shadow: 1px 1px 3px 1px #aaa; }
a.btn-sm{ text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border: 1px solid transparent;font-size: 12px;padding: 0px 3px;}

.full{ width:100% !important;}
.contener{background:#e1e2e4 !important; position:absolute; top:30px; bottom:50px; overflow:auto;}
.contener-full{ width:100%;}
.footer-space{height:20px;}
.margin20{ margin-bottom:20px;}
.float-left{ float:left;}
.float-right{ float:right;}
.border{ border:10px solid #cdcdcd;}

.header-title span{ color:green; font-weight:bold; font-size:16px;}
.header-title i{ color:green; font-size:20px;}
.header-title{ border-bottom:2px green solid;}
.header-button{ float:right; padding-top:5px; }

._dg_close {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  overflow: hidden;
  float:right;
  margin-right: -10px;
  margin-top: -10px;
  cursor:pointer;
}
._dg_close:hover::before, ._dg_close:hover::after { background: #ff0000; }
._dg_close::before, ._dg_close::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  height: 1px;
  background: #f1abab;
}
._dg_close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
._dg_close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* for search form */
._frm-search table{ border: 1px solid #ddd;padding-left: 10px; }
._frm-search{ float:right; display: table; }
._frm-search input{ max-width:110px; border: none; }
._frm-search select{ max-width:150px; border: none; background-image:none !important;}
._frm-search button{ height: 34px; border:none; cursor:pointer; }

/* for tab */
.tab { border-bottom: 1px solid #dddddd;}
.tab:before{display: table;}
.tab > li {float: left;margin-bottom: -1px;}
.tab > li:last-child:after{clear: both;}
.nav-tab { margin-bottom: 0; padding-left: 0;list-style: none;}			
.nav-tab > li {position: relative; display: block;}
.tab > li > a { cursor: pointer; background-color: #268B32; color:#FFFFFF; border: 1px solid #dddddd;border-bottom-color: transparent; text-decoration: none; }
.tab > li > a > i{color: #ffffff;}
.tab > li:hover > a{ margin-top:-1px; opacity: 0.8;}
.tab > li.active:hover > a{ margin-top:0;}
.tab > li.active > a { color: #555555; background-color: #ffffff; border: 1px solid #dddddd;border-bottom-color: transparent; cursor: default;}
.tab > li.active > a > i{color: #999999;}
.nav-tab > li > a { position: relative; display: block;padding: 1px 15px;}
.tab-content{ background-color:#fff; min-height:400px;  border: 1px solid #dddddd; border-top:none; padding: 20px;}
/* end tab */

/*for table */
.table-overflow{overflow:auto;}
.table-overflow > table{border-collapse: collapse; overflow:auto; background-color: transparent; width:100%;}
.table-overflow > table td{vertical-align: top;border:1px solid #ddd; line-height:1; white-space:nowrap; padding: 8px; font-family: 'Open Sans', sans-serif,KhmerOS; direction: ltr;}
.table-overflow > table td.center{ text-align:center; }
.table-overflow > table th{  border:1px solid #ddd; background-color:#fafafa; padding:0px 5px; white-space: nowrap;}
.table-overflow > table td.midle{vertical-align: middle;}
.table-overflow > table tr:hover td{ background-color:#fcfcfc;}
.table-overflow > table td small{ font-size:smaller;}
.table-overflow > table td img{ max-height:30px; margin:-8px -5px -10px -5px;}
.table-overflow > table td.td-action{ white-space:nowrap;}
.table-overflow > table tr.total > td{ font-weight:bold; color:red;}
.table-overflow > table tr td .textarea{ max-width: 300px; text-overflow: ellipsis; overflow: hidden;}
td > .tag{ border:1px solid #ddd; padding: 0 5px; margin: 0 1px; border-radius: 5px; }
td > .tag:before{ content: '\ead4'; font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; margin-right: .2em; } 
table tr .checkbox{
	padding:0;
	position: relative;
	width:30px;
}
table tr .checkbox > label{
	width:30px;
}

.table-overflow > table th .container{
	height: 31px;
}
/* The container */
.container {
    display: block;
    position: relative;
    /* padding-left: 35px; */
    /* margin-bottom: 12px; */
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

/* Hide the browser's default checkbox */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 3px;
    left: 2px;
    /* bottom: 0px; */
    height: 25px;
    width: 25px;
    /*background-color: #eee;*/
	border: 1px solid #e1e1e1;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    /*background-color: #ccc;*/
	border: 1px solid #aaa;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    /*background-color: #2196F3;*/
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 11px;
    /* border: solid white; */
    border: solid #268b32;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.table-overflow > table tr th.checkbox .checkmark {
    top: 0px;
	width:100%;
	height:100%;
	left:0;
	bottom:0;
}
.app-table-option > ul { margin-bottom:0;}
.app-table-option > ul > li{ list-style:none; display:inline; margin:0px; padding:0px; position:relative;}
._exp_ddl:before{content: ''; position: absolute; border: 5px solid transparent;
    border-top-width: 0; border-bottom-color: #000; top: -5px; right: 5px;}
._exp_ddl{ margin-top:-1px; display:none; position:absolute; right:4px; padding:3px; background-color:#000;}
._exp_ddl > li{ list-style:none;}
._exp_ddl > li > a{ text-align:left !important; display:block; white-space: nowrap; padding:2px 15px; border-top:1px solid #111;}
._exp_ddl > li > a:hover{background-color:#222;}
.app-table-option > ul > li._call-exp-ddl:hover > ._exp_ddl{ display:block; }
/*end table */

/*confirm*/
.confirm-delete tr td{ font-size:18px; line-height:28px; color:#d84a38;}
.confirm-delete tr td > span{font-size:36px; color:#d84a38;}
/*end */

/* vld */
fieldset{ position:relative;}			
fieldset > .btn-edit{ position: absolute; top: -18px; right: 0px; opacity: 0.3; cursor: pointer; z-index: 99999;}
fieldset > .btn-edit:hover{opacity:1;}
.element-warning {
    border: 1px solid rgba(255, 0, 0, 0.54);
}
.div-frm-001{ position:relative; margin-bottom:40px;}
._full-loding { z-index: 100001; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.52);}
._body-loding{ display: table; width: 100%; height: 100%;}
._img-loding{display: table-cell; vertical-align: middle;  height:100%;}
div.msg_err_001,div.msg_warning {
    background-color: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.09);
    margin-bottom: 20px;
    padding: 15px;
}
div.msg_err_001 p{ color: #f00; margin: 0px; }
div.msg_warning p{ color: #f00; margin: 0px; font-weight:bold; }
div.msg_err_001 p:before{ 
	color: #f00; margin: 0px; 
	content: '\e940';
	font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
	font-size:18px;
    }
/* vld */

/* activity block */
.block_activity{
	position:relative;
	margin-bottom:10px;
	border-bottom: 1px solid #f4f4f4;
    padding: 5px;
}
.block_activity img{
	width: 50px;
    position: absolute;
    top: 10px;
    left: 5px;
    border: 3px solid #e7e7e7;
}
.block_activity .a-head{
	margin-left: 70px;
}
.block_activity .a-head .name{
	font-weight: bold;
    color: #000;
}
.block_activity .a-head .on{ padding-left: 20px; color: #b3b2b2; }
.block_activity .a-des{
	margin-left: 70px;
}
.app-panel{margin-top:10px;background-color: #fff;border: 1px solid #dddddd;border-top: none;padding: 20px;}


#app-account{ margin:0; padding:0;}
#app-account > ul{ margin:0px; padding-left:0; padding-bottom:0; padding-top:0; padding-right:0;}
#app-account > ul > li{ float:left; list-style:none; padding-left:5px; position:relative; }
#app-account > ul > li > button{ cursor:pointer; color:#fff; height: 30px; position:relative;  }
#app-account > ul > li.account > button{ color:#fff; padding:0; background-color:rgba(255, 255, 255, 0.46); }
#app-account > ul > li.notify > button{ background-color:red;}
#app-account > ul > li.notify > button > span{  color:#fff;}

#app-account > ul > li > button > img{ margin-top:2px; margin-left:4px; }
.app-ddl-list:before { content: '';position:absolute;border: 10px solid transparent;border-top-width: 0;border-bottom-color: #000;top: -10px;right:5px;}
.app-ddl-list{ white-space: nowrap; top:30px; margin-right:5px; position:absolute; background-color:#000; right: 0; z-index:5; display:none; }
.app-ddl-list { margin:0 0px 0 0;  padding:5px;}
.app-ddl-list > li{ list-style:none; }
.app-ddl-list > li > a{ text-align:left; display:block; padding:5px 15px; border-top:1px solid #111;}
.app-ddl-list > li > a:hover{ background-color:#222;}

#app-account > ul > li.account > button:focus + ul,#app-account > ul > li.account:hover > ul,
#app-account > ul > li.notify > button:focus + ul,#app-account > ul > li.notify:hover > ul{ display:block; }

.option_list{float: right; margin-top: -10px; cursor: pointer; position: relative; z-index: 5; }
.option_list > ul:before{content: ''; position: absolute; border: 5px solid transparent; border-top-width: 0; border-bottom-color: #f1f1f1; top: -5px; right: 5px;}
.option_list > ul{ white-space: nowrap; top:20px; right: 0; margin:0 0px 0 0;  padding:5px; position:absolute; background-color:#f1f1f1;z-index:5; display:none;}
.option_list > ul > li{ list-style:none; }
.option_list > ul > li > a{ text-align:left; display:block; padding:3px 5px; border-top:1px solid #e0e0e0;}
.option_list > ul > li > a:hover{ background-color:#e2e2e2;}
.option_list:hover > ul{ display:block; }

#app-header{width:100%; height:30px;background-color:#268b32;}
#app-header div.expiredate{    
	background-color: #064e0f;
    padding: 5px 10px;
    margin-left: 6px;
    margin-top: 3px;
    line-height: 1;
    float: left;
    border-radius: 5px;
	color:#fff;}
#app-header div.expiredate.expired{animation:expiredate 0.5s infinite;}
@keyframes expiredate {
    0%   {background-color:#064e0f; }

    50%  {background-color:#ff283b; }

    100% {background-color:#064e0f;}
}

#app-header .float-left{float:left; color:#FFF;}
#app-header .float-right{float:right; color:#FFF;}

.dg_pageination{ border-top:1px solid #ddd; margin-top:20px; }
.dg_pageination .page_info{ padding-top:5px; float:left; text-align:left;  display:none;}
.dg_pageination .page_button{ float:none; text-align:center; }
.dg_pageination .page_button ul{ margin-top:-1px;}
@media (min-width: 1030px) {
	.dg_pageination .page_info{ display:block; }
	.dg_pageination .page_button{ float:right; text-align:right; }

	.app-scroll::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
	.app-scroll::-webkit-scrollbar{ width: 10px; background-color: #F5F5F5; }
	.app-scroll::-webkit-scrollbar-thumb{
		/*border-radius: 5px;	*/
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
		background-color: #268b32;
	}
	.app-mini-scroll::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 0px; background-color: #F5F5F5;}
	.app-mini-scroll::-webkit-scrollbar{ width: 6px; height: 6px; background-color: #F5F5F5; }
	.app-mini-scroll::-webkit-scrollbar-thumb{
		border-radius: 0px;	
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
		background-color: #268b32;
	}
}
.header-report{ display:none;}
.input-add-on {
    display: table-cell;
    font-size: 15px;
    font-weight: normal;
    color: #fff;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 0;
    white-space: nowrap;
    vertical-align: middle;
    border-left: 0;
}
.input-add-on select{
	padding-right:10px;
	width: 100%;
}
.input-add-on select:focus{
	outline:none;
}
#export{ display:none; }

/* popup discount */
.discount-block > div{
    margin-bottom:10px;
    text-align:center;
    background-color:#fbfbfb;
    border: 1px solid #ddd;
    min-height: 70px;
}
.discount-block > div:hover{
    cursor:pointer;
    box-shadow:1px 1px 1px 1px #ddd;
}
.discount-block .discount-icon{ font-size: 50px; line-height: 1.5;}
.discount-block .discount-des{ font-size:12px; }

/* popup printers */
.printer-block > div{
    margin-bottom:10px;
    background-color:#fbfbfb;
    border: 1px solid #ddd;
    min-height: 70px;
}
.printer-block > div:hover{
    cursor:pointer;
    box-shadow:1px 1px 1px 1px #ddd;
}
.printer-block .printer-info{ text-align:center; }
.printer-block .printer-icon{ text-align:center;  }
.printer-block .printer-icon i{ font-size: 40px; }
.printer-block .printer-name{ font-size: 20px; line-height: 1.5;}
.printer-block .printer-ip{ font-size:12px; }

._close {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 25px;
  overflow: hidden;
  float:right;
  cursor:pointer;
  margin-top:-10px;
}
._close:hover::before, ._close:hover::after { background: #ff0000; }
._close::before, ._close::after {
  content:"";
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  height: 1px;
  background: #f1abab;
}
._close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
._close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.highcharts-credits{ display:none; }