body, table, p {
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
}

.wrapper {padding: 0 20px}
a:link, a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: blue;	
}


.green {color: green}
h1 {margin:2% 0; text-align:center} 	/* used for heading title for all pages*/


.style1 {
	font-size: 16px;
}
.style3 {font-size: 12}


/*******TOP *******/
.top {background: green; padding: 20px; text-align:center; color:white}
.top_heading {font-size:48px; line-height: 110%; font-family: "Book Antiqua"; font-weight: bold}
.top a {color:white; text-decoration: none}

.top .section { margin-top:2%  }
    
.top .section .item{
	background: #90ca90;
    padding: 5px;
    border-radius: 5px;
    margin-right: 2%;
    }
/*******TOP EOF *******/



/******* LEFT MENU  START ***/
.left_menu {padding:15px; padding-left:0px}

.left_menu .heading {background: #008000; padding: 5px; color: white; font-weight: bold; text-transform: uppercase}
.left_menu .item {background: #90ca90; text-align:left; padding: 6px}
.left_menu .item:hover {background: #d0efd0; color: white }

.left_menu .item a {text-decoration: none; color:black}




/******* LEFT MENU  END ***/


table {border-collapse: collapse;}

tr.listing_heading {font-size: 12px; background: #90ca90; font-weight: bold}
tr.listing_heading a {font-size: 12px; color: black; text-decoration: none}


a.p {text-decoration: none; color: gray}
a.p:hover {text-decoration: none; color: green}
a.p_previous, a.p.next {text-decoration: none; color: green;}

.p_current {text-decoration: none; color: red; font-size: 18px}




/*********** calendar table */
table.calendar {width: 100% }

.day_desktop {font-size:30px; font-weight:bold; color:brown}
.day_mobile {display: none}

.calendar a {color: black; text-decoration: none}

tr.calendar_month {background-color:#cc890f; font-size:20px; color:white; border: 1px solid #ded9d9; padding:0 5px; height: 40px;}
tr.calendar_week_day {background-color:#90ca90; font-size:14px; border: 1px solid #ded9d9; height:30px; text-transform: uppercase}
td.calendar_day {border: 1px solid #ded9d9; width: 150px; font-size:12px; border-radius: 5px;}


.class_even {background: #90ca90; padding:5px;font-size:14px}
.class_odd {background: #f5f5f5; padding:5px;font-size:14px}

.appt_even, .appt_odd {margin-left:0px; padding:5px}

.content_current {padding: 0px;}
.content_past {background-color: #f3f1f1;}

.content_future{padding: 0px;}
.content_current:hover, .content_future:hover {background:#daecda}

/*
.button_book_now {
	background: #daecda; 
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #afa8a8;
    }

*/

.button_book_now {
	background: none; 
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 5px;
    border: 0px solid #afa8a8; 
    margin-left: 10px;
}



.available_title {margin: 5px 0px; margin-top: 15px; text-align:center; font-weight:bold}
.availability a {color: black; text-decoration:none}
    
.button_book_now:hover {background: #e3f7e3}

.button2 {} /*see report.css */

.button3 {background: green;
    display: inline-block;
    padding: 6px 20px;
    text-transform: uppercase;
	font-weight:bold;
    }

.button3 a{color: white; text-decoration: none}


.day {
display: inline-block; 
box-sizing: border-box;
width: 18%;
margin: 1%;
border:1px solid #afafaf;
padding: 10px;
border-radius: 5px;
vertical-align: top;
}
.day .heading {text-align:center; margin-bottom: 0%; margin-top: 0%; font-size: 16px; font-weight: bold}
/* for google address */
.pac-item {  font-size:18px; padding:10px}
.pac-item-query {  font-size:18px; padding:10px}
/* for google address eof */

.wrongaddress{    margin: 10px;
    font-size: 20px;
    color: red;
}



/************** calendar table EOF */


/***************** FORM DESIGN START ********************/
input{
	background-color: #d8f5d8;
	border: #b1aeae 1px solid;
	font-size:14px;
    height: 30px;
	margin-right: 5px;
}

textarea{
	background-color: #d8f5d8;
	border: #444444 1px solid;
	font-size:14px;
}

select{
	background-color: #d8f5d8;
	font-size:14px;
	border: #b1aeae 1px solid;
    height: 30px;
}

input.checkbox{
	border: none;
}

input.button{
	cursor: pointer;
	border: 2px;
}

input[type="radio"] {height: auto}

input[name="client_address"] {font-size: 16px; padding: 20px; border-radius:5px; width: 600px}



input[type="submit"], input[type="reset"]  {padding: 0 20px; color: white; height:30px; background: green; text-transform: uppercase; font-weight:bold; width: auto;}

/******************FORM DESIGN -EOF ********************/


/* highlighted zone */
.quick_stat {
	background: #d3f5d3;
    padding: 5px;
    border-radius: 5px;
    margin: 2% 0;
    display: table;
    border: 1px solid #d7c7c7;
    line-height: 150%;
    
}



/**** LISTING ******/
.listing_heading {text-align:center}
.cell {padding:5px}
.cell_mobile {display:none}
.cell_mobile a {text-decoration: none}


/**** LISTING EOF ******/



/***************** FOOTER *********************/

.footer {margin-top:5%}
.footer a {color: green; text-decoration: none}

/***************** FOOTER EOF *********************/


/*balloons*/
div.balloon {width: 250px;padding-top: 19px;margin-top:20px;background: url('/images/common/balloon_top.gif') no-repeat top left;}
div.balloon a:link {font-weight: bold;text-decoration: none;color: #000}
div.balloon a:visited {font-weight: bold;text-decoration: none;color: #000}
div.balloon a:hover {font-weight: bold;text-decoration: underline;color: #000}

div.leftBalloon {margin-right: 10px;}
div.balloonContent {background-color: #fff; border-left: 4px solid #d7d7d7; border-right: 4px solid #d7d7d7;padding: 0 2px; text-align: center;}
/*div.balloonContent a:link {font-weight: bold;text-decoration: none;color: #000}
div.balloonContent a:hover {font-weight: bold;text-decoration: underline;color: #000}
div.balloonContent a:visited {font-weight: bold;text-decoration: none;color: #000}
*/
div.balloonContent h2, div.balloonContent h3 {font-size: 1.8em;margin:0;}
div.balloonContent p {line-height:1.3em; margin: 0; text-align:center;}
div#content div.balloonContent a {padding-right:0;}
div.balloonBottom {background: url('/images/common/balloon_bottom.gif') no-repeat top left;height:19px;width:250px;}
div.balloon:hover, div.balloon:hover div.balloonBottom {background-position: -250px 0%;}
div.balloon:hover div.balloonContent {border-left: 4px solid #ffcc00;border-right: 4px solid #ffcc00;}

/*homepage balloons*/
div.balloonContent.homeBalloon p {font-weight: bold; text-decoration: none; font-size: 1.2em; padding-top: 0.5em; margin-bottom: -1px}
/*a:link {font-weight: bold;text-decoration: none;color: #000}
a:visited {font-weight: bold;text-decoration: none;color: #000}
a:hover {font-weight: bold;text-decoration: underline;color: #000} 
*/
*+html body div.balloonContent.homeBalloon p {margin-bottom: 0} /*ie6*/
div.balloonContent.homeTel {margin-left: 45px}

/*tools*/
.clearBoth {clear: both}
.floatLeft {float:left}
.floatRight {float:right}
.clearLeft {clear:left}
.textAlignLeft {text-align:left}
.textAlignCenter {text-align:center}
.textAlignRight {text-align:right}
.fontWeightNormal {font-weight:normal}
.fontWeightBold {font-weight:bold}
.hidden {display: none}
.threeCol {width: 33%; float: left}

.clearfix:after {content: ".";display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
.afterHeading {margin-top: 25px} /*for use after any level of heading*/


td.arial10, td.arial12 {padding-right:5px; vertical-align: top;} /* henry make little space in lesson pages /DL/Student/lesson1.php  to lession12.php


/************************ Responsive Structure ****************/

/* for new/big desktop from 1200 px and bigger ....*/
@media (min-width: 1200px) and (max-width: 3000px) {

}

/* hide and show column for small/medium screen 	nho hon 1200 */
@media (min-width: 0px) and (max-width: 1200px) {
.cell	 {display:none}
.cell_mobile  {display:block; padding: 10px}

}


/* for medium view such as ipad  from 768 to 1024 */
@media (min-width: 768px) and (max-width: 1024px) {
}


/* for small view such as iphone, samsung : less than 768 */
@media (min-width: 0px) and (max-width: 767px) {
.top_heading {font-size:18px; }

h1 {font-size:16px}
input  {margin-bottom: 3%}
input[name="client_address"] {width: 100%; margin-bottom:4%}

.day {width: 48%;}

*, ::after, ::before {
box-sizing: border-box;
}
.top {padding: 5px}
.top .section .item {display:inline-block; margin-bottom: 2%}
.calendar td {
  	display: inline-block;
    border:1px solid green;
	display: inline-block;
  
}
td.calendar_day {
  	display: inline-block;
	width: 48%;
	margin: 3% 0;
    margin-left: 2%;

}

tr.calendar_month {height: auto; text-align:center; border-radius: 5px;    display: grid; padding: 8px 0}
tr.calendar_month th{text-align:center}


td.date_blank {display: none}
tr.calendar_week_day {display:none}

.day_desktop {display: none}
.day_mobile {display: block; font-size:18px; font-weight:bold; color:brown; text-align:center}
.button_book_now {padding: 0; margin: 0; margin-bottom:10%}
.class_even, .class_odd {padding: 5px !important}

}
select {margin:10px 0} /*henry make space for select input form */

************************ Responsive Structure EOF ****************/