/*++++++++++++++++++++++++++++++++++++++
	by TEEMPALTED.co
	----------------
	all tags
	body
	#Header
	#Nav
	#Banner

	by self
	----------------
	**icon in footer**
	.icon , ul.icon
	footer

	**title**
	.active
	.banner_caption

	**text arrangement**
	.indent
	ul,ol 

	**ITEM IMAGE DISPLAY**

	**ICON**
	i.fb-share
	.rcorners
	.fa-icon_modify

	**for Dropdwon button**
	.dropdown
	.dropdown-content

	HR style
	FOR REGISTER PART
	SET RADIO / CHECKBOX TO USE FONTAWSOME ICON
	NOTIFY ERROR BOX when submit form
	BACK OFFICE
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	COLOR : 
	title font : #A38C74 , rgb(163, 140, 116)

	NOTE:
	.col-xs-$	Extra Small	Phones Less than 768px
	.col-sm-$	Small Devices	Tablets 768px and Up
	.col-md-$	Medium Devices	Desktops 992px and Up
	.col-lg-$	Large Devices	Large Desktops 1200px and Up;
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/


/* SET FONT */
@font-face{
	font-family:'supermarket';
	src : url('fonts/supermarket.ttf'); 
}

@font-face {
    font-family: 'kanitlight';
    src: url('font-kit/kanit-light-webfont.woff2') format('woff2'),
         url('font-kit/kanit-light-webfont.woff') format('woff');

    font-weight: normal;
    font-style: normal;
}

@font-face{
	font-family:'angsananews-bolditalic';
	src : url('fonts/ANGSANANEWS-BOLDITALIC.TTF'); 
}

@font-face{
	font-family:'dbhelvethaicax';
	/*src : url('fonts/DBHELVETHAICAX.TTF'); */
	src : url('fonts/DBHelvethaicaX_Liv3.2.ttf'); 
	/*src : url('fonts/totop_fonts/DBHelvethaicaX_Thin6.ttf'); */
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{
		/*margin: 0;
		padding: 0;
		border: 0;*/
	font-size: 100%;
	/*font: inherit;*/
	vertical-align: baseline;
}

		/* @media screen and (max-width: 736px) 
		{
			html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
			{
				font-size: 95%;
			}
		} */

/*small{
	font-size: 1em; !important;
}*/

.font-content{
    font-family :'Kanit','kanitlight',sans-serif;
}

body {
	background: #fff;
}


/*----------------------
	HEADER FRONT PAGE
-----------------------*/
#header 
{
	color: #ffffff;
	/*font-family: 'Kanit','kanitlight',sans-serif;*/
	font-family: 'dbhelvethaicax','Kanit',sans-serif;
	text-align: right;
	background-color:rgba(255, 255, 255,0.9);
	
	height: 5em;
	line-height: 5em;
	
	/*position: absolute;*/
	/*position: relative;*/
	position: fixed;
	left    : 0;
	width   : 100%;
	z-index : 666;	

	cursor: default;
	border-bottom: 2px solid #A38C74;
}

	#header .inner
	{
		margin: 0 auto;
		position: relative;
	}

	#header .logo 
	{
		color      : #A38C74;
		font-weight: bold;

		display: inline-block;
		height: inherit;

		position: absolute;
		margin  : 0;
		padding : 0;
		top     : 0.5em;
		left    : 0;
		z-index : 667;
	}

	#header a
	{
		-moz-transition   : color 0.2s ease-in-out;
		-webkit-transition: color 0.2s ease-in-out;
		-ms-transition    : color 0.2s ease-in-out;
		transition        : color 0.2s ease-in-out;

		display        : inline-block;
		padding        : 0 0.4em;
		color          : #000000;
		text-decoration: none;
		font-size      : 1em;
	}

		#header a:hover {
			color: #A38C74;
		}
		#header a:last-child {
			padding-right: 0;
		}
		#header a.navPanelToggle
		{
			display        : none;
			text-decoration: none;
			height         : 4em;
			width          : 4em;
			z-index        : 10003;
		}
			#header a.navPanelToggle .fas {
				font-size: 1.25em;
			}
		@media screen and (max-width: 980px)
		{
			#header a.navPanelToggle {
				display: inline-block;
			}
		}

	@media screen and (max-width: 736px) 
	{
		#header a {
			padding: 0 0.5em;
		}
	}


/*--------------------
	NAV FRONT PAGE
---------------------*/
	
	#nav{
		position: relative;
		/*right:10em;	*/
	}
		@media screen and (max-width: 1024px) 
		{
			#nav {
				position: relative;
				right:0;	
			}
			#header .logo{
				left:0;
			}
		}
			
		@media screen and (max-width: 980px) 
		{
			#nav {
				display: none;
			}
		}

	#navPanel
	{
		-moz-transform            : translatex(20em);
		-webkit-transform         : translatex(20em);
		-ms-transform             : translatex(20em);
		transform                 : translatex(20em);
		-moz-transition           : -moz-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-transition        : -webkit-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-ms-transition            : -ms-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		transition                : transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-overflow-scrolling: touch;
		
		visibility: hidden;
		overflow-y: auto;
		position  : fixed;
		right     : 0;
		top       : 0;
		
		/*background: #A38C74*/
		/*background: rgba(163, 140, 116, 0.8);*/
		background: rgba(187, 187, 187, 0.95);

		/*color     : #d4e0ef;*/
		height    : 100%;
		max-width : 70%;
		width     : 20em;
		padding   : 0.5em 1.25em;
		z-index   : 10003;

		/*font-family: 'dbhelvethaicax', sans-serif;*/
		font-family: 'kanitlight', sans-serif;
	}

		#navPanel.visible
		{
			-moz-transform   : translatex(0);
			-webkit-transform: translatex(0);
			-ms-transform    : translatex(0);
			transform        : translatex(0);
			box-shadow       : 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
			visibility       : visible;
		}

		#navPanel a:not(.close)
		{
			border-top     : solid 1px rgba(255, 255, 255, 0.25);
			color          : #ffffff;
			font-weight    : bold;
			display        : block;
			padding        : 0.75em 0;
			text-decoration: none;
		}

			#navPanel a:not(.close):first-child {
				border: none;
			}

		#navPanel .close
		{
			text-decoration            : none;
			-moz-transition            : color 0.2s ease-in-out;
			-webkit-transition         : color 0.2s ease-in-out;
			-ms-transition             : color 0.2s ease-in-out;
			transition                 : color 0.2s ease-in-out;
			-webkit-tap-highlight-color: transparent;

			border        : 0;
			color         : #d4e0ef;
			cursor        : pointer;
			display       : block;
			height        : 4em;
			padding-right : 1.25em;
			position      : absolute;
			right         : 0;
			text-align    : right;
			top           : 0;
			vertical-align: middle;
			width         : 5em;
		}

			#navPanel .close:before
			{
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing : antialiased;
				
				/*font-family   : FontAwesome;*/
				font-family   : 'Font Awesome\ 5 Free';
				font-style    : normal;
				/*font-weight   : normal;*/
				font-weight   : 900;
				text-transform: none !important;
				content       : '\f00d';
				width         : 3em;
				height        : 3em;
				line-height   : 3em;
				display       : block;
				position      : absolute;
				right         : 0;
				top           : 0;
				text-align    : center;
				color: #000000;
			}

			#navPanel .close:hover {
				color: inherit;
			}		

/*-----------
	BANNER
------------*/
	#banner 
	{
		padding: 10em 0 2em 0;
		background-image: url('../images/banner/banner_edited1.jpg');
		/*background-size: cover;
		background-position: top;
		background-attachment: fixed;
		background-repeat: no-repeat;*/

		background-size: cover;
		background-position:0 66%; 
		
		text-align: center;
		
		border-top: 0.5em solid rgba(204, 51, 0, 0.8);
		font-family: 'Kanit','kanitlight',sans-serif;
	}

		#banner h1 {
			font-size: 3.0em;
			font-weight: 100;
			color: #fff;
			line-height: 1em;
			margin: 0 0 0.2em 0;
			padding: 0;
		}

		#banner p {
			font-size: 1.5em;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 1.75em;
		}


	.inner {
		/*max-width: 75em;*/
		/*max-width: 95%;*/
		max-width: 75%;
		margin: 0 auto;
	}
		/*@media screen and (max-width: 1280px) {

			.inner {
				max-width: 90%;
			}

		}

		@media screen and (max-width: 480px) {
	
			.inner {
				max-width: 85%;
			}

		}*/
		@media screen and (max-width: 480px) {
			.inner .logo > span > img {
				width: 12%;
			}
			.inner .logo span {
				font-size:0.55em;
				top:-0.5em;
			}
			#header{
				height: 2.5em;
				line-height: 2.5em;
			}
		}

/*---------
	ICON
----------*/
.icon 
{		
	text-decoration: none;
	border-bottom: none;
	position: relative;
}

	.icon:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		color:#A38C74;
	}

	/*.icon > .label {
		display: none;
	}*/

ul.icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
}

	ul.icons li {
		display: inline-block;
		padding: 0 1em 0 0;

	}
		ul.icons li:last-child {
			padding-right: 0;
		}

		ul.icons li .icon:before {
			font-size: 1.7em;
		}

/*------------
	FOOTER
-------------*/
footer{
	
	background-color: rgba(204, 204, 204,0.7);
	padding   :5px;
	/*line-height: 2;*/

	/*font-family: 'dbhelvethaicax', sans-serif;
	font-size: 1em;
	font-weight:600;*/
	font-family: 'Kanit',sans-serif;
	font-size: 0.8em;
	color: rgba(68, 68, 68 , 0.6);

	/*position:fixed;
    bottom:0;
    width:100%;*/
}
	footer a{		
		color: #A38C74;
		text-decoration: none;
	}
	footer a:hover
	{
		text-decoration: none;
		color: inherit;
	}

/*-----------
	BUTTON
-------------*/
div.btn-style1
{
	display    :inline-block;
	width      : auto;
	cursor     : pointer;
	padding    : 0.2em 0.8em;
	border     : 1px solid rgba(0,0,0,0.5);
	font-family: inherit;
	font-size  :0.8em;
	color      : #000000;
	text-align : center;
	
}
	div.btn-style1:hover
	{
		background-color: #A38C74;
		color           : #ffffff;
		border          : 1px solid rgba(0,0,0,0.3);
	}

	/*div.btn-style1 a{
		text-decoration: none;
		color:black;
	}*/

div.btn-style2 /*on banner*/
{
	display    :inline-block;
	width      : auto;
	cursor     : pointer;
	padding    : 0.2em 0.8em;
	border     : 1px solid #ffffff;
	font-family: inherit;
	font-size  :0.8em;
	color      : #ffffff;
	text-align : center;
}
	div.btn-style2:hover
	{
		background-color: #A38C74;
		color           : #ffffff;
		border          : 1px solid rgba(0,0,0,0.3);
	}	


/*---------------------------
	Product CATEGORY MENU
----------------------------*/
div.prod-menu
{
	border-top   :1px solid #A38C74;
	border-bottom:1px solid #A38C74;
	padding      :0em;
}

	div.prod-menu > .navbar
	{
		background-color:initial;
		border: none;
		margin:0;
		padding:0.5em;
		min-height:100%;
		
	    display:inline-block; /*_center nav user with text-center*/
		vertical-align: middle;
	}

	/*div.prod-menu > .navbar-default
	{
		display:inline-block;
		vertical-align: middle;
	}*/

	div.prod-menu .nav > li > a
	{
		padding:0.2em 1.2em;
	}

	@media (min-width: 768px)
	{
		/*div.prod-menu .navbar-nav
		{   
			float: none;
		    margin: 0;
		}*/
		/*div.prod-menu > .navbar{
			display: block;
		}*/
	}

/*---------------------------------------
	TITLE:ACTIVE MENU,EMPHASIZE TITLE 
-----------------------------------------*/
.active {
	color: #A38C74 !important;
}
a.menuinpage1{
	color: #000000 ;
}
a.menuinpage1:hover{
	text-decoration:none ;
}
a.menuinpage2{
	color: #bbb ;
}
a.menuinpage2:hover{
	text-decoration:none ;
}

.title-caption
{
	font-family: 'angsananews-bolditalic, sans-serif';
	font-style :italic;
	font-weight: bold;
}

/*_CAPTION ON IMG*/
/*__CR:https://www.w3schools.com/howto/howto_css_image_text.asp*/
.banner_caption
{
	text-align : center;
	position   :relative;
	color      : rgba(255, 255, 255, 0.9);
}
	.banner_caption .centered
	{
		position : absolute;
		top      :50%;
		left     : 50%;
		transform: translate(-50%, -50%);
		font-size: inherit;
		width    :100%;
		
	}

	/*@media screen and (max-width: 480px)
	{
		.banner_caption {
			font-size:45%;
		}	
	}*/
	
.font_headTitle {
	font-family   : 'kanitlight',sans-serif; 
	color         :#ffffff; /*rgba(255,0,0,0.7) #EA7B30; */
	font-size     :2.3em;
	text-shadow   : 0px 2px 3px gray; 
}	

span.detail{
		border-bottom:2px solid #A38C74;
		width     :50%;
		display   :inline-block;
}
/*------------------------
	ITEM IMAGE DISPLAY
-------------------------*/
.item-img-display:not(:last-child){
	margin-bottom:1em;
}
	.item-img-display img{
		max-width:100%
	}

	.item-img-display span:not(.bottom-underline) {
		border-top:2px solid #A38C74;
		width     :70%;
		display   :inline-block;
	}

	.item-img-display span.bottom-underline{
		border-bottom: 2px solid #A38C74;
		width        : 100%;
		display      : inline-block;
	}
/*	.item-img-display #showprodname-mobile{
		border-top:2px solid #A38C74;
		width     :70%;
		display   :inline-block;
	}*/



/*--------------------------------
	IMGAE HOVER EFFECT
	cr:https://www.w3schools.com/howto/howto_css_image_overlay.asp;
----------------------------------*/	
.container-img{
	 position: relative;
}
	.container-img a{
	 	text-decoration: none;
	 	color: inherit;
	}
	.container-img:hover img{
	 	opacity : 0.3;
	}
	.container-img:hover .middle{
	 	opacity : 1;
	}
.middle {
	transition      : 1s ease;
	opacity         : 0;
	position        : absolute;
	top             : 50%;
	left            : 50%;
	transform       : translate(-50%, -50%);
	-ms-transform   : translate(-50%, -50%);
	text-align      : center;
	background-color:#A38C74;
	width           :90%;
	height          :auto;
	/*font-size       : 1.3em;*/
}	
/*-----------------------------------------------------
_for place DELETE Bottom (right-top) on image
- use:<div clss=img_wrap><span class='close custom-close'>&times;</span><img><div>
- work with custom-close class	
- cr:by dfsq-stackoverflow.com 
---------------------------------------------------------*/
.img_wrap {
	position: relative;
	display : inline-block;
	margin: 5px;
}
.img_closebtn {
	position: absolute;
	top     : -5px;
	right   : -5px;
	color: red;
	opacity: 0.6;
	/*z-index : 6;*/
}

/*--Preveiw Image before Upload--------------*/
div.previewImagePanel {
	/*display         :block;*/
	border          : 1px dashed lightgray;
	background-color: white;/*#F0F0F0;*/
	width           : 100%;
	height          : 105px;
	margin          : 3px;
	padding         : 3px;
	text-align      : center;
	overflow	    : auto;
}
img.imageDisplay{
	display: inline;
	width  : 100px;
}
.noPreviewText:after{
	content    : 'ไม่มีรูปตัวอย่าง...';
	color      : gray;
	line-height: 92px;
}

/*-----------------------
	TEXT ARRANGEMENT
------------------------*/
.indent {
    text-indent: 5%;
  /*  padding-left:5px;*/
}
	
p.indent,p,li,.content 
{
    /*font-family: 'dbhelvethaicax', sans-serif;*/
    font-family :'Kanit','kanitlight',sans-serif;
    line-height: 1.5;
}

ul, ol :not(ul.nav){
	margin-left:5%
}	
	ol.myList {
    	list-style-type:lower-alpha;
	}

.ellipsis{
	overflow     : hidden;
	white-space  : nowrap;
	text-overflow: ellipsis;
}

/* .ellipsis:after{
	content:'...';
}	 */

 table.backoffice-layout {
	widows: 100%;
  }
  table.backoffice-layout td:not(.show_thumbnal_image) {
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  }



/*---------
	ICON
-----------*/
i.fb-share
{
	color:white;
	vertical-align:middle;
}
.rcorners
{
    border-radius:90px;
    background: #3b5998/*#73AD21*/;
    width: 1.5em;
    height: 1.5em;
    margin: 0.2em; 
}

.fa-icon_modify
{
	border        : 2px solid rgba(68, 68, 68,0.8);
	vertical-align:middle;
	border-radius :90px;
	width         : 1.6em;
	padding       : 0.2em;
}
	
.order_no_style
{
	border-radius:90px;
    background-color: #25aae1;

    font-family: 'Kanit','kanitlight',sans-serif;
    color: #ffffff;
   	font-size: 1.2em;
   	
   	display: inline-block;
   	/*vertical-align:bottom;*/

   	padding: 0 0.3em;
    /*width: 2em;
    height: 2em;*/
}



/*--------------------
	FOR REG MENU
----------------------*/

/*#myaccount {
	font-family     :'Kanit','kanitlight',sans-serif;
	color           :#ffffff;	
	background-color:#bbb;

	position:fixed;
	right   :1em;
	top     :0.3em;
	padding :0 0.5em;
	z-index :667;
}
	#myaccount a{
		font-size      : 0.95em;
		text-decoration:none;
		color          :inherit;		
	}
	#myaccount a:hover{
		color:#25aae1;
	}*/

/*------------------------
	FOR DROPDWON BUTTON
	https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_text
-------------------------*/
div.dropdown {
    position: relative;
    display: inline-block;
}

div.dropdown-content {
    display: none;
    position: absolute;
	right: 1.5em;
	top:-5.5em;
    background-color: #ccc; /*rgba(187, 187, 187,0.7)*/
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 0.2em;
    z-index: 6666;
}
	div.dropdown-content a{
		display: block;
		/*display: inline-block;*/
	}

div.dropdown:hover div.dropdown-content {
    display: inline-block;
}


/*----------------------
	FOR FORM PART
-----------------------*/
form[name='myform'] 
{
	font-family :'Kanit','kanitlight',sans-serif;
}

textarea.customTextarea 
{
	resize       :vertical; 
	border-radius   : 0;
	height       : 80px;
}

.mustfill:after
{
	content: ' \f069'; 
	color:red;
	font-family: FontAwesome;
	font-size:0.5em;
	vertical-align: top;
}

.custom_input{
    border          : 1px solid #ccc; 
    border-radius   : 0;
    background-color: white;
    color           : black;
}

/*----------------------------
	SET RADIO / CHECKBOX
	TO USE FONTAWSOME ICON
	ref:http://astronautweb.co/snippet/font-awesome/
	:https://codepen.io/rstrahl/pen/yyEYBx;
------------------------------*/
input[type=checkbox].with-font 
,input[type=radio].with-font 
{
	border  : 0;
	padding : 0;
	clip    : rect(0 0 0 0);
	height  : 1px;
	width   : 1px;
	margin  : -1px;
	position: absolute;
	overflow: hidden;

	/*_note:if set display:none, when submit form elements 
	that set to none have disabled */
}
	
	/*_note : ~ = effect to <label> that immediately follow Chkbox*/
	input[type=checkbox].with-font ~ label:before 
	{
		font-family: FontAwesome;
		content    : "\f096";
		display    : inline-block;
		width      : 1.4em;	
	    /*letter-spacing: 10px;*/
	    /*font-size: 1.2em;*/	  
	}
	input[type=checkbox].with-font:checked ~ label:before  
	{
	    content: "\f046";
	    /*color: darkgreen;*/
	    /*letter-spacing: 5px;*/
	    font-weight:initial; 
	}

	input[type=radio].with-font ~ label:before 
	{
		font-family: FontAwesome;
		content    : "\f10c";
		display    : inline-block;
		width      : 1.4em;	
		
	}
	input[type=radio].with-font:checked ~ label:before
	,input[type=radio].with-font:checked ~ label  
	{
	    content: "\f00c"/*"\f05d"*/;
	    color: #F94112	;
	}

/*..............................................................................
	for: NOTIFY ERROR BOX when submit form
	work:with Boostrap's Alert
	use: <div id='x' class='alert alert-danger errorNotifyBox hidden'> ==> Box
		 	<span class='close custom-close'></span> ==> close btn
		 	<span id='errorNotify'></span>	==> error notify msg
		 </div>
		 --jquery part--
		 show error : $('#x').removeClass('hidden').fadeIn('slow')
		 close : $('#x').fadeOut('slow') 
..............................................................................*/
.errorNotifyBox
{
	position:absolute;
	bottom: 3em;
	opacity : 0.9;
}
.custom-close
{
	position:absolute;
	top     :0px;
	right   :5px;
	font-size:1.5em;
}

.shadow
{
	/*box-shadow: 10px 10px 5px #888;*/
	-moz-box-shadow   : 0 5px 10px grey;
	-webkit-box-shadow: 0 5px 10px grey;
	box-shadow        : 0 5px 10px grey;
}

.font_miniDanger
{
	color      :red; 
	font-weight: bold;
}

/*----------------
	BACK OFFICE
-----------------*/

/*.page-wrapper { 
	padding-left: 18%;
	padding-top : 10px;
}*/

.head_title
{
	font-family: 'Kanit','kanitlight',sans-serif; 
	color      : white; 
	font-size  :3em;
	text-shadow: 0px 2px 3px gray;
}	

/*__Use in Header__*/
/*.font_menu {
	font-family: self_font; 
	font-weight: bold;
	font-size  :1.14em;
}*/

/*__BG IMG in Home__*/
.bg_inDiv
{
	/*background: url('../images/back/bg2.jpg') no-repeat center;*/
	height:300px;
	width : 100%;
}

/*__ for Home__*/
/*.self_logo{
	padding            : 1em;
	border-bottom      : 2px solid rgba(31, 49, 138,1);
	background         : url('../images/back/bg2.jpg') fixed;
	background-position:90% 10%; 
}*/

/*__for login__*/
.transparentBg 
{
	background-color: white;
	padding         :15px 0 15px 0;
	border-radius   : 5px;
	background-color:rgba(255,255,255,0.8)
}

/*...............................
	SET BACKGROUND'S STYLE
	- for title in each page
	- use in back office
	- (cr:itoffside.com)
...............................*/
.page-header
{
	border-bottom : 1px solid black;
	margin        : 10px 0 20px;
	padding-bottom: 5px;
	color 		  : black;	
	font-family   : 'Kanit','kanitlight',sans-serif;	
	font-size    : 1.4em;
}

/*///////////////////////////////////////////////////
-----------------FOR Head,Login page----------------
	work in header page that have nav menu , logo
////////////////////////////////////////////////////*/

/*#Work with nav bar----------------------------------
------------------------------------------------------
	- work with Side menu
------------------------------------------------------*/
.page-wrapper { 
	padding-left: 17%;
	padding-top : 10px;
}

/*lOGO in header--------------------------------------
------------------------------------------------------*/ 
.self_logo{
	padding            : 5px;
	background-color   : black;	
	border-bottom      : 2px solid #A38C74; 
	background         : url('../images/back/bg_head.jpg') fixed;
	background-position:1% 73%; /*col row*/
}

/*lOGO in Login form-------------------------------------------
---------------------------------------------------------------*/
.self_logo_login{
		padding: 3px;
		border-bottom : 2px solid #A38C74;
}

/*BG IMG in Index's page---------------------------------------
---------------------------------------------------------------*/
/*.bg_inDiv{
	background: url('../images/bg_home_wCredir.jpg') no-repeat center;
	height:400px;
	width: 100%
}*/

/*-----------------------------------------
	HORIZONTAL NAV MENU (in header page)
-------------------------------------------*/

/*__Specified ID Element for be parent of nav menu__*/ 
#myNavbarControl 
{  
	margin          : 0; 
	background-color: #ccc;/*#f3f3f3*/;
	/*background-color: rgba(150, 78, 124,0.2);*/
	border-radius   : 0;
	border-top      : 0;
	border-right	: 0;
}

	/*__All li (child only)..__
		#..under class 'dropdown-menu' except first child__*/
	#myNavbarControl ul.dropdown-menu > li:not(:first-child) 
	{   
	    border-top: 1px solid #e7e7e7;
	}

	/*__A:LINK__*/
	 #myNavbarControl a:link 
	,#myNavbarVertical a:link 
	,#myNavbarVertical a:visited
	{
	  color: black;
	} 

/*__A:HOVER__*/
#myNavbar a:hover , #myNavbarVertical a:hover
{
  background-color: #ddd;  
}

	/*__A:LINK of Active menu__*/
	 #myNavbar li.active > a:link
	,#myNavbarVertical li.active > a:link
	,#myNavbarVertical li.active > a:visited
	{
		color           : white;
		background-color: rgba(163, 140, 116,1);
	}

/*-----------------------------------------------
	VERTICAL NAV MENU (side menu / in header)
------------------------------------------------*/

/*__DIV:Specified ID Element for be parent of nav menu__*/
div#myNavbarVertical
{
	width           : 18%; 
	background-color: #f3f3f3;
	position        : absolute;
	height          : 100%;
	z-index         : 3;
	border-right    : 1px solid #e6e6e6; 

}
	/*__Div:LI__*/
	div#myNavbarVertical li{
		border-bottom: 1px solid #ddd;
	}

	/*__UL Collapse for Sub menu__*/
	div#myNavbarVertical ul.customCollapseMenu{
		list-style : none;
		padding    : 0 ;
		text-indent: 15px;
	}
	/*__LI__*/
	div#myNavbarVertical ul.customCollapseMenu li{
		line-height:30px; 
	}
	/*__LI:Hover__*/
	div#myNavbarVertical ul.customCollapseMenu li:hover{
		background-color: #ddd;
	}
	/*__LI:hover > A:Link__*/
	div#myNavbarVertical ul.customCollapseMenu li:hover > a:link{
		display        : block;
		text-decoration: none;
	}
	/*__LI:active > A:Link__*/
	div#myNavbarVertical ul.customCollapseMenu li.active > a:link{
		display         : block;
		color           : black;
		background-color: #ddd; 
	}

	/*__UL Dropdown for Sub menu__*/
	div#myNavbarVertical ul.customDropdownMenu{
		top     :0;
		left    :100%;
		height  :400px;
		overflow:auto;
		background-color: rgba(255,255,255,0.9);
	}

	div#myNavbarVertical ul.customDropdownMenu li.active > a:visited {
		background-color: #ddd;
		color:black;
	}

/*---------------------------------------------------------
	BACKGROUND's style IN Back Office (cr:itoffside.com)
-----------------------------------------------------------*/

/*__Set BACKGROUND's style..__
	- of Process Button (such as: add/up/refresh)
	- use in back office
	- (cr:itoffside.com)__*/
.subhead
{	
	background-color: #ededed;
	background-image: linear-gradient(to bottom, #ffffff, #ededed);
	color           : #0c192e;
	border-bottom   : 1px solid #d3d3d3;
	margin-bottom   : 10px;
	padding         : 0 0 10px 10px; /*T->R->B->L*/
	/*text-shadow: 0 1px 0 #fff;
	float: right;*/
} 

#txtSearch
{
    width: 40%;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
	#txtSearch:focus {
	    width: 100%;
	}


/*----------------------
	pagination_custom
------------------------*/
ul.pagination_custom li a {
	border-top   : 0;
	border-bottom: 0;
}

ul.pagination_custom li a {
    color: #000000;
}

ul.pagination_custom li.active a {
	background-color: #A38C74;
	color           : #ffffff;
	border          : 1px solid #A38C74;

}

	ul.pagination_custom li a:hover 
	,ul.pagination_custom li.active a:hover
	{
		color           : #ffffff;
		background-color: #A38C74;
		border          : 1px solid #A38C74;
	}

/*------------------------------------
	Set Front page Classified Menu
--------------------------------------*/
div.classified-front-menu{
	border-right:1px solid #A38C74
}
div.classified-front-menu:nth-child(3){
	border-right: none
}
div.classified-front-menu:last-child{
	border-right: none
}

/* td {
	display: inline-block; 
  }
 */