/*///////////////////////////////////////////////////
////////////////////XHIEH CHIN//////////////////////
/////////////////////////////////////////////////*/

/*-------------------------------------------------
-----------------------INDEX-----------------------
---------------------------------------------------
	1--MODIFY ELEMENT--
	body
	label:after ~mustfill
	Textarea ~fixed wigth
	Input


	2--EFFECT--
	.bubble_alert (** Place triagle on top ,left of box)
	.bubble_alert:before
	.shadow
	.shadow_btn

	3--FONT--
	@font-face
	#myTable
	.font_miniDanger ~red
	.font_miniInfo ~green
	.font_headTitle 
	.font_menu

	4--CUSTOM ELEMENT (fuc cant naming)--
	.custom_input 
	.hidden
	.txt_align_center
	.valign_bottom
	.rcorners
	.img_wrap (for place DELETE Bottom on top right conner)
	.previewImagePanel (Preveiw Image before Upload)
	.imageDisplay (Show image in Div that use above)
	
	(** Work with Boostrap's TAB MENU)
	.custom_aLinkTabMenu (set border color of tab's menu)
	.custom_col-borderLRB (set dash border around left-right-bottom of tab's content)
	.custom_input-group-marginTB (set margin of top/bottom)
	div.panelMarginB (set margin of bottom)

	.custom_has-error_outline

	5--FOR HEAD,LOGIN PAGE,BG(index's page)--
	.page-wrapper
	.self_logo
	.self_logo_login
	.bg_inDiv

	6--HORIZONTAL NAV MENU (in header page)--
	see full detail below page

	7--VERTICAL NAV MENU (side menu / in header)--
	see full detail below page

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


/*-----------------color---------------------------
---------------------------------------------------
	#AD0059 (pink) (Xhieh Chin's theme) 
	- active menu
	- line under header
	- Title of menu's page (class : page-header)

	#f3f3f3 (light gray)
	- side menu color

	#ddd (lightx2 gray) 
	- line between menu
	- hover on menu	

	#ccc (soft than lightgray) 
	- border of input text

	#e6e6e6 (gray)
	- right border of side menu
---------------------------------------------------*/
	
/*//////////////////////////////////////////
---------MODIFY ELEMENT--------------
/////////////////////////////////////////*/

/*BODY----------------------------------------
----------------------------------------------*/
body { 
    /*background: url('<?=$baseUrl?>/images/bg_suburb2_blur.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;*/
    margin: 0;
    font-size: 14px;
}

/*LABEL-------------------------------------
--------------------------------------------
	- * must fill
--------------------------------------------*/
/*label.mustfill:after{*/
.mustfill:after{
	content: ' *'; 
	color: red;
}

/*TEXTAREA-------------------------------------
-----------------------------------------------
	- fixed wigth
-----------------------------------------------*/
textarea.customTextarea {
	resize:vertical; 
	border-radius: 0;
	height: 80px;
}

/*INPUT------------------------------------------
-------------------------------------------------
 -custom input element
-------------------------------------------------*/
input[type=text] , input[type=password] {
		border          : 1px solid #ccc; 
		border-radius   : 0;
		background-color: white;
		color           :black;
}
input.borderless{
	border:none;
	background-color:transparent;
}
/*////////////////////////////////////
-------------#EFFECT------------------
////////////////////////////////////*/

/*------------------------------------------
  BUBBLE ALERT ,TOP ANGULARITY
  cr.jsfiddle.net/chriscoyier/taaGc/1
  css-tricks.com/snippets/css/css-triangle
----------------------------------------------*/
.bubble_alert_top {
	position        : absolute;
    left            : auto;
    z-index         : 2;

    padding         : 3px;
    width           : auto;
    background-color: red;
    border          : 2px solid red;
    border-radius   : 3px;

    color           : white;
    text-align      : center;
}
.bubble_alert_top:before {
	content      : "";
    position     : absolute;
    top          : -7px;
    left         : auto;

    border-left  : 10px solid transparent; /*mark a angularity*/
    border-right : 10px solid transparent; /*mark a angularity*/
    border-bottom: 10px solid red;
}
/*------------------------------------------
      BUBBLE ALERT ,LEFT ANGULARITY
  -------------------------------------------*/
  .bubble_alert_left
  {
    position        : absolute;
    left            : auto;
    z-index         : 2;
    margin-left     : 7px; /*edit, if angularity position change*/

    padding         : 6px;
    width           : auto;/*100%;*/
    background-color: rgba(0,0,0,0.8);
    border-radius   : 0;

    color           : white;
    text-align      : center;
    
  }
  .bubble_alert_left:before
  {
    content      : "";
    position     : absolute;
    left         :-7px;

    border-top   : 8px solid transparent; /*mark a angularity*/
    border-bottom: 8px solid transparent; /*mark a angularity*/
    border-right : 8px solid black;
  }
/*SHADOW---------------------------------------
-----------------------------------------------*/
.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;
}

/*SHADOW for Button----------------------------------
-----------------------------------------------------*/
.shadow_btn {	
	-moz-box-shadow   : 0 3px 5px grey;
	-webkit-box-shadow: 0 3px 5px grey;
	box-shadow        : 0 3px 5px grey;
	/*box-shadow: 0 1px 3px grey inset;*/
}



/*//////////////////////////////
-------------FONT--------------
//////////////////////////////*/

/*My font--------------------------------
-----------------------------------------*/
@font-face{
	font-family:myFont;
	src : url(fonts/supermarket.ttf); 
}

/*In table---------------------------
-------------------------------------*/
#myTable {
	font-size: 0.9em;
}

/*Notify:RED-------------------------
------------------------------------*/
.font_miniDanger{
	font-family: tahoma;
	color      :red; 
	font-size  :10pt;
	font-weight: bold;
	/*float: right;*/
}

/*Notify:GREEN------------------------
--------------------------------------*/
.font_miniInfo{
	font-family: tahoma;
	color      :green; 
	font-size  :10pt;
}

/*Notify:LIGHTBLUE----------------------
---------------------------------------*/
.font_miniNotify{
	font-family: tahoma;
	color      : #31B0D5; 
	font-size  :10pt;
	font-weight: bold;
}



/*Head Title-------------------------------
-------------------------------------------*/
.font_headTitle {
	font-family   : myFont; 
	color         :white; /*rgba(255,0,0,0.7) #EA7B30; */
	/*font-size     :30pt;*/
	font-size     :2.85em;
	vertical-align:middle;
	/*text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;*/
	/*text-shadow: 0px 2px 3px gray;*/ /*#666*/
}	

/*Use in Header------------------------------
---------------------------------------------*/
.font_menu { /*#in Header*/
	font-family: myFont; 
	font-weight: bold;
	font-size  :1.14em;
}


/*//////////////////////////////.///////////////////
--------#CUSTOM Element (fuc cant naming)-----------
///////////////////////////////////////////////////*/

/*Hidden-------------------------------------------
---------------------------------------------------*/
.hidden{
	display: none;
}

/*Align:Center---------------------------------------
-----------------------------------------------------*/
.txt_align_center	{ 
	text-align:center;	
}

/*Vertical Align:Bottom--------------------------------
-------------------------------------------------------
- 1st for work in DIV 
- take element in this DIV to bottom 
------------------------------------------------------*/
.valign_bottom {
	display: table-cell;
	vertical-align: bottom;
} 

/*.rcorners {
	border-radius: 5px;
	background-color: red; 
	padding: 15px;
}*/

/*_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;
}
/*div.noPreview{
	background-image: url("images/preview_v3.png");
	width:55%; 
}*/

/*-Boostrap's Tab menu--------------------------
------------------------------------------------
	set border for not active menu
------------------------------------------------*/
ul li .custom_aLinkTabMenu {
	border-top-color  :lightgray;
	border-left-color :lightgray;
	border-right-color:lightgray;
}
/*------------------------------------------------
	work with Boostrap's Tab menu
	in use with class:COL;
------------------------------------------------*/
div.custom_col-borderLRB {
	border-left  : 1px dashed lightgray;
	border-right : 1px dashed lightgray;
	border-bottom: 1px dashed lightgray;
}
/*------------------------------------------------
	work with Boostrap's Tab menu
	in use with class:input-group;
------------------------------------------------*/
div.custom_input-group-marginTB {
	margin-top   : 15px;
	margin-bottom: 15px;
}
/*------------------------------------------------
	work with Boostrap's Tab menu
	div Panel for add more element such as input text
------------------------------------------------*/
div.panelMarginB{ margin-bottom: 15px; }

/*------------------------------------------------
	for NOTIFY ERROR OUTLINE when submit form
	in case can't use has-error class
------------------------------------------------*/
.custom_has-error_outline{ outline: 1px solid #C42E2D; }

/*---------------------------------------------------------------------------
	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;
	top     :-50px;
	right   : 0px;
	opacity : 0.9
}
.custom-close{
	position:absolute;
	top     :0px;
	right   :5px
}

/*///////////////////////////////////////////////////
-----------------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            : 3px;
	background-color   : black;	
	border-bottom      : 2px solid #AD0059; /*#AD0059=pink , #009999=green,e7e7e7*/
	background         : url('../images/bg2.jpg') fixed;
	/*background         : url('../images/bg3.jpg') fixed;*/
	background-position:50% 30%; /*col row*/
}

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

/*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: #f3f3f3;
	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: #009999;*/
	background-color: #AD0059; /*pink*/
}

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

/*DIV:Specified ID Element for be parent of nav menu ------------
---------------------------------------------------------------*/
div#myNavbarVertical{
	width           : 17%; /* ***Related to .page-wrapper */
	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;
	/*opacity : 0.5;*/
	/*z-index: 6;*/
	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;*/
} 

/*Set BACKGROUND's style..-------------------------------------
---------------------------------------------------------------
- for title in each page
- use in back office
- (cr:itoffside.com) 
---------------------------------------------------------------*/
.page-header {
	border-bottom : 1px solid #EEEEEE;
	margin        : 10px 0 20px;
	padding-bottom: 5px;
	color 		  : #AD0059		
}

/*for button add new ///////////////////////*/
/*.new-data{
	width     : 148px;
	text-align: center;
}
*/

/*for SEARCH FORM //////////////////////////---*/
/*div.search-form
{
	padding   : 10px;
	margin    : 10px 0;
	background: #eee;
}*/

/*for text input Phone (notify) ////////////////////---*/
/*span#spanFeedback_txtCon_phone
{
	position: absolute;
	right   :15px;
	top     :25px
}