body {
  margin: 0;

  font-size: 13px;

  color: #666;
}

hr {
  border: none;

  border-bottom: 1px solid #ccc;
}

/***********************

*รูปภาพเมนูหน้าแรกระบบ 

************************/

#index-menu img {
  border-radius: 2px 20px 20px 20px;

  -moz-border-radius: 20px 20px 20px 20px;

  -webkit-border-radius: 20px 20px 20px 20px;

  border: 1px solid #333;

  -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);

  -moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);

  box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);

  padding: 3px;

  margin-bottom: 3px;

  background: #fff;
}

#index-menu {
  list-style: none;

  margin: 0;

  padding: 2px;

  text-align: left;
}

#index-menu .badge-red {
  color: #fff;

  font-size: 16px;

  background-color: #f00;

  -moz-border-radius: 15px;

  -webkit-border-radius: 15px;

  border-radius: 15px;

  padding: 5px 10px;
}

#index-menu li {
  display: inline-block;
}

#index-menu li a:link,
#index-menu li a:visited {
  color: rgb(63, 61, 61);

  margin-top: 3px;

  font-weight: bold;
}

#index-menu li:hover {
  opacity: 1;
}

#index-menu .general {
  background: #f3f3f3;
}

#index-menu .sale {
  background: #ffdfef;
}

#index-menu .inventory {
  background: #d2d2ff;
}

<!-- .button {
  cursor: hand;

  background-color: orange;

  border-style: outset;

  border-width: 1px;

  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='orange');
}

.txtBox {
  cursor: hand;

  background-color: #fff;

  border-style: ridge;

  border-width: 1px;

  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='orange');

  color: #00000;
}

.tb-bg-submit {
  cursor: hand;

  background-color: green;

  border-width: 1px;

  color: #fff;

  font-weight: bold;

  font-family: "Times New Roman", Times, serif;
}

.tb-bg-cancel {
  cursor: hand;

  background-color: red;

  border-width: 1px;

  color: #fff;

  font-weight: bold;

  font-family: "Times New Roman", Times, serif;
}

.bg_headgrid {
  background-image: url(../image/bg-header.jpg);

  background-repeat: repeat-x;

  color: #fff;

  font-family: Tahoma;

  font-size: 13px;
}

.bg_headgrid30 {
  background-image: url(../image/bg-header30.jpg);

  background-repeat: repeat-x;

  color: #fff;

  font-family: Tahoma, Geneva, sans-serif;

  font-size: 14px;

  font-weight: bold;
}

.line1 {
  margin: 0;

  padding: 0 0 2px 2px;

  border-bottom: 1px solid #ccc;
}

.line2 {
  border-top: 2px solid #999;

  border-top-width: thin;
}

.data {
  font-family: verdana;

  font-size: 13px;

  color: #000;

  font-weight: lighter;
}

.data_header {
  font-family: verdana;

  font-size: 13px;

  color: #000;

  font-weight: bold;
}

.data_lv {
  font-family: verdana;

  font-size: 13px;

  color: orange;

  font-weight: bold;
}

.title {
  color: #fff;

  font-size: 20px;

  font-family: Verdana;
}

.title1 {
  color: #fff;

  font-size: 16px;

  font-family: ms sans serif, verdana;

  text-decoration: none;
}

.title_preview {
  font-size: 13px;

  font-family: ms sans serif, verdana;

  text-decoration: none;

  font-weight: bold;
}

/* ############   ##############*/

h2 {
  font-size: 12pt;

  color: #003366;
}

h2 {
  line-height: 1.2em;

  letter-spacing: -1px;

  margin: 0;

  padding: 0;

  text-align: left;
}

a.paginate:hover {
  background-color: #000080;

  color: #fff;

  text-decoration: underline;
}

a.current {
  border: 1px none #df1f63;

  font: bold 0.7em Verdana, Geneva, sans-serif;

  padding: 2px 6px 2px 6px;

  cursor: auto;

  background: none;

  color: #fff;

  text-decoration: none;
}

span.inactive {
  border: 1px solid #999;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 0.7em;

  padding: 2px 6px 2px 6px;

  color: #999;

  cursor: default;
}

/* ############## สีลิ�?�?�?�? #############*/

/*

a:link, a:visited {

	color: #008080;

	text-decoration: none;

}

a:hover {

	color: #F00;

	text-decoration: underline;

}

a:active {

	color: #008080;

	text-decoration: none;

}

*/

/*###############  ดอ�?�?ั�?   ####################*/

.star {
  color: #f00;

  font-size: 12px;
}

/*###############  text area   ####################*/

.no_scroll {
  overflow: hidden;
}

/*#############  CP ##############*/

.data-cp {
  font-family: verdana;

  font-size: 13px;

  color: #fff;

  font-weight: bold;
}

/****************************

* CSS Style For SystemCenter

* By Yuttapong N.

* April 2014

*****************************/

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix {
  clear: both;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-success {
  color: green;
}

.text-danger {
  color: red;
}

.text-info {
  color: blue;
}

.text-warning {
  color: orange;
}

.text-underline {
  text-decoration: underline;
}

.box {
  padding: 5px;

  margin: 0 0 0 0;

  border: 1px solid #ccc;
}

.box-gray {
  background-color: #f0f0f0;

  color: #333;
}

.box-blue {
  background-color: #79afcf;

  color: #fff;

  border: 1px solid #729fcf;
}

.padding-5 {
  padding: 5px;
}

.padding-10 {
  padding: 10px;
}

.margin-5 {
  margin: 5px;
}

.margin-10 {
  margin: 10px;
}

/*

.btn-success, a.btn-success {

	-moz-box-shadow: inset 0px 1px 0px 0px #a4e271;

	-webkit-box-shadow: inset 0px 1px 0px 0px #a4e271;

	box-shadow: inset 0px 1px 0px 0px #a4e271;

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008080', endColorstr='#008080', GradientType=0);

	background-color: #008080;

	border: 1px solid #008080;

	display: inline-block;

	cursor: pointer;

	color: #ffffff;

	font-family: arial;

	font-size: 13px;

	font-weight: bold;

	padding: 3px 10px;

	text-decoration: none;

	text-shadow: 0px 1px 0px #008080;

}

.btn-success:hover a.btn-success:hover {

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008080', endColorstr='#008080', GradientType=0);

	background-color: #008080;

}

.btn-success:active, a.btn-success:active {

	position: relative;

	top: 1px;

}

.btn-danger, a.btn-danger {

	-moz-box-shadow: inset 0px 1px 0px 0px #a4e271;

	-webkit-box-shadow: inset 0px 1px 0px 0px #a4e271;

	box-shadow: inset 0px 1px 0px 0px #fff;

	background-color: #FF0033;

	display: inline-block;

	cursor: pointer;

	color: #ffffff;

	font-family: arial;

	font-size: 13px;

	font-weight: bold;

	padding: 3px 10px;

	text-decoration: none;

	text-shadow: 0px 1px 0px #528009;

	border: 1px solid #FF0000;

}

.btn-danger:hover a.btn-danger:hover {

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403));

	background: -moz-linear-gradient(top, #77a809 5%, #89c403 100%);

	background: -webkit-linear-gradient(top, #77a809 5%, #89c403 100%);

	background: -o-linear-gradient(top, #77a809 5%, #89c403 100%);

	background: -ms-linear-gradient(top, #77a809 5%, #89c403 100%);

	background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403', GradientType=0);

	background-color: #77a809;

}

.btn-danger:active, a.btn-danger:active {

	position: relative;

	top: 1px;

}

.btn-default, a.btn-default {

	-moz-box-shadow: inset 0px 1px 0px 0px #a4e271;

	-webkit-box-shadow: inset 0px 1px 0px 0px #a4e271;

	box-shadow: inset 0px 1px 0px 0px #fff;

	background-color: #e5e5e5;

	display: inline-block;

	cursor: pointer;

	color: #333;

	font-family: arial;

	font-size: 13px;

	font-weight: bold;

	padding: 3px 10px;

	text-decoration: none;

	text-shadow: 0px 0px 0px #333;

	border: 1px solid #999999;

}

.btn-default:hover a.btn-default:hover {

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403));

	background: -moz-linear-gradient(top, #77a809 5%, #89c403 100%);

	background: -webkit-linear-gradient(top, #77a809 5%, #89c403 100%);

	background: -o-linear-gradient(top, #77a809 5%, #89c403 100%);

	background: -ms-linear-gradient(top, #77a809 5%, #89c403 100%);

	background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);

 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403', GradientType=0);

	background-color: #77a809;

}

.btn-default:active, a.btn-default:active {

	position: relative;

	top: 1px;

}

*/

.table-srv {
  margin: 0px;

  padding: 0px;

  width: 100%;

  box-shadow: 10px 10px 5px #888888;

  border: 1px none #000000;

  -moz-border-radius-bottomleft: 0px;

  -webkit-border-bottom-left-radius: 0px;

  border-bottom-left-radius: 0px;

  -moz-border-radius-bottomright: 0px;

  -webkit-border-bottom-right-radius: 0px;

  border-bottom-right-radius: 0px;

  -moz-border-radius-topright: 0px;

  -webkit-border-top-right-radius: 0px;

  border-top-right-radius: 0px;

  -moz-border-radius-topleft: 0px;

  -webkit-border-top-left-radius: 0px;

  border-top-left-radius: 0px;
}

.table-srv table {
  border-collapse: collapse;

  border-spacing: 0;

  width: 100%;

  height: 100%;

  margin: 0px;

  padding: 0px;
}

.table-srv tr:last-child td:last-child {
  -moz-border-radius-bottomright: 0px;

  -webkit-border-bottom-right-radius: 0px;

  border-bottom-right-radius: 0px;
}

.table-srv table tr:first-child td:first-child {
  -moz-border-radius-topleft: 0px;

  -webkit-border-top-left-radius: 0px;

  border-top-left-radius: 0px;
}

.table-srv table tr:first-child td:last-child {
  -moz-border-radius-topright: 0px;

  -webkit-border-top-right-radius: 0px;

  border-top-right-radius: 0px;
}

.table-srv tr:last-child td:first-child {
  -moz-border-radius-bottomleft: 0px;

  -webkit-border-bottom-left-radius: 0px;

  border-bottom-left-radius: 0px;
}

.table-srv tr:hover td {
}

.table-srv tr:nth-child(odd) {
  background-color: #e5e5e5;
}

.table-srv tr:nth-child(even) {
  background-color: #ffffff;
}

.table-srv td {
  vertical-align: middle;

  border: 1px solid #000000;

  border-width: 0px 1px 1px 0px;

  text-align: left;

  padding: 7px;

  font-size: 13px;

  font-family: Arial;

  font-weight: normal;

  color: #000000;
}

.table-srv tr:last-child td {
  border-width: 0px 1px 0px 0px;
}

.table-srv tr td:last-child {
  border-width: 0px 0px 1px 0px;
}

.table-srv tr:last-child td:last-child {
  border-width: 0px 0px 0px 0px;
}

.table-srv tr:first-child td {
  background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.05, #cccccc),
    color-stop(1, #b2b2b2)
  );

  background: -moz-linear-gradient(center top, #cccccc 5%, #b2b2b2 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");

  background: -o-linear-gradient(top, #cccccc, b2b2b2);

  background-color: #cccccc;

  border: 0px solid #000000;

  text-align: center;

  border-width: 0px 0px 1px 1px;

  font-size: 14px;

  font-family: Arial;

  font-weight: bold;

  color: #000000;
}

.table-srv tr:first-child:hover td {
  background: -o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);

  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.05, #cccccc),
    color-stop(1, #b2b2b2)
  );

  background: -moz-linear-gradient(center top, #cccccc 5%, #b2b2b2 100%);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");

  background: -o-linear-gradient(top, #cccccc, b2b2b2);

  background-color: #cccccc;
}

.table-srv tr:first-child td:first-child {
  border-width: 0px 0px 1px 0px;
}

.table-srv tr:first-child td:last-child {
  border-width: 0px 0px 1px 1px;
}

.table tr:nth-child(odd) {
  background-color: whitesmoke;
}

table td {
  font-size: 10pt;
}

.ico-online {
  background-image: url(../image/i_online.gif);

  background-repeat: no-repeat;

  padding-left: 20px;
}

.ico-offline {
  background-image: url(../image/i_offline.gif);

  background-repeat: no-repeat;

  padding-left: 20px;
}

/**

* เมนูแจ้งปัญหาด้านบนระบบ SC

*/

.notify-repair {
  border: 1px solid red;

  border-radius: 20px;

  background-color: #f94e4e;
}

/*******************

* สำหรับ class Paginator

* @file : components/countpage.php

* @by : yuttapong n.

********************/

.pagination {
  display: block;

  list-style: none;

  font-weight: bold;

  font-size: 16px;
}

.pagination li {
  display: inline-block;

  margin: 2px;

  color: #000;
}

.pagination li.active,
.pagination li a.current {
  background-color: #f30;

  color: #fff;
}

.pagination li.inactive {
  color: #333;
}

/***************************

**

***************************/

#newslist {
  margin: 0 0;
}

#newslist .list {
  padding: 3px;
}

#newslist .list h3 {
  margin: 3px;
}

#newslist .list ul {
  margin: 0;

  padding: 0;

  color: #333;

  list-style-position: inside;
}

#newslist .list li {
  background-color: #e73a6a;

  color: #fff;

  border-radius: 7px;

  padding: 5px;

  margin-bottom: 7px;

  border: solid 1px #ccc;

  list-style: none;
}

#newslist .list li strong {
  color: #0f0;

  background-color: #003;

  line-height: 25px;

  padding: 1px;
}

@media print {
  /*

    body {

        font-family: AngsanaUPC,Georgia, serif;

        background: none;

        color: black;

        font-size:13px;

    }

    .table td{

        font-family: AngsanaUPC,Georgia, serif;

        background: none;

        color: black;

        font-size:13px;   

        border:1px solid #ccc;

    }

    .table tr:first-child td,.table-cs tr:first-child th{

        font-family: AngsanaUPC,Georgia, serif;

        background: #ddd;

        color: black;

        font-size:13px;    

        border:1px solid #ccc;

    }

	*/

  .hidden-print {
    display: none;
  }

  .page-break {
    page-break-after: always;
  }
}