,@charset "utf-8";
/* CSS Document */
html, body, div,  ol, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input, img { margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, th { font-size: 12px; font-weight: normal; font-style: normal; }
ul { list-style: none; }
a { text-decoration:none; color:#666666;  }
a:hover { text-decoration:underline; color:#333333;  }
fieldset, img { border: none; }
input,select,file{
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 border:1px solid #CCCCCC; height:20px; line-height:20px;
}
textarea{
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 border:1px solid #CCCCCC; line-height:20px;
}

@font-face {
    font-family: 'sup';
    src: url('supermarket-webfont.eot');
    src: url('supermarket-webfont.eot?#iefix') format('embedded-opentype'),
         url('supermarket-webfont.woff') format('woff'),
         url('supermarket-webfont.ttf') format('truetype'),
         url('supermarket-webfont.svg#supermarketRegular') format('svg');
    font-weight: normal;font-style: normal;
}
body{
font-size:14px; margin:0px;padding:0px;text-align:center;font-family:tahoma,Verdana;
/*background:url(../images/mainBg.jpg) top repeat-x;overflow:auto;*/
Background:#eee;
color:#333333;
}

.txtForm textarea:focus, .txtForm input:focus, txtForm select:focus {
border: 1px solid #333333;
}
.txtFn { height:30px; line-height:30px; padding-right:5px; text-align:right; font-size:18px; }
.tbLogin { border:1px solid #666666; height:25px; line-height:20px; color:#333333; font-size:15px; text-align:left; }
.menuClose  {float:right; width:30px; height:30px; margin-top:5px; background:none; font-size:20px; border:none; cursor:pointer;  }
.menuCloseHover { 
float:right; width:30px; height:30px; margin-top:5px;  font-size:20px; font-weight:bold; background:url(../images/closeBg.png) center no-repeat; cursor:pointer; border:none; 
}

.menuCycle {
cursor:pointer;
margin-left:20px;
}
.menuCycle a{ 
display:block;  text-align:center; 
color:#FFF; 
width: 50px; /* ความกว้าง */
height: 50px; /* ความสูง */
background: #000; /* สี */
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px;
border:3px solid #F60;	
}
.menuCycle a:hover{ 
display:block;  text-align:center; 
color:#FFF; 
width: 50px; /* ความกว้าง */
height: 50px; /* ความสูง */
background: #333; /* สี */
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px;
border:3px solid #F60;	
}
.lAlert { 
color:#fff; 
width: 20px; /* ความกว้าง */
height: 20px; /* ความสูง */
background: #999; /* สี */
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px;
float:left;
}
.lAlert1 { 
color:#fff; 
width: 20px; /* ความกว้าง */
height: 20px; /* ความสูง */
background: #999; /* สี */
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px;
float:left; font-size:10px; line-height:20px;
}

.txtMenu { color:#000; margin-top:5px; width:100%; text-align:center; float:left; }

#mHome { 
	width:106px; height:40px; float:left; background:url(../images/logobangkokinfo.gif) center no-repeat;
	cursor:pointer;
 }

.logoMenu { 
color:#FFF; text-align:center; position:relative; top:7px; left:5px;  z-index:1; 
width: 50px; /* ความกว้าง */
height: 50px; /* ความสูง */
background: #333; /* สี */
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px;
border:2px solid #F60;	
}
.logoText{ 
position:relative; top:-40px; left:50px; z-index:0;   height:40px; width:100px; background:#333; padding-left:10px; color:#FFF; 
font-size:16px; font-weight:bold; line-height:40px;
-webkit-border-radius: 0px 5px 5px 0px; 
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
}
.btnMenuTop { 
width:auto; cursor:pointer;
}
.btnMenuTop a{ 
display:block; color:#000; 
background:#ecf0f1; height:20px; width:auto; text-decoration:none;
line-height:20px; text-align:center; padding:5px; 
-webkit-border-radius: 3px 3px 3px 3px; 
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
}
.btnMenuTop a:hover{ 
display:block;  text-decoration:none; color:#FFF;
background:#e67e22; height:20px; width:auto; cursor:pointer;
line-height:20px; text-align:center; padding:5px; 
-webkit-border-radius: 3px 3px 3px 3px; 
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
}

.btnMenuFot { 
width:auto; cursor:pointer;
}
.btnMenuFot a{ 
display:block; color:#000; 
background:#bdc3c7; height:20px; width:auto; text-decoration:none;
line-height:20px; text-align:center; padding:5px; 
-webkit-border-radius: 3px 3px 3px 3px; 
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
}
.btnMenuFot a:hover{ 
display:block;  text-decoration:none; color:#FFF;
background:#e67e22; height:20px; width:auto; cursor:pointer;
line-height:20px; text-align:center; padding:5px; 
-webkit-border-radius: 3px 3px 3px 3px; 
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
}


.txtMs{ height:30px; line-height:30px; color:#FFF;  font-size:25px; float:left; }
.txtClinic {  
 height:30px; line-height:30px; text-align:center; padding-left:5px; padding-right:5px; background:#ecf0f1; 
 float:left; color:#063;font-size:25px;
 -webkit-border-radius: 3px 3px 3px 3px; 
-moz-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px; margin-left:3px;
}


#main{width:1003px; height:inherit; margin:auto;  }
#loginForm{ width:1003px; height:600px; background:url(../images/loginBg.jpg) top no-repeat; margin:auto; }
#loginForm #lgBtnOK { width:107px; height:39px; background:url(../images/btnloginOK.gif) top no-repeat;  border:none; margin-top:10px; cursor:pointer; }
#loginForm #lgBtnOK  hover { background:#999999; }
#loginForm #lgBtnCencel { width:100px; height:38px; background:url(../images/btnloginCANCEL.gif) top no-repeat; border:none; margin-top:10px; cursor:pointer; }
#mainMenu{ width:1003px; height:600px; background:url(../images/loginBg2.jpg) top no-repeat; margin:auto; }
#mainMenu ol {list-style:none; padding:0px; margin:0px; }
#mainMenu ol li {width:100px; height:90px; float:left; margin-right:20px; font-size:14px; font-weight:bold; color:#333333; text-align:center;  }
#mainMenu ol li a img { opacity:1; filter:alpha(opacity:100); }
#mainMenu ol li a:hover img { opacity: 0.6; filter:alpha(opacity:60); }
#mainMenu ol .mTxt { width:70px; height:30px; position:relative; top:-10px; line-height:30px;  }


.bsMenu { 
    border:1px solid #d6d6d6;	
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px; 
	background:#eeeeee; cursor:pointer; font-size:13px;  
}
   
.bsMenuSave { 
    border:1px solid #0066CC;	
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px; 
	background:#0099CC; cursor:pointer; font-size:16px; 
	height:30px; font-weight:bold;  
}   
.bsMenuCan { 
    border:1px solid #d6d6d6;	
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px; 
	background:#eeeeee; cursor:pointer; font-size:16px; 
	height:30px; font-weight:bold;  
}     
  


#header{width:100%; height:66px; background:url(../images/headBg.gif) top no-repeat; float:left; padding:0px; text-align:left;}
#header #logo{width:181px; height:66px; background:url(../images/h_logo.png) left top no-repeat; float:left; margin-left:5px; }
#header #logo1{width:181px; height:66px; background:url(../images/h_logo1.png) top no-repeat; float:left; margin-left:5px; }
#header #submenu{width:auto; height:66px; float:left; background:url(../images/menu_bg.png) left top repeat-x;}
#header #submenu ol {list-style:none; padding:0px; margin:0px;}
#header #submenu ol li { width:auto; height:30px; margin-right:2px; float:left; line-height:30px; }



#header #menurigth{width:18px; height:66px; float:left; background:url(../images/menu_bg_rigth.png) right no-repeat;}

#container{width:100%; height:100%; float:left; }

#footter{width:100%; height:33px; background:url(../images/footBg.gif) no-repeat; margin-bottom:0px; float:left;}

#menu_register {border:none; width:70px; height:70px; background:url(../images/btn_reg.png) center no-repeat; cursor:pointer;}
#menu_doctor {border:none; width:70px; height:70px; background:url(../images/btn_doc.png) center no-repeat; cursor:pointer;}
#menu_druge{border:none; width:70px; height:70px; background:url(../images/btn_druge.png) center no-repeat; cursor:pointer;}
#menu_finance{border:none; width:70px; height:70px; background:url(../images/btn_finance.png) center no-repeat; cursor:pointer;}
#menu_stock {border:none; width:70px; height:70px; background:url(../images/btn_stock.png) center no-repeat; cursor:pointer;}
#menu_report {border:none; width:70px; height:70px; background:url(../images/btn_report.png) center no-repeat; cursor:pointer;}
#menu_setting{border:none; width:70px; height:70px; background:url(../images/btn_setting.png) center no-repeat; cursor:pointer;}
#menu_logout{border:none; width:70px; height:70px; background:url(../images/btn_logout.png) center no-repeat; cursor:pointer;}
#menu_tr{border:none; width:70px; height:70px; background:url(../images/btn_tr.png) center no-repeat; cursor:pointer;}
#menu_app{border:none; width:70px; height:70px; background:url(../images/btn_app.png) center no-repeat; cursor:pointer;}

.line { width:100%; height:26px; line-height:26px; float:left; overflow:hidden;  }
.lineFn { width:100%; height:40px; line-height:40px; float:left; overflow:hidden; font-size:20px; }
.txtForm textarea:focus, .txtForm input:focus { border: 1px solid #0765e5; }
.bFrom { 	
	line-height:30px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	border:1px solid #d6d6d6; background:#FFFFFF;
}
.bTitle { 
	display:block; height:25; font-size:16px; font-weight:bold; line-height:25px; background:#f2f0f0; padding-left:10px; padding-right:10px; 
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	margin-left:10px;
}

/** Tab **/
.tabLine {  
height:30px; float:left; font-weight:bold; background:#d5d4d4; border-bottom:1px solid #e9e9e9;
-moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius:3px 3px 0px 0px; border-radius: 3px 3px 0px 0px;  }
.tabLine ul { margin:0px; height:30px; line-height:30px; padding:0; font-size:14px; }
.tabLine ul li { display:block;  float:left; margin-right:5px;  }
.tabLine ul li a span { display:block; padding:0px 10px 0px 10px; color:#666666; cursor:pointer; text-decoration:none; }
.tabLine ul li a:Hover span  {
	display:block; padding:0px 10px 0px 10px; color:#000000; float:left;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius:3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px; 
	background:#e9e9e9; cursor:pointer;
 }
.tabLine ul .tHover {
	display:block; padding:0px 10px 0px 10px; color:#000000; float:left;
	-moz-border-radius: 3px 3px 0px 0px;
	-webkit-border-radius:3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px; 
	background:#e9e9e9; cursor:pointer;
 }
 .brImg {
 	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius:5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px; 
	border:1px solid #e9e9e9; 
	overflow:hidden; float:left; margin-right:5px;
 }
 
.brBody {	
	-moz-border-radius: 0px 0px 3px 3px;
	-webkit-border-radius:0px 0px 3px 3px;
	border-radius: 0px 0px 3px 3px; 
	border:1px solid #e9e9e9; 
	border-top:none;
	float:left;
	overflow:auto;
}

.brTop { 	
	height:31px; 
	line-height:31px;
	-moz-border-radius: 3px 3px 0px 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px; 
	border:1px solid #e9e9e9; background:#f2f0f0;  
	float:left; font-weight:bold;

}
.brBodyN {	
	border:1px solid #e9e9e9; 
	border-top:none; 
	float:left;
	overflow:auto;
}
.brFoot {	
	-moz-border-radius: 0px 0px 3px 3px;
	-webkit-border-radius:0px 0px 3px 3px;
	border-radius: 0px 0px 3px 3px; 
	border:1px solid #e9e9e9; 
	border-top:none; background:#f2f0f0; 	
	float:left; height:32px;	
}


#dialog-overlay {
	width:100%; 
	height:100%;
	background-color: #666666;
	opacity: 0.4;
	filter: alpha(opacity = 90);
	position:absolute; 
	top:0; right:0; 
	z-index:99; 
	display:none;
}



#dialog-box {
	width:502px; height:auto;	
	position:absolute; 
	z-index:100; 
	display:none; 
	padding:0px;
}

.diaTop { 	
	height:32px; 
	line-height:30px;
	-moz-border-radius: 3px 3px 0px 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px; 
	border:1px solid #333333; 
	background:#333333; font-size:20px; font-weight:bold; color:#FFFFFF;
	float:left; font-weight:bold;

}

.diaBody { 		
	line-height:30px; background:#FFFFFF;	
	border:1px solid #333333; 
	border-bottom:none;
	border-top:none;	
	float:left; overflow:hidden;
}
.diaFoot { 	
	height:42px; 
	line-height:40px;
	-moz-border-radius: 0px 0px 3px 3px;
	-webkit-border-radius: 0px 0px 3px 3px;
	border-radius: 0px 0px 3px 3px; 
	border:1px solid #333333; border-top:none; 	
	float:left; background:#f3f1f1;	
}

.btnMenu { height:30px; float:left; line-height:30px; margin-top:5px;  }
.btnMenu ul { margin:0px; height:28px; line-height:30px; padding:0; font-size:13px; float:right; }
.btnMenu ul li { display:block;  float:left; height:33px; margin-left:5px; }
.btnMenu ul li a span { 
	display:block; padding:0px 15px 0px 15px; font-weight:bold; 
	color:#666666; cursor:pointer; text-decoration:none; 
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius:3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	background:#f2f0f0; cursor:pointer;
	border:1px solid #dad8d8;
}
.btnMenu ul li a:Hover span { 
	display:block; padding:0px 15px 0px 15px;
	color:#666666; cursor:pointer; text-decoration:none; 
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius:3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	background:#dad8d8; cursor:pointer; font-weight:bold;
	border:1px solid #dad8d8;
}
.pLine  {
	width:100%; height:25px; line-height:25px; float:left; border-bottom:1px dotted #e9e9e9; cursor:pointer; display:block;text-align:left; overflow:hidden;
}
.pLineD { float:left; }
.txtSerch { width:190px; height:25px;  float:left; line-height:25px; margin-right:5px;   }
.btnSerch { width:57px; height:31px; background:url(../images/btnSerch.gif) no-repeat; border:none; cursor:pointer; float:left; }
.txtDis { border:none; background:none; border-bottom:1px solid #CCCCCC; text-align:right; padding-left:5px; }

/** initial setup **/
.nano {
  position : relative;
  width    : 100%;
  height   : 100%;
  overflow : hidden;

}
.nano .content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;

}
.nano .content::-webkit-scrollbar {
  -webkit-appearance: none;
}
.nano > .pane {
  background: rgba(0,0,0,.25);
  position : absolute;
  width    : 10px;
  right    : 0;
  top      : 0;
  bottom   : 0;
  visibility: hidden;
 
}
.nano > .pane > .slider {
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;  
  border-radius         : 3px;
}
.nano:hover > .pane, .pane.active {
  visibility: visible;
}
.nano > .pane {
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -ms-transition        : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;  
  border-radius         : 5px;
  opacity               : .01;
}
.nano:hover > .pane, .pane.active {
  opacity : 1;
}

.nano .content      { padding: 0px; }
.nano .pane         { background: #555; width: 10px; right:1px; }
.nano .pane .slider { background: #111; }
.small{ width:100%; height:100px; overflow:auto; }



.headTitle {  
        font-size:12px;  
        font-weight:bold;  
        text-transform:uppercase;  
}  
.headerTitle01 {  
        border:1px solid #333333;  
        border-left:1px solid #000;  
        border-bottom-width:1px;  
        border-top-width:1px;  
        font-size:12px;   font-weight:bold;    
}  
.headerTitle01_r {  
        border:1px solid #333333;  
        border-left:1px solid #000;  
        border-right:1px solid #000;  
        border-bottom-width:1px;  
        border-top-width:1px;  
        font-size:11px;  
}  
/* สำหรับช่องกรอกข้อมูล  */  
.box_data1 {  
        font-family:Arial, "times New Roman", tahoma;  
        height:18px;  
        border:0px dotted #333333;  
        border-bottom-width:1px;   overflow:hidden;
}  
/* กำหนดเส้นบรรทัดซ้าย  และด้านล่าง */  
.left_bottom {  
        border-left:1px solid #000;  
        border-bottom:1px solid #000; overflow:hidden;  
}  
/* กำหนดเส้นบรรทัดซ้าย ขวา และด้านล่าง */  
.left_right_bottom {  
        border-left:1px solid #000;  
        border-bottom:1px solid #000;  
        border-right:1px solid #000;  
		overflow:hidden;
} 

/* กำหนดเส้นบรรทัดซ้าย  และด้านล่าง */  
.left_bottom_n {         
		border-bottom:1px dotted #000;  overflow:hidden;
}  
.left_mm_n {  
        border-bottom:1px dotted #000;  overflow:hidden;
}  
/* กำหนดเส้นบรรทัดซ้าย ขวา และด้านล่าง */  
.left_right_bottom_n {           
		border-bottom:1px dotted #000;  overflow:hidden; 
}