/*==============================================
 standard
==============================================*/
*
{
	/*
	font-family: "Angsana New","TH SarabunPSK";
	*/
	
	/*
	font-family: TH SarabunPSK,FreesiaUPC,CordiaUPC,AngsanaUPC,EucrosiaUPC,LilyUPC;
	font-size: 14pt;
	*/
}
body
{
	border:  0px;
	font-family: 'Tahoma', 'Sarabun', 'Prompt', sans-serif;
}

table.no-decorate
{
    border-collapse: collapse; /* ลบเส้นขอบรอบตาราง */
    border: none; !important /* ไม่มีเส้นขอบ */
 }
  
 table.no-decorate td, th 
 {
    border: none;  !important /* ไม่มีเส้นขอบในเซลล์ */
    padding: 5px; /* เพิ่มระยะห่างภายในเซลล์ */
	background-color : transparent; 
 }

@media screen
{
	body
	{
		background-color:#ddd;
		min-width: 450px;
		margin: 5px;
	}
}

h1,h2,h3,h4,h5,h6
{
	margin : 0px;
}

a
{
	text-decoration: none !important;
}

hr.dotted
{
    margin :2px 0px;
    display: block;
    height: 1px;
    border: 0;
    border-top: 2px dotted #000;
    padding: 0; 	
}

hr.double
{
    margin :2px 0px;
    display: block;
    height: 1px;
    border: 0;
    border-top: 3px double #000;
    padding: 0; 
	
}

hr.single
{
    margin :2px 0px;
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #000;
    padding: 0; 
	
}

.cn-CordiaUPC
{
	font-family: CordiaUPC,AngsanaUPC,EucrosiaUPC,LilyUPC,TH SarabunPSK,FreesiaUPC;
	font-size: 16pt;
}

.cn-border
{
	border : 1px solid #888;
}
/*==============================================
 Container
==============================================*/
@media screen
{
	.cn-loading
	{
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background: url(/images/Preloader.gif) center no-repeat #fff;
	}

	.cn-container
	{
		background-color: #eeeeee;
		min-height: calc( 100vh - 13px );
	}
	
	.cn-content
	{
		background: #eeeeee;
		transition: margin-left .5s;
		padding: 10px;
	}
}

@media print
{
	.container
	{
		width:100%
	}
	
	.cn-container
	{
		background-color: #fff;
		min-height: calc( 100vh - 13px );
	}
	
	.cn-content
	{
		background: #fff;
		transition: margin-left .5s;
		padding: 10px;
	}

}

.cn-left
{
    float: left;
	padding: 0px;
}

.cn-center
{
    margin: auto;
    width: 50%;
	padding: 10px;
 }

.cn-right
{
    float: right;
	padding: 5px;
}

.cn-border
{
	border: 1px #000 solid;
}

/*==============================================
 Font Size
==============================================*/
.cn-bold
{
	font-weight: bold;
}

.cn-font-8pt
{
	font-size: 8pt;
}

.cn-font-9pt
{
	font-size: 9pt;
}

.cn-font-10pt
{
	font-size: 10pt;
}

.cn-font-11pt
{
	font-size: 11pt;
}

.cn-font-12pt
{
	font-size: 12pt;
}

.cn-font-14pt
{
	font-size: 14pt;
}

.cn-font-16pt
{
	font-size: 16pt;
}

.cn-font-18pt
{
	font-size: 18pt;
}

.cn-font-20pt
{
	font-size: 20pt;
}

.cn-font-22pt
{
	font-size: 22pt;
}

.cn-font-24pt
{
	font-size: 24pt;
}

.cn-font-26pt
{
	font-size: 26pt;
}

.cn-font-28pt
{
	font-size: 28pt;
}

.cn-font-36pt
{
	font-size: 36pt;
}

.cn-font-48pt
{
	font-size: 48pt;
}

.cn-font-60pt
{
	font-size: 60pt;
}

.cn-font-xx-small
{
	font-size:xx-small;
}

.cn-font-x-small
{
	font-size:x-small;
}

.cn-font-small
{
	font-size:small;
}

.cn-font-smaller
{
	font-size:smaller;
}

.cn-font-normal
{
	font-size:medium !important;
}

.cn-font-large
{
	font-size:large;
}

.cn-font-x-large
{
	font-size:x-large;
}

.cn-font-xx-large
{
	font-size:xx-large;
}

.cn-font-larger
{
	font-size:larger;
}

.cn-font-barcode
{
	font-family: "wasp 39 m", verdana, calibri;
	font-size: 36pt; 
}


/*==============================================
 Background
==============================================*/
.cn-bg-primary
{
	background-color:#cf9cd8;
	color : #000;
}
.cn-bg-secondary
{
	background-color:#f79646;
	color : #000;
}
.cn-bg-tertiary
{
	background-color:#e555b7;
	color : #000;
}
.cn-bg-success
{
	background-color : #28a745;
	color : #fff;
}
.cn-bg-danger
{
	background-color : #dc3545;
	color : #fff;
}
.cn-bg-warning
{
	background-color : #ffc107;
	color : #000;
}
.cn-bg-info
{
	background-color : #17a2b8;
	color : #fff;
}
.cn-bg-muted
{
	background-color : #f1f1f1;
	color : #cdcdcd;
}
.cn-bg-dark
{
	background-color : #343a40;
	color : #fff;
}
.cn-bg-light
{
	background-color : #f8f9fa;
	color : #000;
}
.cn-bg-black
{
	background-color : #000;
	color : #fff;
}
.cn-bg-white
{
	background-color : #fff;
	color : #000;
}
/*==============================================
 Highlight
==============================================*/
.cn-hl-blue:hover
{
	background-color : #4db2ec;
	color : #fff;
}

.cn-hl-darkblue:hover
{
	background-color : #357d91;
	color : #fff;
}

.cn-hl-yellow:hover
{
	background-color : #f7de39;
	color : #000;
}

.cn-hl-red:hover
{
	#background-color : #f74c4d;
	background-color : #f00;
	color : #ff0;
}

.cn-hl-orange:hover
{
	background-color : #e46c0a;
	color : #fff;
}

.cn-hl-brown:hover
{
	background-color : #739138;
	color : #fff;
}

.cn-hl-gray:hover
{
	background-color : #f8a5b5;
	color : #000;
}

.cn-hl-white:hover
{
	background-color : #fff;
	color : #000;
}

.cn-hl-black:hover
{
	background-color : #000;
	color : #fff;
}

.cn-hl-dark:hover
{
	background-color : #343a40;
	color : #eee;
}

.cn-hl-default:hover
{
	background-color : #c7afdf;
	color : #000;
}

.cn-hl-menu:hover
{
	color : #fff;
}

/*==============================================
 Button
==============================================*/
.cn-button-pad
{
	display : block;
	margin : 0;
	padding: 10px 0px 10px 0px;
}
		
.cn-button
{
	padding: 7px 10px;
	display:inline-block;
	transition: all 0.3s ease-out;			
}

/*==============================================
 Button Color
==============================================*/
.cn-button .cn-success
{
	background-color: #0275d8; 
	color: #FFFFFF
}/* Green */

.cn-button .cn-success:hover
{
	background-color: #46a049;
}

.cn-button .cn-info
{
	background-color: #2196F3; color: #FFFFFF
} /* Blue */

.cn-button .cn-info:hover
{
	background: #0b7dda;
}

.cn-button .cn-warning
{
	background-color: #ff9800; color: #FFFFFF
} /* Orange */

.cn-button .cn-warning:hover
{
	background: #e68a00;
}

.cn-button .cn-danger
{
	background-color: #f44336; color: #FFFFFF
} /* Red */ 

.cn-button .cn-danger:hover
{
	background: #da190b;
}

.cn-button .cn-default
{
	background-color: #e7e7e7; color: black;
} /* Gray */ 

.cn-button .cn-default:hover
{
	background: #ddd;
}

/*==============================================
 Border Style
==============================================*/
.cn-plain
{
	border: none;
}

.cn-solid-border
{
	border: 1px solid #000000;
}

.cn-round-border
{
	border-radius: 8px 8px 8px 8px;
}

.cn-oval-border
{
	border-radius: 50%;
}

.cn-capsule-border
{
	border-radius: 50px/50px;
}

.cn-circle-border
{
	border-radius: 100%;
}

.cn-sm-round
{
	border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
}

.cn-md-round
{
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
}

.cn-lg-round
{
	border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	-webkit-border-radius: 15px 15px 15px 15px;
}

/*==============================================
 Justify
==============================================*/
.cn-justify
{
	text-align: justify;
    text-justify: inter-word;
}

.cn-algin-right
{
	float: right;
}

.cn-align-left
{
	float: left;
}

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

.cn-align-top
{
	vertical-align : top;
}

.cn-align-middle
{
	vertical-align : middle;
}

.cn-align-bottom
{
	vertical-align : bottom;
}

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

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

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

.cn-right-icon
{
	float: right;
}

.cn-left-icon
{
	float: left;
	padding: 0px 8px 0px 0px;
}

/*==============================================
 Indent
==============================================*/
.cn-indent-1
{
	padding-left: 10px !important;
}

.cn-indent-2
{
	padding-left: 20px !important;
}

.cn-indent-3
{
	padding-left: 30px !important;
}

.cn-indent-4
{
	padding-left: 40px !important;
}

.cn-indent-5
{
	padding-left: 50px !important;
}

.cn-indent-6
{
	padding-left: 60px !important;
}

.cn-indent-7
{
	padding-left: 70px !important;
}

.cn-indent-8
{
	padding-left: 80px !important;
}

.cn-indent-9
{
	padding-left: 90px !important;
}

.cn-indent-10
{
	padding-left: 100px !important;
}

.cn-indent-11
{
	padding-left: 110px !important;
}

.cn-indent-12
{
	padding-left: 120px !important;
}

.cn-indent-13
{
	padding-left: 130px !important;
}

.cn-indent-14
{
	padding-left: 140px !important;
}

.cn-indent-15
{
	padding-left: 150px !important;
}

/*==============================================
 Modal Dialog
==============================================*/
.cn-modal {
    display: none;
    position: fixed;
    z-index: 9;
    padding-top: 200px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.cn-list-of-value {
    display: none;
    position: fixed;
    z-index: 9;
    padding-top: 150px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.cn-modal .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 750px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.cn-list-of-value .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 800px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

@-webkit-keyframes animatetop
{
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop
{
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

.cn-modal .modal-close , .cn-list-of-value .modal-close
{
    color: white;
    float: right;
    font-size: 20px;
    font-weight: bold;
}

.cn-modal .modal-close:hover, .cn-modal .modal-close:focus ,.cn-list-of-value .modal-close:hover, .cn-list-of-value .modal-close:focus 
{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.cn-modal .modal-header, .cn-list-of-value .modal-header
{
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.cn-modal .modal-info, .cn-list-of-value .modal-info
{
    padding: 2px 16px;
    background-color: #6dd0f7;
    color: black;
}

.cn-modal .modal-danger, .cn-list-of-value .modal-danger
{
    padding: 2px 16px;
    background-color: #c04953;
    color: white;
}

.cn-modal .modal-success, .cn-list-of-value .modal-success
{
    padding: 2px 16px;
    background-color : #28a745;
    color: white;
}

.cn-modal .modal-body, .cn-list-of-value .modal-body, 
{
	padding: 10px 36px;
}

.cn-modal .modal-footer, .cn-list-of-value .modal-footer
{
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/*==============================================
 Panel
==============================================*/
.cn-panel-shadow
{
	-webkit-box-shadow: 11px 11px 28px -7px rgba(0,0,0,0.35);
	-moz-box-shadow: 11px 11px 28px -7px rgba(0,0,0,0.35);
	box-shadow: 11px 11px 28px -7px rgba(0,0,0,0.35);
}

.cn-panel-mini-shadow
{
	-webkit-box-shadow: 8px 8px 7px -7px rgba(0,0,0,0.35);
	-moz-box-shadow: 8px 8px 7px -7px rgba(0,0,0,0.35);
	box-shadow: 8px 8px 7px -7px rgba(0,0,0,0.35);
}

.cn-panel-form
{
	margin: 0px;
	padding: 30px 25px 30px 25px;
}

.cn-panel-1
{
	background-color: #dce6f2;
	border: 5px solid #ffffff;
	padding: 3px 3px;
}

.cn-panel-2
{
	background-color: #f79646;
	color: #ffffff;
	border: 3px solid #ffffff;
	padding: 5px 10px;
}

.cn-panel-3
{
	padding : 4px 10px; 
	background-color: #984807;
	color : #ffffff;
}

.cn-panel-4
{
	padding: 5px;
	color: #ffffff;
	position: relative;
	border: 1px solid  #a186be;
    border-radius: 5px; 
	background: #a186be; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#a186be, #2e609d); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#a186be, #2e609d); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#a186be, #2e609d); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#a186be, #2e609d); /* Standard syntax */
}

.cn-panel-5
{
	padding: 5px;
	color: #ffffff;
	position: relative;
	border: 1px solid  #7b57a7;
    border-radius: 5px; 
	background: #7b57a7; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#7b57a7, #624585); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#7b57a7, #624585); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#7b57a7, #624585); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#7b57a7, #624585); /* Standard syntax */
}

.cn-panel-5:after
{
    left: 98%;
    top: 50%;
    border: solid transparent;
    content: "";
    position: absolute;
    border-left-color: #7b57a7;
    border-width: 17px;
    margin-top: -17px;
}

.cn-panel-6
{
    padding: 5px;
	color: #ffffff;
	position: relative;
	border: 1px solid  #9cc547;
    border-radius: 5px; 
    background: #9cc547;
	background: -webkit-linear-gradient(#9cc547, #7d9e39); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#9cc547, #7d9e39); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#9cc547, #7d9e39); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#9cc547, #7d9e39); /* Standard syntax */
}

.cn-panel-6:after
{
    left: 98%;
    top: 50%;
    border: solid transparent;
    content: "";
    position: absolute;
    border-left-color: #9cc547;
    border-width: 17px;
    margin-top: -17px;
}

.cn-panel-7
{
    padding: 5px;
	color: #ffffff;
	position: relative;
	border: 1px solid  #ff8f27;
    border-radius: 5px; 
    background: #ff8f27; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#ff8f27, #7d9e39); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#ff8f27, #7d9e39); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#ff8f27, #7d9e39); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ff8f27, #7d9e39); /* Standard syntax */
}

.cn-panel-7:after{
    left: 98%;
    top: 50%;
    border: solid transparent;
    content: "";
    position: absolute;
    border-left-color: #ff8f27;
    border-width: 17px;
    margin-top: -17px;
}

.cn-panel-8
{
	padding: 10px 15px 0 0;
	color: #ffffff;
	position: relative;
	border: 1px solid  #a186be;
    border-radius: 5px; 
	background: #a186be; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#a186be, #2e609d); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#a186be, #2e609d); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#a186be, #2e609d); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#a186be, #2e609d); /* Standard syntax */
}

.cn-panel-9
{
	background-color: #e9e9e9;
	color: #000000;
	padding: 10px 5px 10px 10px;	
	margin : 0px 0px 5px 0px;
}

.cn-panel-10
{
    padding: 5px;
	color: #fff;
	position: relative;
	border: 1px solid  #9cc547;
    border-radius: 5px; 
    background: #9cc547;
	background: -webkit-linear-gradient(#9cc547, #7d9e39); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#9cc547, #7d9e39); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#9cc547, #7d9e39); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#9cc547, #7d9e39); /* Standard syntax */
}

.cn-panel-11
{
	padding: 10px 15px 0 0;
	color: #000;
	position: relative;
	border: 1px solid  #bbb;
    border-radius: 5px;
	background: #f2f5f6; /* Old browsers */
	background: -moz-linear-gradient(top,  #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
}

.cn-panel-12
{
    padding: 5px;
	color: #000;
	position: relative;
	border: 1px solid  #dbdbdb;
    border-radius: 5px; 
    background: #dbdbdb;
	background: -webkit-linear-gradient(#dbdbdb, #cecece); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#dbdbdb, #cecece); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#dbdbdb, #cecece); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#dbdbdb, #cecece); /* Standard syntax */
}

.cn-panel-13
{
	padding: 0;
	color: #000;
	position: relative;
	border: 1px solid  #bbb;
    border-radius: 5px;
	background: #f2f5f6; /* Old browsers */
	background: -moz-linear-gradient(top,  #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */
}

.cn-panel-14
{
	background-color: #dce6f2;
	color: #000000;
	padding: 10px 5px 10px 10px;	
	margin : 0px 0px 5px 0px;
}

.cn-panel
{
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.cn-panel-body 
{
  padding: 15px;
}

.cn-panel-heading 
{
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.cn-panel-heading > .dropdown .dropdown-toggle 
{
  color: inherit;
}

.cn-panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}

.cn-panel-title > a,
.cn-panel-title > small,
.cn-panel-title > .small,
.cn-panel-title > small > a,
.cn-panel-title > .small > a 
{
  color: inherit;
}

.cn-panel-footer 
{
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}

.cn-panel > .list-group,
.cn-panel > .cn-panel-collapse > .list-group 
{
  margin-bottom: 0;
}

.cn-panel > .list-group .list-group-item,
.cn-panel > .cn-panel-collapse > .list-group .list-group-item 
{
  border-width: 1px 0;
  border-radius: 0;
}

.cn-panel > .list-group:first-child .list-group-item:first-child,
.cn-panel > .cn-panel-collapse > .list-group:first-child .list-group-item:first-child {
  border-top: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.cn-panel > .list-group:last-child .list-group-item:last-child,
.cn-panel > .cn-panel-collapse > .list-group:last-child .list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.cn-panel > .cn-panel-heading + .cn-panel-collapse > .list-group .list-group-item:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.cn-panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}
.list-group + .cn-panel-footer {
  border-top-width: 0;
}
.cn-panel > .table,
.cn-panel > .table-responsive > .table,
.cn-panel > .cn-panel-collapse > .table {
  margin-bottom: 0;
}
.cn-panel > .table caption,
.cn-panel > .table-responsive > .table caption,
.cn-panel > .cn-panel-collapse > .table caption {
  padding-right: 15px;
  padding-left: 15px;
}
.cn-panel > .table:first-child,
.cn-panel > .table-responsive:first-child > .table:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.cn-panel > .table:first-child > thead:first-child > tr:first-child,
.cn-panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
.cn-panel > .table:first-child > tbody:first-child > tr:first-child,
.cn-panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.cn-panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.cn-panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.cn-panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.cn-panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.cn-panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.cn-panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.cn-panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.cn-panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: 3px;
}
.cn-panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.cn-panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.cn-panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.cn-panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.cn-panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.cn-panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.cn-panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.cn-panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: 3px;
}
.cn-panel > .table:last-child,
.cn-panel > .table-responsive:last-child > .table:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.cn-panel > .table:last-child > tbody:last-child > tr:last-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
.cn-panel > .table:last-child > tfoot:last-child > tr:last-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.cn-panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.cn-panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.cn-panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.cn-panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: 3px;
}
.cn-panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.cn-panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.cn-panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.cn-panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.cn-panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: 3px;
}
.cn-panel > .cn-panel-body + .table,
.cn-panel > .cn-panel-body + .table-responsive,
.cn-panel > .table + .cn-panel-body,
.cn-panel > .table-responsive + .cn-panel-body {
  border-top: 1px solid #ddd;
}
.cn-panel > .table > tbody:first-child > tr:first-child th,
.cn-panel > .table > tbody:first-child > tr:first-child td {
  border-top: 0;
}
.cn-panel > .table-bordered,
.cn-panel > .table-responsive > .table-bordered {
  border: 0;
}
.cn-panel > .table-bordered > thead > tr > th:first-child,
.cn-panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.cn-panel > .table-bordered > tbody > tr > th:first-child,
.cn-panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.cn-panel > .table-bordered > tfoot > tr > th:first-child,
.cn-panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.cn-panel > .table-bordered > thead > tr > td:first-child,
.cn-panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.cn-panel > .table-bordered > tbody > tr > td:first-child,
.cn-panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.cn-panel > .table-bordered > tfoot > tr > td:first-child,
.cn-panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}
.cn-panel > .table-bordered > thead > tr > th:last-child,
.cn-panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.cn-panel > .table-bordered > tbody > tr > th:last-child,
.cn-panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.cn-panel > .table-bordered > tfoot > tr > th:last-child,
.cn-panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.cn-panel > .table-bordered > thead > tr > td:last-child,
.cn-panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.cn-panel > .table-bordered > tbody > tr > td:last-child,
.cn-panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.cn-panel > .table-bordered > tfoot > tr > td:last-child,
.cn-panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}
.cn-panel > .table-bordered > thead > tr:first-child > td,
.cn-panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.cn-panel > .table-bordered > tbody > tr:first-child > td,
.cn-panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.cn-panel > .table-bordered > thead > tr:first-child > th,
.cn-panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.cn-panel > .table-bordered > tbody > tr:first-child > th,
.cn-panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}
.cn-panel > .table-bordered > tbody > tr:last-child > td,
.cn-panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.cn-panel > .table-bordered > tfoot > tr:last-child > td,
.cn-panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.cn-panel > .table-bordered > tbody > tr:last-child > th,
.cn-panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.cn-panel > .table-bordered > tfoot > tr:last-child > th,
.cn-panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}
.cn-panel > .table-responsive {
  margin-bottom: 0;
  border: 0;
}
.cn-panel-group {
  margin-bottom: 20px;
}
.cn-panel-group .cn-panel {
  margin-bottom: 0;
  border-radius: 4px;
}
.cn-panel-group .cn-panel + .cn-panel {
  margin-top: 5px;
}
.cn-panel-group .cn-panel-heading {
  border-bottom: 0;
}
.cn-panel-group .cn-panel-heading + .cn-panel-collapse > .cn-panel-body,
.cn-panel-group .cn-panel-heading + .cn-panel-collapse > .list-group {
  border-top: 1px solid #ddd;
}
.cn-panel-group .cn-panel-footer {
  border-top: 0;
}
.cn-panel-group .cn-panel-footer + .cn-panel-collapse .cn-panel-body {
  border-bottom: 1px solid #ddd;
}
.cn-panel-default {
  border-color: #ddd;
}
.cn-panel-default > .cn-panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.cn-panel-default > .cn-panel-heading + .cn-panel-collapse > .cn-panel-body {
  border-top-color: #ddd;
}
.cn-panel-default > .cn-panel-heading .badge {
  color: #f5f5f5;
  background-color: #333;
}
.cn-panel-default > .cn-panel-footer + .cn-panel-collapse > .cn-panel-body {
  border-bottom-color: #ddd;
}
.cn-panel-primary {
  border-color: #337ab7;
}
.cn-panel-primary > .cn-panel-heading {
  color: #fff;
  background-color: #337ab7;
  border-color: #337ab7;
}
.cn-panel-primary > .cn-panel-heading + .cn-panel-collapse > .cn-panel-body {
  border-top-color: #337ab7;
}
.cn-panel-primary > .cn-panel-heading .badge {
  color: #337ab7;
  background-color: #fff;
}
.cn-panel-primary > .cn-panel-footer + .cn-panel-collapse > .cn-panel-body {
  border-bottom-color: #337ab7;
}
.cn-panel-success {
  border-color: #d6e9c6;
}
.cn-panel-success > .cn-panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.cn-panel-success > .cn-panel-heading + .cn-panel-collapse > .cn-panel-body {
  border-top-color: #d6e9c6;
}
.cn-panel-success > .cn-panel-heading .badge {
  color: #dff0d8;
  background-color: #3c763d;
}
.cn-panel-success > .cn-panel-footer + .cn-panel-collapse > .cn-panel-body {
  border-bottom-color: #d6e9c6;
}
.cn-panel-info {
  border-color: #bce8f1;
}
.cn-panel-info > .cn-panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.cn-panel-info > .cn-panel-heading + .cn-panel-collapse > .cn-panel-body {
  border-top-color: #bce8f1;
}
.cn-panel-info > .cn-panel-heading .badge {
  color: #d9edf7;
  background-color: #31708f;
}
.cn-panel-info > .cn-panel-footer + .cn-panel-collapse > .cn-panel-body {
  border-bottom-color: #bce8f1;
}
.cn-panel-warning {
  border-color: #faebcc;
}
.cn-panel-warning > .cn-panel-heading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.cn-panel-warning > .cn-panel-heading + .cn-panel-collapse > .cn-panel-body {
  border-top-color: #faebcc;
}
.cn-panel-warning > .cn-panel-heading .badge {
  color: #fcf8e3;
  background-color: #8a6d3b;
}
.cn-panel-warning > .cn-panel-footer + .cn-panel-collapse > .cn-panel-body {
  border-bottom-color: #faebcc;
}
.cn-panel-danger {
  border-color: #ebccd1;
}
.cn-panel-danger > .cn-panel-heading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.cn-panel-danger > .cn-panel-heading + .cn-panel-collapse > .cn-panel-body {
  border-top-color: #ebccd1;
}
.cn-panel-danger > .cn-panel-heading .badge {
  color: #f2dede;
  background-color: #a94442;
}
.cn-panel-danger > .cn-panel-footer + .cn-panel-collapse > .cn-panel-body {
  border-bottom-color: #ebccd1;
}
/*==============================================
 Breadcrumb
==============================================*/
.cn-breadcrumb
{ 
	margin: 0px 15px;
}

.cn-breadcrumb ul
{
	list-style-type: none;
	overflow: hidden;
	font-size: 14px;
	margin: 0;
    padding: 0;
}

.cn-breadcrumb li
{ 
	float: left;
}

.cn-breadcrumb li a
{
	color: white;
	text-decoration: none; 
	padding: 5px 0 5px 45px;
	background: brown; /* fallback color */
	background: hsla(34,85%,25%,1); 
	position: relative; 
	display: block;
	float: left;
}

.cn-breadcrumb li a::after
{ 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
	border-bottom: 50px solid transparent;
	border-left: 30px solid hsla(34,85%,25%,1);
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	left: 100%;
	z-index: 2; 
}

.cn-breadcrumb li a::before
{ 
	content: " "; 
	display: block; 
	width: 0; 
	height: 0;
	border-top: 50px solid transparent;       
	border-bottom: 50px solid transparent;
	border-left: 30px solid white;
	position: absolute;
	top: 50%;
	margin-top: -50px; 
	margin-left: 1px;
	left: 100%;
	z-index: 1; 
}

.cn-breadcrumb li:first-child a
{
	padding-left: 15px;
}

.cn-breadcrumb li:nth-child(2) a       { background:        hsla(34,85%,35%,1); }
.cn-breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,35%,1); }
.cn-breadcrumb li:nth-child(3) a       { background:        hsla(34,85%,45%,1); }
.cn-breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,45%,1); }
.cn-breadcrumb li:nth-child(4) a       { background:        hsla(34,85%,55%,1); }
.cn-breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,55%,1); }
.cn-breadcrumb li:nth-child(5) a       { background:        hsla(34,85%,65%,1); }
.cn-breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,65%,1); }
.cn-breadcrumb li:nth-child(6) a       { background:        hsla(34,85%,75%,1); }
.cn-breadcrumb li:nth-child(6) a:after { border-left-color: hsla(34,85%,75%,1); }
.cn-breadcrumb li:nth-child(7) a       { background:        hsla(34,85%,85%,1); }
.cn-breadcrumb li:nth-child(7) a:after { border-left-color: hsla(34,85%,85%,1); }
.cn-breadcrumb li:nth-child(8) a       { background:        hsla(34,85%,95%,1); }
.cn-breadcrumb li:nth-child(8) a:after { border-left-color: hsla(34,85%,95%,1); }

.cn-breadcrumb li:last-child a
{
	background: transparent !important;
	color: black;
	pointer-events: none;
	cursor: default;
}

.cn-breadcrumb li:last-child a::after
{ 
	border: 0; 
}

.cn-breadcrumb li a:hover
{ 
	background: hsla(54, 85%, 45%, 1);
	color: #000000;
}

.cn-breadcrumb li a:hover:after
{ 
	border-left-color: hsla(54, 85%, 45%, 1) !important; 
	color: #000000;
}

/*==============================================
 Decorate
==============================================*/
.cn-clickable
{
    cursor: pointer;
}

.cn-more .cn-download
{
	text-decoration: none;
	padding: 3px 3px;
	font-weight: bold;
}

.cn-download:after
{
	font-family: FontAwesome;
	content: " \f019";
	padding: 0px 12px 0px 0px;
}

.cn-more:after
{
	font-family: FontAwesome;
	content: " \f101";
}

.cn-more:hover .cn-download:hover
{
	text-decoration: none;
	padding: 3px 3px;
	font-weight: bold;
	color: #000000;
}
/*==============================================
 Icon
==============================================*/
.cn-icon 
{
	font-size:18pt;
}

.cn-text-icon
{
	font-size:12pt;
	border : 1px solid;
	border-radius: 4px 4px 4px 4px;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	padding: 0 3px;
	margin:0 0;
	width:25px;
	cursor: pointer;
}

.cn-basic-color
{
	color : #000000;
	background-color : #f0f0f0;
}

.cn-default-color
{
	color : #000000;
	background-color : #ffffff;
}

.cn-primary-color
{
	color : #ffffff;
	background-color : #337ab7;
}

.cn-success-color
{
	color : #000000;
	background-color : #5cb85c;
}

.cn-info-color
{
	color : #000000;
	background-color : #5bc0de;	
}

.cn-warning-color
{
	color : #000000;
	background-color : #f0ad4e;
}

.cn-danger-color
{
	color : #ffffff;
	background-color : #d9534f;
}

.cn-highlight-color
{
	color : #ff00000;
	background-color : #ffff00;
}
/*==============================================
 Menu
==============================================*/
.cn-menu a
{
	text-decoration: none;
	color : #FF2200;
}

cn-menu-link:hover
{
	color : #ff0000;
	background-color : #ffff00;
}

.cn-dropdown-menu
{
	position: relative;
}

.cn-menu-item
{
	display: none;
}

.cn-menu-item.cn-down
{
}

.cn-menu-item.cn-pull-right
{
	position: absolute;
	margin-top: -1em;
	left : 9em;
	min-width: 150px;
	z-index: 999;
}

/*==============================================
  menu switches
==============================================*/
.cn-menu-switches
{
	display : block;
	color: black;
	margin: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.cn-menu-switches:hover
{
	background-color: #0275d8;
	color : #fff;
}

/*==============================================
 Navigator
==============================================*/
.cn-nav
{
	display : block;
	margin : 0;
	padding: 0;
}

.cn-nav  > .cn-menu-switches
{
	margin: 0px 8px 0px 0px;
	display: inline-block;
}

.cn-nav > .cn-tab
{
	border:
}

/*==============================================
 Side Navigator
==============================================*/
.cn-side-nav
{
	height : 100%;
	width: 0px;
	position: absolute;
	z-index: 1;
	top: 0;
	left:0;
	background-color:#8faadc;
	overflow-x: hidden;
	overflow-y: hidden;
	transition: 0.3s;
	padding-top: 50px;
}

.cn-side-nav .cn-close-switch
{
	position: absolute;
	top: 0;
	right: 5px;
	font-size: 36px;
	margin-left: 50px;
}

.cn-side-nav a
{
	color: #FFFFFF;
}

/*==============================================
 menu pad
==============================================*/
.cn-menu-pad
{
	display : block;
	margin : 0;
	padding: 0;
}


/*==============================================
 pulldown menu
==============================================*/
.cn-pulldown
{
	position: relative;
	display: inline-block;
}

.cn-pulldown-menu
{
	display: none;
	position: absolute;
	min-width: 100px;
	z-index: 9;
}

.cn-pulldown:hover .cn-pulldown-menu
{
	display: block;
}

/*==============================================
 pupup menu
==============================================*/
.cn-popup
{
	font-family: 'Tahoma', 'Sarabun', 'Prompt', sans-serif;
	position:relative;
}

.cn-popup  > .cn-menu-switches
{
}

.cn-popup-menu
{
	display: none;
	position: absolute;
	margin: -30px 0px 0px 100px;
	min-width: 100px;
	z-index: 1;
}

.cn-popup:hover  > .cn-popup-menu
{
	display: block;
}

/*==============================================
 Page Tab
==============================================*/
.cn-tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cn-tabs li {
  float: left;
  margin: 0 .5em 0 0;
}

.cn-tabs a {
  position: relative;
  background: #ddd;
  z-index: 2;
  /*background-image: linear-gradient(to bottom, #fff, #ddd);*/
  padding: .5em 0.8em;
  float: left;
  text-decoration: none;
  color: #444;
  border-radius: 5px 0 0 0;
  box-shadow: -1px 0px 1px rgba(0,0,0,0.3);
}

.cn-tabs a:hover,
.cn-tabs a:hover::after,
.cn-tabs a:focus,
.cn-tabs a:focus::after
{
  /*background: #d4c111;*/
  background: #eee;
}

.cn-tabs a:focus {
  outline: 0;
}

.cn-tabs a::after {
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -0.6em;  
  bottom: 0;
  width: 1em;
  background: #ddd;
  /*background-image: linear-gradient(to bottom, #fff, #ddd);*/
  box-shadow: 2px 0px 1px rgb(0,0,0,0.3);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;  
}

.cn-tabs a.active,
.cn-tabs a.active::after {
  background: #4472c4;
  color: #ffffff;
  z-index: 3;
}

#cn-tab-content {
  background: #fff;
  padding: 2em;
  height: 220px;
  position: relative;
  z-index: 2; 
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

/*==============================================
 switch
==============================================*/
.cn-switch label
{
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.cn-switch input
{ 
  opacity: 0;
  width: 0;
  height: 0;
}

.cn-switch span
{
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 12px;
}

.cn-switch span:before
{
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .1s;
  transition: .1s;
  border-radius: 50%;
}

.cn-switch input:checked + span 
{
  background-color: #2196F3;
}

.cn-switch input:focus + span
{
  box-shadow: 0 0 1px #2196F3;
}

.cn-switch input:checked + span:before
{
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

.cn-lang-switch label
{
	position: relative;
	display: inline-block;
	width: 80px;
	height: 22px;
	border: 1px solid #000;
}

.cn-lang-switch input
{ 
	opacity: 0;
	width: 0;
	height: 0;
}

.cn-lang-switch span
{
	transition: margin 0.3s ease-in 0s;
}

.cn-lang-switch span:before , .cn-lang-switch span:after
{
	display: block; float: left;
	width: 40px; height: 22px; padding: 0; line-height: 22px;
    box-sizing: border-box;
}

.cn-lang-switch span:before
{
    content: "ไทย";
    padding-left: 7px;
    background-color: #34A7C1; color: #fff;
}

.cn-lang-switch span:after {
    content: "Eng";
    padding-right: 7px;
    background-color: #ddd; color: #aaa;
    text-align: right;
}

.cn-lang-switch input:checked + span:before
{
	content: "Eng";
	-webkit-transform: translateX(40px);
	-ms-transform: translateX(40px);
	transform: translateX(40px);
}

.cn-lang-switch input:checked + span:after
{
    content: "ไทย";
    -webkit-transform: translateX(-40px);
	-ms-transform: translateX(-40px);
	transform: translateX(-40px);
}
/*==============================================
 table
==============================================*/
.cn-table , .cn-normal-table
{
	width:100%;
}

.cn-table-header
{
	/*background: #21dbf6;*/
	background : #dae3f3;
	padding: 3px 5px;
}

.cn-table-mini-header
{
	background-color : #dae3f3;
}

.cn-table-footer
{
	background-color : #f9ece3;
}

.cn-table thead , .cn-normal-table thead
{
}

.cn-table body , .cn-normal-table body
{
}

.cn-table-mini-header th
{
	background-color : #7accc8;
	color: #000000;
	padding : 5px 10px 5px 10px;
	font-weight: normal;
}

.cn-table th 
{
	background-color : #dae3f3;
	padding: 3px 5px;
	border : 1px solid #84a2d8;
	color: #333333;
	padding : 5px 10px 5px 10px;
	font-weight: normal;
}

.cn-table td 
{
	background-color : #fffffff;
	border : 1px solid #84a2d8;
	color: #222222;
	padding : 5px;
}

.cn-normal-table th
{
	background-color : #5b9bd5;
	padding: 3px 5px;
	border : 1px solid #5b9bd5;
	color: #fff;
	padding : 5px 10px 5px 10px;
	font-weight: normal;
}

.cn-normal-table td
{
	background-color : #fff;
	border : 1px solid #5b9bd5;
	color: #555;
	padding : 5px;
}

.cn-table footer ,   .cn-normal-table footer
{
}

.cn-table .summary ,   .cn-normal-table summary
{
}

/*--------------------------------*/
.cn-grid-table
{
	border : 1px solid #84a2d8;
}

.cn-grid-table-header
{
	background-color : #21dbf6;
}

.cn-grid-table-footer
{
	background-color : #f9ece3;
}

.cn-grid-table thead
{
}

.cn-grid-table body
{
}

.cn-grid-table footer
{
}

.cn-grid-table th
{
	background-color : #dae3f3;
	border : 1px solid #84a2d8;
	color: #333333;
	padding : 5px 10px 5px 10px;
	font-weight: normal;
	text-align : center;
}

.cn-grid-table td
{
	border-left : 1px solid #84a2d8;
	border-right : 1px solid #84a2d8;
	color: #222222;
	padding : 5px;
}

.cn-grid-table tr:nth-child(even)
{
	background-color : #f8f8f8;
}

.cn-grid-table .summary
{
}

.cn-grid-table tr.current:hover
{
	background-color : #b6dde8 !important;
}

/*==============================================
 tooltip
==============================================*/
.cn-tooltip
{
    position: relative;
    display: inline-block;
	margin:0 0;
}

.cn-tooltip .cn-tooltiptext
{
	visibility: hidden;
    width: 200px;
	-webkit-border-radius: 6px; 
	-moz-border-radius: 6px;
	border-radius: 6px;
	border:1px solid #d1dcdf;
	background-color: #f2f5f6; background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f5f6), to(#c8d7dc));
	background-image: -webkit-linear-gradient(top, #f2f5f6, #c8d7dc);
	background-image: -moz-linear-gradient(top, #f2f5f6, #c8d7dc);
	background-image: -ms-linear-gradient(top, #f2f5f6, #c8d7dc);
	background-image: -o-linear-gradient(top, #f2f5f6, #c8d7dc);
	background-image: linear-gradient(to bottom, #f2f5f6, #c8d7dc);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f2f5f6, endColorstr=#c8d7dc);
    /*background-color: #4bacc6;*/
    color: #444;
    text-align: center;
    padding: 5px 5px;
    position: absolute;
    z-index: 5;
    top: 120%;
    left: 50%;
    margin-left: -100px;
}

.cn-tooltip .cn-tooltiptext::after
{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #c8d7dc transparent;
}

.cn-tooltip:hover .cn-tooltiptext
{
    visibility: visible;
}