/*accordion_menu*/
body{font-family:tahoma, Arial;}
a:focus {
  outline: 0;
  outline:0;
  outline-offset: 0;
}

a:hover,
a:active {
  outline: 0;
}
.darkred{ color:#be2220} 
.orange2{ color:#ffa800}
a.button{
	height:25px;
	vertical-align:top;
	padding-top:11px !important;
}
a.button:hover{ color:#fff}
a.button.small{
	height:auto;
	line-height:20px;
}
.button.check{ 
	font-size:13px;
	margin:0 0 0 10px;
	width:110px
}
.inputError{
	border:1px solid #F00 !important;
	color:#F00 !important;
}
.icons.x{
	background-position:-259px -269px;
	width:16px;
	height:16px;
}
.icon_books{
	background-position:-256px -290px;
	width:18px;
	height:22px;
}

header .shadow{ display:none}
header.sticky .shadow{ display:block}

#newsletter_button{ padding-top:0px !important}
#menu_accordian{ margin-bottom:40px} 
#menu_accordian ul{
	margin:0 0 0;
	padding:0px;
	list-style-type:none;
	display:block;
	font-family: 'circularregular';
	font-size:24px;
}
#menu_accordian ul li{
	margin:0px;
	padding:0px;
	display:block;
	border-bottom:1px solid #e3e3e3;
}
#menu_accordian ul li a{
	display:block;
	cursor:pointer;
	padding:13px 0 8px 30px;
	line-height:23px;
	position:relative;
}
#menu_accordian ul li .holder{
	position:absolute;
	top:50%;
	right:10px;
	width:17px;
	height:17px;
	margin-top:-8px;
	background:url(../images/icons_v2.png) 0 0 no-repeat;
}
#menu_accordian ul li.open .holder{ background-position:-18px 0}
#menu_accordian > ul > li.open > a,
#menu_accordian > ul > li:hover > a{
	background-color:#11346a;
	color:#fff;
}


#menu_accordian ul li li{ border:0; border-top:1px dotted #e3e3e3;}
#menu_accordian ul li li a{ padding-left:50px}
#menu_accordian ul li li.active a,
#menu_accordian ul li li:hover a{ color:#11346a}
#menu_accordian ul li li.active a:before{
	content:'';
	position:absolute;
	top:50%;
	right:10px;
	width:17px;
	height:17px;
	margin-top:-7px;
	background:url(../images/icons_v2.png) -33px 0 no-repeat;
}
#menu_accordian ul ul{ display:none}
.open > ul{ display:block}



.pathway{
	border-bottom:1px solid #e3e3e3;
	padding:15px 0 10px;
	margin-bottom:25px;	
	color:#555;
	font-family: 'circularregular';
	font-size:19px;
	position:relative;
	z-index:999;
	
}
.pathway a{ 
	color:#555;
	padding:2px;
	display:inline-block;

}
.pathway span{ color:#11346a}
.payment_page{ margin-top:20px}
.table_form{
	width:100%;
	color:#555555;
}
.table_form td{
	padding:5px 5px 10px 5px;
}
.table_form tr td:first-child{
	text-align:right;
	padding-right:20px;
	padding-top:12px;
	vertical-align:top;
}
.table_form.only_text tr td{
	padding-right:20px;
	padding-top:12px;
	vertical-align:top;
}
.table_form .input_width,
.table_form .custom-select{
	margin-bottom:0px;
	width:267px;
	color:#555555;
}
.table_form textarea{ height:120px}
.table_form .custom-select .selected{
	padding:7px 8px;
	font-weight:normal;
	color:#555555;
}
.table_form label{ color:#555}
.table_form img{ max-width:none;}



.table_info{
	width:100%;
	margin-bottom:20px
}
.table_info th{
	font-weight:normal;
	text-align:center;
	font-family: 'circularregular';
	font-size:20px;
	line-height:18px;
	color:#fff;
	padding:8px 0 6px;
	background-color:#11346a;
}
.table_info td{
	border-bottom:1px solid #e8e8e8;
	padding:10px 10px;
	line-height:15px;
}
.table_info tr:hover td{background-color:#f5f5f5;}

.account_content .buttons{
	margin:50px 0;
}
.account_content .button{
	font-size:14px;
	width:130px;
	padding:3px 3px;
}
 
.account_content a.button{ width:120px}
.account_content .button + .button{ margin-left:5px}
.account_content .button.cart { width:155px}
.account_content .button.cart .icons{
	position:absolute;
	top:7px;
	left:10px;
}
.account_content .button.cart.text-right{ text-indent:25px} 
.account_content .price .button{ width:auto}
 
.birthday .custom-select{width:60px; margin:0}
.birthday .custom-select + .custom-select{ width:120px}
.birthday .custom-select + .custom-select + .custom-select { width:80px}

.account_content{
	padding-bottom:60px;
	color:#777777
}
 

.account.title{ 
	color:#000;
	margin-top:30px;
	border-bottom:2px solid #e8e8e8;
	line-height:25px;
	font-size:30px;
	font-weight:normal;
	font-family: 'circularregular';
	position:relative;
	text-transform:none
}
.account.title:before{
	border-bottom:5px solid #ffa800;
	position:absolute;
	bottom:-3px;
	left:0px;
	width:200px;
	display:block;
	height:20px;
	content:'';
}

.account.title.toppage{
	border-bottom:1px solid #e8e8e8;
	line-height:35px;
	font-size:36px;
	padding-bottom:10px;
	margin-top:0
}
.account.title.toppage + .member_order{ margin-top:-15px}
.account.title.toppage:before{ border:0}
.account.title.toppage .icons{
	background-position: -229px -288px;
    height: 22px;
    top: 4px;
    width: 22px;
	margin-right:8px;
}

.menu.title{ 
	color:#000;
	font-size:30px;
	line-height:30px;
	margin:0
}
.menu.title .icons{
	background-position:-210px -289px;
    width: 18px;
	height: 22px;
	top:4px;
	margin-right:8px;
}

.paymeny_step{
	margin:25px 0 0 0;
	padding:0px;
	float:left;
	width:100%;
	list-style-type:none;
	counter-reset: li;
	border-bottom:2px solid #106198;
}
.paymeny_step li{
	float:left;
	width:auto;
	height:30px;
	padding:0 0 7px 0;
	position:relative;
	font-family: 'circularregular';
	font-size:24px;
}
.paymeny_step li:before{
	position:absolute;
	bottom:0px;
	left:5px;

	width: 0; 
	height: 0; 
	border-left: 11px solid transparent;
	border-right: 11px solid transparent;
	border-bottom: 9px solid #106198;
}
.paymeny_step li span{ 
	position:relative;
	padding-left:37px;
	padding-top:5px;
	padding-right:45px;
	color:#4d4d4d;
}
.paymeny_step li span:before{
	font-family:Arial;
	font-size:16px;
	position:absolute;
	left:0px;
	top:0px;
	width:30px;
	height:24px;
	padding-top:6px;
	text-align:center;
	content: counter(li, decimal);
    counter-increment: li;
	color:#fff;
	background-color:#4d4d4d;
  -webkit-border-radius:50%;
     -moz-border-radius:50%;
          border-radius:50%;
}
.paymeny_step li.active:before{content:'';}
.paymeny_step li.active span:before{background-color:#106199;}
.paymeny_step li.active span{color:#106199}

.paymeny_step li.active + li span:before,
.paymeny_step li.active + li + li span:before,
.paymeny_step li.active + li + li + li span:before{background-color:#f0f0f0;}

.paymeny_step li.active + li span,
.paymeny_step li.active + li + li span,
.paymeny_step li.active + li + li + li span{color:#c6c6c6}

.payment_info{
	font-family: 'circularregular';
	font-size:24px;
	margin-top:30px;
}
.payment_info td{ padding:5px 5px 13px !important}
.payment_info tr td:first-child{ padding-right:40px  !important}
.payment_info .total{
	color:#11346a;
	font-family: 'circularbold';
	font-size:30px
}
.payment_info .total td{ padding-top:10px !important}
.payment_info .total .orange{
	font-size:25px; 
	color:#ffa800; 
	font-family: 'circularregular';
}

 
.member-tab.nav-tabs{
	border-bottom:2px solid #555555;
	margin-bottom:25px;
}
.member-tab > li{ margin:0}
.member-tab > li > a{
	background-color:#f0f0f0;
	margin-right:5px;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
		  border:0px;
		  font-family: 'circularregular';
		  font-size:20px;
		  color:#666;
		  line-height:18px;
		  padding:13px 30px 6px;
}
 
.member-tab > li.active > a,
.member-tab > li.active > a:focus,
.member-tab > li.active > a:hover{ 
	background-color:#555555;
	color:#fff;
	border:0px !important;
}

form .upload{
	margin:0px;
	padding:0px;
	list-style-type:none;
}
form .upload .pic{
	width:125px;
	height:125px;
	display:inline-block;
	background:#f1f1f1;
	overflow:hidden;
	margin-right:10px;
}
form .upload li{
	margin:5px 0 0 0;
	padding:0px;
}
form .upload li:first-child{ height:125px; margin-bottom:10px}
form .upload li .button{ 
	margin-top:-25px;
	padding:3px 10px;
	position:relative;
	width:110px;
	text-align:right;
	height:33px;
	font-size:13px;
}
form .upload li .button .icons{ 
	position:absolute;
	top:5px;
	left:10px;
}


.table_info.biggap th{padding:12px 0 10px;}
.table_info.biggap td{padding:16px 10px 20px; vertical-align:top}
.table_info.biggap .button.pay{
	font-size:12px;
	width:75px;
	padding-top:3px !important;
}
.unpaid_list{
	margin:0px;
	padding:0px;
	list-style-type:none;
	text-align:left;
}
.unpaid_list li:first-child{ margin-top:0}
.unpaid_list li{
	margin:10px 0 0px;
}
.unpaid_list .text{
	font-family: 'circularregular';
	font-size:22px;
	color:#191919;
	margin-left:5px;
	position:relative;
	top:3px;
}

.member_order{ margin-top:20px}
.member_order .pack_box{
	border:0px !important;
	border-bottom:3px solid #dadada !important;
	padding:0px;
	padding-top:0;
	margin-bottom:0px;
}

.member_order .pack_box:hover,
.member_order .pack_box:focus,
.member_order .pack_box.active{
	border:0  !important;
	border-bottom:3px solid #dadada  !important;
	-webkit-box-shadow:none;
       -moz-box-shadow:none;
            box-shadow:none;
} 
.member_order .showContent{ border:0}
.member_order .pack_header{
	padding-left:65px;
	padding-bottom:5px;
	width:92.5%;
}

.member_order .pack_box .detail{
	margin:0 0 0 10px;
	width:515px
}
.member_order .pack_box .price{
	text-align:center;
	width:145px;
	font-size:18px;
	color:#08377c;
	font-weight:bold
}
.member_order .pack_box .title{
	font-size:24px;
	line-height:20px !important;
	padding:0px;
	border:0px;
}
.member_order .pack_box .detail p{
	line-height:14px;
}
.member_order .pack_box .detail .space{
	margin:0px;
	height:13px;
}
.member_order .pack_label.small{
	width:100%;
	text-align:center;
	padding:3px 0;
	margin-top:-5px;
}
.member_order .small .icons{
	position:relative;
	left:auto;
	top:5px;
	margin-top:-7px;
}
.member_order .pack_header:before{ left:15px}

.member_order.three_column .pack_box .detail{ width:341px}
.member_order.three_column .pack_box .price{ width:182px}
.member_order.three_column .pack_box .delete{ 
	width:80px;
	text-align:center;
	float:right;
}

.icon_del{
	width:24px;
	height:22px;
	padding:3px 0 0 1px !important;
	color:#fff;
	text-align:center !important;
	background:#ad0100;
	font-size:14px;
	display:inline-block;
	font-weight:bold;
	font-family:Tahoma, Arial;
	cursor:pointer
}
.icon_del:hover{background:#870100;}

 
.pack_label.small{
   font-family: 'circularregular';
   font-size:16px;
   font-weight:normal;
   line-height:23px;
   padding-top:3px;
   height:18px;
   width:32px;
}
.pack_label.small.thaiCha,
.pack_page .pack_label.small{
   font-size:20px;
   line-height:21px;
}
	


.books{
	margin:0px;
	padding:0px;
	list-style-type:none;
}
.books li{
	font-size:14px;
	color:#000;
	border-top:1px solid #dadada;
	position:relative;
	padding:20px 0 20px  110px;
}
.books li .circle{
	position:absolute;
	left:53px;
	top:11px;
	width:35px;
	height:35px;
	text-align:center;
	background-color:#ccc;
		-webkit-border-radius:50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.books li .circle .icons{
	top:7px;
	left:1px;
}

.table_total{
	float:right;
	width:47%;
	margin-top:15px;
}
.table_total td{
	font-size:18px;
	padding:5px 20px 5px 20px;
	color:#000;
	text-align:right;
}
.table_total tr td:first-child{
	text-align:left;
}
.table_total tr.total td {
	font-size:24px;
	color:#08377c;
}
.table_total tr.line td{
	padding:0;
}
.table_total tr.line div{
	border-top:2px solid #dadada;
	width:100%;
	margin:13px 0 9px;
}

.points{
	float:left;
	width:47%;
	font-size:24px;
	color:#000;
	margin-top:25px;
	font-family: 'circularregular';
}
.points td{ 
	background:#ededed;
	padding:5px 15px;
	vertical-align:middle
}
.points td span{
	position:relative;
	top:3px;
}

.account_content .packet{ margin-bottom:30px !important}

.packet.fullwidth{
	width:100%;
	margin:0;
	border-width:3px;
	  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
 
.packet li.report{
	height:auto;
	border:0;
	margin-top:5px;
	margin-left: 3%;
    margin-right: 3%;
	margin-bottom:10px;
    width: 94%;
}

.packet li.report ul{
	margin:0px;
	padding:0px;
	list-style-type:none;
}
.packet li.report ul li{
	margin-bottom:5px;
	color:#666;
	font-size:14px;
}
.report .button.status{
	display:inline-block;
	float:none;
	width:60px;
	font-size:12px;
	font-weight:normal;
	padding:0;
	border-width:3px;
	height:25px;
}
.report .button.status.active{
	background-color:#005e9d;
	border-color:#8fb8d4;
	color:#fff
}
.report .button.status{
	background-color:#d8d2d2;
	border-color:#eeebeb;
	color:#777777
}
.report .button.status + .button{ margin-left:0}
 

.progress{
	margin:0 5px 0 0;
	display:inline-block;
	width:120px;
	height:8px;
	font-size:11px;
	  -webkit-border-radius:0;
     -moz-border-radius:0;
          border-radius:0;
}
.user_manages{ padding:17px 10px 0}
.user_manage:hover{ background-color:inherit}
.user_manage .pack_header{
	padding: 0 0 10px 5%;
    width: 95%;
}
.user_manage .pack_header .detail{ width:603px; margin-left:10px;}
.user_manage .pack_header .description{ margin-top:0}
.user_manage .pack_header .title{
	border:0px;
	padding:0;
	margin:0px;
}
.user_manage .pack_header .tutor_name{
	border:0px;
	padding:0 0 8px;
	border-bottom:1px solid #e7e7e7;
	color:#393939;
	
}
.user_manage .pack_header .tutor_name .icons{ margin-left:10px}
.user_manage .pack_header .pic{ width:185px}
 

.user_manage .pack_header .title{ font-size:30px; line-height:30px}
.user_manage .pack_header .left,
.user_manage .course .left{ 
	float:left; 
	width:60%;
	padding-top:5px;
}

.user_manage .pack_header .right,
.user_manage .course .right{ 
	float:right; 
	width:230px;
	padding-top:9px;
}

.user_manage .course{ color:#777; padding:10px 0 10px 42px}
.user_manage .course:before{ background:none}
.user_manage .course .detail{ width:710px; margin-left:10px;}
.user_manage .course .title{ font-size:22px;}

.user_manage.favorite_course .detail{
	width:350px;
}
.favorite_course .pack_header .tutor_name{
	border:0px;
	padding-top:5px;
	padding-bottom:8px;
	margin-bottom:0px;
	font-size:14px;
	border-top:1px solid #e7e7e7;
}
.favorite_course .pack_header .right{ width:240px}
.favorite_course .pack_header .favorite { margin-right:0}
.favorite_course .text{ 
	padding-right:20px; 
	padding-left:30px; 
	line-height:20px;
	color:#000;
}
.favorite_course .text .icons{ margin-left:-31px}

.favorite_course .course { padding-bottom:0}
.favorite_course .course .text{ 
	padding-top:5px; 
	padding-right:0; 
	margin-bottom:0; 
	font-size:12px;
	color:#000;
}
.favorite_course .course .pic,
.favorite_course .course li.column1{ width:60px; height:auto}
.favorite_course .course li.column2{ width:360px; margin-left:10px; padding-top:0}
.favorite_course .course li.column3{ width:60px}
.favorite_course .course li.column4{ width:100px}
.favorite_course .course li.column5{ width:200px}


.favorite_course .lesson_wrapper .course li.column1{ width:101px;}
.favorite_course .lesson_wrapper .course{
	padding:0;
}
.favorite_course .lesson_wrapper .course .title{ font-size:13px;}
.favorite_course .lesson_wrapper .course .text{ padding:0; font-size:12px}
.favorite_course .lesson_wrapper .course .text .icons{ 
	margin-left:0; 
	position:relative;
	left:0px;
	top:8px;
}
.favorite_course .lesson_wrapper .course  li{ padding-top:10px !important; padding-bottom:7px !important}

.favorite_course .total .button{ width:auto; padding:3px 15px }
.favorite_course .total .button .icons{
	position:relative;
	left:0px;
}
.favorite_course .total .button .text{ padding:0; color:#fff}

.favorite_course .course:before{ background:url(../images/icons.png) no-repeat -387px -231px;}
.favorite_course .course.active:before{ background:url(../images/icons.png) no-repeat -417px -231px ;}

.favorite_course .lesson_wrapper .course:before,
.favorite_course .course.lesson_empty:before{ background:none}

.hot{ height:15px}
 
#calendar{ width:100%; float:left} 
.calender .packet{ width:260px}
.calender .popover{
 -webkit-border-radius:0;
	-moz-border-radius: 0;
         border-radius: 0;
		 color:#222;
		  width:260px;
		 /* margin:0 0 1% 1%;*/
		  padding:0 0 0 0;
		  list-style-type:none;
		  border:1px solid #e1e1e1;
		  z-index:999;
		  position:absolute;
		  
			-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
}
.calender .popover .arrow{ display:none}
.popover-content > div{ position:relative;}
.popover-content > div:before{
	content:'';
	position:absolute;
	left:50%;
	top:-13px;
	width: 0; 
	height: 0;
	margin-left:-10px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	
	border-bottom: 10px solid #ccc;
}
.department_icon{ cursor:pointer; vertical-align:top}
 
 
.calender .popover .popover-content{
	padding:0px;
}
.calender .popover .popover-title{
	display:none;
}
.calender .popover a,
.calender .popover p{
	display:block;
	margin:0 10px;
}
.calender .popover .pic{
	margin:0px;
	padding-bottom:10px;
}
.calender .popover .teacher{
	border-top:1px solid #ccc;
	margin-top:5px;
	padding-top:8px;
	font-size:13px
}
.calender .popover .teacher img{ width:20px}
.calender .popover .price {margin-top:10px; margin-bottom:10px;}
.calender .popover .price .blue { font-weight:bold;}

.calendar_icons{
	margin:30px 0 120px;
	float:left;
}
.calendar_icons .text{
	text-align:right;
	width:130px;
	font-family: 'circularbold';
	font-size:24px;
	margin-right:25px;
	color:#000;
	float:left;
}
.calendar_icons ul{
	float:left;
	margin:0 0 0 0;
	list-style-type:none;
	width:720px;
	font-size:20px;
	font-family: 'circularbold';
}
.calendar_icons ul li{
	float:left;
	margin:0 0 13px 5px;
	width:139px;
	border:0px !important 
}
.calendar_icons ul {margin-left:-5px}

.calendar_report{
	display:block;
	width:100%;
	font-family: 'circularbold';
	font-size:24px;
	color:#202123;
	margin-bottom:12px;
}
.calendar_report p{ display:inline-block; margin-right:30px;}


.radio input[type=radio],
.checkbox input[type=checkbox] {
	display: none;
}
.checkbox label:before,
.radio label:before {
	content: "";
	display: inline-block;

	width: 18px;
	height: 18px;

	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom:0;
	background-color: #f1f1f1;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .2), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

.radio label:before {
	border-radius: 8px;
	width: 16px;
	height: 16px;
	bottom:0;
	
}
.radio label {
	margin-bottom: 10px;
	position:relative;
	padding-left:30px; 
}
.checkbox label {
	position:relative;
	padding-left:30px; 
	margin-bottom:20px;
	text-align:left
}
.checkbox label:before {
    border-radius: 3px;
}

.radio input[type=radio]:checked + label:after {
    content: "";
    color: #ffa800;
	background-color:#ffa800;
	border-radius: 50%;
	position:absolute;
	left:3px;
	bottom:3px;
	width:10px;
	height:10px;
}
.radio.middle label:before{
	bottom:28%;
}
.radio.middle input[type="radio"]:checked + label:after{bottom:33%;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.radio.middle input[type="radio"]:checked + label:after{bottom:34%;}
}

.checkbox input[type=checkbox]:checked + label:before {
	content: "\2713";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 18px;
	color: #ffa800;
	text-align: center;
    line-height: 17px;
}
.checkbox.payment{ margin-bottom:0px; margin-top:25px; margin-left:100px}
.radio.indent{ margin-bottom:0px; margin-top:25px; margin-left:182px}
.radio.gender{ display:inline-block; margin-right:30px}

.radio.gender label{ margin-bottom:0}

 

 
 
.radio, 
.checkbox{ padding-left:0; position:relative}