/* 

=== basic ===
*/
body {
	background: #e7e7e7 url(../images/09-bk.png);
	font-family: 'PT Sans', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #222;
}
.full {
	width: 960px;
	margin: 0 auto;
	padding: 0 10px;
}
.col {
	width: 960px;
	margin: 0 auto;
}
.half {
	float: left;
	width: 480px;
	padding: 0 10px;
	z-index: 9999;
}
.full-view {
	display: block;
}
.mobile-view {
	display: none;
}
body>.content { min-height: 700px; }

.table {display: table !important; border-spacing: 5px;}
.row {display: row;}
.td {display: table-cell; vertical-align: top; box-sizing: border-box; white-space: normal;}
.td img { display: table-cell; }

.to-do-handout,.to-do-quiz, .to-do-video {display: table-row; position: initial !important;}
.to-do-handout img,.to-do-quiz img, .to-do-video img { max-width: 100%; }
.to-do-handout .score,.to-do-quiz .score, .to-do-video .score { position: initial !important; text-align: left; }
.to-do-handout input,.to-do-quiz input, .to-do-video input { position: initial !important; }
.to-do-handout a,.to-do-quiz a, .to-do-video a { position: initial !important; margin: 0 !important; padding: 0 !important; }
.to-do .ui-tabs .ui-tabs-panel { border-spacing: 5px; }
.to-do .material .ui-widget-header { /*margin: 0 !important;*/ padding: 0 !important; }
.w-5 {width: 5%;}
.w-10 {width: 10%;}
.w-15 {width: 15%;}
.w-20 {width: 20%;}
.w-25 {width: 25%;}
.w-30 {width: 30%;}
.w-35 {width: 35%;}
.w-40 {width: 40%;}
.w-50 {width: 50%;}
.no-decoration a {text-decoration: none !important;}
/* 

=== header & footer === 
*/
header {
	width: 100%;
	border-bottom: 1px solid #afafaf;
	margin-bottom: 5px;
}
header .full {
	position: relative;
	background: url(../images/09-logo.png) 10px 13px no-repeat;
	padding-left: 0px;
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 14px;
}

header h1 {
	display: inline-block;
	height: 64px;
	line-height: 62px;
    padding-left: 62px;
    color: #000000;
}

.back-to-home{
    line-height: 40px;
}

header a.name, header a.notice, header a.msgr, header a.dictionary, a.material-list, header a.hanzi_writer {
	float: right;
	height: 64px;
	margin: 0;
	color: #222;
	border-right: 1px solid #afafaf;
	border-left: 1px solid #afafaf;
	background-color: transparent;
	text-transform: uppercase;
}
/*
header a.name {
	min-width: 150px;
	text-align: center;
}
*/
header a.name:hover, header a.notice:hover, header a.msgr:hover, header a.dictionary:hover, header a.material-list:hover, header a.hanzi_writer:hover  {
	cursor: pointer;
	background-color: #fff !important;
}
header a.notice.inactive, header a.msgr.inactive, header a.dictionary.inactive, a.material-list.inactive, header a.hanzi_writer.inactive { color: #b1b1b1; }
header a.name, header a.notice {
	padding: 0 0px 0 0px;
	line-height: 62px;
}
header a.name i { margin-left: 6px; }
header a.name.active:after, header a.notice.active:after, header a.msgr.active:after, header a.dictionary.active:after , a.material-list.active:after, header a.hanzi_writer.active:after{
	content:"";
	display: block;
	width: 100%;
	height: 1px;
	background: #fff;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}
header a.name.active:after {
	padding: 0 24px 0 24px;
	margin: 2px 0 0 -30px;
}
header a.notice.active:after, header a.msgr.active:after, header a.dictionary.active:after, header a.material-list.active:after, header a.hanzi_writer.active:after {
	padding: 0;
	margin: 0;
}
.info-dropdown, .notice-dropdown, .msgr-dropdown, .dictionary-dropdown, .material-list-dropdown, .hanzi_writer-dropdown {
	display: none;
	position: absolute;
	top: 65px;
	right: 10px;
	background: #fff;
	z-index: 9999;
	text-align: left;
	font-family: 'PT Sans', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #afafaf;
	border-right: 1px solid #afafaf;
	border-left: 1px solid #afafaf;
	-moz-box-shadow: 0 8px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.3);
	box-shadow: 0 8px 10px rgba(0,0,0,0.3);
}
.notice-dropdown, .msgr-dropdown, .dictionary-dropdown, .material-list-dropdown, .hanzi_writer-dropdown {
	width: 465px;
	padding: 0;
}
.notice-dropdown a {
	color: #222;
	margin: 0;
	padding: 0;
}
.notice-dropdown li {
	font-size: 16px;
	font-weight: normal;
	padding: 25px;
	border-bottom: 1px solid #ccc;
}
.notice-dropdown li:hover, .notice-dropdown li.read { background: #f6f6f6; }
.notice-dropdown li img, .notice-dropdown li div { float: left; }
.notice-dropdown li div {
	width: 368px;
	margin: -3px 0 0 10px;
}
.notice-dropdown .view, .notification .view a {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 16px 28px;
	color: #de4646;
}
.notice-dropdown .view i, .notification .view a i {
	float: right;
	font-size: 16px;
}
.notice-dropdown .view:hover, .notification .view a:hover { color: #222; }
.info-dropdown {
	min-width: 460px;
	padding: 21px 12px 21px 22px;
}
.info-dropdown .FL {
	font-size: 16px;
	padding: 14px 30px 14px 46px;
	/*background: url(../images/09-male-big.png) left center no-repeat;*/
	/* Chage to female or male icon, change @2x in "mq-dashboard.css" too */
}
.instructor .info-dropdown .FL { background: url(../images/09-instructor-big.png) left center no-repeat; }
.info-dropdown .FR {
	border-left: 1px solid #d5d5d5;
	padding-left: 20px;
	min-width: 180px;
}
.info-dropdown .FR li {
	flex-basis: 100%;
}
.info-dropdown .small-txt {
	font-weight: normal;
	margin-top: 3px;
}
.info-dropdown a {
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
}
.msgr-dropdown {
	font-weight: normal;
	font-size: 14px;
	line-height: 17px;
	max-height: 550px;
	min-height: 300px;
}
.msgr-dropdown ul, .msgr-dropdown .input-box { padding: 20px 25px; }
.msgr-dropdown .date {
	margin-bottom: 13px;
	font-weight: 700;
	color: #d5d5d5;
	text-align: center;
}
.msgr-dropdown ul { border-bottom: 1px solid #e9e9e9; }
.msgr-dropdown li { padding: 7px 0; }
.msgr-dropdown li.instructor>* { float: right; }
.msgr-dropdown li.system>* { float: left; }
.msgr-dropdown li .bubble {
	max-width:322px;
	position: relative;
	background: #efefef;
	padding: 9px 14px 10px;
}
.msgr-dropdown li.instructor .bubble { margin-right: 15px; }
.msgr-dropdown li.system .bubble { margin-left: 15px; }
.msgr-dropdown li .bubble:after {
	content: "";
	position: absolute;
	top: 11px;
	border-style: solid;
	border-color: #efefef transparent;
	display: block;
	width: 0;
}
.msgr-dropdown li.instructor .bubble:after {
	left: 100%;
	border-width: 10px 11px 0 0;
}
.msgr-dropdown li.system .bubble:after {
	left: -11px;
	border-width: 10px 0 0 11px;
}
.msgr-dropdown li .small-txt {
	position: absolute;
	bottom: -3px;
	color: #d5d5d5;
}
.msgr-dropdown li.instructor .small-txt { left: -40px; }
.msgr-dropdown li.system .small-txt { right: -40px; }
.msgr-dropdown input[type=text] { width: 100%; }

.dictionary-dropdown {
	font-weight: normal;
	font-size: 12px;
	line-height: 12px;
	max-height: 520px;
	min-height: 300px;
	overflow: hidden;
}
.dictionary-dropdown .history-box:before {
	border-width: 10px 0 0 11px;
	border-color: #efefef transparent;
}
.dictionary-dropdown .input-box {
	padding: 20px 20px 5px 20px;
}
.dictionary-dropdown input[type=text] {
	display: inline-block;
	width: 85%;
}
.dictionary-dropdown button {
	display: inline-block;
	text-align: center;
	height: 40px;
}
.dictionary-dropdown .loading {
	display: none;
	padding: 10px 20px;
	text-align: center;
}
.dictionary-dropdown ul { padding: 10px 20px; border-bottom: 1px solid #e9e9e9; }
.dictionary-dropdown li { padding: 5px 5px; }
.dictionary-dropdown li .hw {
	font-weight: bold;
	font-size: 14px;
}
.dictionary-dropdown li .hw sup {
	vertical-align: super;
	font-size: smaller;
}
.dictionary-dropdown li .search {
	font-size: 14px;
	text-decoration: underline;
}
.dictionary-dropdown li .search:hover {
	cursor: pointer;
}
.dictionary-dropdown li .pos {
	font-weight: bold;
	font-size: 12px;
	color: #de4646;
	padding: 20px 0;
}
.dictionary-dropdown li .iteration {
	font-weight: bold;
	font-size: 12px;
	margin-right: 10px;
}
.dictionary-dropdown li .ind {
	font-size: 12px;
}
.dictionary-dropdown li .example {
	font-style: italic;
	font-size: 12px;
	margin-left: 15px;
}
.dictionary-dropdown .small-txt {
	float: right;
	position: absolute;
	right: 15px;
	color: #d5d5d5;
}

.hanzi_writer-dropdown {
	font-weight: normal;
	font-size: 14px;
	line-height: 14px;
	height: 580px;
	overflow: hidden;
	text-align: center;
}
.hanzi_writer-dropdown .input-box {
	font-weight: 700;
	font-size: 16px;
	padding: 20px 20px 5px 20px;
}
.hanzi_writer-dropdown input[type=text] {
	display: inline-block;
	width: 50%;
}
.hanzi_writer-dropdown button {
	display: inline-block;
	text-align: center;
	height: 40px;
}
.hanzi_writer-dropdown .heading {
	margin-top: 40px;
}
.hanzi_writer-dropdown .demo-divider {
	margin: 20px 0;
}
.hanzi_writer-dropdown .demo-target {
	border: 1px solid #AAA; 
	width: 300px;
	heigth: 300px;
	margin: 0 auto;
}
.hanzi_writer-dropdown .demo-controls {
	border: 1px solid #AAA;
	margin: 0px auto;
	padding: 10px;
	width: 300px;
}
.hanzi_writer-dropdown .demo-controls .btn {
	margin-left: 25px;
}
.hanzi_writer-dropdown .btn:hover {
	cursor: pointer;
}
.hanzi_writer-dropdown .demo-controls .btn-primary,
.hanzi_writer-dropdown .demo-controls input[type=checkbox]:checked
{
	background: #0090ff;
}

header a.notice, header a.msgr, header a.dictionary, header a.material-list, header a.hanzi_writer {
	position: relative;
	width: 75px;
	padding: 0;
	margin-right: -1px;
	text-align: center;
	font-size: 24px;
	line-height: 64px;
}
header a.notice span, header a.msgr span, header a.hanzi_writer span {
	display: block;
	position: absolute;
	top: 10%;
	left: 50%;
	background: #de4646;
	font-family: 'PT Sans Caption', Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	line-height: normal;
	padding: 3px 7px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
footer {
	width: 100%;
	border-top: 1px solid #afafaf;
	margin-top: 95px;
	font-size: 12px;
	line-height: 1.3;
	text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
/* 

=== breadcrumb  ===
*/
ul.breadcrumb {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin-bottom: 25px;
	background-color: transparent;
}
ul.breadcrumb li { float: left; }
ul.breadcrumb li:after {
	content: "/";
	margin: 0 12px;
}
ul.breadcrumb li:last-child:after { content: ""; }
/* 

=== pagination  ===
*/
.pagination {
	position: relative;
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 13px;
	margin: 36px 0 0;
	padding-bottom: 30px;
}
.pagination a.prev, .pagination a.next {
	position: absolute;
	top: 0;
}
.pagination a.prev { left: 0; }
.pagination a.next { right: 0; }
.pagination a.inactive { color: #b1b1b1; }
.pagination ul {
	width: 100%;
	padding: 0 100px;
	text-align: center;
}
.pagination ul li {
	display: inline-block;
	width: 26px;
	height: 30px;
}
.pagination ul a { color: #222; }
.pagination ul li.active a, .pagination ul li:hover a {
	color: #de4646;
	background-color: inherit;
}
.pagination ul li.active:after, .pagination ul li:hover:after {
	content: "";
	display: block;
	width: 12px;
	height: 1px;
	margin: 5px auto 0;
	background: #de4646;
}
.pagination ul li.dot:hover:after { display: none; }
.pagination.dot li {
	font-size: 10px;
	width: 15px;
}
.pagination.dot li.active:after, .pagination.dot li:hover:after {
	display: none;
}
.pagination.dot li a { color: #ababab; }
/* 

=== Back to Home button  ===
*/
.back-home { margin: 40px 0 0; }
/* 

=== dashboard  ===
*/
.scroll, .jspContainer, .jspPane {
	width: 100% !important;	
}
section { margin-bottom: 20px; }
.center-txt { text-align: center; }
section.notice { margin-bottom: 20px;}
section.notice div {
	position: relative;
	width: 100%;
	padding: 20px 92px 20px 25px;
	background: #222 url(../images/09-notice-bk.png) top right;
	color: #fff;
	margin-bottom: 20px;
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}
section.notice div:first-child { margin-top: 20px; }
section.notice div:last-child { margin-bottom: 0; }
section.notice a { color: #ffd633; }
section.notice a:hover { color: #fff; }
section.notice a.close, .overlay a.close {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	width: 60px;
	padding: 20px 0;
	font-size: 14px;
	color: #fff;
	text-align: center;
	margin: 0;
	cursor: pointer;
}
section.notice a.close:hover { color: #ffd633; }
.block {
	position: relative;
	background: #fff;
	padding: 24px 37px;
}
.block .quiz {
	position: relative;
	background: #fff;
	padding: 8px 12px;
	box-shadow: 0 0 0 0;
}
section .block, section .scroll, .overlay .block {
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.15);
	-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.15);
	box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}
.block.title, .overlay .title {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 22px;
	color: #de4646;
	line-height: 23px;
}
.overlay .title {
	padding: 18px 70px 18px 35px;
	color: #222;
	background: #fff url(../images/09-notice-bk.png) top right;
	margin-bottom: 2px;
}
.overlay a.close { color: #d5d5d5; }
.overlay a.close:hover { color: #de4646; }
.overlay#choose-room li, .overlay#choose-pay li, .overlay .choose-field-trip li, .overlay .choose-field-trip li {
	float: left;
	width: 312px;
	margin: 0;
	padding: 25px 0 33px;
	border: 8px solid #fff;
	background: #fff;
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	text-align: center;
	color: #222;
}
.overlay#choose-room li.one, .overlay#choose-pay li.one, .overlay .choose-field-trip li.one, .overlay .choose-field-trip li.one { margin-right: 2px; }
.overlay#choose-room ul a, .overlay#choose-pay ul a .overlay .choose-field-trip ul a {
	margin: 0;
	padding: 0;
}
.overlay#choose-room ul a:hover li, .overlay#choose-pay ul a:hover li, .overlay .choose-field-trip ul a:hover li { border-color: #de4646; }

.overlay#choose-room ul span.enterroom:hover li, .overlay .choose-field-trip ul span.enterroom:hover li { border-color: #de4646; }

.subtitle {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-weight: 700;
	margin-bottom: 9px;
}
.block li { margin-bottom: 9px; }
.block.bottom-line ul {
	padding-bottom: 16px;
	margin-bottom: 23px;
	border-bottom: 1px solid #e9e9e9;
}
.block.bottom-line ul:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}
.instructor .handout li a {
	font-size: 14px;
}
.instructor .handout select, .instructor .quiz select {
	width: 100%;
	margin-bottom: 10px;
}
.instructor .handout select:last-of-type, .instructor .quiz select:last-of-type { margin-bottom: 20px; }
section.to-do input[type=checkbox]:checked ~ a {
 text-decoration: line-through;
}
/*.checked a {text-decoration: line-through;}*/
section.to-do li, section .ivr li { position: relative; }
section .ivr li a {
	display: inline-block;
	margin: 0;
	padding: 0;
}
section.to-do li a {
	display: inline-block;
	margin: 0;
	padding: 0;
}
section.to-do .handout li a {
	font-size: 14px;
}
/* section .ivr li i { margin-left: -4px; } */
section em { color: #de4646; cursor: pointer;}
.SingletonAudio {
    color: #de4646; cursor: pointer;    
}
.SingletonAudio .icon-pause {
    vertical-align: middle;
    font-size: 90%;
    text-align: center;
    padding: 2px;
}  
section .score {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 22px;
	text-align: right;
}
section .score span{width: 40px;display: inline-block;}
section .ivr .score,section .quiz .score { font-size: 26px; }
section .score.inactive { color: #e9e9e9; }
section .score .inactive { color: #e9e9e9; display: inline-block;}
section .score .inactive>a {pointer-events: none; color:#e9e9e9;}
section .score .active {display: inline-block;}
section .score a { margin:0px !important; }
section .score span.number { display:inline-block; }
section .ivr .alert {
	position: relative;
	background: #222;
	padding: 15px 60px 15px 20px;
	color: #fff;
	margin-bottom: 15px;
}
section .ivr .alert a { color: #ffd633; }
section .ivr .alert a:hover { color: #fff; }
section .ivr a.close {
	position: absolute;
	top: 15px;
	right: 20px;
	font-size: 14px;
	color: #fff;
}
section .ivr a.close:hover { color: #ffd633; }
section .ivr select, section.progress select {
	width: 100%;
	margin-bottom: 20px;
}
section.forum .item { 
	position: relative; 
	word-wrap: break-word; 
	overflow-wrap: break-word; 
	word-break: break-word;
	min-height: 100px;
}
section.forum .icon {
	position: absolute;
	text-align: center;
	line-height: 15px;
	top: 50%;
	transform: translateY(-50%);
}
section.forum .icon p {
	white-space : initial;
	width: 70px;
	overflow : visible;
}
section.forum .item a {
	display: inline-block;
	padding: 0;
}
section.forum .item a, section.forum .item>p { margin-left: 75px; }
section.forum .item a, section.forum .item>p { margin-right: 60px; }
section.forum .reply {
	position: absolute;
	top: 25px;
	right: 35px;
	width: 38px;
	height: 35px;
	background: url(../images/09-reply.png) top right no-repeat;
	text-align: center;
	font-family: 'PT Sans Caption', Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-top: 7px;
}
section.forum .view, section.award .view, section.self-grammar-check .view, section.self-aitext .view, section.homework .view {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 15px 37px;
}
section.forum .view i, section.award .view i, section.self-grammar-check .view i, section.self-aitext .view i {
	float: right;
	font-size: 16px;
}
section.self-grammar-check .btn, section.self-aitext .btn {
	width: 100%;
	margin-top: 10px;
}
section.award li {
	position: relative;
	float: left;
	width: 28%;
	min-width: 81px;
	min-height: 105px;
	margin: 8px;
	text-align: center;
	font-family: 'PT Sans Caption', Arial, Helvetica, sans-serif;
	cursor: pointer;
}
section.award li p {
	margin-top: 3px;
	line-height: 17px;
	font-size: 14px;
	font-weight: 700;
}
section.award li:hover img {
	opacity: 0.2;
	filter: alpha(opacity=20);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}
section.award li:hover .share {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);
}
section.award .share {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	position: absolute;
	width: 100px;
	top: 18px;
	left: 50%;
	margin-left: -50px;
	border: 4px solid #de4848;
	color: #de4848;
	font-size: 14px;
	letter-spacing: normal;
	padding: 10px 10px 10px 4px;
}
section.award .share i {
	font-size: 17px;
	padding-right: 6px;
}
section.report-card li {
	margin-top: 3px;
	line-height: 25px;
}
section.report-card li .FL {
	width: 80%;
	min-width: 180px;
}
section.report-card li .FR {
	float: right;
}
section.report-card-detail .block {
	padding: 10px 37px;
}
section.report-card-detail li {
	line-height: 30px;
	font-weight: bold !important;
}
section.report-card-detail li .FL {
	width: 35%;
}
section.report-card-detail li .FR {
	float: right;
	width: 60%;
	text-align: right;
}
section.report-card-evidence .block {
	padding: 10px 37px;
}
section.report-card-evidence li {
	line-height: 30px;
	font-weight: bold !important;
}
.tooltipster-base .award hr {
	width: 100%;
	height: 1px;
	background: #e9e9e9;
	border: 0;
	margin: 13px 0;
}
.tooltipster-base .award div { margin-bottom: 10px; }
section.summary .graph {
	position: relative;
	float: left;
	width: 180px;
	margin-right: 20px;
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 20px;
	text-align: center;
	padding: 16px 0 0;
}
section.summary .graph .num {
	margin: 10px 0 4px;
	font-weight: 700;
	font-size: 22px;
}
section.summary .info, section.summary .end-intro {
	float: left;
	width: 185px;
	padding: 13px 0;
}
section.summary .info .date, section.f-trip .date, .field-trip .date {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 25px;
	margin: 16px 0 10px;
}
section .adhoc_classroom .date {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 25px;
	margin: 16px 0 0px;
}
section.f-trip .date, .field-trip .date {
	margin: 0 0 3px;
}
section.summary .info .small-txt {
	margin-top: 11px;
	line-height: 16px;
}
section.summary .info .btn.remain, section.summary .info .btn.enter, section.summary .end-intro .btn.renew {
	width: 100%;
	margin-top: 10px;
}
section .adhoc_classroom .btn.remain, section.summary .info .btn.remain, .finish-pay .btn.remain, .finish-pay .btn.remain:hover, section.f-trip .btn.remain {
	border-color: #e9e9e9;
	color: #d5d5d5;
	cursor: default;
}
.instructor section.summary .info { width: 100%; }
section.summary .end-intro p:first-child, section.summary .free p:first-child {
	font-size: 22px;
	line-height: 25px;
	margin: 28px 0 10px;
}
section.summary .free p:first-child { margin: 0 0 15px; }
section.summary .free div {
	margin-top: 25px;
	width: 50%;
}
section.summary .free div.FR, section.f-trip .clearfix div.FR { padding: 0 0 0 10px; }
section.summary .free div.FL, section.f-trip .clearfix div.FL { padding: 0 10px 0 0; }
section.summary .free .btn, section.f-trip .clearfix .btn { width: 100%; }
section.summary .graph-txt {
	position: absolute;
	top: 89px;
	width: 100%;
	text-align: center;
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 43px;
	font-weight: 700;
}
section.summary .graph-txt p {
	font-size: 16px;
	font-weight: normal;
	margin-top: 8px;
}
section.summary #sum-canvas { margin: -5px; }
section.summary .evalue p.caption {
	font-size: 22px;
	line-height: 25px;
	margin-bottom: 8px;
}
section.summary .evalue .btn {
	margin-top: 18px;
	padding-left: 40px;
	padding-right: 40px;
}
section.f-trip .clearfix div {
	margin-top: 18px;
	width: 50%;
}
.field-trip .block {
	max-width: 600px;
}
.field-trip .caption {
	margin-bottom: 20px;
}
.field-trip img {
	width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
	margin-bottom: 15px;
}
.field-trip p {
	margin-bottom: 15px;
}
.instructor .class-sum li {
	position: relative;
	margin-bottom: 2px;
}
.instructor .class-sum li:last-child { margin-bottom: 0; }
.instructor .class-sum li .caption {
	font-size: 22px;
	font-weight: 700;
	text-transform: uppercase;
}
.instructor .class-sum li .small-txt { margin-top: 5px; }
.instructor .class-sum li.evalue a.evalue-btn {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 6px;
	border-width: 0;
	padding: 0;
	line-height: 88px;
	overflow: hidden;
}
.instructor .class-sum li.survey a.survey-btn {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 6px;
	border-width: 0;
	padding: 0;
	line-height: 100px;
	overflow: hidden;
}
.instructor .class-sum li.evalue a.evalue-btn span, .instructor .class-sum li.survey a.survey-btn span {
	display: inline-block;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.instructor .class-sum li.evalue:hover a.evalue-btn, .instructor .class-sum li.survey:hover a.survey-btn {
	width: 120px;
	background: #de4646;
	color: #fff;
	border-width: 4px;
}
.instructor .class-sum li.evalue:hover { padding-left: 145px; }
.instructor .class-sum li.survey:hover { padding-right: 145px; }
.instructor .class-sum li.evalue:hover a.evalue-btn span, .instructor .class-sum li.survey a.survey-btn span {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

section.progress .scroll {
	max-height: 360px;
	height: 360px \9;
}
section.progress .quiz .subtitle { margin-bottom: 16px; }
section.progress .quiz .subtitle_long { margin-bottom: 40px; }
section.progress .quiz .subtitle ul.tabs {
	position: absolute;
	top: 25px;
	right: 60px;
	list-style: none;
}
section.progress .quiz .subtitle ul.tabs li {
	background: none;
	display: inline-block;
	padding: 0 6px;
	cursor: pointer;
	color: #d5d5d5;
}
section.progress .quiz .subtitle ul.tabs li:not(:last-child) { border-right: 1px solid #b3b3b3; }
section.progress .quiz .subtitle ul.tabs li.current { color: #222; }
section.progress .tab-content { display: none; }
section.progress .tab-content.current { display: inherit; }
section.progress .tab-content li { position: relative; }
#progress-tab-graph, #progress-tab-graph-vocab, #progress-tab-graph-confidence { text-align: center; }
#progress-tab-graph-0 { text-align: center; }
#progress-tab-graph-1 { text-align: center; }
#progress-tab-graph-2 { text-align: center; }
#progress-tab-graph-3 { text-align: center; }
#progress-tab-graph-4 { text-align: center; }
#progress-tab-graph-5 { text-align: center; }
#progress-tab-graph-6 { text-align: center; }
#progress-tab-graph-7 { text-align: center; }
#progress-tab-graph-8 { text-align: center; }
#progress-tab-graph-9 { text-align: center; }
#progress-canvas, #progress-tab-graph canvas, #progress-tab-graph-vocab canvas, #progress-tab-graph-confidence canvas,
#progress-tab-graph-0 canvas,
#progress-tab-graph-1 canvas,
#progress-tab-graph-2 canvas,
#progress-tab-graph-3 canvas,
#progress-tab-graph-4 canvas,
#progress-tab-graph-5 canvas,
#progress-tab-graph-6 canvas,
#progress-tab-graph-7 canvas,
#progress-tab-graph-8 canvas,
#progress-tab-graph-9 canvas
{
	width: 110% !important;
	max-width: 420px;
	height: auto !important;
	margin-left: -22px;
}
/*
section.progress .ivr li:first-child {
	border-bottom: 1px solid #e9e9e9;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
*/
section.progress .ivr .subtitle { margin-bottom: 20px; }
section.progress .ivr .score { margin-top: 5px; }
section.progress .ivr li p { margin-right: 50px; }

ul.dashboard-tabs {
	position: relative;
	max-width: 960px;
	padding: 0 10px;
	margin: 0 auto;
}
ul.dashboard-tabs li.dashboard-tab-link {
	width: 24.2%;
	background: #de4646;
	padding: 5px;
	color: #fff;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	margin: 2px;
	height: 50px;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
ul.dashboard-tabs li.dashboard-tab-link:hover {
	background: #f46464;
}
ul.dashboard-tabs li.dashboard-tab-link.current {
	background: #fff;
	color: #222;
}
.dashboard-tab-content { display: none; padding-top: 20px; padding-bottom: 200px; }
.dashboard-tab-content.current { display: inherit; }

/* 

=== notification  ===
*/
.notification .block li {
	position: relative;
	padding: 10px 0 35px;
	margin-bottom: 25px;
	border-bottom: 1px solid #e9e9e9;
}
.notification .block li:last-child {
	margin-bottom: 0;
	border-bottom: none;
}
.notification .block li img, .notification .block li div { float: left; }
.notification .block li img {
	position: absolute;
	top: 13px;
	left: 0;
}
.notification .block li div img {
	position: relative;
	top: 0px;
}
.notification .block li .title { font-weight: bold; }
.notification .block li .content { margin-top: 13px; }
.notification .block li div {
	width: 100%;
	padding-left: 60px;
}
.notification .block.view {
	padding-top: 15px;
	padding-bottom: 15px;
}
.notification .block.view a {
	margin: 0;
	padding: 0;
}

.full.mathable {
	padding: 0px 10px;
	overflow: hidden;
}
.full.mathable img {
	width: 100%;
}
.full.mathable .icon img {
	width: inherit;
}

/* override jquery ui tabs*/
.ui-widget-header{
    background: inherit !important;
    border: none !important;
    margin-bottom: 1em !important;
}
.ui-tabs li.ui-state-default{
    white-space: inherit  !important ;
    word-break: break-all !important;
    display: inline-block  !important;
    width: 25%;
    background: transparent  !important;
    padding: 2px  !important;
    text-align: center  !important;
    font-size: 12px  !important;
    cursor: pointer  !important;
    margin: 0px !important; 
    border: none !important;
    border-radius: initial !important;
    
}
.ui-tabs li a span {
    display: table-cell !important;
    vertical-align: middle !important;
    font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', sans-serif !important;
    font-weight: normal !important;
}
.ui-tabs li.ui-state-default a:hover{
    background: #f46464 !important;
}
.ui-tabs li.ui-state-default a {
    height: 5em !important;
    display: flex !important;
	justify-content: center;
    align-items: center;
    width: 100% !important;
    color:#fff !important;
    background: #de4848;
    overflow: hidden !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active{
    padding: 2px !important;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a{
    cursor: pointer !important;
    color:#000 !important;
    background: #ccc !important;
}
.ui-widget-content {
    background: inherit !important;
    padding: 0px !important;
    border: 0px !important;
    font-size: inherit !important;
    font-family: inherit !important;
}
.ui-widget-content div{
    font-family: inherit !important;
}
.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a{
    padding: 0px !important;
    margin: 0px !important;
}
.ui-widget-content a{
    color: #de4646 !important;
}
.ui-widget-content a:hover{
    color: black !important;
}
.ui-tabs .ui-tabs-panel{
    padding: 0px !important;
}
/* override jquery ui accordion*/
.custom-accordion > .custom-default-header {
	border: 2px solid #de4848;
	border-radius: 0px;
	color: #000;
	background: #fff;
	padding: 0.5em 0em;
	text-align: center;
	margin-top: 2px;
	font-size: 100%;
	font-weight: bold;
	line-height: 1.3;
}
.custom-accordion > .content-body-hide { display: none; }
.custom-accordion > .content-body-default { padding: 5px; }
.custom-accordion.ui-helper-reset {
	font-size: 100% ;
}

.custom-accordion > .ui-accordion-header > .ui-icon{
	display: none;
}

.custom-accordion > .ui-accordion-header {
	border: 2px solid #de4848;
	border-radius: 0px;
	color: #000;
	background: #fff;
	padding: 0.5em 0em !important;
	text-align: center;
}
.custom-accordion > .ui-accordion-header.ui-state-active
{
	border: 2px solid #ccc;
	color: #000;
	background: #eee;
}
.custom-accordion > .ui-accordion-content.ui-widget-content {
	/*border: 1px solid #ddd !important;*/
    border-top-width: 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    overflow: hidden;
    padding: 5px !important;
}

@media screen and (max-width: 980px){
	.full.mathable li.ui-state-default{
		width: 25%;
	}
}

@media screen and (min-width: 980px){
	.full.mathable li.ui-state-default{
		width: 12.5%;
	}
}

/* 

=== Forum  ===
*/
.forum.index .cat {
	padding-top: 27px;
	padding-bottom: 34px;
}
.forum.index .cat p:first-child a { padding-right: 18px; }
.forum.index .cat p:first-child {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	margin-bottom: 8px;
}
.forum.index .cat p:last-child {
	font-size: 14px;
	line-height: 17px;
}
.forum.index .cat { margin-bottom: 2px; }
.forum.inner li { margin-bottom: 2px; min-height: 100px; }
.forum.inner .title a, .class-detail .title.nbc a.btn {
	position: absolute;
	top: 0;
	right: 0;
	padding: 19px 30px;
}
.forum.inner .title a span, .class-detail .title.nbc a span {
	font-size: 25px;
	padding-right: 10px;
	vertical-align: sub;
	font-weight: normal;
}
.forum.inner .create-post { margin-top: 20px; }
.heading {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 22px;
}
.heading { margin-bottom: 25px; }
.forum.inner input[type=text], .forum.inner textarea { width: 100%; }
.forum.inner textarea {
	margin: 20px 0;
	height: 100px;
}
.forum.single .heading {
	margin-top: 5px;
	margin-bottom: 15px;
}
.forum.inner .topics li>p, .forum.inner .topics li>a, .forum.single .topics li>p { margin-left: 70px; }
.forum.inner .icon p, .forum.single .icon p { width: 85px; word-wrap: initial; word-break: initial; overflow: hidden; text-overflow: ellipsis; }
.forum.single li {
	padding-bottom: 35px;
	margin-bottom: 2px;
	min-height: 110px;
}
.forum.single div.small-txt, .forum.single li a.flag-btn {
	position: absolute;
	right: 37px;
}
.forum.single div.small-txt { top: 24px; }
.forum.single li a.flag-btn {
	display: none;
	top: 48px;
	margin: 0;
	padding: 0;
	font-size: 12px;
}
.forum.single li:hover a.flag-btn { display: block; }
.forum.single .heading, .forum.single ul li.comment>p { margin-left: 90px; margin-right: 80px;}
.forum.single form, #flag-post.overlay form, #coupon-code.overlay form { position: relative; }
.forum.single form div {
	margin-right: 110px;
	margin-left: 90px;
}
.forum.single form input[type=text], #flag-post.overlay form input[type=text], #coupon-code.overlay form input[type=text] { width: 100%; }
.forum.single form input.btn, #flag-post.overlay form input.btn, #coupon-code.overlay form input.btn {
	position: absolute;
	top: 0;
	right: 0;
}
.forum.single form input.btn { width: 100px; }
#flag-post.overlay .block, #coupon-code.overlay .block { width: 625px; }
#flag-post.overlay form div, #coupon-code.overlay form div {
	margin-right: 190px;
	margin-top: 15px;
}
#flag-post.overlay form input.btn, #coupon-code.overlay form input.btn { width: 180px; }
/* 

=== Quiz  ===
*/
.quiz .info, .evalue .info, .feedback .info { font-size: 14px; }
.quiz .info .FL { width: 75%; }
.quiz .info .FR {
	width: 25%;
	text-align: right;
}
.quiz .block li, .evalue .block li, .feedback .block li { position: relative; }
.quiz li.question, .evalue li.question, .feedback li.question {
	border-bottom: 1px solid #e9e9e9;
	padding: 5px 0 30px;
	margin-bottom: 25px;
}
.quiz li.question .num, .evalue li.question .num, .feedback li.question .num {
	position: absolute;
	top: 5px;
	left: 0;
	width: 30px;
	color: #de4646;
}
.quiz li.question .content, .evalue li.question .content, .feedback li.question .content {
	width: 100%;
	padding: 0 0 0 30px !important;
}
.quiz li.question .content .caption {
	line-height: 200%;
	top: -0.35em;
	position: relative;
}
.quiz li.question.tf .content, .evalue li.question.tf .content, .feedback li.question.tf .content { padding-right: 240px; }
.quiz li.question .content .example {
	background: #efefef;
	padding: 15px 20px;
	margin: 15px 0;
}
.quiz li.question .content .example p:first-child {
	font-weight: 700;
	text-transform: uppercase;
}
.quiz li.question .content .example span.blank {
	display: inline-block;
	width: 90px;
	margin: 0 8px;
	border-bottom: 1px solid #222;
}
.quiz li.question .content li, .evalue li.question .content li, .feedback li.question .content li {
	float: left;
	margin-right: 40px;
}
.quiz li.question .content li {
	float: none;
	//word-wrap: break-word;
	word-break: keep-all;
}
.quiz li.question .content li input[type="radio"] {
	min-width: 18px;
}

.quiz .submit, .evalue .submit, .feedback .submit {
	text-align: center;
	padding: 20px 0 55px;
}
.feedback li.question.tf ul {
	position: absolute;
	top: 5px;
	right: 0;
}
.quiz li.question.tf ul {
	margin-left: 30px;
}
.quiz li.question.tf .toggle, .feedback li.question.tf .toggle { margin-right: 1px; }
.quiz .result {
	margin-top: 18px;
	margin-bottom: 20px;
	padding-top: 40px;
	padding-bottom: 36px;
}
.quiz .result p.caption {
	font-size: 28px;
	text-transform: uppercase;
	margin-bottom: 15px;
	line-height: 30px;
}
.quiz li.question.wrong, .quiz li.question.wrong input { color: #de4848; }
.quiz li.question.wrong .content .example span.blank, .quiz li.question.wrong input { border-color: #de4848; }
.quiz li.question.wrong .correct { font-weight: 700; }
.quiz li.question.wrong .correct img { border: 1px solid black; }
.quiz li.question.wrong .toggle .input-checked { background: #de4848; }
/*.quiz li.question.wrong .toggle.correct span { background: black; }*/
.quiz li.question.tf.wrong span.input-checked::after{ content: "\2717";}
.quiz li.question.tf li.correct span.input-checked { background: green; }
.quiz li.question.tf .correct span.input-checked::after, .quiz li.question.tf .correct span::after{ content: "\2713";}
.quiz .FL big {
    font-size: 20px;
    width: 100%;
    display: block;
    background-color: #d2d2d240;
    margin-top: 20px;
   /* word-spacing: 50px;*/
    padding: 20px;
    line-height: 400%;
    word-break: break-word;
    text-align: center;
}
.quiz .FL big em {
   /* word-spacing: initial;*/
	margin-right:30px;
}
@media screen and (max-width: 768px) {
    .quiz .FL big em:nth-child(n):after{
        content:"\A";
        display:block;
    }
}
@media screen and (min-width: 768px) {
    .quiz .FL big em:nth-child(3n):after{
        content:"\A";
        display:block;
    }
}
.quiz .FL big em:last-child:after{
    content:none;
}
.quiz .FL video {width: 100%;}
.quiz .txt-content img {
    max-width: 100%;
}
.quiz .txt-content p {margin: 10px 0px;}
.quiz .txt-content pre {white-space: pre-wrap;}

/* 

=== My Account  ===
*/
.account .info { margin-bottom: 40px; }
.account .info .block { height: 120px; }
.account .info .FL {
	width:50%;
	font-size: 14px;
	padding-right: 1px;
}
.account .info .FR {
	padding-left: 1px;
	width:50%;
	font-size: 14px;
}
.account .info .block div {
	display: inline-block;
	margin-left: 10px;
}
.account .info .FL .caption, .account .info .FR .time {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 16px;
}
.account .info .FL .small-txt { padding-top: 12px; }
.account .info .FR .time { padding-top: 15px; }
ul.side-nav {
	position: absolute;
	width: 200px;
	line-height: 40px;
}
ul.side-nav li { position: relative; }
ul.side-nav li.active:before {
	content: "";
	position: absolute;
	top: 11px;
	left: -37px;
	display: block;
	width: 2px;
	height: 20px;
	background: #222;
}
ul.side-nav li.active a { color: #222; }
.side-content { padding-left: 200px; }
.side-content .title {
	font-size: 22px;
	margin: 15px 0 25px;
	line-height: 26px;
}
.account .side-content ul.history li {
	padding: 25px 0;
	border-top: 1px solid #e9e9e9;
}
.account .side-content ul.history li div { float: left; }
.account .side-content ul.history li div:first-child { width: 60%; }
.account .side-content ul.history li div:nth-child(2), .account .side-content ul.history li div:nth-child(3) {
	width: 20%;
	text-align: center;
	padding-top: 26px;
}
.account .side-content ul.history li div:nth-child(3) { font-weight: 700; }
.account .side-content ul.history li p:first-child {
	font-size: 14px;
	margin-bottom: 12px;
}
.account .side-content ul.history li p:nth-child(2) {
	font-weight: 700;
	text-transform: uppercase;
}
/* 

=== All Award  ===
*/
.award.all li {
	width: 14%;
	margin: 11px;
}
.title.past { margin-top: 80px; }
/*

=== Student Evaluation ===
*/
.evalue li.question ul { margin-top: 15px; }
/*

=== Try First ===
*/
.try .side-content .title { margin: 5px 0 10px; }
.try .video-container { margin: 30px 0; }
.try .enroll:before, .try .invite:before {
	content: "";
	display: block;
	width: 20px;
	height: 1px;
	background: #222;
	margin-bottom: 20px;
}
.try .enroll, .try .invite {
	width: 50%;
	margin-top: 50px;
}
.try .enroll .caption, .try .invite .caption {
	font-size: 22px;
	line-height: 26px;
	margin-bottom: 10px;
}
.try .enroll .caption.class {
	margin-bottom: 5px;
	font-weight: 700;
}
.try .side-content a.btn, .try .side-content a.btn {
	margin-top: 20px;
	margin-bottom: 30px;
}
.try .invite a.btn {
	width: 48px;
	height: 48px;
	margin-right: 10px;
	font-size: 21px;
	line-height: 40px;
	font-weight: normal;
	padding: 0;
}
.try .invite a.btn.fb {
	background: #4b6daa;
	border-color: #4b6daa;
}
.try .invite a.btn.fb:hover {
	color: #4b6daa;
	background-color: transparent;
}
.try .invite a.btn.wb {
	background: #e93c4d;
	border-color: #e93c4d;
}
.try .invite a.btn.wb:hover {
	color: #e93c4d;
	background-color: transparent;
}
/*

=== Pay - Step 1 ===
*/
.pay .intro, .assessment .intro, .choose-schedule .intro, .finish-pay .intro {
	padding-top: 40px;
	padding-bottom: 40px;
}
.pay .intro { margin-bottom: 20px; }
.pay .intro .caption, .assessment .intro .caption, .choose-schedule .intro .caption, .finish-pay .intro .caption {
	font-size: 40px;
	margin-bottom: 15px;
	line-height: 42px;
}
.pay .intro a { margin-top: 25px; }
.pay .intro a i { margin-left: 30px; }
.pay.coupon .package .title {
	padding-bottom: 25px;
	margin-bottom: 2px;
	border-bottom: 0;
}
.pay.coupon .package .total input {
	width: auto;
	min-width: 280px;
	margin: 15px 0 20px;
}
.pay.confirm .schedule { margin-top: 7px; }
.pay.confirm .schedule li .time { margin-bottom: 10px; }
.pay.confirm .tc, .pay.confirm .submit, .assessment .submit, .choose-schedule .submit, .finish-pay .submit {
	width: 100%;
	text-align: center;
}
.pay.confirm .tc { margin: 60px 0 75px; }
.pay.confirm .submit i { margin-right: 10px; }
.pay.confirm .submit a.back {
	padding-right: 50px;
	margin-right: 15px;
}
/*

=== Pay - Step 3 ===
*/
ul.pay-steps { padding-left: 6px; }
ul.pay-steps li {
	float: left;
	width: 25%;
	height: 233px;
	padding: 24px 0 0;
	border: 8px solid #fff;
	margin: 0 2px 2px 0;
	text-align: center;
	text-transform: uppercase;
}
ul.pay-steps li:first-child { margin-left: -6px; }
ul.pay-steps li:last-child { margin-right: 0; }
ul.pay-steps li i {
	display: inline-block;
	font-size: 80px;
	margin: 18px 0 19px;
}
ul.pay-steps li.inactive {
	color: #aeaeae;
	background: #efefef;
	border-color: #efefef;
}
ul.pay-steps li.active {
	color: #de4848;
	border-color: #de4848;
}
.assessment .about-test, .choose-schedule .select-schedule {
	padding-top: 40px;
	padding-bottom: 50px;
}
.assessment ul.instruction li {
	float: left;
	width: 50%;
}
.assessment .instruction li:last-child { padding-left: 30px; }
.assessment .instruction li p { margin-bottom: 15px; }
.assessment .info {
	margin: 20px 0;
	border: 7px solid #e9e9e9;
	padding: 26px 0 24px;
}
.assessment .info li {
	float: left;
	width: 50%;
	text-align:center;
	font-size: 14px;
}
.assessment .info li .big-txt, .finish-pay .class-detail li .big-txt {
	font-size: 22px;
	font-weight: 700;
	margin-top: 5px;
	line-height: normal;
}
.assessment .info li:first-child { border-right: 1px solid #dcdcdc; }
.assessment .submit, .choose-schedule .submit, .finish-pay .submit { margin-top: 60px; }
.assessment .submit a.red.btn { margin-right: 20px; }
.assessment .submit a.outline.btn i { margin-left: 10px; }
.assessment .submit a.outline.btn { padding-right: 10px; }
.later-btn {
	text-align: center;
	margin-top: 40px;
}
#new-code a.red.btn { margin-top: 20px; }
.finish-pay .class-detail { padding-left: 2px; }
.finish-pay .class-detail li {
	float: left;
	height: 250px;
	text-align: center;
	padding: 48px 0;
}
.finish-pay .class-detail li:first-child {
	width: 40%;
	margin: 0 2px 0 -2px;
}
.finish-pay .class-detail li:first-child:after {
	content: "";
	display: block;
	width: 20px;
	height: 1px;
	margin: 25px auto 0;
	background: #222;
}
.finish-pay .class-detail li:last-child { width: 60%; }
.finish-pay .class-detail li .big-txt {
	text-transform: uppercase;
	margin: 15px 0;
	line-height: 26px;
}
.finish-pay .class-detail li .red-txt { font-size: 22px; }
/*

=== Instructor - Class Detail ===
*/
.class-detail .title.detail { margin-bottom: 20px; padding-right: 150px; }
.class-detail .title.detail a.btn {
	position: absolute;
	top: 0;
	right: 0;
	padding: 25px 30px;
}
.class-detail .heading { margin-bottom: 7px; }
.class-detail .s-list li {
	margin-bottom: 2px;
}
.class-detail .s-list-detail li {
	float: left;
	/*width: 10% !important;*/
	text-align: center;
	font-weight: bold;
	margin-bottom: 0;
	height: 34px;
	line-height: 33px;
}
.class-detail .s-list-detail li:first-child {
	width: 20% !important;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.class-detail .s-list-detail li:first-child:hover {
	overflow: visible;
}
.class-detail .s-list-detail.male li:first-child {
	padding-left: 50px;
	background: url(../images/09-male-big.png) center left no-repeat;
}
.class-detail .s-list-detail.female li:first-child {
	padding-left: 50px;
	background: url(../images/09-female-big.png) center left no-repeat;
}

.class-detail .col {
	margin-left: -10px;
}
.class-detail .feedback form {
	margin-top: 25px;
}
.class-detail .feedback select {
	width: 380px;
	margin-right: 5px;
}
/*
.class-detail .handout-detail i {
	margin: 0 150px 0 0;
}
*/

#adv-score, #s-award, #cafe-record, #videos-watched, #words-used, #report-card {
	width: 460px;
}
#report-card-detail, #report-card-evidence {
	min-width: 800px;
}
#adv-score .scroll, #s-award .scroll, #cafe-record .scroll, #videos-watched .scroll, #words-used .scroll, #report-card .scroll, #report-card-detail .scroll, #report-card-evidence .scroll {
	height: 360px;
}
#adv-score .scroll .block, #s-award .scroll .block, #cafe-record .scroll .block, #videos-watched .scroll .block, #words-used .scroll .block, #report-card .scroll .block, #report-card-detail .scroll .block, #report-card-evidence .scroll .block {
	min-height: 298px;
}
#s-award a.btn.reward {
	width: 100%;
}
.overlay .summary {
	font-size: 14px;
}
.fancybox-inner section {
	margin-bottom: 0;
}
/* 

=== Instructor - Award Students for Achievement === 
*/
.award-t .info, .evalue-t .info {
	font-size: 14px;
}
.award-t .block.content {
	padding-top: 34px;
	padding-bottom: 74px;
}
.award-t textarea {
	width: 100%;
	height: 100px;
}
.award-t div.submit, .nbc div.submit {
	margin-top: 50px;
	text-align: center;
}
.award-t .award-list, .nbc .nbc-list {
	overflow: hidden;
	margin-bottom: 40px;
}
.award-t .award-list ul, .nbc .nbc-list ul {
	width: 110%;
	margin-left: -11px;
}
.award-t .award-list li, .nbc .nbc-list li {
	position: relative;
	margin: 11px;
}
.award-t .award-list li span {
	width: 156px;
	height: 156px;
	border: 7px solid #e9e9e9;
	padding: 17px 10px 15px;
	background-color: transparent;
	color: #222;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
}
.award-t .award-list li span.input-checked {
	background: none;
	border-color: #222;
}
.award-t .award-list li span p {
	width: 100%;
	white-space : nowrap;
	overflow : hidden;
	text-overflow : ellipsis;
	margin-top: 8px;	
}
.award-t .award-list li span .given {
	position: absolute;
	top: 0;
	right: 0;
	width: 30px;
	height: 30px;
	line-height: 30px;
	background: #de4646;
	color: #fff;
	text-align: center;
}
.tooltipster-base .award .heading {
	min-width: 150px;
	font-size: 16px;
	margin-bottom: 8px;
}
/* 

=== Instructor - Feedback === 
*/
.feedback li.question .num {
	top: 20px;
}
.feedback li.question {
	padding: 20px 0 20px;
	margin-bottom: 15px;
}
.feedback li.question p {
	margin-bottom: 10px;
}
.feedback input[type=text], .feedback textarea {
	width: 100%;
	margin-top: 30px;
}
/* 

=== Instructor - nbc === 
*/
.nbc .intro p.FL {
	width: 50%;
}
.nbc .intro .search, .nbc .intro .date {
	width: 25%;
	min-width: 150px;
	padding: 0 5px;
}
.nbc .intro .search input, .nbc .intro .date select {
	width: 100%;
}
.nbc .intro .search input {
	background: url(../images/09-search.png) center right no-repeat;
}
.nbc .nbc-list li {
	float: left;
	width: 273px;
	height: 222px;
	border: 7px solid #e9e9e9;
	padding: 13px;
	color: #222;
}
.nbc .nbc-list li.input-checked {
	background: none;
	border-color: #222;
}
.nbc .nbc-list li p {
	font-size: 14px;
	line-height: 17px;
	margin-top: 8px;
	text-align: center;	
}
.nbc .nbc-list li .hover-layer {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: #222;
	background: rgba(0,0,0,0.8);
	text-align: center;
	padding-top: 36px;
}
.nbc .nbc-list li .hover-layer i {
	position: absolute;
	top: 50%;
	left: 13px;
	margin-top: -8px;
	font-size: 16px;
}
.nbc .nbc-list li:hover {
	border-color: #222;
	border-color: rgba(0,0,0,0.8);
}
.nbc .nbc-list li:hover .hover-layer {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.nbc .nbc-list li .hover-layer a {
	display: block;
	width: 140px;
	border-color: #ffd633;
	color: #ffd633;
	text-align: right;
	margin: 10px auto;
}
.nbc .nbc-list li .hover-layer a:hover {
	border-color: #fff;
	color: #fff;
}
.nbc .selected-v {
	padding-top: 34px;
	padding-bottom: 54px;
}
.nbc .selected-v a.remove-all {
	position: absolute;
	top: 34px;
	right: 37px;
}
.nbc .selected-v li:first-child {
	border-top: 1px solid #e9e9e9;
}
.nbc .selected-v li {
	position: relative;
	border-bottom: 1px solid #e9e9e9;
	padding: 10px 0 20px;
	margin-bottom: 0;
}
.nbc .selected-v li .num, .nbc .selected-v li .remove {
	position: absolute;
	top: 14px;
}
.nbc .selected-v li .num {
	left: 0;
}
.nbc .selected-v li .remove {
	font-size: 12px;
	right: 0;
}
.nbc .selected-v li a.video {
	width: 100%;
	display: inline-block;
	white-space : nowrap;
	overflow : hidden;
	text-overflow : ellipsis;
	padding: 0 30px 0 40px;
}
.nbc .selected-v input.btn {
	min-width: 260px;
}
#watch-nbc .block, #watch-help .block, .watch-material-library .block {
	max-width: 515px;
}
#watch-nbc img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}
#watch-nbc p.caption {
	margin: 15px 0 5px;
	font-weight: 700;
}
#watch-nbc a.select {
	width: 100%;
	background: #e4e4e4;
	color: #fff;
	margin-top: 30px;
}
#watch-nbc a.select:hover {
	background: #ccc;
}
#watch-nbc a.select.input-checked {
	background: #222;
}
#watch-nbc a.select i {
	margin-right: 5px;
}
#watch-nbc div.wrapper
{
      position: relative;
      padding-bottom: 56.25%; /* 16:9 */
      height: 0;
      width: 100%;
      min-width: min(80vw,750px);
      min-height: 150px;
}
#watch-nbc #video_frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#watch-nbc .title, .watch-material-library .title {
	font-size: 24px;
}
#watch-nbc .caption, .watch-material-library .title {
	font-size: 18px;
}
/* 

=== Instructor - Evaluation === 
*/
.evalue-t .accordion .title .name {
	width: 100%;
	font-weight: 700;
	padding-right: 100px;
}
.evalue-t .accordion .title:hover {
	color: #de4646;
}
.evalue-t .accordion .title:after {
	position: absolute;
	top: 0;
	right: -5px;
	font-size: 30px;
  	font-family: 'ied';
	content: "\e819";
}
.evalue-t .accordion .title.accordion-active:after {
	position: absolute;
	top: 0;
	right: -5px;
	font-size: 30px;
  	font-family: 'ied';
	content: "\e818";
}
.evalue-t .accordion .title.accordion-active:hover {
	cursor: default;
	color: #222;
}
.evalue-t .accordion .content {
	margin-top: 20px;
}
.evalue-t .accordion .content .full {
	width: 100%;
	overflow: hidden;
	padding: 0;
	border-top: 1px solid #e9e9e9;
}
.evalue-t .accordion .content .col {
	float: left;
	width: 50%;
	padding: 0 15px;
}
.evalue-t .question {
	position: relative;
	padding: 15px 190px 25px 0;
	margin: 10px 0 0 25px;
}
.evalue-t .question:after {
	position: absolute;
	content:"";
	width: 100%;
	height: 1px;
	background: #e9e9e9;
	margin-top: 25px;
}
.evalue-t .question:last-child:after {
	display: none;
}
.evalue-t .full > .question {
	margin-left: 40px;
}
.evalue-t .question.num-only {
	padding-right: 0;
}
.evalue-t .question .num, .evalue-t .question .rate {
	position: absolute;
}
.evalue-t .question .num {
	top: 15px;
	left: -30px;
	color: #de4646;
}
.evalue-t .question .rate {
	top: 0;
	right: 0;
}
.evalue-t .question .rate select {
	width: 170px;
	border-color: #e9e9e9;
}
.evalue-t .question .trait {
	width: 50%;
}
.evalue-t .question .trait li {
	margin-bottom: 30px;
}
.evalue-t .question .trait li:last-child {
	margin-bottom: 0;
}
.evalue-t .question input[type=text] {
	width: 100%;
	margin-top: 10px;
}
.evalue-t .question input[type=text]:first-of-type {
	margin-top: 25px;
}
.evalue-t div.submit {
	margin: 15px 0 40px;
	text-align: center;
}

/* 

=== Instructor - Quiz === 
*/
.instructor .quiz .result {
	margin: 0 0 2px;
	padding: 24px 37px;
}

/* 

=== Instructor - Library === 
*/
.library li {
	margin-bottom: 25px;
	padding-top: 23px;
	border-top: 1px solid #e9e9e9;
}
.library li:first-child {
	border-top: 0;
}

/* 

=== Pagination ===
*/
.notification > .block > ul > a {
  color: #222;
  margin: 0;
  padding: 0;
}

.pagination.special .first, .pagination.special .last {
  display: none;
}
.pagination.special .previous a, .pagination.special .next a {
  color: #DE4646;
}
.pagination.special .previous a:hover, .pagination.special .next a:hover {
  color: #222;

}
.pagination.special .previous.hidden a, .pagination.special .next.hidden a {
  color: #B1B1B1;
  display: none;
}
.pagination.special .previous {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
}
.pagination.special .next {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
}

/* 

=== Message ===
*/
.message {
	margin-bottom: 20px;
}
.message.top {
	margin-bottom: 0;
	margin-top: 20px;
}

/* 

=== NBC Video ===
*/
.nbc .nbc-list li {
	height: 217px;
}
.nbc .nbc-list img {
	width: 100%;
	height: 131px;
}

/* 

=== Schedule ===
*/
#schedule-timezone-dropdown {
	margin-top: 20px;
}

/* 

=== Forum ===
*/
.forum.inner input[type=text], .forum.inner textarea {
	margin-bottom: 20px;
}
section.forum .item>div.content { margin-left: 90px; margin-right: 85px;}
section.forum .item>div.content ol {
	list-style: decimal;
	margin-left: 20px;
}
section.forum .item>div.content ul {
	list-style: circle;
	margin-left: 20px;
}
section.forum .item>div.content li {
	margin-bottom: 0;
	min-height: 0;
	padding-bottom: 0;
}
section.forum .item>div.content strong {
	font-weight: bold;
}
section.forum .item>div.content em {
	font-style: italic;
}
section.forum .item>div.content u {
	text-decoration: underline;
}
section.forum .item>div.content a {
	margin-left: 0;
}

section.forum a.tooltip {font-size: inherit !important;}
/* 

=== Next Class ===
*/
section.summary .info .next-class-timezone {
	margin-top: -10px;
	margin-bottom: 11px;
}

.instructor .class-sum li .next-class-timezone {
	margin-top: 2px;
}

/* 

=== Trial Dashboard ===
*/
section .ivr.trial li>a {
	margin-left: 0;
}

section.to-do .ivr.trial li p {
	margin-left: 0;
}



/* 

=== Class Detail ===
*/
.class-detail ul.s-list {
	width: 100% !important;
}

.class-detail .s-list li {
	margin-bottom: 2px;
}
.class-detail .s-list-detail li {
	float: left;
	/*width: 12%;*/
	text-align: center;
	font-weight: bold;
	margin-bottom: 0;
	height: 34px;
	line-height: 33px;
}
.class-detail .s-list-detail li:first-child {
	width: 25%;
	text-align: left;
}
.class-detail .s-list-detail.label li {
	height: auto;
	font-size: 14px;
	font-weight: normal;
	line-height: normal;
}
.class-detail .s-list-detail.male li:first-child {
	/*padding-left: 50px;*/
	background: url(../images/09-male-big.png) center left no-repeat;
}
.class-detail .s-list-detail.female li:first-child {
	padding-left: 50px;
	background: url(../images/09-female-big.png) center left no-repeat;
}
.pagination a.disabled { color: #b1b1b1; }

.try .side-content a.btn, .try .side-content a.btn {
 margin-bottom: 20px; 
}

#adv-score .scroll .block, #s-award .scroll .block, #cafe-record .scroll .block {
	min-height: 0;
}
#adv-score .scroll, #s-award .scroll, #cafe-record .scroll {
	height: auto;
}

section.award li {
	min-height: 130px;
}

section.award .view {
	margin-top: 2px;
}

section .handout li i { margin-left: -4px; }

#view-class li {
        border-bottom: 1px solid #e9e9e9;
        padding: 10px 0 20px;
        text-align: center;
}

.evalue li.question .content textarea { width: 100%; padding-left: 30px; margin-top: 30px; }

#view-interactive li p{
    font-size: 14px;
}

#choose-pay a {
    margin: 0 !important;
    padding: 0 !important;
}

/* 

=== Chat box ===
*/
.msgr-chat {
	position: absolute;
	top: 40px;
	bottom: 10px;
	width: 100%;
	padding: 0;
	background: #fff;
	z-index: 9999;
	text-align: left;
	font-family: 'PT Sans', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #afafaf;
	border-right: 1px solid #afafaf;
	border-left: 1px solid #afafaf;
	-moz-box-shadow: 0 8px 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.3);
	box-shadow: 0 8px 10px rgba(0,0,0,0.3);
}
.msgr-chat {
	font-weight: normal;
	font-size: 14px;
	line-height: 17px;
	min-height: 90%;
}
.msgr-chat ul, .msgr-chat .input-box { padding: 20px 25px; }
.msgr-chat .date {
	margin-bottom: 13px;
	font-weight: 700;
	color: #d5d5d5;
	text-align: center;
}
.msgr-chat ul { border-bottom: 1px solid #e9e9e9; }
.msgr-chat li { padding: 7px 0; }
.msgr-chat li.instructor>* { float: right; }
.msgr-chat li.system>* { float: left; }
.msgr-chat li .bubble {
	max-width: 80%;
	position: relative;
	background: #efefef;
	padding: 9px 14px 10px;
}
.msgr-chat li.instructor .bubble { margin-right: 15px; }
.msgr-chat li.system .bubble { margin-left: 15px; }
.msgr-chat li .bubble:after {
	content: "";
	position: absolute;
	top: 11px;
	border-style: solid;
	border-color: #efefef transparent;
	display: block;
	width: 0;
}
.msgr-chat li.instructor .bubble:after {
	left: 100%;
	border-width: 10px 11px 0 0;
}
.msgr-chat li.system .bubble:after {
	left: -11px;
	border-width: 10px 0 0 11px;
}
.msgr-chat li .small-txt {
	position: absolute;
	bottom: -3px;
	color: #d5d5d5;
}
.msgr-chat li.instructor .small-txt { left: -40px; }
.msgr-chat li.system .small-txt { right: -40px; }
.msgr-chat input[type=text] { width: 100%; }

/* 

=== Popup achievement alert ===
*/
#view-popup-achievement {
	max-width: 500px;
}
#view-popup-achievement .block li {
	position: relative;
	padding: 10px 0 20px;
	margin-bottom: 10px;
	border-bottom: 1px solid #e9e9e9;
}
#view-popup-achievement .block li:last-child {
	margin-bottom: 0;
	border-bottom: none;
}
#view-popup-achievement .block li .popup_award {
	text-align: center;
	margin: 0 auto;
	float: left;
	width: 140px;
}

/*
=== teaching material ===
*/
#teaching_material_main {
	max-width: 960px;
	margin: 0 auto;
}
ul.teaching_material-tabs {
	position: relative;
	float: right;
	width: 180px;
	margin: 0 auto;
}
ul.teaching_material-tabs li.teaching_material-tab-link {
	background: #de4848;
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	margin: 0px 0px 5px 0px;
	height: 70px;
	vertical-align: middle;
	display: flex;
	align-items: center;
	justify-content: center;
}
ul.teaching_material-tabs li.teaching_material-tab-link:hover {
	background: #f46464;
}
ul.teaching_material-tabs li.teaching_material-tab-link.current {
	background: #fff;
	color: #222;
}
.teaching_material-tab-content { 
	display: none; 
	padding: 0px 185px 34px 0px;
}
.teaching_material-tab-content.current { display: inherit; }
.teaching_material_content ol {
	list-style: decimal;
	margin-left: 20px;
}
.teaching_material_content ul {
	list-style: disc;
	margin-left: 20px;
}
.teaching_material_content li {
	margin-bottom: 0;
	min-height: 0;
	padding-bottom: 0;
}
.teaching_material_content strong {
	font-weight: bold;
}
.teaching_material_content em {
	font-style: italic;
}
.teaching_materialcontent u {
	text-decoration: underline;
}
.teaching_material_content a {
	margin-left: 0;
}
.teaching_material_content h1 {
	font-size: 2em; 
	margin: .67em 0;
}
.teaching_material_content h2 {
	font-size: 1.5em;
	margin: .75em 0;
}
.teaching_material_content h3 {
	font-size: 1.17em;
	margin: .83em 0;
}
.teaching_material_content iframe {
	display: block !important;
}

.button-play-model {
	display: block;
	width: 26px;
	height: 26px;
	border: none;
}
.button-record {
	display: block;
	width: 26px;
	height: 26px;
    padding: 2px;
}
.icon-book:before { font-family:FontAwesome !important; }

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25%;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block !important;
}
.videoWrapper-nbc {
    position: relative;
    padding-bottom: 10px;
    padding-top: 10px;
    height: 350px;
    width: 450px;
}
.videoWrapper-nbc iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block !important;
    overflow: hidden;
}
@media (max-width: 500px) {
    .videoWrapper-nbc {
        margin-left: -50px;
    }
}

.videoSummary {
    width: 100%; 
    min-width: 170px;
    -webkit-transition: none; 
    -moz-transition: none;
    -o-transition: none;
     transition: none;
}

.quizMC li{
    display: flex;
    align-items: center;
    
}

.quizMCTextarea {
    width: 100%;
    -webkit-transition: none; 
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

.quizTF ul{
    display: flex;
    position: relative !important;
}

.quizTF li:first-child{
    margin-right: 1px !important;
}

.quizTF li:last-child{
    margin:auto !important;
}
.quizTF .content {
    display: flex;
    margin: auto;
    padding: 0px !important;
}
.quizTF .quizTFHead{
    overflow: hidden;
    width: 80%;
	margin-right: 10px;
}
.quizTF .quizTFBody{
	margin: auto;
}
@media screen and (max-width: 768px) {
    .quizTF .content {
        display: block;
    }
    .options {
        margin: 0px !important;
        padding: 0px !important;
    }
}

.quizMC .answerLabel{
    padding-right: 10px;
}
.quizMC .option {
    margin-top: 15px;
}

.quizMC .option-image {
    max-width: 200px;
}

.quizMatching .content li.flex {
    display: flex;
}
@media screen and (max-width: 768px) {
    .quizMatching .content li.flex {
        display: block;
    }
}
.quizIP .underline {
    border-bottom: 2px solid red;
}

.label {
	display: inherit;
	padding: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	text-shadow: inherit;
	white-space: inherit;
	vertical-align: inherit;
	background-color: inherit;
}

.tooltip {
	font-size: 22px !important;
	opacity: 1;
	position: inherit;
	z-index: inherit;
	font-size: inherit;
	line-height: inherit;
	visibility: inherit;
}
.tooltip2 {
	font-size: inherit !important;
	opacity: 1;
	position: inherit;
	z-index: inherit;
	font-size: inherit;
	line-height: inherit;
	visibility: inherit;
}
.close {
	opacity: 1;
}

.progress, select {
	height: inherit;
	min-height: inherit;
}

#dtClassDetails tr td img {
    vertical-align: middle;
}
#dtClassDetails tr td:not(:first-child),#dtClassDetails tr th:not(:first-child) {
    text-align: center;
}
#dtClassDetails tr td:not(:last-child) {
    padding-right: 30px !important;
}


.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25%;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block !important;
}
.videoWrapper-nbc {
    position: relative;
    padding-bottom: 10px;
    padding-top: 10px;
    height: 350px;
    width: 450px;
}
.videoWrapper-nbc iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block !important;
    overflow: hidden;
}
@media (max-width: 500px) {
    .videoWrapper-nbc {
        margin-left: -50px;
    }
}

.videoSummary {
    width: 100%; 
    min-width: 170px;
    -webkit-transition: none; 
    -moz-transition: none;
    -o-transition: none;
     transition: none;
}

.quizMC li{
    display: flex;
    align-items: center;
    
}

.quizMCTextarea {
    width: 100%;
    -webkit-transition: none; 
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

.quizTF ul{
    display: flex;
    position: relative !important;
}

.quizTF li:first-child{
    margin-right: 1px !important;
}

.quizTF li:last-child{
    margin:auto !important;
}
.quizTF .content {
    display: flex;
    margin: auto;
    padding: 0px !important;
}
.quizTF .quizTFHead{
    overflow: hidden;
    width: 80%;
}
@media screen and (max-width: 768px) {
    .quizTF .content {
        display: block;
    }
    .options {
        margin: 0px !important;
        padding: 0px !important;
    }
}

.quizMC .answerLabel{
    padding-right: 10px;
}
.quizMC .option {
    margin-top: 15px;
}

.quizMC .option-image {
    max-width: 200px;
}

.quizMatching .content li.flex {
    display: flex;
}
@media screen and (max-width: 768px) {
    .quizMatching .content li.flex {
        display: block;
    }
}
.quizIP .underline {
    border-bottom: 2px solid red;
}

.wizard > .steps > ul {
    list-style: none!important;
    padding: 0;
    margin: 0;
    display: block;
}

.wizard > .steps > ul > li {
    width: 25%;
    padding-right: 0.5em;
    display:inline-block;
    vertical-align: top;
}
.wizard > .steps > ul > li > a{
    text-align: center;
    background: #de4646;
    color: #fff;
    cursor: default;
    display: block;
    width: auto;
    margin: 0px;
    padding: 1em 1em;
    text-decoration: none;
}
@media screen and (max-width: 768px) {
    .wizard > .steps > ul > li {
        width: 100%;
        padding: 5px;
    }
    .wizard > .steps > ul > li > a{
        padding: 5px;
    }
}
.wizard > .steps > ul > li > a:hover {
    background: #f46464;
}
.wizard > .steps > ul > li.current > a {
    background: #b7b7b7;
}
.wizard > .steps .number,
.wizard > .content > .title, 
.tabcontrol > .content > .title, 
.wizard > .steps .current-info, 
.tabcontrol > .steps .current-info {
    display: none;
}

.wizard > .actions > ul {
    display: flex;
    justify-content: space-around;
} 


.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active {
    background: #de4646;
    color: #fff;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.wizard > .actions a:hover {
    background: #f46464;
}

.mixedQuiz{
    counter-reset:quizIndex;
}
.mixedQuiz ul.quizContent div.content p{
    margin-bottom:10px;
}
.mixedQuiz ul.quizContent > li.question{
    display: flex;
    border-bottom: 1px solid #e9e9e9;
    padding: 5px 0 30px;
    margin-bottom: 25px;
}
.mixedQuiz ul.quizContent > li .content {
    width: 100%;
}
.mixedQuiz ul.quizContent > li:not(.skip) {
    counter-increment:quizIndex;
    list-style:none;
}
.mixedQuiz ul.quizContent > li:not(.skip):before {
     content:counter(quizIndex) ".\00a0\00a0";
     display: inline-block;
     vertical-align: top;
     color: red;
}

.mixedQuiz .section-description{
    border: 2px solid #b9b9b9;
    border-left: none;
    border-right: none;
    padding: 15px 0px;
    margin: 15px 0px;
}

.mixedQuiz .section-description big {
    font-size: 20px;
    width: 100%;
    display: block;
    background-color: #d2d2d240;
    margin-top: 20px;
    word-spacing: 20px;
    line-height: 400%;
    word-break: break-word;
    text-align: center;
}
.mixedQuiz .underline {
    border-bottom: 2px solid red;
}

@media screen and (max-width: 768px) {
    .mixedQuiz .section-description big em:nth-child(n):after{
        content:"\A";
        display:block;
    }
}
@media screen and (min-width: 768px) {
    .mixedQuiz .section-description big em:nth-child(3n):after{
        content:"\A";
        display:block;
    }
}
.mixedQuiz .section-description big em:last-child:after{
    content:none;
}

.mixedQuiz .txt-content {
    text-align:left;
}


.quiz .dropbtn {
  padding: 0.1em 1em;
  margin: 0em 0.5em;
  min-width: 8em;
  height: 2em;
  font-size: 16px;
  border: 1px solid black;
  cursor: pointer;
  text-align: center;
}

@media screen and (max-width: 768px) {
    .quiz .dropbtn {
      min-width: 2em;
    } 
}

.quiz .dropdown {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}

.quiz .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  
  text-align: center;
  padding: 10px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
@media screen and (min-width: 768px) {
    .quiz .dropdown-content {
        min-width: 300px;
    }
}

.quiz .dropdown-content span {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.quiz .dropdownanswer {margin-top: 9px;}
.quiz .dropdown-content span:hover {background-color: #ddd}
.quiz .dropdown .show {display:block;}
.quiz .caption .title{ display: inline; }

.custom-client-cat-icon {width: 60px; height: 60px; margin:auto; display: block;}

.dynamic-week ul {
	width: 750px;
}
.dynamic-week li {
	height: 20px;
}
.dynamic-week li p:first-child {
	width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	float: left;
}
/*
.dynamic-week li p:nth-child(2) {
	width: 250px;
	float: left;
}
.dynamic-week li p:nth-child(3), .dynamic-week li p:nth-child(4) {
	width: 140px;
	float: left;
}
*/
.dynamic-week li p:nth-child(2) {
	width: 210px;
	float: left;
}
.dynamic-week li p:nth-child(3) {
	width: 120px;
	float: left;
}
/*
.dynamic-week li input {
	float: left;
	height: 20px;
}
*/

.cmsm-tab-label {
	margin-left: 330px;
	min-height: 140px;
}

.cmsm-tab-label ul {
	padding: 0px !important;
}

.cmsm-tab-link a span, .past-tab-link a span {
	padding: 5px !important;
}

#cms-type {
	position: relative;
	top: 60px;
	left: 20px;
	width: 290px;
	z-index: 99;
}

#cms-offset, #cms-progress-type {
	position: absolute;
	top: 150px;
	left: 57px;
	width: 290px;
	z-index: 99;
}

.dtClassDetails {
	width: 100% !important;
	display: table !important;
}

.dtClassDetails thead {
	background: #b3b3b3;
}

.dtClassDetails thead tr:first-child {
	font-family: 'PT Sans Caption', '微軟正黑體', 'Microsoft JhengHei', Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	word-break: normal;
}

.dtClassDetails thead tr th {
	padding: 5px 10px 5px 10px !important;
	min-width: 150px !important;
	vertical-align: baseline !important;
	text-align: center;
	border-left: 1px solid white;
}

.dtClassDetails tbody tr td:not(:first-child) {
	text-align: center;
	border-left: 1px solid white;
}

.dtClassDetails tbody tr:not(.cms-header-summary) td:not(:first-child) {
	background: #f0f3f4;
}

.dtClassDetails thead tr th:first-child, .dtClassDetails thead tr td:first-child {
	width: 250px !important;
	min-width: 250px !important;
}

.dtClassDetails tbody tr {
	height: 45px !important;
}

.dtClassDetails .subcat_0 {
	background: #e6e6e6;
}

.dtClassDetails .subcat_1 {
	background: #cccccc;
}

.dtClassDetails .subcat_2 {
	background: #bfbfbf;
}

.dtClassDetails .subcat_3 {
	background: #8c8c8c;
}

.dtClassDetails .subcat_4 {
	background: #595959;
}

.cms-header-summary {
	background: #cccccc;
}

.cms-main {
	padding-top: 0px !important;
	min-height: 300px;
}

/* Terms of Service */
#terms {
    padding: 0px 20px !important;
}
#terms ul, #terms li {
    padding-left: 10px;
    padding-right: 10px;
}

#terms .container > ul > li {
    margin-bottom: 10px;
}

#terms p {
    text-indent: 1em;
}
#terms span:after {
    content: "\00a0 ";
}
#terms h2 {
    text-align: center;
    font-weight: bold;
    margin: 10px auto;
    font-size: larger;
}
 

@media screen and (max-width: 900px) {
    .cmsm-tab-label {
    	margin-left: 0px;
    }

    .cms-main {
    	padding-top: 150px !important;
    }

/*
	#cms-type {
		float: left;
	}

    #cms-offset, #cms-progress-type {
		position: relative;
		top: 60px;
		float: left;
    }
*/

    .dtClassDetails {
    	margin-top: 63px !important;
    }

    .cmsm-tab-link {
    	width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    .cmsm-tab-label {
    	margin-left: 0px;
    }

    .cms-main {
    	padding-top: 150px !important;
    }

	#cms-type {
		position: relative !important;
		width: 290px;
		left: 0px !important;
		top: 60px !important;
		float: none;
	}

    #cms-offset, #cms-progress-type {
		position: relative !important;
		width: 290px;
		left: 0px !important;
		top: 70px !important;
		float: none;
    }

    .dtClassDetails {
    	margin-top: 63px !important;
    }

    .cmsm-tab-link {
    	width: 100% !important;
    }

    .dynamic-week li {
    	width: 100%;
    }

    .dynamic-week li .FL {
    	width: 98px;
    }
    
    /* Terms of Service */
    #terms ul, #terms li {
        padding-left: 0px;
        padding-right: 0px;
        margin-bottom: 20px;
    }
}

pre.grammer-detail {white-space: pre-wrap;}

.quiz-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* common CSS */
p.default {margin: 0 0 10px;}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}
.color-ied-red {color: #de4646;}
.flex {
	display: flex;
}
.space-between{
	justify-content: space-between;
}

.toefl-writing .tooltip {
    font-size: inherit !important;
}