/*==============================================
 standard
==============================================*/
*
{
	/*
	font-family: TH SarabunPSK,FreesiaUPC,CordiaUPC,AngsanaUPC,EucrosiaUPC,LilyUPC;
	font-size: 14pt;
	*/
	font-family: 'Prompt', sans-serif;
	font-size: 12pt;
	font-weight: 300;
	font-style: normal;
}

body
{
	border:  0px;
	margin: 5px;
	background-color:#dddddd;
}

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

a
{
	text-decoration: none !important;
}

/*==============================================
 Container
==============================================*/
.cn-container
{
	background-color: #f9d8b8;
	min-height: calc( 100vh - 13px );
}

.cn-content
{
	background: #eeeeee;
	transition: margin-left .5s;
	padding: 10px;
}

/*==============================================
 Font Size
==============================================*/
.cn-font-s1
{
	font-size: 9pt;
}

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

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

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

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

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

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

.cn-font-s8
{
	font-size: 42pt;
}

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

.cn-font-s10
{
	font-size: 72pt;
}

/*==============================================
 Banner
==============================================*/
.cn-banner-1
{
}

.cn-banner-2
{
}

.cn-banner-3
{
}

.cn-banner-4
{
}

.cn-banner-5
{
}

.cn-banner-6
{
}

.cn-banner-7
{
}

.cn-banner-8
{
}

.cn-banner-9
{
}

.cn-banner-10
{
}

/*==============================================
 Background
==============================================*/
.cn-background-1
{
	background-color:#e5c6b7;
}

.cn-background-2
{
	background-color:#f79646;
}

.cn-background-3
{
	background-color:#e555b7;
}

.cn-background-4
{
}

.cn-background-5
{
}

.cn-background-6
{
}

.cn-background-7
{
}

.cn-background-8
{
}

.cn-background-9
{
}

.cn-background-10
{
}

/*==============================================
 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: #4CAF50; 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-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;
}

/*==============================================
 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-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-4:after
{
    left: 98%;
    top: 50%;
    border: solid transparent;
    content: "";
    position: absolute;
    border-left-color: #a186be;
    border-width: 17px;
    margin-top: -17px;
}

.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
{
	margin : 0;
	padding : 3px 3px; 
}

.cn-panel-9
{
	margin : 0;
	padding : 2px 2px; 
	background-color:  #dce6f2;
}

.cn-panel-10
{
	margin : 0;
	padding : 1px 1px; 
}


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

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

/*==============================================
  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: #4CAF50;
	color : #FFFFFF;
}

/*==============================================
 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:#914b18;
	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;
}

.cn-menu-block
{
	width: 100px;
	display: block;
	z-index: 0;
}

/*==============================================
 dropdown menu
==============================================*/
.cn-dropdown
{
	background: #bca895;
	font-weight: bold;
}

.cn-dropdown-menu
{
	display: none;
	padding-bottom: 10px;
	border-bottom: 2px solid #bca895;
	background-color :#f9d8b8;
}

.cn-dropdown-menu a
{
	color: #000000;
}

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

/*==============================================
 table
==============================================*/
.cn-table
{
	width:100%;
}

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

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

.cn-table thead
{
}

.cn-table body
{
}

.cn-table th
{
	background-color : #bd7d40;
	border : 1px solid #cf9d60;
	color: #ffffff;
	padding : 5px 10px 5px 10px;
	font-weight: normal;
}

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

.cn-table footer
{
}

.cn-table .summary
{
}

.cn-report th
{
	background-color : #bd7d40;
	color: #ffffff;
	padding : 5px 10px 5px 10px;
	font-weight: normal;
}

.cn-report td
{
	background-color : #ffffff;
	color: #222222;
	padding : 5px;
}

.cn-report footer
{
}

.cn-report .summary
{
}