.bigbox_4, .bigbox_4a, .bigbox_4b{
  height:100%
}

.sorting_arrow.on{
  color:blue;
}


body {
	color:#333333;
	font-family:Lucida Grande,Verdana,Geneva,Sans-serif;
	font-size:12px;
  width:100%;
	min-width:1000px;
  Xwidth:1000px;
	margin-top:10px;
  margin-left: 0px;
  Xborder-left:10px solid white;
}

input, textarea, select {
    font-size: 11px;
}

img{
  border:none;
}

td {
font-size:12px;
}

.line_thru{
  text-decoration:line-through;
}

.indent{
  padding-left:20px;
  display:block;
}

.right{
  float:right;
}

.blue{
  color:blue;
}
.green{
  color:green;
}


.signs_block.right{
  float:right;
  margin-right:20px;
}
.signs_block a{
  background:white;
  color:black;
  padding:8px;
}
.signs_block a.current{
  background:black;
  color:white;
}

.system_message{
  background: blue;
  color:white;
  padding:10px;
}

a.button{
  background:#dddddd;
  border:#999999 1px solid;
  padding:3px;
  text-decoration:none;
  color:black;
}

a.red_button{
  background:red;
  border:#999999 1px solid;
  padding:3px;
  text-decoration:none;
  color:white;
}

.no_margin_top{
  margin-top:0px !important;
}
.space{
  height:10px;
}
.td_space_on_top{
  padding-top:20px;
}
.padding_on_top{
  padding-top:10px;
}

.totalNumOfResultLine {
  padding-bottom:20px;
}

.done{
  background: url('../imgs/checkbox_checked.gif') right no-repeat;
  padding-right:20px !important;
  /*width: 20px;
  height: 20px;*/
}                                       

.backtotop{
  position:fixed;
  bottom:15px;
  right:15px;
  width:25px;
  height:25px;
  overflow:hidden;
  text-align:center;
  background:#999;
  color:white;
  font-size:20px;
  font-weight:bold;
  padding:10px;
  display:inline-block;
  cursor:pointer;
  opacity:0.8;
}

.company_title{
  font-weight: bold;
	font-size: 20px;
	font-family: Arial;
	color: Orange;
}

.tr_title td{
  padding-top:3px;
	padding-bottom:3px;
}

.heading{	
	font-weight: bold;
	font-size: 17px;
	font-family: Arial;
}

.title{	
	font-weight: bold;
	font-size: 17px;
	font-family: Arial;
	width: 300px;
	color: #FC88A5;
}
.subtitle{
	font-weight: bold;
	font-size: 17px;
	font-family: Arial;
	margin-bottom:20px;
	display:block;
}

.login_title{	
	font-weight: bold;
	font-size: 23px;
	font-family: Arial;
	width: 300px;
	color: #000;
}

.gray {
	color:#999999;
	font-weight:normal;
}
	
.underline {
	text-decoration:underline;
}

a {
	color:#666;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
table {
  border-collapse: collapse;
  /*font-size:12px;*/
} 
.hidden_tr{
  display:none;
}
td.important{
	color:#6688ff;
	font-weight:bold;
}
td.veryimportant{
	color:red;
}
td.note{
	color:#777;
	font-style:italic;
}
#footer {
	margin:0 auto;
	width:900px;
}
#content {
	margin:0 auto;
	width:900px;
}
#content h1 {
	background-color:transparent;
	border-bottom:1px solid #666666;
	color:#E13300;
	font-size:24px;
	font-weight:normal;
	margin:0 0 20px;
	padding:3px 0 7px 3px;
}
	
.staff_note{
	width: 25px;
}

.bold{
	font-weight: bold;	
}
.error{
	color: red;
}
.note{
	clear:both;
	color: blue;
	padding:0 0 10 0;
}
.result_note{
	clear:both;
	color: white;	
	background:blue;
	margin-bottom:10px;
	margin-top:10px;
	padding:5px;
}
.fieldnote{
  color:green;
}
.wrap{
  white-space:normal !important;
}
.hidden{
  display:none;
}
.show{
  display:block !important;
}

/******* wrapper ********/
#wrap{
  clear:both;
  margin:0px;
  width:900px;
  padding:10px; 
  border: 3px orange solid;          
}

#top_div{
  background:#ff6699 ;
  position:fixed;
  top:0px;
  left:8px;
  /*width:948px;*/
  width:100%;
  height:79px;  
  border:1px solid black;
  z-index:5; 
}
#top_div .box{
  float:left;
  padding:5px;
  height:69px;      
}

/******* header ********/

#header {
	clear:both;
	margin:0;
	border:0;
	padding:0 0 0 0;
	/*width:920px;*/
}
#header H1{
	margin:0 auto;
	border:0;
	padding:0;
}
#tabs .tab ,
#tabs .tab_work_app,
#tabs .tab_template{  
    margin: 4 2 0 0;
    width: 90px;
    height:30;
    float:left; 
    background-color:#f8ecb9;
    font-size:13px;
    padding:0;
}
#tabs .tab a,
#tabs .tab_work_app a,
#tabs .tab_template a{  
    font-weight:normal;    
    color: #ff9900
}
#tabs .tab_work_app,
#tabs .tab_template {
	width:145px;
}

#tabs .tab.over,
#tabs .tab_work_app.over,
#tabs .tab_template.over  {   
    background-color:#ffcc66;   
}
#tabs .tab.over a,
#tabs .tab_work_app.over a,
#tabs .tab_template.over a {   
    color: #ff6600   
}
#tabs .tab.current,
#tabs .tab_work_app.current,
#tabs .tab_template.current {	 
    background-color:orange;
}
#tabs .tab.current a,
#tabs .tab_work_app.current a,
#tabs .tab_template.current a{ 
    color: white;
    font-size:15px;
    font-weight:bold;
}
#tabs .tab .tab_text,
#tabs .tab_work_app .tab_text,
#tabs .tab_template .tab_text {	
	font-weight:bold;
	font-size: 12px;	
	padding: 8 0 0 0;
	margin:0;
	width: 100%;
	height:100%;		
	left:0; top:0;
	text-align: center;
}
#wellcome_msg {
    /*clear:right;
    float:right;*/
    margin-top:2px;    
}
#wellcome_msg span{
    font-style:italic;
    font-weight:bold;
    margin-right:5px;
}
#admin_bar {
	clear:both;
    float:right;
    margin:0px;
    padding:5 10 5 10;
    background-color: #ddeedd;
    width:450;  
    height:25;
    text-align: center;;
}
#admin_bar a{
    color: #777;
}
#admin_bar .admin {
	float:left;
	margin-left:15px;
	font-size:13px;
}


/***** menu & sub menu *****/

#left_menu_box{
  position:fixed;
  top:0px;
  left:8px;
  width:126px;
  _width:127px;
  height:100%;  
  overflow:scroll;
  background:#f8f8f8;
  border:1px solid black;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:5px;
  margin-top:80px;
}

#left_menu_box .admin.current {
    font-weight:bold;
}
#left_menu_box .admin.current a{
    color:#d58;
}
#left_menu_box .menu_title{
  font-weight:bold;
}
#left_menu_box .admin_2nd_level{
  padding-left:10px;
}

.admin_link{
  font-size:13px;
  line-height:21px;
  white-space:nowrap;
}
.admin_link.current{
  color:black;
  font-weight:bold;
}

.sub_menu{
	margin:0 10 0 0;
	font-weight:bold;
	float: right;
}
.sub_menu a{
	color:orange;
}


/***** TITLE *****/

#page_title_div{
  position:fixed;
  z-index:2;
  width:100%;
  height:30px;
  left:141px;
  top:80px;
  padding-left:10px;
  padding-top:10px;
  border-bottom:1px solid black;
  background:white;
  font-size:16px;
  font-weight:bold;
  color:#d58;
}

span.h3_title{
	float:left;
	padding:0 5 0 0;
	margin:0;	
}
h3 {
	font-family: Lucida Grande,Verdana,Geneva,Sans-serif;
	font-size: 14px;
	font-weight: bold;
	width:300;
	padding:5 5 5 0;	
	margin:0 0 10 0;
}
h3.admin{
	background-color: #DDEEDD;
}
h4 {
	font-family: Lucida Grande,Verdana,Geneva,Sans-serif;
	font-size: 13px;
	font-weight: bold;
	color:black;
	text-align:center;
	/*width:200;*/
	/*padding:5 5 5 10;*/
	/*background-color:#eeeebb;*/
	/*margin:0 0 10 0;*/
	padding:0 0 0 10;
	margin:0 0 0 0;		
}
h5 {
	font-family: Lucida Grande,Verdana,Geneva,Sans-serif;
	font-size: 12px;
	font-weight: normal;
	padding:0 0 0 10;
	text-align:center;
	margin:0 0 10 0;	
	color: #888855;
	white-space:nowrap;
}
h5 a{
	color: #888855;
	text-decoration: underline;
}
h5 a:hover{
	color: #555533;
}
h5.over{
	color: orange;
	font-size: 13px;
	font-weight: bold;	
	white-space:nowrap;
	padding-bottom:10px;	
}
h5.over a{
  text-decoration:none;
  color: orange;
}

/***** CONTENT *****/
#content .box td, #content .box_no_border td {
	border-bottom:1px solid #E8E8E8;
	padding:5px; 
	text-align: left;
	white-space:nowrap;
}
#content .box td.right, #content .box_no_border td.right, #content .box_create td.right,
#content .box th.right, #content .box_no_border th.right, #content .box_create th.right {   
    text-align: right;
}
#content .box td.center, #content .box_no_border td.center, #content .box_create td.center,
#content .box th.center, #content .box_no_border th.center, #content .box_create th.center {   
    text-align: center;
}
#content .box_workshop_app td {
	border-bottom:1px solid #E8E8E8;
	padding:5px;  
}
#content .box_create td {
	text-align: left;
	/*border-bottom:1px solid #E8E8E8;*/
	padding:5px;
	white-space:nowrap;
	vertical-align:top;
}
.box_create td, .box_create th {
  padding-top:7px !important;
}
.box_create.vertical th{
    text-align:right;
    padding-right:5px;
}
#content .box th label, #content .box_create th label, #content .box_workshop_app th label, #content .box_no_border th label{
	float:right;
	text-align: left;
	white-space:nowrap;
}
#content .box th, #content .box_workshop_app th, #content .box_no_border th{
	background: #bbbbff;
	text-align:left;
	padding:5px;
	white-space:nowrap;
}
#content .box_create th{
	/*font-weight:normal;*/
	/*border-bottom:1px solid #E8E8E8;*/
	vertical-align: top;
	padding-top: 5px;
	padding-left: 5px;
	width: 60px;
	/*color: #aaa;*/
}
#content .box_create .colored_area{
	/*background-color:#eee;*/
}
#content .box_create .box_header{	
	padding: 7px;
	/*background-color: #ccc;*/
	width:auto;
}
#content .box_create .sign{	
	color: blue;
	font-weight:bold;
	font-size:20px;
}

.box, .box_workshop_app, {
	background-color:#F9F9F9;
	border:1px solid #D0D0D0;
	font-size:12px;
	clear:both;
}
.box_create {
	font-size:12px;
	clear:both;
}
.box_no_border{
	background-color:#F9F9F9;
	font-size:12px;
	clear:both;
}
.box_text_gray{
	font-size: 10px;
	color: gray;
}
.box_right{
	background-color:#F9F9F9;
	border:1px solid #D0D0D0;
	font-size:12px;
	float:right;
}
#content .box .td_linebreak{
	white-space: normal;
}

#content .box_create .td_linebreak{
	white-space: normal;
}

#box_info{
	padding-top:30px;
	font-weight:bold;
	color:#7777dd; 
	width:800px;
	margin-top:30px;
}
#box_wide{
	width:800px;	
}

#csv{
	float:right;	
	margin-bottom: 5px;
}
.staff_name{
	color:#0000aa
}
#show_public{
	font-size:16px;
}
.show_public_3b{
	font:italic 12px gray;
	padding-top:20px;
}	
.show_app_no{
	color:blue;
	font-weight:bold;	
}
/***** PROGRESSBAR *****/
#progressbar{
	width:400px; 
	height:20px;	
}
.progressbar_text{
	font-size:12px;	
}

/***** FILTERS *****/
.filter_drop_label{
	padding-top:3px; 
	width:100%;
}
.filter_fields{
	padding-top:3px;	
}            

#filter_form{ background: #f5f5f5; padding: 5px; }

form.filter_grid { display:flex; }
form.filter_grid > div{ flex-flow:row; margin-right:30px;  }


/***** ICONS *****/
.list{
	background: url('../../imgs/list.jpg');
	padding: 5px 7px;
	text-decoration: none;
	margin-right: 5px;
}
*html .list{ 
  	background: url('../../imgs/list.jpg');
	padding: 3px 7px;
	text-decoration: none;
	margin-right: 5px;
}

.create{
	background: url('../../imgs/create.jpg');
	padding: 4px 8px;
	text-decoration: none;
	margin-right: 5px;
}
*html .create{
	background: url('../../imgs/create.jpg');
	padding: 3px 8px;
	text-decoration: none;
	margin-right: 5px;
}
.export{
	background: url('../../imgs/export.jpg') no-repeat;
	padding: 1px 6px;
	text-decoration: none;
	margin-right: 5px;
}
*html .export{
	background: url('../../imgs/export.jpg') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
}
.view{
	background: url('../../imgs/view.gif') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
*html .view{
	background: url('../../imgs/view.gif') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
.update{
	background: url('../../imgs/edit.png') no-repeat;
	padding: 1px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
*html .update{
	background: url('../../imgs/edit.png') no-repeat;
	padding-bottom: 2px;
	padding-left: 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
.delete{
	background: url('../../imgs/delete.png') no-repeat;
	padding: 1px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
*html .delete{
	background: url('../../imgs/delete.png') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
a.report{
	background: url('../imgs/report.png') no-repeat;
	padding: 1px 6px;
	height: 16px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
*html a.report{
	background: url('../imgs/report.png') no-repeat;
	padding: 0px 6px;
	height: 16px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}
a.fansclub{
	background: url('../imgs/fansclub.jpg') no-repeat;
	padding: 1px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 0px;
	color: red;
}
*html a.fansclub{
	background: url('../imgs/fansclub.jpg') no-repeat;
	padding: 0px 6px;
	height: 15px;
	text-decoration: none;
	margin-right: 0px;
	color: red;
}
#content .box_workshop_app .icons{
padding: 2px;
}

/***** FILTER *****/
#filter, #filter_class{	
	width: 500px !important;
	padding: 10px;
	margin-top: 0px;
	/*border:1px solid black;*/
}
*html #filter_class{
	width: 330px;
}
*html #filter{
	margin: -6px 0px;
	width: 310px;
}
#filter_work_app{
	width: 370px;
	padding: 10px;
	margin-bottom: 15px;
}
*html #filter_work_app{
	width: 400px;
}
.filter_text{
	font-weight: bold;
	color: #223b6a;
}
.filter_label{
	font-weight: bold;
	float: left;
	color: #223b6a;
	margin-right: 3px;
	text-align:right;
}
#filter_class_row1{
	margin-bottom: 3px;
	margin-left: 54px;
}

*html #filter_class_row1{
	margin-left: 50px;
	margin-bottom: 3px;
}
#filter_class_row2{
	margin-right: 12px;
	float:left;

}
.filter_label_ws_app_row1{
	font-weight: bold;
	color: #223b6a;
	margin-left: 85px;
}
.filter_label_ws_app_row2{
	font-weight: bold;
	color: #223b6a;
	margin-left: 98px;
}
.filter_label_ws_app_row3{
	font-weight: bold;
	color: #223b6a;
	margin-left: 0px;
}
.filter_label_ws_app_row4{
	font-weight: bold;
	color: #223b6a;
	margin-left: 28px;
}

*html .filter_label_ws_app_row1{
	margin-left: 85px;
}
*html .filter_label_ws_app_row2{
	margin-left: 97px;
}
*html .filter_label_ws_app_row3{
	margin-left: 0px;
}
*html .filter_label_ws_app_row4{
	margin-left: 35px;
}

.submit_ws_app{
	margin-left: 28px;
}
*html .submit_ws_app{
	margin-left: 8px;
}
.filter_field{
	margin-bottom: 3px;
}

.filter_submit{
	float: right;
	width:80;
	margin-top:-25px;
}
.workshop_filt_row2{
	margin-left: 15px;
}
*html .workshop_filt_row2{
	margin-left: 22px;
}

/***** LOGIN *****/
#login_form{
	
	width: 300px;
	padding: 5px;
}
#login_heading{
	color: #000;
	font-weight: bold;
	font-size: 12px;
	/*background:orange;*/
	text-align: center;
	width: 100px;
	padding: 5px;
	margin-bottom: 0px;
}
#username{
	float: left;
	color: #223b6a;
	font-weight: bold;

}
#username_input{
	float: left;
}
.block{
	display: block;
}
#password{
	display: block;
	float: left;
	color: #223b6a;
	font-weight: bold;
}
#pwd_input{
	
}
.login_box{
	/*border: 3px solid orange;*/
	/*margin-top: -12px;*/
	/*margin-left: 2px;*/
	width: 500px;

}
#login_form .login_box td{
	height: 30px;
	padding: 5px;
}
/***** sorting & pager *****/
#sorting_pager{
	clear:both;
}
#sorting{
	float:right;
}

/***** general *****/

.clear{ clear: both; }
.red{ color: red; }
.blue{ color: blue; }
.green{ color: green; }
.big{ font-size: 20px; }
.medium{ font-size: 15px; }
.alignright{ float:right; }
.redNote{ background: red; color: white; padding:3px; margin-bottom:10px; line-height:19px; }
.blueNote{ background: blue; color: white; padding:3px; margin-bottom:10px; line-height:19px; }

tr.summary td{
	/*border-top: 2px solid #BBBBFF;
	border-bottom: 2px solid #BBBBFF;*/
	color: #8888cc;
	font-weight: bold;
	background: #ddddFF;
}

div.controls{
	padding-bottom: 10px;
	height: 30xp;
	float: right;
}

div.controls a{
	font-weight: bold;
}

/***** invoice *****/

.invoice{
	clear: both;
	padding-top: 20px;
	width: 100%;
}

.invoice_logo{
	margin-bottom: 10px;
	width: 300px;
}

.invoice_address{
  float: right;
  width: 377px;
  padding:0px;
  margin:0px;
}
	
	
.invoice_right {
  float: right;  
  width: 300px;
}
.invoice_right div{
  float: right;
  clear: right;
}

.invoice_barcode{
	height: 68px;
	overflow: hidden;
	width: 187px;
	margin-top: 10px;
}

.invoice_title{
	text-decoration: underline;
	font-weight: bold;
	font-size: 17px;
	font-family: Arial;
	width: 300px;
}

.invoice_no{	
	font-weight: bold;
	font-size: 14px;
	font-family: Arial;
	clear: both;
}
.invoice_no div{
	float:left;
	vertical-align: bottom;
	text-align: bottom;
}
.invoice_no .content, .invoice_date .content{
	width:180px;
	padding-left:5px; 
}

.invoice_date div{
	float:left;
	padding-top:10px;	
}


.tableInvoice{
	/*clear: both;*/
	margin-top:10px;	
	border-right:10px white solid;
	width: 450px;
}

.tableInvoice2{
	clear: both;	
}

.tableInvoice th{
	white-space: nowrap;
}

.tableInvoice2 td, .tableInvoice2 th,
.tableInvoice td, .tableInvoice th{
	padding-top:10px;	
	padding-bottom:5px;	
}

/*.tableInvoice2 td, .tableInvoice td {		
	padding-right:10px;	
}*/

.tableInvoice2, .tableInvoice2 table, 
.tableInvoice, .tableInvoice table{
	font-size: 13px;
	font-family: Arial;	
}

.tableInvoice2 table td, .tableInvoice2 table th,
.tableInvoice table td, .tableInvoice table th{
	padding-top:0px;
}

table.payment_detail{
	font-size: 12px;
	margin-left:20px;
	margin-top:5px;
	margin-bottom:0px;
}
table.payment_detail td, table.payment_detail th{
	padding:0px;
}
table.payment_detail td{
	border-bottom: none;
	padding-left: 5px;
}

.invoice_date{	
	clear: both;
	font-weight: bold;
	font-size: 14px;
	font-family: Arial;
	float: right;
}

.tableInvoice tr, .tableInvoice2 tr{
	vertical-align: top;
} 

.tableInvoice th, .tableInvoice2 th{
	text-align: left;
} 

.tableInvoice td, .tableInvoice2 td{
	padding-right: 10px;
	border-bottom: 1px solid black;
} 

.tableInvoice td.payment_amt, .tableInvoice2 td.payment_amt{
	border-bottom: none;
}

.invoice_date_time{
	padding-left: 5px;
	white-space: nowrap;
}

.td_payment_amt div{
	/*float: left;*/
}

.inv{
	background: url('../../imgs/inv.jpg');
	padding: 4px 8px;
	height: 22px;
	width: 22px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}

*html .inv{
	background: url('../../imgs/inv.jpg');
	padding: 4px 8px;
	height: 22px;
	width: 22px;
	text-decoration: none;
	margin-right: 5px;
	color: red;
}

/*@media print and (width: 21cm) and (height: 29.7cm) {*/
@media print {

/*@page{
	margin: 0cm;
	padding: 0cm;
	size: A4;
}*/

body{
	margin: 0;
	padding: 0;
}

#invoice_double{
	margin: 0;
	padding:0;
	/*page-break-before: always;*/ 
	page-break-after: always;
	page-break-inside: avoid;	
	/*height: 28.6cm;*/
	overflow: hidden;
	/*border: 1px solid black;*/
}

#invoice_double_last{
	margin: 0;
	padding:0;
	/*page-break-before: always;*/ 
	/*page-break-after: always;*/
	page-break-inside: avoid;	
	/*height: 28.6cm;*/
	overflow: hidden;
	/*border: 1px solid black;*/
}

.invoice{
	margin: 0;
	padding:0;
	padding-top: 10px;
	height: 14.4cm;
  overflow: hidden;
  /*border: 1px solid black;*/
 	/*page-break-inside: avoid;*/
	 /*page-break-before: always;*/	
}

table,tr,td { page-break-before: avoid; page-break-after: avoid; }
}

.inv_no {
  font-size:14px; 
  font-weight:bold;
  color: #00AAAA;
}

#message{color:red; padding-bottom:20px;}



/******** for background and pop up *********/

#background{
  background-color: black;
  opacity:0.6;
  filter:alpha(opacity=60);
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index: 9;
  display:none;
}

#detail_700_popup{
  z-index: 10;
  display:none;
  position:absolute;
  width:700px;
  height:auto !important;
  background: white;
  border:5px solid #F69;  
  box-shadow:0 3px 15px #333;
  left:50%;
  margin-left:-350px;
}
#detail_700_popup #wrap{
  width:670px !important; /* overwrite */
}
#detail_700_popup #content{
  width:600px !important; /* overwrite */
}
#detail_700_popup .content{
  /*margin-top:20px;*/
  background: white;  
  /*width: 595px;
  height:455px;*/
  width: auto;
  height:auto;  
  /*
  padding:8px;  
  padding-top:15px;*/
  overflow: hidden;
  /*border: 1px solid gray;*/
  margin:0px;
  padding:10px;
}                     
#detail_700_popup .content iframe{
  width:100%;
  height:500px;
}
#detail_700_popup .content img{
  width:auto;
  height:auto;
}                                                           
#detail_700_popup .close, div.popup .close{
  margin:0px;
  padding:0px;
  background: url('../imgs/popup_close.jpg') no-repeat;
  width: auto;/*595px;*/
  height: 25px;
  width: 25px;
  /*background-position:right top;*/
  float:right;
}

/*** big main table ***/

.bigTable{
  Xwidth:950px;
  width:100%;
  min-width:950px;
  margin-top:0px !important;
  margin-bottom:0px !important;
}
.bigbox_1{
  width:230px;
  _width:240px;
  padding:5px;
  padding-top:10px;
  /*border:1px solid black;*/
  text-align:right;
}
.bigbox_2{
  width:640px;
  _width:660px;
  padding:10px;
  padding-top:20px;
  /*border:1px solid black;*/
}
.bigbox_heading{
  width:800px;
  padding:5px;
  padding-top:10px;
  /*border:1px solid black;*/
}
.bigbox_3{
  clear:both;
  width:121px !important;
  padding:5px;
  /*border:1px solid black;*/
}
.bigbox_4{
  width:780px;
  padding:10px;
  padding-left:20px;
  /*border:1px solid black;*/
}
.bigbox_4a{
  width:300px;
  padding:10px;     
  padding-left:20px;  
  /*border:1px solid black;*/
}
.bigbox_4a_1{
  width:100px;
  padding:10px;     
  Xpadding-left:20px;
  /*border:1px solid black;
  border-right:1px solid black;*/
}
.bigbox_4a_2{
  width:350px;
  padding:10px;     
  /*border:1px solid black;*/
}
.bigbox_4b{
  width:400px;
  padding:10px;
  Xpadding-left:20px;
  border-left:1px solid black;
  /*border:1px solid black;*/
}

/*** listing setting ***/

.section_list_item, .staff_list_item, .location_list_item {
  clear:both;
  padding-bottom:15px;  
}
.section_list_item div{
  padding-top:4px;
}
.section_list_item div.red span{
  color:red;
}

/*** buttons ***/

.editButton, .deleteButton{
  display:block;
  width:50px; 
  height:15px;
  border:1px solid black;
  text-align:center;
  background:#FCAFD1;
  text-decoration:none;
  color:black;
}
.editButton:hover, .deleteButton:hover{
  text-decoration:none;
  cursor:pointer;
  background:#FA94C2;
}

/*** form ***/

.editForm{
  color:blue;
}



/***************** member ***********************/

#manageMemberBox{
  position:fixed;
  height:100%;
  width:550px;
  overflow:scroll;
  border-left:1px solid black;
  padding-left:10px;
  padding-top:10px;
  padding-right:10px;
  left:419px;
  top:121px;
  background:white;  
  z-index:2;
}

.memberInfoBox{
  position:fixed;
  height:100%;
  width:255px;
  overflow:scroll;  
  padding-left:10px;
  padding-top:10px;
  padding-right:10px;
  left:143px;
  top:121px;
  background:white;  
  z-index:1;
}

#passwordAlert{
  color:red;
}

.tab.signin_color{
  background:#cccccc;
  border:red 2px solid;  
  padding:5px !important;
  padding-right:10px !important;
  text-decoration:none;
  color:black;
  font-weight:bold;
  display:block;
  width:150px;
  cursor:pointer;
}
/*a.package_color.tab.closed{
  border-bottom:#999999 1px solid;
}*/
.tab.signin_color.opened{
  border-bottom:none;
}
div.content.signin_color{
  background:#cccccc;
  border:red 2px solid;
  padding:15px;
  color:black;  
  clear:both;
}
div.content.signin_color h3{
  width:auto;
  color:red;
  padding:0px;
  margin:0px;
}
div.content.signin_color table{
  margin-top:10px;
}


div.content.remain_pkg {
  margin-bottom:20px; background:#ececec; border:2px solid #F778A1; padding:8px;
}
div.content.remain_pkg h3{
  color:#F52887;line-height:15px;
}


.tab.package_color, .section_shortcut.package_color{
  background:#ffffcc;
}
.tab.booking_color, .section_shortcut.booking_color{
  background:#E3E4FE !important; 
}
.tab.product_color, .section_shortcut.product_color{
  background:#D6FAD9;
}

#manageMemberBox .section_shortcuts{
  background: #555;
  padding: 7px;
  padding-bottom:0px;
  position:fixed;
  bottom:0px;
  Xleft:0px; 
  width:575px;
  margin-left: -10px;
  box-shadow: 5px 0px 11px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-sizing:border-box;
  text-align: center;
}
#manageMemberBox .section_shortcut{
  width:30%;
  margin-right:0px;
  display:inline-block;
  padding:5px;      
  text-align:center;
  border:1px solid #222;  
  cursor:pointer;    
  Xborder: 3px solid #555;
  Xborder-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 3px 0px 9px;
  box-sizing:border-box;
}

#manageMemberBox .tab{
  position:relative;
}
#manageMemberBox .tab .reload{
  display:none;
}
#manageMemberBox .tab.opened .reload{
  background:url("../../../imgs/reload.png") no-repeat;
  background-size:20px auto;
  width:20px;
  height:20px;
  display:inline-block;
  z-index:2;
  position:absolute;
  top:3px;
  right:3px;
  content:"";
}

.tab .icon{
  font-size:14px;
}
.tab.package_color{
  border:#999999 1px solid;  
  padding:5px !important;
  padding-right:10px !important;
  text-decoration:none;
  color:black;
  font-weight:bold;
  display:block;
  width:150px;
  cursor:pointer;
}
/*a.package_color.tab.closed{
  border-bottom:#999999 1px solid;
}*/
.tab.package_color.opened{
  border-bottom:none;
}
div.content.package_color{
  background:#ffffcc;
  border:#999999 1px solid;
  padding:15px;
  color:black;  
  clear:both;
}

.tab.booking_color{
  border:#999999 1px solid;  
  padding:5px !important;
  padding-right:10px !important;
  text-decoration:none;
  color:black;
  font-weight:bold;
  display:block;
  width:150px;
  cursor:pointer;
}
/*a.package_color.tab.closed{
  border-bottom:#999999 1px solid;
}*/
.tab.booking_color.opened{
  border-bottom:none;
}
div.content.booking_color{
  background:#E3E4FE !important;
  border:#999999 1px solid;
  padding:15px;
  color:black;  
  clear:both;  
}

.tab.product_color{
  border:#999999 1px solid;  
  padding:5px !important;
  padding-right:10px !important;
  text-decoration:none;
  color:black;
  font-weight:bold;
  display:block;
  width:150px;
  cursor:pointer;
}
/*a.package_color.tab.closed{
  border-bottom:#999999 1px solid;
}*/
.tab.product_color.opened{
  border-bottom:none;
}
div.content.product_color{
  background:#D6FAD9;
  border:#999999 1px solid;
  padding:15px;
  color:black;  
  clear:both;
}

.locationDiv .classesOfLocationDiv{
  Xheight:80%;
  height:inherit ; 
  overflow:hidden; 
  overflow-x:hidden;
  margin-top:25px;
  padding-right:10px;
}


.booking_table tr:hover{
  /*color:red; added in head.php as js*/
}
.booking_table td{
  padding-right:10px;
  font-size:10px;
}
.booking_table a{
  text-decoration:underline;
}

#bookingHistoryTable td{
  padding-right:10px;
}
#bookingHistoryTable td.note{
  font-size:10px !important;
  font-style:normal !important;
}
#bookingHistoryTable tr{
  /*border-bottom:1px solid #dddddd;*/
}                                     
#bookingHistoryTable tr.title{
  font-weight:bold; 
  color:midnightblue;
  background:lightblue;  
  border-bottom:1px solid mediumslateblue;  
}
#bookingHistoryTable tr.title td{                   
  padding:2px;
}
#bookingHistoryTable tr.date td{
  color:steelblue; 
  font-weight:bold;
  font-size:14px !important;
}
#bookingHistoryTable tr.content:hover{
  /*color:red !important; added in head.php as js */
}
#bookingHistoryTable tr.canceled {
  /*text-decoration:line-through;*/
  color:#999999;
  display:none;
}

#showHistoryLink{
  background:blanchedalmond;
  border:1px solid burlywood;
  color:black;
  padding:4px;  
}

#manageMemberBox{
  width: 600px;  
}
#manageMemberBox .content{
  width:90%;  
}


#manageMemberBox .introduced_members{
  margin-bottom:20px;
  background:#eeeeee;
  padding:10px;
  border:2px solid green;
  width:90%;
}
#manageMemberBox .introduced_members .title{
  color:green;
  line-height:150%;
}

#chosen_products{
  border:1px solid gray;
  padding:5px;  
}
#chosen_products .products .product{
  margin-top:10px;
  clear:both;
}
#chosen_products .product.dummy{
  display:none;
}
#chosen_products .products .product .img_block{
  float:left;
  margin-right:10px;  
}
#chosen_products .products .product .delete_block{
  float:right;
}

.member_package_list_item.old{
  /*display:none;*/
}

#manageMemberBox .box_create td, .box_create th {
  vertical-align:top;
}

#manageMemberBox .member_package_list_item{
  border-bottom: 1px dashed grey;
  padding-top: 10px;
}

/************************** search member **************************/

#top_search_div div{
  float:left;
  padding-right:10px;
}

.search_result_page .member_list_item{
  border-bottom: 2px solid #ddd;
}
.search_result_page .member_list_item input{
  margin-left:0px !important;
}
.nophoto{
  width:100px;
  height:130px;
  border:1px solid gray;
  text-align:center;
  padding-top:40px;
}

/************************* update blocks ***************************/
.section_list_item .show_block span{
  color:#666;
  line-height:17px;
}
.section_list_item .multi-line-block .show_block,
.section_list_item .multi-line-block .update_block{
  display:block;
  padding-left:30px;
}

.section_list_item .multi-line-block .update_block input,
.section_list_item .multi-line-block .update_block textarea,
.section_list_item .multi-line-block .update_block select{
  font-size:12px !important;
}

.update_block textarea{
  width:200px;
  height:100px;
}

/************************* booking status ***************************/

          
#date_bar{
  width:100%;
  padding-left:300px;
}
#date_bar div{
  float:left;
  text-align:center;
}
#date_bar #changeDateDiv{
  padding-left:20px;
}
#changeDateDiv input{
  background:#FADCEA;
  border:2px solid #A83C70;
  text-align:center;
}
#date_bar span{
  color:#A83C70 !important;
}
#date_bar a{
  /*font-size:16px;*/
  font-weight:bold;
  color : white;
  background: #A83C70;
  padding:3px;
  padding-left:7px;
  padding-right:7px;
}

#booking_status_block .heading{  /*width:100%;*/  background:#9F396A;  color: white;  clear:both;  margin-top:20px;  padding:5px; }
#booking_status_block .title{  margin-top:20px !important; }
#booking_status_block .tutor_info{ padding-right:15px; color:#dF396A; }

.booking_status_table_title{	
	font-weight: bold;
	font-size: 17px;
	font-family: Arial;
	width: 350px;
	color: #4B8E65;
	line-height:25px;
}

.booking_status_table tr.content:hover{
  /*color:red; added in head.php as js*/
}
.booking_status_table tr.content td{
  border-bottom:1px solid lavender;
  padding-right:8px;
}
.booking_status_table tr.content.canceled{
  color:gray !important;
}
.booking_status_table .tr_title td{
  /*font-weight: bold;*/	
	background:#FCDDEB;
	color:slategray;		
	border-bottom:1px solid #A83C70;
	/*text-decoration:underline;*/
}

a.sign-in-link {
  background:yellow;
  color:black;
  padding:2px;
  border:1px solid gray;
  line-height:24px;
}
a.cancel-sign-in-link{
  background:#FCAFD1;
  color:black;
  padding:2px;
  border:1px solid gray;
  line-height:24px;
}

/************************ log ***************************/

.log_div{
  display:none;
}

.show_log_link{
  /*text-decoration:underline;*/
  padding-top:3px;
  padding-bottom:3px;
}

.log_history_small_table th, .log_history_small_table td{
  font-size:10px !important;
  text-align:left;
  padding-right:6px;  
}
.log_history_small_table tr.content:hover{
  /*color:blue; added in head.php as js */
}
.log_history_small_table tr.content td, .log_history_small_table tr.header th{
  border-bottom:1px solid #ddd;  
}
.log_history_small_table tr.header th{
  white-space:nowrap;
}                     
.log_history_small_table .content td:nth-of-type(1),
.log_history_small_table .content td:nth-of-type(3),
.log_history_small_table .content td:nth-of-type(4)
{
  word-break: break-all;
  word-break: break-word;
}
.log_history_small_table .content td:nth-of-type(2),
.log_history_small_table .content td:nth-of-type(5){
  color:#aaa;
}
.log_history_small_table .content td:nth-of-type(4){
  color:#D20177;
}

.log_history_narrow_table th,
log_history_narrow_table td{
  font-size:10px !important;
  text-align:left;
  padding-right:6px;  
}
.log_history_narrow_table tr.content td, .log_history_narrow_table tr.header th{
  border-bottom:1px solid #ddd;  
  font-size:11px !important; 
}
.log_history_narrow_table .content td:nth-of-type(1),
.log_history_narrow_table .content td:nth-of-type(2),
.log_history_narrow_table .content td:nth-of-type(3)
{
  word-break: break-all;
  word-break: break-word;
}
.log_history_narrow_table .content td:nth-of-type(1) span,
.log_history_narrow_table .content td:nth-of-type(3){
  color:#D20177;
}

/************************ holiday ***************************/

#holiday_year_title{
  font-weight:bold;
  font-size:17px;
  /*width:100%;
  text-align:center;*/
  padding-left:10px;
}
#holiday_year_title .prev_year_link,
#holiday_year_title .next_year_link{
  color:blue;  
}
#holiday_year_title .prev_year_link:hover,
#holiday_year_title .next_year_link:hover{
  cursor:pointer;
}

.holidayTableDiv{
  float:left;
  margin:10px;
}
.holidayTable tr.header{
  background:khaki;
}
.holidayTable td{
  font-size:14px;
}
.holidayTable td.isHoliday{
  background:orange;
}
.holidayTable td.today{
  border: 2px solid blue;
}
.holidayTable td.month{
  background:orange;
  font-weight:bold;
  text-align:center;
}
.holidayTable td.calendar_day{
  /*padding-left:3px;
  padding-right:3px;*/
}
.holidayTable td.calendar_day:hover{
  cursor:pointer;
}


/************************ staff functions (top left corner) ***************************/

#dynamic_content, #staffListBox{
  height:inherit !important;
  overflow:scroll;
}

#staffListBox, #staffShowBox{
  float:left;  
  Xposition:fixed;
  Xleft:496px;
  height:85%;
  overflow:scroll;
  Xborder-left:1px solid black;
  padding-left:10px;  
  top:120px;
  background:white;
  padding-top:10px;
  line-height:20px;
}
#staffListBox{
  Xmargin-left:496px;
  width:200px !important;
}
#staffShowBox{
  left:850px;
  width:320px;
}

#dynamic_content.staffCreate{
  float:left;
  width:300px !important;
}

.staffDraftList{
  border-bottom:1px solid grey;
  width:90%;
}
.staffDraftList:hover{
  background:#eee;
}
.staffDraftList.inactive span{
  text-decoration:line-through;
}

#staff_functions_div{
  padding-top:5px;
}

.staff_list_item .ar_block, .updateStaff_arBlock .hidden_block{
  display:none;
  font-size:11px;
}
.staff_list_item .updateStaff_arBlock td,
.createStaff_arBlocks, .createStaff_arBlocks td{
	font-size:11px;
}

.updateStaff_arBlock .updateArButton {
  font-size:10px;
  line-height:13px;
  padding:0px;
}

.updateStaff_arBlock .staff_ar_show_booking_status_block,
.updateStaff_arBlock .staff_ar_product_block,
.updateStaff_arBlock .staff_ar_package_block,
.updateStaff_arBlock .staff_ar_holiday_block,
.updateStaff_arBlock .staff_ar_create_member_block,
X.updateStaff_arBlock .staff_ar_product_category_block,
X.updateStaff_arBlock .staff_ar_package_block,
X.updateStaff_arBlock .staff_ar_course_time_block,
X.updateStaff_arBlock .staff_ar_location_block,
.updateStaff_arBlock .staff_ar_banner_block,
.updateStaff_arBlock .staff_ar_news_block,
.updateStaff_arBlock .staff_ar_album_block,
X.updateStaff_arBlock .staff_ar_workshop_block,
.updateStaff_arBlock .staff_ar_groups_block,
X.updateStaff_arBlock .staff_ar_payment_dateback_block,
.updateStaff_arBlock .staff_ar_tutor_report_block,
.updateStaff_arBlock .staff_ar_assign_tutor_block,
.updateStaff_arBlock .staff_ar_monthly_report_block
{
  float:left;
  width:48%;
  clear:left;
}
X.updateStaff_arBlock .staff_ar_package_date_block,
X.updateStaff_arBlock .staff_ar_monthly_report_block
{
  width:48%;
}

#staffListBox .hidden_block *{
  font-size:12px;
}

#staffListBox .hidden_block *{
  font-size:12px;
}

.createStaff_arBlocks .ar_block{  
  width:130px;
  float:left;  
}
.createStaff_arBlocks .ar_block.wider{
  width:260px;
}

.createStaff_arBlocks span.title,
.updateStaff_arBlock span.title{
  background:#eabAce ;
  color:#555;
  font-size:inherit;
  display:block;
  padding-left:10px;  
  width:95%;
  float:left;
}
.updateStaff_arBlock span.title {
    display: none;
}

.createStaff_arBlocks .hr,
.updateStaff_arBlock .hr{
	clear:left;
	border-bottom: 1px #aaa dashed;
	margin:5px !important;
	padding-top:5px !important;
}

.updateStaff_leavesBlock th{
  font-size:11px;
  padding-right:8px;
}
.updateStaff_leavesBlock th, .updateStaff_leavesBlock td{
  padding-bottom:5px;
}

.staff_leaves_list_item{
  border-top:1px dashed #bbb;
}

.staff_list_item .updateStaff_leavesBlock{
  border:1px dotted gray; 
  padding:5px; 
  margin-top:5px; 
  margin-bottom:5px; 
  width:270px; 
  background:#F7EAF6;
}

.staff_list_item .updateStaff_arBlock,
.createStaff_arBlocks{
  border:1px dotted gray; 
  padding:5px; 
  margin-top:5px; 
  margin-bottom:5px; 
  width:270px; 
  background:#F5DAE8;
}

.staff_list_item .personal_info,
.staff_list_item .salary_info{
  display:none;
}

/************************ loading ***************************/

#loading{
  z-index: 10;
  display:none;
  position:absolute;
  width:500px;
  height:100px;
  border:1px solid gray;
  background:orange;
  color:white;
  font-size: 15px;
  font-weight:bold;
  padding-top:50px;
  _padding-top:30px;
  text-align:center;
}

/****************** report *******************/

.report_title{  
  font-weight:bold;
  font-size:15px;
  color:#669966;  
}

.reportTable{
  margin-top:10px;
  margin-bottom:10px;
  border-collapse: collapse;
  border:1px solid #ddd;
  width:100%;  
}
/*.reportTable tr.record:hover, .reportTable tr.record:hover td,*/
.reportTable tr.record.hover, .reportTable tr.record.hover td {
  background:#fafafa;
}
.reportTable tr td{
  border-bottom:1px solid #ddd;
  text-align:left;
}
.reportTable tr.header td.header_money{
  border:1px solid #990000 !important;
  text-align:right;
  color:#990000;
}
.reportTable tr.record td.money{
  text-align:right;
  /*color:#990000;*/
}
.reportTable tr.record td.money_red{
  text-align:right;
  color:red;
}
.reportTable .header td{
  background:#daeada;
  font-weight:bold;
  white-space:nowrap;
}
.reportTable td{
  text-align:right;
  padding:5 10 5 10px;
  border:none;
}
.reportTable td.align_right{
  text-align:right;  
}
.reportTable span.small{
  font-size:10px;
  color:brown;
  padding-left:3px;
}
.reportTable tr.summary{
  background:none;
}
.reportTable tr.summary td{
  font-weight:bold;
  color:red;  
  background:none;
  vertical-align:top;
}
.reportTable td.note .partial_note{
  height:50px;
  overflow:hidden;
  background:white;
}
.reportTable td.note .partial_note.auto_height{
  height:auto;
  width:100px;
}

#monthControl{
  float:left; 
  margin-left:200px;
  white-space:nowrap;  
}
#monthControl a{
  /*font-size:16px;*/
  font-weight:bold;
  color : white;
  background: midnightblue;
  padding:3px;
  padding-left:7px;    
}


/***************** pager *********************/

div#pagerDiv{
  background:#eee;
	padding:5 10 5 10px;
	width:95%;
	_width:100%;
	height:20px;
}

div#pagerDiv div.apagination{
  float:left;      	
}

div#pagerDiv .numOfRecPerPageDiv{
  float:left;
  margin-left:100px;
}
/**************** member listing page *****************/

div.member_listing_page .member_list_item{
  width:43% !important;
  margin-right:25px;
  margin-left:25px;
  float:left;
  height:200px;  
  margin-top:10px;
  border-bottom:none !important;
}

/***************** payment ********************/

.payment_tables .payment_table{
  float:left;
  margin-right:10px;
}
.payment_table{
  background:#F2FAA2;
  border:1px solid #ECF051;  
}
.payment_table th, .payment_table td{
  font-size:12px;
  padding:5px;
  padding-left:8px;
  padding-right:8px;
}
.payment_table th{
  text-align:right;  
}
.payment_table th label{                  
  white-space:nowrap;
}
.payment_table .heading th{
  text-align:center;
  background:#E6F457;
}
.payment_table .heading{
  border-bottom:1px solid #ECF051;
}

#manageMemberBox .content.product_color .payment_table{
  background:#E1EEE2 !important;
  border:1px solid #9BCEA0 !important;  
}
#manageMemberBox .content.product_color .payment_table .heading th{
  background:#9BCEA0 !important;
}
#manageMemberBox .content.product_color .payment_table .heading{
  border-bottom:1px solid #9BCEA0 !important;
}


/************* upload photo/file ****************/

#uploaded_photo_div img{
  padding-right:5px;
  padding-bottom:5px;
  height:70px;
}

#upload_photo_div, #common_upload_photo_div,
#upload_file_div, #common_upload_file_div{
  z-index: 10;
  display:none;
  position:absolute;
  width:450px;
  height:auto !important;
  background: white;
  border:1px solid gray;  
}
#upload_photo_div #wrap, #common_upload_photo_div #wrap,
#upload_file_div #wrap, #common_upload_file_div #wrap{
  width:420px !important; /* overwrite */
}
#upload_photo_div #content, #common_upload_photo_div #content,
#upload_file_div #content, #common_upload_file_div #content{
  width:400px !important; /* overwrite */
}
#upload_photo_div .content, #common_upload_photo_div .content,
#upload_file_div .content, #common_upload_file_div .content{
  /*margin-top:20px;*/
  background: white;  
  /*width: 595px;
  height:455px;*/
  width: auto;
  height:auto;  
  /*
  padding:8px;  
  padding-top:15px;*/
  overflow: hidden;
  /*border: 1px solid gray;*/
  margin:0px;
  padding:10px;
}                     
#upload_photo_div .content img, #common_upload_photo_div .content img{
  width:auto;
  height:auto;
}                                                           
#upload_photo_div .close, div.popup .close, #common_upload_photo_div .close, #common_upload_file_div .close{
  margin:0px;
  padding:0px;
  background: url('../imgs/popup_close.jpg') no-repeat;
  width: auto;/*595px;*/
  height: 25px;
  width: 25px;
  /*background-position:right top;*/
  float:right;
}

/********* product ***********/

#productListBox{
  position:absolute;
  height:auto;
  Xoverflow:scroll;
  padding-left:10px;
  padding-top:10px;
  left:493px;
  top:121px;
  background:white;  
  z-index:2;
}

.createProductBox{
  position:fixed;
  height:100%;
  width:330px;
  overflow:scroll;
  border-right:1px solid black;
  padding-left:10px;
  padding-top:10px;
  left:145px;
  top:121px;
  background:white;  
  z-index:1;
}

#category_control {
  margin-bottom:5px;
  border-top:1px solid grey;
  border-bottom:1px solid grey;
  padding : 5px;
}

#location_control {
  margin-bottom:0px;
  border-bottom:1px solid grey;
  padding : 5px;
}

#active_control {
  margin-bottom:15px;
  border-bottom:1px solid grey;
  padding : 5px;
}

#category_control a, #location_control a, #active_control a{
  color:blue;
}
#category_control a.selected, #location_control a.selected, #active_control a.selected{
  color:black;
}

.product_item_info_and_inventory_lists_block .product_info_field{
  background:#efefef;
  padding-left:5px;
  padding-right:5px;  
}
.product_item_info_and_inventory_lists_block .product_info_field.product_product_category_id_block{
  padding-top:5px;
  border-top:1px solid gray;
}
.product_item_info_and_inventory_lists_block .product_info_field.product_active_block {
  padding-bottom:5px;
  border-bottom:1px solid gray;
}

.product_list_item .log_history_narrow_table{
  width:310px; 
}


/******** inventory *********/

.addInventoryBlock{
  border:1px solid #ccc;
  padding:8px;  
  margin-top:10px;
  display:none;
}
.addInventoryBlock td, .addInventoryBlock th{
  font-size:11px;
}
.addInventoryBlock .title{
  font-size:13px;
}
.inventoryBlockDummy{
  display:none;
  color:blue;
}

/***************** common ******************/

#ui-datepicker-div{
  z-index:8;
}

div.locations_block{  
}
div.locations_block a{
  margin-right:10px;
  padding:5px;
  background:#ccc;
  border:1px solid #aaa;
  color:#888;
  line-height:28px;
  white-space:nowrap;
}
div.locations_block a.selected{
  border:1px solid #D74F71;
  background:#F5809D;
  color:white;
}

div.types_block{
}
div.types_block a{
  margin-right:10px;
  padding:5px;
  background:#ccc;
  border:1px solid #aaa;
  color:#888;
  line-height:28px;
}
div.types_block a.selected{
  border:1px solid #999999;
  background:#5F9EA0;
  color:white;
}

.right_bottom_top{
  background:black;  
  position:fixed;
  right:0px;
  bottom:0px;
  z-index:8;
  padding:10px;
}
.right_bottom_top a{       
  color:white;
}

.filter_row{
  padding-top:5px;
  color:gray;
  font-weight:bold;
}


.tableless_row{ overflow:visible; Xwidth:100%; display: -webkit-flex; display:flex; -webkit-flex-flow: row; flex-flow: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; border-bottom:1px solid #aaa; padding:0; }
.tableless_row.new_group{ border-top:3px solid #aaa; }
.tableless_row > div { Xdisplay:inline-block; Xwidth:20%; padding:8px; X-webkit-flex:1 1 1 1; Xflex:1 1 1 1; Xflex:auto; width:200px;  }
.tableless_row > div.short{ width:100px; }
.tableless_row > div.long{ width:300px; }
.tableless_row.header { background:#daeada; }

/*********************** booking summary ********************/

#booking_summary_block td{
  padding-left:10px;
  padding-right:10px;
}
#booking_summary_block td.title{
  padding-top:20px;
}

/********************* package ********************/

#packageListBox{
  position:fixed;
  height:100%;
  overflow:scroll;
  padding-left:10px;
  padding-top:10px;
  left:548px;
  top:120px;
  background:white;  
  z-index:1;
}

.createPackageBox{
  position:fixed;
  height:100%;
  width:380px;
  overflow:scroll;
  border-right:1px solid black;
  padding-left:10px;
  padding-top:10px;
  left:142px;
  top:120px;
  background:white;  
  z-index:1;
}

#packageListBox div.locations_block a{
  margin-bottom:8px;
  display: inline-block;
  line-height:150%;
}

/********************* course time ********************/

#courseList{
  position:fixed;
  height:100%;
  width:90px;
  overflow:scroll;
  border-right:1px solid black;
  padding-left:10px;
  padding-top:10px;
  left:145px;
  top:120px;
  background:white;  
  z-index:1;
}

#courseTimeListBox{
  position:fixed;
  height:100%;
  overflow:scroll;
  border-left:1px solid black;
  padding-left:10px;
  padding-top:10px;
  left:598px;
  top:120px;
  background:white;  
  z-index:1;
}

#courseList a{
  display:block;
  padding-bottom:10px;
}
.selectLocation a{
  padding:5px;
  margin-right:10px;
  border:1px solid #ddd;
  background:#eee;
  color:gray;
  background:#fff;
}
.selectLocation a.selected{
  padding:5px;
  margin-right:10px;
  border:1px solid #aaa;
  background:#eee;
  color:black;
}
.weekdays_table{
  margin-top:20px;
}
.weekdays_table td{
  padding:0px;
  padding-right:15px;
}
.date_period, .time_period{
  margin-top:20px;
}
.time_period{
  margin-bottom:10px;
}
.timePeriodTemp{
  padding-left:30px;
  color:gray;
  margin-top:2px;
}
.delete_time_button{
  margin-left:5px;
} 
.create_time_button{
  /*text-decoration:underline;
  padding-left:5px;*/
  padding:3px;
  padding-left:5px;
  padding-right:5px;
  background:#ddd;
  margin-left:5px;
}
.course_time_date_from_block{
  padding-bottom:5px;
}
.time_item, .create_time_block{
  padding-left:10px;
}
.timePeriodIndent{
  margin-left:38px;
  _margin-left:36px;
}

/****************** group **************/

#groupListBox{
  position:fixed;
  height:100%;
  overflow:scroll;
  border-left:1px solid black;
  padding-left:10px;
  padding-top:10px;
  left:497px;
  top:121px;
  background:white;  
  z-index:2;
}

/************ news **************/
.createNewsBox{
  position:fixed;
  height:100%;
  width:380px;
  overflow:scroll;
  border-right:1px solid black;
  padding-left:10px;
  padding-top:10px;
  left:145px;
  top:121px;
  background:white;  
  z-index:1;
}

#newsListBox{
  position:fixed;
  height:100%;
  overflow:scroll;
  border-left:1px solid black;
  padding-left:10px;
  left:535px;
  top:120px;
  background:white;
  padding-top:10px;
  line-height:20px;
  width:500px;
}

.section_list_item.news_list_item,
.section_list_item.media_news_list_item{
  border-bottom: 1px dashed gray;
}


/*************** album ***************/

.existing_album_list_item,
.existing_album_list_item a{
  color:brown;
  font-size:13px;
  line-height:13px;
  padding-right:30px;
}
.existing_album_list_item a:hover{
  text-decoration:none;
  color:orange;
}
.existing_album_list_item.current, 
.existing_album_list_item:hover {
  background: url('../../../imgs/right_arrow_orange.jpg') no-repeat 160px 0px;       
}

#albumItemsListBox{
  position:fixed;
  height:85%;
  overflow:scroll;
  border-left:1px solid black;
  padding-left:10px;
  left:620px;
  width:350px;
  top:120px;
  background:white;
  padding-top:10px;
  line-height:20px;
}

.add_photo_box, .add_video_box{
  margin-bottom:10px;
  width:90%;  
}
.add_photo_box th, .add_photo_box td,
.add_video_box th, .add_video_box td{
  padding:5px;
}

#existing_photos{
  padding-top:20px;
}
#existing_photos img{
  height:60px;
}
#existing_photos img:hover{
  cursor:url(../../../imgs/delete_16.png),auto;
}


/********** salary **************/

.salary_list_item{
  font-size:11px !important;
  z-index:8;
}

.salary_list_item.fieldname{
  position:fixed;
  font-size:12px;
  background:#FFe9f4;
  overflow:hidden;
  border-top:20px solid white;
  border-bottom:5px solid white;          
  padding-bottom:5px !important;  
  width:1330px;
  z-index:9 !important;
}

.salary_list_item div{  
  width:75px;
  float:left;
  clear:none;
  border-top:1px solid #ccc;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:10px;
}
.salary_list_item.fieldname div{
  Xpadding-right:20px;
  Xwidth:55px;
  Xborder-right:1px solid #ccc;
  Xheight:inherit;
}

.salary_list_item input{
  width:50px;
}

.salary_list_item div.staff_name{
  background:#FFd9e4;
  overflow:hidden;
  color:black;
}
.salary_list_item div.staff_name.selected{
  background:pink;
}
.salary_list_item div.staff_name.inactive{
  text-decoration:line-through;
}

.salary_list_item .allowance,
.salary_allowance_desc_1_block .show_block span,
.salary_allowance_desc_2_block .show_block span{
  Xcolor:brown;                   
}

.salary_list_item.fieldname div:nth-of-type(3),
.salary_list_item.fieldname div:nth-of-type(4),
.salary_list_item.fieldname div:nth-of-type(7),
.salary_list_item.fieldname div:nth-of-type(9),
.salary_list_item.fieldname div:nth-of-type(11),
.salary_list_item.fieldname div:nth-of-type(12),
.salary_list_item.fieldname div:nth-of-type(14){
  border-left: 1px solid #ccc;
}

.salary_list_item div:nth-of-type(1){
  width:20px !important;
}
.salary_list_item div:nth-of-type(3){
  width:50px !important;
  color:grey;
}
.salary_list_item div:nth-of-type(4),
.salary_list_item div:nth-of-type(5),
.salary_list_item div:nth-of-type(6){
  width:60px !important;
  color:green;
}
.salary_list_item div:nth-of-type(7){
  width:65px !important;
}
.salary_list_item div:nth-of-type(8){
  width:95px !important;
}
.salary_list_item div:nth-of-type(9){
  width:110px !important;               
}
.salary_list_item div:nth-of-type(10){
  width:90px !important;               
}
.salary_list_item div:nth-of-type(9),
.salary_list_item div:nth-of-type(9) span,
.salary_list_item div:nth-of-type(10),
.salary_list_item div:nth-of-type(10) span{
  color:red;
}
.salary_list_item div:nth-of-type(11){
  width:90px !important;
}
.salary_list_item div:nth-of-type(11), 
.salary_list_item div:nth-of-type(11) span{
  color:#aa55aa;
}
.salary_list_item div:nth-of-type(13),
.salary_list_item div:nth-of-type(15){
  width:90px !important;
}
.salary_list_item div:nth-of-type(12) input,
.salary_list_item div:nth-of-type(14) input{
  width:80px !important;
}
.salary_list_item div:nth-of-type(14){
  width:110px !important;
}
.salary_list_item div:nth-of-type(14),
.salary_list_item div:nth-of-type(14) span{
  color:blue;
}

.allowance_merged_header{
  Xfont-weight:bold;
  text-decoration:underline;
}


/********* banner ***********/

.banner_list_item{
  border-top:1px dashed #777;
}
.banner_list_item > div{
  width:49%;
  display:inline-block;
}
.banner_list_item > div:last-of-type{
  text-align:right;  
}
.banner_list_item > div:last-of-type a{
  display: inline-block !important;
}



/********************* new style for the layout *******************/

/* example on course_time section */
.content_big_area_for_all{
  padding-left:20px;
  display:'flex';
}
.content_big_area_for_all > div,
.content_big_area_for_all #courseList,
.content_big_area_for_all #dynamic_content,
.content_big_area_for_all #staffListBox{
  float:left;
  height:calc(100vh - 140px) !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  padding:10px !important;  
}