@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);}
@font-face {font-family: "Koh Santepheap";src: url(../font/KohSantepheap-Regular.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; }
.radius{ border-radius: 15px; }


.silver:hover{ position: relative; -webkit-animation: toggleUp .4s; animation: toggleUp .4s; }
.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;}

.bgmain{ background-color:#268b32 !important; color:#FFF;}
.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:#f4f4f4 !important; color:#666;}
.bgblack{ background-color:#666 !important; color:#FFF;}

.btn{border-radius: 15px; 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; padding-bottom: 10px;}
.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; font-style: normal;}
.header-title > i { color:green; font-size:20px;}
.header-title > a { color:#e2663a; font-size:20px;}
.header-title{ border-bottom:2px green solid;}
.header-button{ float:right; padding-top:5px; }
.header-button > a, .round_button > a { padding:1px 4px; border:1px solid #268b32; background-color:#fff; border-radius:50%; opacity: 0.5; }
.header-button > a i, .round_button > a i{ color:#268b32 }
.header-button > a:hover, .round_button > a:hover {opacity: 1; }

._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 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 #268b32;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; opacity:1;}
.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 form search*/
._report select{ padding-right:20px; }
._block_search{ margin: 0 -6px 10px -6px; }
._frm_search table{ border: 1px solid #ddd; /*padding-left: 10px;*/ white-space: nowrap;}
._frm_search table.warning {border: 1px solid #f45b5b; }
._frm_search input{ border: none; }
._frm_search select{ border: none; padding-right:26px; }
._frm_search button{ height: 34px; border:none; cursor:pointer; }
._frm_search .h_search input{ width:100%; height:30px;  }
._frm_search .h_filter table {border:none;  }
._frm_search .select2-container{ min-width: 150px; }
._frm_search .select2-container .select2-choice{ border:none !important; }
._frm_search .select2-container .select2-arrow{ border:none !important; }

._frm_search ._addresspicker{ padding-left: 10px; min-height: 34px; border: none; background-color: #f6f6f6; }
._frm_search ._addresspicker:before {
  content: '\ea59';
  font-family: "fontello";
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    margin-left: -5px;
}

._dg_option_div{ text-align:right; margin-top:-15px; position: relative; }
._dg_option_list ul{ margin: 0; }
/*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: 250px; text-overflow: ellipsis; overflow: hidden;}
.dg_tag{ border:1px solid #ddd; padding: 0 5px; margin: 0 1px; border-radius: 5px; }
.dg_tag:before{ content: '\ead4'; font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; margin-right: .2em; } 
.dg_tag.no-before:before{ content: inherit; }
table tr .checkbox{
	padding:0;
	position: relative;
	width:30px;
}
table tr .checkbox > label{ width:30px; }
.table-overflow > table th .container{ height: 31px; }
.dg_loadmore{	border: 1px #ddd solid; border-top: none;text-align: center; }
.dg_loadmore > a{
	display: block;    
    font-size: 14px;
    background-color: #eaeaea;
	opacity:0.7;
}
.dg_loadmore > img{ display: none; margin-bottom:-10px; }
.dg_loadmore > a:hover{ opacity:1; }
.dg_msg_forbidden{ background-color: #ad0000; color: #fff; text-align: center; font-size: 20px; animation: dg_shark 0.75s infinite;}
/* 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; }

/*confirm*/
.confirm_model{ text-align:center; }
.confirm_model span{
	color: #fefefe;
    font-size: 42px;
    border: 1px solid #ddd;
    padding: 0px 10px;
    border-radius: 50%;
    background: #b19615;
}
.confirm_model p{ font-size:18px; margin-top:28px; }
/*end */

/* vld */
fieldset{ position:relative;}			
fieldset > .btn-edit{ position: absolute; top: -15px; right: 0px; opacity: 0.3; cursor: pointer; }
fieldset > .btn-edit:hover{opacity:1;}

.frm_button{ margin: 1%; border-top: 1px dotted #ddd; padding-top: 15px; text-align: right; }
.div-frm-001{ position:relative; margin-bottom:10px;}
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_warning p{ color: #f00; margin: 0px; font-weight:bold; }

div.msg_err_001 { background-color: rgba(255, 0, 0, 0.1); border: 1px solid rgba(255, 0, 0, 0.09); margin: 5px 12px 20px 12px; padding: 15px; }
div.msg_err_001 p{ color: #f00; margin: 0px; }
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 */

div.dg_nodata{ padding:40px; }
div.dg_nodata img{ width:300px; max-width:90%; }
.img-pre div{ position: relative; border: 1px solid; margin-bottom: 5px; }
.img-pre .remove-pre-img{ position: absolute; right: 0; }
.remove-pre-img{ cursor: pointer; }

.app-panel{margin-top:10px;background-color: #fff;border: 1px solid #dddddd;border-top: none;padding: 20px;}

/* address picker */
._addresspicker{ min-height:76px; height: auto !important; cursor: pointer;}
._addresspicker a{ position: absolute; right: 0; top: 0; font-size: 16px; opacity: 0.2; }

._addresspicker:hover a{ opacity: 1 ; background-color: #f6f6f6; border: 1px dotted #ddd; animation:1s;}
._addresspicker a small{ display:none; }
._addresspicker a:hover small{ display:inline-block; }
/* end address picker */

#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-account .notification{
    background-color: #00000073;
    padding: 0px 4px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: 2px;
    color: #fff;
    cursor: pointer;
    position: relative;
}
#app-account .notification > span{
  position: absolute;
    bottom: -7px;
    left: -10px;
    padding: 5px 8px;
    border-radius: 50%;
    background-color: #bb0000;
    color: #fff;
    z-index: 9;
    font-size: 10px;
    line-height: 1;
    animation: dg_shark 0.75s infinite;
}

.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{ border-top: 2px solid #e1e2e4; 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-ddl-list > li:first-child > a{ border:none; }

#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; }



#app-header{
  width:100%; 
  height:30px;
  background-color:#268b32; 
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#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;
}
/* popup printers */


._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 { opacity: 1; }
._close::before, ._close::after {
  content:"";
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  height: 1px;
  background: #999;
  opacity: 0.3;
}
._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; }

/* loading */
._loading { z-index: 110000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.7); display: table; width: 100%; height: 100%; }
._loading > div{ display: table-cell; text-align: center; vertical-align: middle;}
._loading .lds-ripple { display: inline-block; position: relative; width: 80px; height: 80px; }
._loading .lds-ripple div { position: absolute; border: 4px solid #008473; opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
._loading .lds-ripple div:nth-child(2) { animation-delay: -0.5s; }
@keyframes lds-ripple {
    0% {
      top: 36px;
      left: 36px;
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: 72px;
      height: 72px;
      opacity: 0;
    }
}

/* Successful alert */

.success-checkmark {
  width: 80px;
  height: 115px;
  margin: 0 auto;
}
.success-checkmark .check-icon {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #4caf50;
}
.success-checkmark .check-icon::before {
  top: 3px;
  left: -2px;
  width: 30px;
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}
.success-checkmark .check-icon::after {
  top: 0;
  left: 30px;
  width: 60px;
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
  animation: rotate-circle 4.25s ease-in;
}
.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
  content: "";
  height: 100px;
  position: absolute;
  background: #286330;
  transform: rotate(-45deg);
}
.success-checkmark .check-icon .icon-line {
  height: 5px;
  background-color: #ffffff;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
}
.success-checkmark .check-icon .icon-line.line-tip {
  top: 46px;
  left: 14px;
  width: 25px;
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s;
}
.success-checkmark .check-icon .icon-line.line-long {
  top: 38px;
  right: 8px;
  width: 47px;
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s;
}
.success-checkmark .check-icon .icon-circle {
  top: -4px;
  left: -4px;
  z-index: 10;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  box-sizing: content-box;
  border: 4px solid rgb(255 255 255 / 50%);
}
.success-checkmark .check-icon .icon-fix {
  top: 8px;
  width: 5px;
  left: 26px;
  z-index: 1;
  height: 85px;
  position: absolute;
  transform: rotate(-45deg);
  background-color: #286330;
}

@keyframes rotate-circle {
  0% { transform: rotate(-45deg); }
  5% { transform: rotate(-45deg); }
  12% { transform: rotate(-405deg); }
  100% { transform: rotate(-405deg); }
}
@keyframes icon-line-tip {
  0% { width: 0; left: 1px; top: 19px; }
  54% { width: 0; left: 1px; top: 19px; }
  70% { width: 50px; left: -8px; top: 37px; }
  84% { width: 17px; left: 21px; top: 48px; }
  100% { width: 25px; left: 14px; top: 45px; }
}
@keyframes icon-line-long {
  0% { width: 0; right: 46px; top: 54px; }
  65% { width: 0; right: 46px; top: 54px; }
  84% { width: 55px; right: 0px; top: 35px; }
  100% { width: 47px; right: 8px; top: 38px; }
}
@keyframes dg_shark {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

#_dg_addresspicker_background{
	z-index: 100002 !important;
}
#_dg_addresspicker_wrapper{
	z-index: 100003 !important;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/* for report */
.dashboad-row{
  margin-bottom: 12px;
}
.dashboad-row > div > a:hover > div{
  transform: scale(1.05);
  /*box-shadow: 1px 1px 10px 2px #fff;*/
  border:1px solid #ffffff73;
  
}
.dashboad-row .box{
  background-color:#e9f2f8;
  border-radius:5px;
  padding:10px;
  border: 1px solid #cce2ef;
  margin-bottom: 10px;
}
.dashboad-row .box .head{
  border-bottom: 1px solid #ffffff;
    margin-bottom: 15px;
}
.dashboad-row .box .head .title{
  float:left;
  font-size:18px;
}
.dashboad-row .box .head .tag{
  float: right;
  font-size: 8px;
  border-radius: 5px;
  background-color: #ffffff;
  padding: 2px 5px;
}
.dashboad-row .box .body .icon{
  margin-top: 10px;
  float: left;
  border-radius: 50%;
  /* background-color: #fff; */
  padding: 10px 15px;
  font-size: 20px;
  color: rgb(255, 255, 255);
}
.dashboad-row .box .body .image{
  margin-top: 10px;
  float: left;
}
.dashboad-row .box .body .image img{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 5px solid #ffffff;
}
.dashboad-row .box .body .des{
  float: right;
  text-align:right;
}
.dashboad-row .box .body .des p{
  line-height: 1;
}
.dashboad-row .box .body .des small{
  font-size: 10px;
    color: #adadad;
}