body{
	font-family:sans-serif;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
}

td{
	font-size: 14px;
}

input{
	outline: none;
}

.input_login{
	border:none;
	height:35px;
	width:100%;
	outline: none;
	color:#006666;
}
.input_show{
	border:none;
	outline: none;
	color:#000000;
	font-size: 18px;
	padding-left:6px;
	height: 40px;
	background: #cccccc;
	border:1px solid #666666;
}
.input_show_price{
	border:none;
	outline: none;
	color:#FCFF00;
	font-size: 30px;
	font-weight: bold;
	padding-left:6px;
	height: 50px;
	background: #CD0000;
}
.input_show_alert{
	border:none;
	outline: none;
	color:#ff8200;
	font-size: 12px;
	font-weight: bold;
	padding-left:6px;
	height: 25px;
	background:#bf0000;
}
.input_shows{
	border:none;
	border:1px solid #ffffff;
	color:#2b2b2b;
	outline: none;
	font-size: 12px;
	font-weight: bold;
	padding-left:6px;
	height: 25px;
	background:#00cccc; 
}

.input_barcode{
	outline: none;
	width:100%;
	height:50px; 
	background:#004040; 
	border:1px solid #000000;
	color:#00ff03; 
	text-align:center; 
	font-size:40px;
}

.btn_normal{
	font-size:12px;
	vertical-align:middle;
	display: table-cell;
	padding:5px 10px;
	background: #e5e5e5;
	border:1px solid #d4d4d4;
	border-radius:3px;
	color:#2b2b2b;
	cursor: pointer;
}
.btn_normal:hover{
	background: #cccccc;
	border:1px solid #666666;
}
.btn_normal_active{
	font-size:12px;
	vertical-align:middle;
	display: table-cell;
	padding:5px 10px;
	border-radius:3px;
	color:#ffffff;
	background: #4d4d4d;
	border:1px solid #000000;
	cursor: pointer;
}
.btn_mobile{
	background: rgb(6, 153, 146); 
	border-radius: 3px; 
	cursor: pointer;
}
.btn_mobile:hover{
	background: rgb(30, 184, 133);
}

.btn_normal2{
	font-size:12px;
	vertical-align:middle;
	display: table-cell;
	padding:5px 10px;
	background: #E3FFBE;
	border:1px solid #86FF65;
	border-radius:3px;
	color:#2b2b2b;
	cursor: pointer;
}
.btn_normal2:hover{
	background: #9CFF8B;
	border:1px solid #27B800;
}

.btn_normal3{
	font-size:12px;
	vertical-align:middle;
	display: table-cell;
	padding:5px 10px;
	background: #FF8125;
	color:#ffffff;
	cursor: pointer;
}
.btn_normal3:hover{
	background: #ED6400;
}

.btn_toppic{
	color:#00bfbf;
	font-size: 12px;
	cursor: pointer;
}
.btn_toppic:hover{
	color:#ffffff;
	background: #008080;
}
.btn_toppic_font{
	color:#00bfbf;
	font-size: 12px;
	padding-left: 5px;
}

.btn_edit{
	font-size:12px;
	color:#0072FF;
	cursor: pointer;
}
.btn_edit:hover{
	text-decoration: underline;
}
.btn_order{
	margin-top:6px;
	font-size:12px;
	color:#0072FF;
	cursor: pointer;
}
.btn_order:hover{
	text-decoration: underline;
}
.btn_delete{
	font-size:12px;
	color:#0072FF;
	cursor: pointer;
}
.btn_delete:hover{
	text-decoration: underline;
}

.welcome_user{
	color:#00bfbf;
	font-size: 12px;
	padding-left:5px;
}

.btn_login{
width:100%;
height: 35px;
background:#008080;
border-radius:5px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.btn_login:hover{
background: rgb(30, 184, 133);
}

.btnok{
	width: 50px;
	height: 25px;
	background: #cccccc;
	color:#ffffff;
	font-size: 12px;
	cursor: pointer;
}
.btnok:hover{
	background: #000000;
}

.btn_action{
	width: 100px;
	height: 25px;
	background: #009900;
	color:#ffffff;
	font-size: 12px;
	cursor: pointer;
}
.btn_action:hover{
	background: #00a400;
}

/* Menu Top */
.menu_top{
	padding:6px 10px;
	background: #f0f0f0;
	border-left:1px solid #ffffff;
	font-size: 14px;
	cursor: pointer;
}
.menu_top:hover{
	padding:6px 10px;
	background: #00bfbf;
	color: #ffffff;
	font-size: 14px;
	cursor: pointer;
}
.menu_top_active{
	padding:6px 10px;
	background: #006666;
	color: #ffffff;
	cursor: pointer;
}
/* End Menu Top */

.toppic{
	font-size: 16px;
	font-weight: bold;
	color: #006666;
}
.toppic_branch{
	font-size: 16px;
	font-weight: bold;
	color: #ff8200;
}

.input_edit{
	font-size:14px;
	height:30px;
	padding:0 5px;
}

.toppic_minor_select{
	font-size: 14px;
	height: 30px;
	padding-right:10px;
}

.toppic_minor{
	padding:0 10px;
	background: #f0f0f0;
	font-size: 14px;
	height:30px;
	cursor: pointer;
	border-bottom: 1px solid #ffffff;
}
.toppic_minor:hover{
	background: #f5f5f5;
}
.toppic_minor_active{
	padding:0 10px;
	background: #00bfbf;
	height:30px;
	color: #ffffff;
	font-size: 12px;
	cursor: pointer;
	border-bottom: 1px solid #ffffff;
}

/* toppic product */
.toppic_product{
	font-size: 12px;
	text-align: center;
	height: 30px;
	padding:0 10px;
	background: #009900;
	color: #ffffff;
}
.detail_product{
	font-size: 12px;
	padding:0 10px;
	height:60px;
	border-bottom: 1px solid #ddd;
}
.detail_product_alert{
	background:#FFB0B0;
}
.detail_product_alert:hover{
	background:#FF9D9D;
}

/* toppic Sell*/
.toppic_sell{
	font-size: 12px;
	padding:0 5px;
	text-align: center;
	height: 30px;
	background: #00cccc;
	color: #ffffff;
}
.detail_sell{
	font-size: 12px;
	padding:0 5px;
	height: 60px;
}

.toppic_text{
	height: 30px;
	font-size: 12px;
	font-weight: bold;
}

/* toppic report */
.toppic_report{
	font-size: 12px;
	padding:0 5px;
	text-align: center;
	height: 30px;
	background: #0082CC;
	color: #ffffff;
}
.detail_report{
	font-size: 12px;
	padding:0 5px;
	height: 60px;
}

/* toppic credit note */
.toppic_credit_note{
	font-size: 12px;
	text-align: center;
	height: 30px;
	padding:0 10px;
	background: #666666;
	color: #ffffff;
}

/* toppic credit note */
.toppic_adjust_stock{
	font-size: 12px;
	text-align: center;
	height: 30px;
	padding:0 10px;
	background: #FF8125;
	color: #ffffff;
}

/* toppic credit note */
.toppic_order_stock{
	font-size: 12px;
	text-align: center;
	height: 30px;
	padding:0 10px;
	background: #FF8125;
	color: #ffffff;
}

/* toppic setting */
.detail_setting{
	font-size: 12px;
	padding:0 10px;
	height:60px;
}

/* Detail Table */
.detail_tr{
	background: #f1f1f1;
	border-bottom:1px solid #c9c3c3; 
}
.detail_tr:hover{
	background: #e5e5e5;
}

/* Spit Page */
.spitpage{
	font-size: 12px;
	width:40px;
	height:25px;
	background: #f0f0f0;
	cursor: pointer;
}
.spitpage:hover{
	color: #ffffff;
	background: #00bfbf;
}
.spitpage_active{
	font-size: 12px;
	color: #ffffff;
	width:40px;
	height:25px;
	background: #006666;
}
/* Spit Next */
.spit_next{
	width:40px;
	height:25px;
	background: #008080;
	background-image: url('images/index/spit_next.png');
	background-repeat: no-repeat;
	cursor: pointer;
}
.spit_next:hover{
	background: #006666;
	background-image: url('images/index/spit_next_over.png');
}

/* Spit End */
.spit_end{
	width:40px;
	height:25px;
	background: #008080;
	background-image: url('images/index/spit_end.png');
	background-repeat: no-repeat;
	cursor: pointer;
}
.spit_end:hover{
	background: #006666;
	background-image: url('images/index/spit_end_over.png');
}
/* Spit Back */
.spit_back{
	width:40px;
	height:25px;
	background: #008080;
	background-image: url('images/index/spit_back.png');
	background-repeat: no-repeat;
	cursor: pointer;
}
.spit_back:hover{
	background: #006666;
	background-image: url('images/index/spit_back_over.png');
}
/* Spit Begin */
.spit_begin{
	width:40px;
	height:25px;
	background: #008080;
	background-image: url('images/index/spit_begin.png');
	background-repeat: no-repeat;
	cursor: pointer;
}
.spit_begin:hover{
	background: #006666;
	background-image: url('images/index/spit_begin_over.png');
}

.alert_not_found{
	height: 30px;
	color:#ff8080;
	background:#bf0000;
}
.alert_confirm:hover{
	color: #80ff81;
	background:#008001;
}
.alert_confirm{
	border:1px solid #004A06;
	border-radius: 5px;
	height: 30px;
	color: #80ff81;
	background:#009900;
	cursor: pointer;
}

.btn_confirm{
	padding:5px 10px;
	background:#e5e5e5;
	cursor: pointer;
}
.btn_confirm:hover{
	background:#cccccc;
}
.btn_cancel{
	padding:5px 10px;
	background:#e5e5e5;
	cursor: pointer;
}
.btn_cancel:hover{
	background:#cccccc;
}

.btn_choose_date{
	text-align: center; 
	height:25px; 
	border:none;
	border:1px solid #333333;
	border-radius: 3px;
}
.btn_choose_date:hover{
	box-shadow: 0px 0px 5px #cccccc;
}

.btn_close_popup{
	padding:0 20px; 
	font-size:12px;
	background:#666666;
	color:#ffffff;
	cursor: pointer;
}
.btn_close_popup:hover{
	background: #000000;
}

.select_date:hover{
	background:#ffffff;
}
.text_date{
	cursor: pointer;
	padding:0 5px;
	height:20px;
	font-size:12px;
}

.btn_set_date{
	font-size:12px;
	width:50px;
	border-radius: 3px;
	background:#f1f1f1;
	cursor: pointer;
}
.btn_set_date:hover{
	background:#ffffff;
}

.input_select_date{
	width:50px; 
	background:none; 
	outline: none; 
	border:none; 
	border-bottom:2px solid #4d4d4d; 
	text-align:center;
	padding-bottom:3px;
}

.btn_search_product{
	font-size:12px;
	background:#00bfbf;
	color:#ffffff;
	cursor: pointer;
}
.btn_search_product:hover{
	background:#006666;
}
.tab_result_search{
	background:#ffc180; 
	border:1px solid #ff8200; 
	border-radius: 3px;
}
.tab_result_search:hover{
	background:#FFB97B;
}
.btn_clear_search{
	width:30px;
	cursor:pointer;
}
.btn_clear_search:hover{
	color:#666666;
}
.test_input{
	text-align:center;
	border:1px solid #999999;
	background-color:#FAFCD1;
	border-radius:10px;
	height:40px;
	width: 100%;
	font-size: 20px;
	}

#tb_cp_list {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	border-collapse: collapse;
	width: 100%;
  }
  
  #tb_cp_list td, #tb_cp_list th {
	border: 1px solid #ddd;
	padding: 6px;
  }
  
  #tb_cp_list tr:nth-child(even){background-color: #f2f2f2;}
  
  #tb_cp_list tr:hover {background-color: #ddd;}
  
  #tb_cp_list th {
	padding-top: 6px;
	padding-bottom: 6px;
	text-align: center;
	background-color: #808080;
	color: white;
  
  }

/* The container */
.container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 1%;
  }
  
  /* Hide the browser's default radio button */
  .container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark_GIF {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #f1a9a9;
	border-radius: 50%;
  }
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark_GIF {
	  background-color: #f1a9a9;
	}
	
	/* When the radio button is checked, add a blue background */
	.container input:checked ~ .checkmark_GIF {
	  background-color: #f1a9a9;
	}
	
	/* Create the indicator (the dot/circle - hidden when not checked) */
	.checkmark_GIF:after {
	  content: "";
	  position: absolute;
	  display: none;
	}
	
	/* Show the indicator (dot/circle) when checked */
	.container input:checked ~ .checkmark_GIF:after {
	  display: block;
	}
	
	/* Style the indicator (dot/circle) */
	.container .checkmark_GIF:after {
		 top: 9px;
		left: 9px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: white;
	}
	/* ----------------------------- */
	/* The container */
.container {
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 12px;
	cursor: pointer;
	font-size: 16px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	width: 1%;
  }
  
  /* Hide the browser's default radio button */
  .container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
  }
  
  /* Create a custom radio button */
  .checkmark_PR {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #2196F3;
	border-radius: 50%;
  }
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark_PR {
	  background-color: #2196F3;
	}
	
	/* When the radio button is checked, add a blue background */
	.container input:checked ~ .checkmark_PR {
	  background-color: #2196F3;
	}
	
	/* Create the indicator (the dot/circle - hidden when not checked) */
	.checkmark_PR:after {
	  content: "";
	  position: absolute;
	  display: none;
	}
	
	/* Show the indicator (dot/circle) when checked */
	.container input:checked ~ .checkmark_PR:after {
	  display: block;
	}
	
	/* Style the indicator (dot/circle) */
	.container .checkmark_PR:after {
		 top: 9px;
		left: 9px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: white;
	}
	/* ----------------------------- */
	/* Create a custom radio button */
	.bundle {
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: #80ff80;
		border-radius: 50%;
	  }
	  /* On mouse-over, add a grey background color */
	  .container:hover input ~ .bundle {
		  background-color: #80ff80;
		}
		
		/* When the radio button is checked, add a blue background */
		.container input:checked ~ .bundle {
		  background-color: #80ff80;
		}
		
		/* Create the indicator (the dot/circle - hidden when not checked) */
		.bundle:after {
		  content: "";
		  position: absolute;
		  display: none;
		}
		
		/* Show the indicator (dot/circle) when checked */
		.container input:checked ~ .bundle:after {
		  display: block;
		}
		
		/* Style the indicator (dot/circle) */
		.container .bundle:after {
			 top: 9px;
			left: 9px;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: white;
		}
		/* ----------------------------- */
	

	/* select dropdow  */
	
.selectdiv {
	position: relative;
	/*Don't really need this just for demo styling*/
	
	float: left;
	min-width: 200px;
	margin: 0px 0px;
  }
  
  /* IE11 hide native button (thanks Matt!) */
  select::-ms-expand {
  display: none;
  }
  
  .selectdiv:after {
	content: '<>';
	font: 17px "Consolas", monospace;
	color: #049292;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	right: 5px;
	/*Adjust for position however you want*/
	
	top: 12px;
	padding: 0 0 2px;
	border-bottom: 1px solid #049292;
	/*left line */
	
	position: absolute;
	pointer-events: none;
  }
  
  .selectdiv select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Add some styling */
	
	display: block;
	width: 40%;
	max-width: 320px;
	height: 35px;
	float: right;
	margin: 5px 0px;
	padding: 0px 18px;
	font-size: 18px;
	line-height: 1.75;
	color: #333;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #cccccc;
	-ms-word-break: normal;
	word-break: normal;
  }