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

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

span.cn-data
{
	border-bottom : 1px dotted #000;
}

.cn-line-space
{
	margin: 0;
	&.normal
	{
		line-height: 1.6;
	}

	&.narrow
	{
		line-height: 50%;
	}

	&.far
	{
		line-height: 200%;
	}
}

.cn-reset
{
	text-decoration: none;
}

.cn-body
{
	display: flex;
    flex-direction: column;
    min-height: 100vh; /* ให้ body สูงเต็มหน้าจอ */
	padding:0px;
	width:1280px;
	margin: auto;
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.cn-body .work-area
{
	width:1276px;
	/*width:1020px;*/
	padding:0px 0px;
}

ul.cn-reset
{
	list-style:none;
}

.cn-no-decorate
{
	border:none;
	text-decoration: none;
	
}

/*==============================================
 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-color:#f2f1ef;
		transition: margin-left .5s;
		padding: 10px;
		flex: 1;
	}
}

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

.cn-border-dotted
{
	border-style: dotted ;
}

.cn-border-dashed
{
	border-style: dashed;
}

.cn-hide
{
	display : none;
}

/*==============================================
 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 : #f2f1ef;
	color : #9da0a9;
}
.cn-bg-secondary
{
	background-color:#9da0a9;
	color : #a2a1a2;
}
.cn-bg-tertiary
{
	background-color:#a5a9b2;
	color : #828898;
}
.cn-bg-success
{
	background-color : #d8cfd0;
	color : #a09fa0;
}
.cn-bg-danger
{
	background-color : #dc3545;
	color : #fff;
}
.cn-bg-warning
{
	background-color : #ffc107;
	color : #000;
}
.cn-bg-info
{
	background-color : #a09fa0;
	color : #858181;
}
.cn-bg-muted
{
	background-color : #f1f1f1;
	color : #cdcdcd;
}
.cn-bg-dark
{
	background-color : #413f3d;
	color : #858485;
}
.cn-bg-light
{
	background-color : #858181;
	color : #9da0a9;
}
.cn-bg-high-light
{
	background-color : #697184;
	color : #989da8;
}
.cn-bg-black
{
	background-color : #252525;
	color : #ebebeb;
}
.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;

}
		
.cn-button
{
	padding: 7px 10px;
	display:inline-block;
	transition: all 0.3s ease-out;			
}

.cn-button-link
{
	border : none;
	background-color : transparent;
	color : blue;
	padding : 0px;
	margin: 0px;
}

.cn-close-switch
{
	border:none;
	padding:0px 5px;
	background-color : transparent;
	color :  #888;
	position : absolute;
	top: 0px;
	right: 0px;
}

.cn-close-dialog
{
	border:none;
	padding:0px 5px;
	background-color : transparent;
	color :  #fff;
	position : absolute;
	top: 0px;
	right: 0px;
}

/*==============================================
 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;
}

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

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

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

.cn-float-center
{
}

.cn-float-middle
{
}

.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;
	padding: 0px 0px 0px 8px;
}

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

/*==============================================
Field Format
==============================================*/
.cn-number
{
	text-align:right;
}
		
/*==============================================
 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;
}

/*==============================================
 Box
==============================================*/
.cn-box-shadow {
  &.top {
    box-shadow: 0px -15px 10px -15px #111;    
  }
  &.bottom {
    box-shadow: 0px 15px 10px -15px #111;    
  }
  &.left {
    box-shadow: -15px 0px 10px -15px #111;    
  }
  &.right {
    box-shadow: 15px 0px 10px -15px #111;    
  }
}

/*==============================================
 Box
==============================================*/
.cn-box
{
	border-style:none;
}

/*https://getcssscan.com/css-box-shadow-examples*/
.cn-box.box-shadow {
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.cn-box.box-inline
{
	display:inline-block;
}

.cn-box.narrow-padding
{
	padding: 2px;
}

.cn-box.normal-padding
{
	padding: 10px;
}

.cn-box.width-padding
{
	padding: 20px;
}

.cn-box.box-primary
{
	border-color : #007bff;
}

.cn-box.box-default
{
	border-color : #000;
}

.cn-box.box-mute
{
	border-color : #6c757d;
}

.cn-box.box-info
{
	border-color : #17a2b8;
}

.cn-box.box-warning
{
	border-color : #ffc107;
}

.cn-box.box-danger
{
	border-color : #dc3545;
}

.cn-box.box-success
{
	border-color : #28a745;
}

.cn-box.box-dark
{
	border-color : #343a40;
}

.cn-box.box-thin
{
	border-width: thin;
}

.cn-box.box-normal
{
	border-width:medium;
}

.cn-box.box-thick
{
	border-width:thick;
}

.cn-box.box-top
{
	border-bottom-style : solid;
}

.cn-box.box-bottom
{
	border-bottom-style : solid;
}

.cn-box.box-left
{
	border-bottom-style : solid;
}

.cn-box.box-right
{
	border-bottom-style : solid;
}

.cn-box.box
{
	border-style : solid;
}

.cn-box.box-dotted
{
	border-style : dotted;
}

.cn-box.box-dashed
{
	border-style : dashed;
}

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

.cn-box.box-solid
{
	border-style: solid;
}

.cn-box.box-dotted
{
	border-style: dotted;
}

.cn-box.box-dashed
{
	border-style: dashed;
}

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

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

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

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

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

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

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

/*==============================================
 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 0px;
	padding: 15px 15px;
}

.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
{
	background-color: #dce6f2;
	color: #ffffff;
}

.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.cn-panel-center
{
  position: absolute;
  left: 0; 
  right: 0; 
  top: 50px;
  margin-left: auto; 
  margin-right: auto; 
  z-index: 102;
}

.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 0px;
	background-color: #fff;
}

.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
{ 
	background: transparent !important;
	border: 0;
}

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

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

/*==============================================
 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-submenu-item
{
	display: none;
}

.cn-submenu-item.cn-down
{
}

.cn-submenu-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 : 100vh;
	width: 0px;
	float : left;
	z-index: 1;
	top: 0;
	left:0;
	background-color:#d0d5e3;
	overflow-x: hidden;
	overflow-y: hidden;
	transition: 0.3s;
}

.cn-side-nav .cn-close-switch
{
	position:relative;
	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
{
	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.cn-hover tbody tr:hover
{
	background-color: #ddd;
}

.cn-table.cn-hover tbody tr:nth-child(odd):hover
{
	background-color: #ddd !important;
}

.cn-table.cn-striped tbody tr:nth-child(odd)
{
	background-color: #f2f2f2;
}

.cn-table thead th 
{
	padding: 5px 5px;
	color: #333;
	font-weight: medium;
}

.cn-table tbody th 
{
	padding: 3px 5px;
	color: #333;
	font-weight: medium;
}

.cn-table th 
{
	padding: 3px 5px;
	color: #333;
}

.cn-table.cn-head-primary thead th
{
	background-color : #dae3f3;
}

.cn-table.cn-head-primary tbody th
{
	background-color : #dae3f3;
}

.cn-table.cn-head-primary tfoot th
{
	background-color : #dae3f3;
}

.cn-table td 
{
	padding: 3px 5px;
	color: #222;
	font-weight: normal;
}

.cn-table th.cn-bottom-line ,.cn-table td.cn-bottom-line
{
	border-bottom : 2px solid #84a2d8;
}

.cn-table.cn-border thead th
{
	border-top : 1px solid #84a2d8;
	border-left : 1px solid #84a2d8;
	border-right : 1px solid #84a2d8;
	border-bottom : 2px solid #84a2d8;
}

.cn-table.cn-border tbody th
{
	border-top : 1px solid #84a2d8;
	border-left : 1px solid #84a2d8;
	border-right : 1px solid #84a2d8;
	border-bottom : 1px solid #84a2d8;
}

.cn-table.cn-no-border th, .cn-table.cn-no-border td
{
	border :  none;
}

.cn-table.cn-no-border tr:last-child
{
	border-bottom :  none !important;
}

.cn-table td.cn-data
{
	border-bottom : 1px dashed #888;
}

.cn-table td.cn-border , .cn-table th.cn-border
{
	border : 1px solid #84a2d8;
}

.cn-table td.cn-mute
{
	background-color	 : #ccc;
}

.cn-table.cn-border tfoot th
{
	border-top : 1px solid #84a2d8;
	border-left : 1px solid #84a2d8;
	border-right : 1px solid #84a2d8;
	border-bottom : 1px solid #84a2d8;
}

.cn-table.cn-border td
{
	border : 1px solid #84a2d8;
}

.cn-table.cn-end tr:last-child
{
	border-bottom : 2px solid #84a2d8;
}

.cn-table.cn-grid td
{
	border : 1px solid #fff;
}

.cn-table.cn-grid th
{
	border : 1px solid #fff;
}
/*==============================================
 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;
}