@charset "utf-8";
@import "../css/font.css?a=2";

.popup-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left:0;
}

html, body{min-width:100%; min-height:100%; box-sizing:border-box;}

*[data-before]:before{content:attr(data-before);}
*[data-after]:after{content:attr(data-after);}

div#popup{width:440px;height:250px;position:fixed;top:50%;left:50%;margin: -125px auto auto -220px;font-size:1.5em;line-height:120%;text-align:right;}
div#popup:before{content:""; background:rgba(0,0,0,.7); position:fixed; top:0; left:0; bottom:0; right:0; display:block;} 
div#popup:after{content:""; display:block; position:absolute; border-radius:2px; /* background:url(img/popup_bg.png) no-repeat; */top:0; left:0; right:0; bottom:0;} 
div#popup>*{position:relative;}
div#popup strong{display:block; margin:0 25px 0 auto; color:rgba(0,0,0,.7);}
div#popup strong b{display:block; font-size:1.5em; margin-bottom:.35em;}
div#popup p{border-bottom-left-radius:2px; border-bottom-right-radius:2px; background:#FFF; padding:10px;}
div#popup button{
    border:1px solid #808080; 
    border-radius: 24px;
    color:#808080; 
    background:#ffffff; 
    margin:0; 
    padding: 6px 31px!important; 
    cursor:pointer; 
    display:table-cell;
    font-size:18px;
}
div#popup button:hover {}

div#popup.msg *{margin:0 auto; padding:0;}
div#popup.msg:after{
    background:#FFF;
	border: 3px solid #01A09A;
	border-radius:12px;
	height:100px;    
}
div#popup.confirm:after{background-color:#ffde00; background-position:0 0;}
div#popup.confirm strong{width:440px; height:180px; background-color:#ffffff; text-align:center; margin: 0; padding:0.8em 0 0 0;}

div#popup.confirm.closable>#btn_close_popup{display:block; position:absolute; right:0; top:0; width:30px; height:30px; font-size:16px; font-weight:normal; text-align:center; line-height:30px; margin:5px; border-radius:15px; background:#FFF; color:#c1cdda; cursor:pointer; padding:0; z-index:4;}
div#popup.confirm.closable>#btn_close_popup:before{content:"\2573"; font-family:icon !important;}
div#popup.confirm.closable>#btn_close_popup:hover{opacity:.75;}

div#popup.start_test:after{background-position:0 -250px; background-color:#ffae00;}
div#popup.start_test strong{width:220px; height:180px; padding:0.5em 0 0 0; }
div#popup.start_test strong>b{text-align:left; font-size:1.2em;line-height:130%;}
div#popup.start_test strong>b>var{display:inline; font:inherit; font-size:1.1em; font-family:PMingLiU, Microsoft JhengHei, sans-serif; line-height:1em;}
div#popup.start_test strong>b>var:before,div#popup.start_test strong>b>var:after{font-size:.7em; vertical-align:bottom;}
div#popup.start_test strong>b>var:before{display:inline; font-size:.8em;}
div#popup.start_test strong>b>var:first-of-type:before,div#popup.start_test strong>b>var:last-of-type{display:block;}
div#popup.start_test strong>b>var:last-of-type{font-size:.8em; margin-top:.1em}

div#popup.emptylist:after{background-position:0 -500px; background-color:#ffae00;}
div#popup.emptylist strong{width:240px; height:200px; padding:1.5em 0 0 0; margin:0 20px 0 auto;}
div#popup.emptylist strong>b{line-height:110%; margin-bottom:.1em;}

div#popup.select_option{min-height:180px; height:auto;}
/* div#popup.select_option:after{background-color:#ffde00; background-image:none;} */
div#popup.select_option strong{width:auto; height:auto; padding:1.1em .25em 1em .25em; margin:0 auto; text-align:center; font-size:1.2em;}
div#popup.select_option strong var{font-size:.9em; padding:0 0 1em 0;}
div#popup.select_option strong var q{quotes:"" "";}
div#popup.select_option strong var q:before{position:relative; left:-.2em; top:-.4em; font-size:.8em; opacity:.8;}
div#popup.select_option strong var q:after{position:relative; right:-.2em; bottom:-.25em; font-size:.8em; opacity:.8;}
div#popup.select_option strong var:before{display:block; font-size:.7em; opacity:.9;}
div#popup.select_option strong>b{margin:0 auto; padding:.5em 0; line-height:inherit; font-size:1.15em;}

div#popup.create_success{height:auto;}
div#popup.create_success:after{background-color:#ffde00; background-image:none;}
div#popup.create_success strong{text-align:center; margin:2em auto 1.25em auto;}

div#popup.popform:after{background:none #FFF;border: 3px solid #01A09A;}
div#popup.popform{width:90%;max-width:800px;height:auto;margin:0 auto;padding:1em .5em .5em 1em;top: 1%;left:0;right:0;background:#FFF;}
div#popup.popform>*{display:block; position:relative; margin:0; padding:0; text-align:left; height:auto; max-height:55vh;}
div#popup.popform>form{line-height:150%; min-height:150px; overflow:auto; font-size:.7em;}
div#popup.popform>form>*{font-weight:normal;}
div#popup.popform>h2{font-size:1.3em; color:#01A09A; padding:0 0 .2em 0;}
div#popup.popform>h2>small{color: #01A09A;font-family: "cssFontOpenSansHKBold"; font-size:40px; padding-bottom:.5em; vertical-align:baseline;}
div#popup.popform>h2>small:before,div#popup.popform>h2>small:after{font-size:.75em; vertical-align:bottom;}
div#popup.popform[data-step=null]>h2>small{display:none;}
div#popup.popform>h2:empty~div{word-break:break-all; word-wrap:break-word;}

div#popup.popform dt, div#popup.popform dd{padding:.8em 0;}
div#popup.popform form#download_paper dt, div#popup.popform form#download_paper dd{padding:.8em 0;}
div#popup.popform dt{display:block; clear:both;}
div#popup.popform dt:before,div#popup.popform dt+dd:before{display:inline-block;position:relative;width: 99%;white-space:normal;float:left;}
div#popup.popform form#create_question dt:before,div#popup.popform dt+dd:before{width: 95%;}

div#popup.popform dd~dd, div#popup.popform dt+dd{display:table-cell;}
div#popup.popform *>label{display:inline-block;font-weight:normal;}
div#popup.popform dt[data-before]:hover{background:#F9F9F9;}
div#popup.popform dt[data-before]>select{width:95%; margin:0 0 0 auto; border-color:#CCC;}
div#popup.popform dt[data-before]>select+select{margin-top:.5em;/* margin-left:30%; */}
div#popup.popform form#create_question dt[data-before]>select+select{/* margin-left:20%; */}

div#popup.popform dt#question_type>label{width:32%;}
div#popup.popform dd>select{width:150px; margin-right:2em;}
div#popup.popform *:after, div#popup.popform *:before{font-size:inherit; white-space:nowrap;}
div#popup.popform dt input[data-after]{margin-right:20px;}
div#popup.popform dd input[data-after]{margin-right:20px;}
div#popup.popform input[data-after]:after{margin-left:1.2em; font-size:.7em; line-height:100%;}
div#popup.popform form#download_paper dt[data-before]{padding-left:200px;}
div#popup.popform form#download_paper dt[data-before]:first-of-type{padding-left:200px;}
div#popup.popform form#create_question div#text_editor{height:10em; border:1px solid #DDD; display:block;}
div#popup.popform form#download_paper dt>label{font-size:inherit; white-space:nowrap;}
div#popup.popform form#create_question h3.expand~div>div#text_editor{margin-bottom:.5em;}

/*font-size:.85em*/
div#popup.popform>form a{color:#82b800; font-size:1em; text-decoration:underline; margin-right:1em; display:inline-block;}
div#popup.popform>form a:hover{}
div#popup.popform>form h3{display:block; margin:.3em 0 .25em 0; color:#00a09a; font-size:1.1em;}
div#popup.popform div.buttons{text-align:center; padding:.2em 0 0 0;}
div#popup.popform div.buttons>button{
    background-color:#ffffff; 
    color:#808080; 
    padding:6px 31px; 
    width:auto; 
    display:inline-block;
    border: 1px solid #808080;
    border-radius:24px;
    font-family: "cssFontOpenSansHKRegular";
    font-size: 18px;
}
div#popup.popform button:nth-of-type(1){border-bottom-left-radius:2px; border-top-left-radius:2px;}
div#popup.popform button:nth-last-of-type(1){border-right:0; border-bottom-right-radius:2px; border-top-right-radius:2px;}

div#popup.popform div#finish_msg {
    display: none;
    text-align: center;
	color:#01A09A;
}
div#popup.popform div#finish_msg.show{display:block; padding:2em 0;}
div#popup.popform div#finish_msg.show:before{display:block; height:80%; text-align:center; font-size:2.2em; margin:.5em auto; color:#00a09a;}
div#popup.popform div#finish_msg.show>span>a{background:#82b800; color:#FFF; border:0 none; font-size:1em; border-top:.35em solid #82b800; border-bottom:.35em solid #82b800; padding:0 1.5em; margin:.5em auto; display:inline-block; width:auto; border-radius:2px; position:relative;}
div#popup.popform div#finish_msg.loading{background:url(img/loading.svg) no-repeat top center; background-size:auto 80%;}
div#popup.popform div#finish_msg.loading:before{color:rgba(0,0,0,0)}
div#popup.popform div#finish_msg.loading>span:first-of-type{display:inline;}
div#popup.popform div#finish_msg.loading>span:last-of-type{display:none;}
div#popup.popform div#finish_msg:not(.loading)>span:first-of-type{display:none;}
div#popup.popform div#finish_msg:not(.loading)>span:last-of-type{display:inline;}

div#popup.popform dl.dropdown{margin:0; display:inline-block;}
div#popup.popform dl.dropdown dt, div#popup.popform dl.dropdown dd{margin:0; padding:0;}
div#popup.popform dl.dropdown dt, div#popup.popform dl.dropdown dt>input, div#popup.popform dl.dropdown>dd{width:270px;}
div#popup.popform dl.dropdown>dd.show{height:8em;}
div#popup.popform dl.dropdown dt>input{}
div#popup.popform dl.dropdown dd{opacity:1; position:absolute; background:rgba(255,255,255,.95); border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-top:0 none; margin:-1px 0 0 0; height:0; overflow:auto;}
div#popup.popform dl.dropdown dd:empty{border:0 none;}
div#popup.popform dl.dropdown dd.show{border:1px solid #CCC;}
div#popup.popform dl.dropdown dd>*{display:block; padding:.25em 1em; border-top:1px solid #EEE;}
div#popup.popform dl.dropdown dd>*:hover{background:#DDD;}
div#popup>form p.two_column{display:inline-block; width:640px; line-height:130%; padding:.3em 0; vertical-align:top;}
div#popup>form p.two_column>label{width:32%; margin:0; display:inline-block;}
div#popup>form#upload_resources>p{font-size:.85em; display:block; opacity:.6;}
div#popup>form#upload_resources:after{font-size:.85em; display:block; opacity:.6;}
div#popup>form>span{font-size:.75em;}
div#popup>form input[type=file]{border:1px solid #DDD;}
div#popup>form>h3[class]{margin-top:1em; line-height:120%;}
div#popup>form>h3[class]:after, div#popup>form>h3[class]:before{border-bottom:1px solid; cursor:pointer;}
div#popup>form>h3[class]:after{background:#00a09a; color:#FFF; font-family:PMingLiU, Microsoft JhengHei, sans-serif !important; display:inline-block; width:1em; height:1em; text-align:center; padding:.1em; margin-left:.5em; border-radius:1em; line-height:20px; font-size:20px;}
div#popup>form>h3.collapse:after{content:"＋";}
div#popup>form>h3.collapse+*{display:none;}
div#popup>form>h3.expand:after{content:"－";}
div#popup>form>h3.expand+*{display:block; padding:0; line-height:inherit; font:inherit; padding-bottom:.5em;}
div#popup>form#download_paper label>*{font-weight:normal;}
div#popup>form#gen_question dt,div#popup>form#gen_question dd{display:inline-block; width:18%; padding:0.6em 0; margin:0; border-bottom:1px dashed #CCC;}
div#popup>form#gen_question dt{width:25%; padding-left:0.5em}
div#popup>form#gen_question dd:before, div#popup>form#gen_question dd:after{position:static;display:inline;}
div#popup>form#gen_question>:nth-last-child(1),div#popup>form#gen_question>:nth-last-child(2),div#popup>form#gen_question>:nth-last-child(3),div#popup>form#gen_question>:nth-last-child(4),div#popup>form#gen_question>:nth-last-child(5){border-bottom:0 none;}
div#popup>form#gen_question input[type=number]{line-height:100%; text-align:center;}

div#popup:before{z-index:1;}
div#popup>*{z-index:3;}
div#popup:after{z-index:2;}
div#popup{z-index:9999999;}
div#popup.popform dl.dropdown dd{z-index:9999;}
div#popup>form input,div#popup>form select{z-index:2;}

/*
html[lang=en], html[lang=en]>body:not(.exercise),
html[lang=en] div#popup.popform>form h3,
html[lang=en] body.exercise section>div.bottom_button,
html[lang=en] body.check section div[id^=answers]>button,
html[lang=en] div.legal{font-family:Times New Roman, sans-serif;}
*/
html[lang=en], html[lang=en]>body:not(.exercise),
html[lang=en] div#popup.popform>form h3,
html[lang=en] body.exercise section>div.bottom_button,
html[lang=en] div.legal{font-family:Times New Roman, sans-serif;}

html[lang=en] div#popup.popform div.buttons>button,
html[lang=en] div#popup>form#gen_question dt,html[lang=en] div#popup>form#gen_question dd,
html[lang=en] div#popup>form#gen_question dd:before, html[lang=en] div#popup>form#gen_question dd:after{font-family: Times New Roman, sans-serif; font-weight:bold; text-shadow:0 0 0;}

html[lang=en] strong, html[lang=en] strong>*, html[lang=en] body h1, html[lang=en] h2, html[lang=en] button,
html[lang=en] div#popup button,
html[lang=en] div#popup.select_option strong var:before{font-family: Times New Roman, sans-serif; font-weight:bold;}
html[lang=en] body#login form>a:not(:last-child),
html[lang=en] div#popup.popform div#finish_msg.show:before,
html[lang=en] div#popup.popform *:after, html[lang=en] div#popup.popform *:before,
html[lang=en] div#popup>form#gen_question dt{font-family: Times New Roman, sans-serif; font-weight:bold; text-shadow:none;}
html[lang=en] div#popup.start_test strong>b>var:before, html[lang=en] div#popup.start_test strong>b>var:after{font-family: Times New Roman, sans-serif; font-weight:bold;}

/*
html[lang=en] header>a.icon{font-size:.8em !important;}
html[lang=en] header>a#btn_lang{line-height:26px;}
html[lang=en] header>a:not(.icon), html[lang=en] *[data-subject] *, html[lang=en] *[data-subject="chinese"], html[lang=en] .popform *:before, html[lang=en] select{font-family: Times New Roman, sans-serif;}
*/
html[lang=en] th{line-height:120%; font-weight:bold; font-size:.9em;}
html[lang=en] body#login form{font-weight:bold;}
html[lang=en] div#popup, html[lang=en] div#popup>*:not(form), html[lang=en] div#popup>*:not(form) *:before, html[lang=en] div#popup>*:not(form) *:after{font-family:Times New Roman, sans-serif !important; font-weight:normal !important; letter-spacing:-.03em;}

div#finish_msg {
    display: none;
    text-align: center;
	color:#01A09A;
}
div#finish_msg.show:before{display:block; font-size:1.3em; line-height:1em; margin:.5em 0 auto auto; color:inherit;}
div#finish_msg.show>span>a{background:#82b800; color:#FFF; border:0 none; font-size:1em; border-top:.35em solid #82b800; border-bottom:.35em solid #82b800; padding:0 1.5em; margin:.5em auto; display:inline-block; width:auto; border-radius:2px; position:relative;}
div#finish_msg.loading{background:url(img/loading.svg) no-repeat top center; background-size:auto 80%;}
div#finish_msg.loading:before{color:rgba(0,0,0,0)}
div#finish_msg.loading>span:first-of-type{display:inline;}
div#finish_msg.loading>span:last-of-type{display:none;}
div#finish_msg:not(.loading)>span:first-of-type{display:none;}
div#finish_msg:not(.loading)>span:last-of-type{display:inline;}

div#finish_msg.show:before {font-family:sans-serif, Microsoft JhengHei, PMingLiU; font-weight:bold; text-shadow:none;}
html[lang=en] div#finish_msg.show:before {font-family:sans-serif, Microsoft JhengHei, PMingLiU; font-weight:bold; text-shadow:none;}


@media screen and (max-width:760px) {
	div#popup.popform dt:before, div#popup.popform dt+dd:before{display:block; width:95%; float:none;}
	div#popup.popform dt[data-before]>select{width:95%;}
	div#popup.popform dt[data-before]>select+select{margin-left:0;}
}
@media screen and (max-width: 760px) {	div#popup.popform dt input{margin-left: .6em !important;}}


div#popup.select_option strong {
	background-color: #FFFFFF;
	width: auto;
    height: auto;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0 auto;
    padding: 10px;
    font-size:22px;
	line-height:30px;
	text-align: center;
}
div#popup.select_option a {
    text-decoration: underline;
}
div#popup.select_option strong>b {
	margin: 0 auto;
    font-size:22px;
	line-height:30px;
	padding: 10px 0;
}
#popup_alert_msg{
	margin: 0 auto;
    padding-bottom: 0em;
    font-size:22px;
	line-height:30px;
}

div#popup.select_option {
	border:none;
	color: rgba(0,0,0,.7);
}
div#popup.select_option p {
	text-align: center;
}
div#popup.select_option:not(.popform) button {
    border: 1px solid;
    border-radius: 5px;
    border-color: #3a83d8;
    background: #3a83d8;
    color: #FFF;
    max-width: 45%;
    min-width: 45%;
    width: auto !important;
    padding: .4em .1em;
    margin: 0 1%;
    font-weight: normal;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 20px;
	text-align: center;
}
div#popup.select_option:not(.popform) button:hover {
    border-color: #00c4d6;
    background: #00c4d6;
	transition:all 0.2s;
}
div#popup.select_option:not(.popform)>* {
    text-align: center;
    padding: 0px 10px 10px 10px;
    word-wrap: break-word;
}
div#popup.select_option:not(.popform)>*:first-child:not(#btn_close_popup) {
    padding-top: 20px;
}
div#popup.select_option:not(.popform)>*:last-child {
    padding-bottom: 20px;
}
/*
body.exercise{height:100%; overflow:hidden;}
body.exercise:before{content:""; display:block; position:fixed; top:0; left:0; right:0; bottom:0;}
*/
/*
body.exercise section{display:inline-block; width:auto; height:inherit; color:rgba(0,0,0,.7); background:#FFF; padding:0; border-radius:2px; position:absolute; bottom:0; top:0; right:0; left:48px;}
body.exercise section>*{display:inline-block; width:auto; position:absolute; left:auto; right:auto; top:auto; bottom:auto; transform-origin:top left;}
*/
/*
body.exercise section div.qnum>q:before, body.exercise section .qnum>q:after{font-size:.75em; letter-spacing:.1em; vertical-align:baseline; position:relative;}
*/
body.exercise section div.top_button{top:10px; right:10px; height:30px;}
body.exercise section div.top_button>*{color:#555; border-radius:2px; border:1px solid #d6d6d6; padding:2px 5px 0 0; margin:0 0 0 2px; display:inline-block; height:30px; vertical-align:bottom; overflow:hidden;}
html[lang=en] body.exercise section div.top_button>*{font-size:.95em;}
body.exercise section div.top_button>*.icon{cursor:pointer;}
body.exercise section div.top_button>*.icon:before{opacity:.3; font-size:26px; line-height:26px; padding:0 5px 0 0;}
body.exercise section div.top_button>*.icon.related:before{margin:0 5px 0 10px;}
body.exercise section div.top_button>*.icon.undo:before{margin:0 5px 0 10px;}
body.exercise section div.top_button>*.icon.redo:before{margin:0 5px 0 10px;}
body.exercise section div.top_button>*.button_tag, body.exercise section div.top_button>*.icon.related, body.exercise section div.top_button>*.icon.undo, body.exercise section div.top_button>*.icon.redo{margin:0;border-radius:0; /* border-right-width:0; */ border-left-width:0;}
body.exercise section div.top_button>*.button_tag{border-radius:2px;}
body.exercise section div.top_button>*.icon.related:after, body.exercise section div.top_button>*.icon.undo:after{content:"";border-right:1px solid #DDD; position:relative; top:-14px; left:-1px; height:10px; display:inline-block;}
body.exercise section div.top_button>*.button_tag{border-left-width:1px;}
body.exercise section div.top_button>*.button_tag:hover{opacity:1;}
body.exercise section div.top_button>*.button_tag:before{font-size:.85em; position:relative; top:-.55em;}
body.exercise section div.top_button>*.icon.related{border-right:0 none;border-left:0 none;}
body.exercise section div.top_button>*.icon.related, body.exercise section>div.top_button>*.icon.undo{margin:0 -1px;}
body.exercise section div.top_button>*.icon.redo{border-right-width:1px; border-top-left-radius:2px; border-bottom-left-radius:2px;}
/* body.exercise section div#frameBoxQus{position:absolute;top:45px;bottom:50px;left:20px;right:10px;width:auto;display:block;height:auto !important;max-width:inherit;overflow: auto;clear:both;white-space:normal;font-size:1.3em;line-height:150%;padding:0;} */
body.exercise section div#frameBoxQus{width:auto;display:block;/*height:auto !important;*/max-width:inherit;overflow: auto;clear:both;white-space:normal;/* font-size:1.3em;line-height:150%; */padding:0;}

body.exercise section div.question{display:block;}
body.exercise section div.question>form{word-spacing:0;}
body.exercise section div.question *.icon.play_sound{display:inline-block; width:1em; height:1em; border:1px solid #CCC; border-radius:5px; vertical-align:top; box-sizing:content-box; padding:5px; margin:0 2px;}
body.exercise section div.question *.icon.play_sound:before{opacity:.7;}
body.exercise section div.question *.icon.play_sound.on, body.exercise section div.question *.icon.play_sound.on:hover{background-color:#CCC; opacity:1;}
body.exercise section div.question *.icon.play_sound.on:before{opacity:1;}
body.exercise section div.question.MC_point>*:first-child{padding-bottom:.2em;}
body.exercise section div.long_question>div#student_answer{border:1px solid #DDD; padding:10px; margin:0 0 10px 0; font-size:.9em; font-weight:normal; height:50%;; overflow-y:auto; line-height:150%;}
body.exercise section div.question.group>*.left{position:fixed; top:120px; bottom:120px; width:500px; overflow:auto; display:inline-block; margin:0 auto 0 0;}
body.exercise section div.question.group>*:not(.left){position:relative; width:400px; margin:0 0 0 520px; display:block;}
body.exercise section div.question.group>*.left+*{margin-top:.5em;}
body.exercise section div.question.group>*{padding-bottom:.25em}

.question *[question], div[id^=answers]>*:not(button), div#popup.popform>*:not(h2):not(.buttons):not(form), h2.hints~div:not([class]){line-height:1.75em;}

/*check answer / marking*/
body.check section.correct .qnum>q>.score:before{color:#01770f;}
body.check section.wrong .qnum>q>.score:before{color:#c22a2a;}
body.check section div.question{/* height:55% !important;*/ margin-bottom:1%;}
body.check div.question mark{position:relative;}
body.check section>div[id^=answers]{font-size:1.3em; left:10px; right:10px; height:auto !important;}
body.check section>*>div[id^=answers]{position:relative; width:100%;}
body.check section div[id^=answers]{/* height:45%; */padding-top:10px;background:#FFF;}
body.check section div[id^=answers]>button{background:#536f8a; color:#FFF; margin-top:-30px; padding:5px 10px; padding-bottom:0; border:1px solid #e9e9e9; border-bottom:0 none; border-radius:2px; border-bottom-left-radius:0; border-bottom-right-radius:0; text-shadow:none; bottom:-1px; position:relative;}
/* body.check section div[id^=answers]>*:not(div){margin-top:-30px; float:left;} */
body.check section div[id^=answers]>div{display:none;}
body.check section div[id^=answers].explanation>button.explanation,body.check section div[id^=answers].model_answer>button.model_answer,body.check section div[id^=answers].feedback>button.feedback,
body.check section div[id^=answers].feedback_pos>button.feedback_pos,
body.check section div[id^=answers].feedback_neg>button.feedback_neg,
body.check section div[id^=answers].comment>button.comment,body.check section div[id^=answers].hint>button.hint,body.check section div[id^=answers].reference>button.reference
{/* background:#FFF; color:#666; font-weight:bold; cursor:default; */
    padding: 5px 20px 0 20px;
    border-bottom: 0;
    background: #dff1f0;
    color: #444;
    cursor:pointer;
    margin-left:5px;
    margin-right:5px;
    /* margin-top:10px; */
    border-radius: 5px 5px 0px 0px;
    transition:all 0.2s;
}
body.check section div[id^=answers].explanation>button.explanation:not(.selected):hover,body.check section div[id^=answers].model_answer>button.model_answer:not(.selected):hover,body.check section div[id^=answers].feedback>button.feedback:not(.selected):hover,
body.check section div[id^=answers].feedback_pos>button.feedback_pos:not(.selected):hover,
body.check section div[id^=answers].feedback_neg>button.feedback_neg:not(.selected):hover,
body.check section div[id^=answers].comment>button.comment:not(.selected):hover,body.check section div[id^=answers].hint>button.hint:not(.selected):hover,body.check section div[id^=answers].reference>button.reference:not(.selected):hover
{
    background: #d9fff8;
    padding: 5px 20px 0 20px;
    /* margin-top:5px; */
}
body.check section div[id^=answers].explanation>button.explanation:not(.selected):active,body.check section div[id^=answers].model_answer>button.model_answer:not(.selected):active,body.check section div[id^=answers].feedback>button.feedback:not(.selected):active,
body.check section div[id^=answers].feedback_pos>button.feedback_pos:not(.selected):active,
body.check section div[id^=answers].feedback_neg>button.feedback_neg:not(.selected):active,
body.check section div[id^=answers].comment>button.comment:not(.selected):active,body.check section div[id^=answers].hint>button.hint:not(.selected):active,body.check section div[id^=answers].reference>button.reference:not(.selected):active
{
    background: #ffffff;
}
body.check section div[id^=answers].explanation>button.selected:checked,body.check section div[id^=answers].model_answer>button.selected,body.check section div[id^=answers].feedback>button.selected,
body.check section div[id^=answers].feedback_pos>button.selected,
body.check section div[id^=answers].feedback_neg>button.selected,
body.check section div[id^=answers].comment>button.selected,body.check section div[id^=answers].hint>button.selected,body.check section div[id^=answers].reference>button.selected
{
    background: #dff1f0;
    position: relative;
    border-radius: 5px 5px 0px 0px;
    padding: 10px 20px 10px 20px;
    margin-top:0px;
}
  
html[lang=en] body.check section div[id^=answers].explanation>button.explanation,
body.check section div[id^=answers].model_answer>button.model_answer,
body.check section div[id^=answers].feedback>button.feedback,
body.check section div[id^=answers].feedback_pos>button.feedback_pos,
body.check section div[id^=answers].feedback_neg>button.feedback_neg,
body.check section div[id^=answers].comment>button.comment,
body.check section div[id^=answers].hint>button.hint,
body.check section div[id^=answers].reference>button.reference
{word-spacing:1px;}
body.check section div[id^=answers].explanation>div.explanation,
body.check section div[id^=answers].model_answer>div.model_answer,
body.check section div[id^=answers].feedback>div.feedback,
body.check section div[id^=answers].feedback_pos>div.feedback_pos,
body.check section div[id^=answers].feedback_neg>div.feedback_neg,
body.check section div[id^=answers].comment>div.comment,
body.check section div[id^=answers].hint>div.hint,
body.check section div[id^=answers].reference>div.reference
{/* display:block;padding:10px;border:1px solid #E9E9E9;background-color:#FFF;background-clip:content-box;height: auto; */ /* overflow: hidden; */ /*clear:both;*/
    display:block;
    clear:both;
    height: auto;
    padding: 15px;
    width: 100%;
    background: #dff1f0;
    border-radius: 5px 5px 5px 5px;
    min-height:100px;    
}

/* Edmond edited 20170622 */
body.check section div[id^=answers].explanation>div.explanation>p>img,
body.check section div[id^=answers].model_answer>div.model_answer>p>img,
body.check section div[id^=answers].feedback>div.feedback>p>img,
body.check section div[id^=answers].feedback_pos>div.feedback_pos>p>img,
body.check section div[id^=answers].feedback_neg>div.feedback_neg>p>img,
body.check section div[id^=answers].comment>div.comment>p>img,
body.check section div[id^=answers].hint>div.hint>p>img
{max-width: 99%}

body.check section div[id^=answers].comment>div.comment{overflow:hidden;}
body.check section>div[id^=answers]>div{height:inherit !important;}
body.check section div[id^=answers]>div>p{padding:.1em .5em;}
body.check section div[id^=answers] a{color:#82B800 !important; text-decoration:underline;}

/*check answer - student*/
body.check section mark{display:block; width:130px; height:130px; margin:-110px 20px 0 auto; background:url(img/student/exercise/mark.png) no-repeat transparent;}
body.check section.correct mark{width:102px;height:102px;background:url(img/student/exercise/mark_right.png) no-repeat transparent;background-size:102px;}
body.check section.wrong mark{width:102px;height:102px;background:url(img/student/exercise/mark_wrong.png) no-repeat transparent;background-size:102px;}
body.check section.correct.wrong mark{width:130px;height:130px;background:url(img/student/exercise/mark.png) no-repeat transparent;background-position:-260px 0;background-size:auto;}
/*
body.check section>div[id^=answers]>div{position:absolute; top:29px; bottom:0; left:0; right:0;}
body.check section>div[id^=answers]>div>p{height:100%, overflow:auto; padding:5px;}
body.check section>div[id^=answers]>a{display:inline-block; margin:0 0 .1em 1em; font-size:.85em;}
*/

/*check answer - teacher*/
body.exercise section mark{display:block; position:absolute; width:130px; height:130px; right:0; margin: -40px 20px 0 auto; background:url(img/student/exercise/mark.png) no-repeat transparent;}
body.exercise section mark.correct{width:102px;height:102px;background:url(img/student/exercise/mark_right.png) no-repeat transparent;background-size:102px;}
body.exercise section mark.wrong{width:102px;height:102px;background:url(img/student/exercise/mark_wrong.png) no-repeat transparent;background-size:102px;}
body.exercise section mark.correct.wrong{width:130px;height:130px;background:url(img/student/exercise/mark.png) no-repeat transparent;background-position:-260px 0;background-size:auto;}
/*
body.exercise section>div[id^=answers]>div{position:absolute; top:29px; bottom:0; left:0; right:0;}
body.exercise section>div[id^=answers]>div>p{height:100%, overflow:auto; padding:5px;}
body.exercise section>div[id^=answers]>a{display:inline-block; margin:0 0 .1em 1em; font-size:.85em;}
*/

/*Question Type Formal*/
div.question label{line-height:130%; display:inline-block;}
div.question.MC_point>p{font-weight:bold;}
div.question.MC_point>label{margin:.25em 0; text-indent:-1.35em; padding-left:1.35em;}
div.question.MC_point>label>input{margin-right:.5em;}

.video_duration_label {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 10;
    background-color: #eeeeee;
    color: #000000;
}
  
table tr>th.sortable{/* white-space:nowrap; */padding-left:20px;}
table tr>th a[class*="sort"]{opacity:.5; display:inline-block; width:22px; height:22px; line-height:22px; border-radius:2px; margin:0 5px; text-align:center; cursor:pointer;}
table tr>th a[class*="sort"]:hover{opacity:.8;}
table tr>th a[class*="sort"].active{opacity:1;}
table tr>th a[class*="sort"]:before{content:"▼"; font-size:.8em; font-family:icon !important;}
table tr>th a.sort_up:before{content:"▲";}
table tr>th a.sort_btn:before{content:"↕";}
  
#top_errMessage:not(:empty){background:#E20000; display:block; max-width:1024px; margin:0 auto 0 auto; padding:.5em .5em; font-size:1em; font-weight:bold; color:#FFF;}

/* Legal: terms + privacy */
div.legal{height:65vh; overflow:auto; line-height:150%; padding:.5em 1em 2em .25em !important; margin:1em 0 0 0; position:relative;}
div.legal, div.legal *{font-weight:normal !important; font-size:16pt !important; line-height:24pt;}
div.legal>*{display:block;}
div.legal>*:before{display:block; font-weight:bold; margin:1.5em 0 .25em 0;}
div.legal ol{padding:.25em 0 0 1.6em;}
div.legal li{margin:0 0 .25em .5em;}
div.legal>*>li{margin:0 0 1em .5em;}
div.legal ol ol{list-style:lower-latin;}
html[lang=en] div.legal{font-size:.6em; line-height:140%;letter-spacing:0 !important;}
html[lang=en] div.legal>*:before{zoom:1.2;}

/* icons */
.icon:before, .icon:after{display:inline; font-family:icon !important; color:inherit;}
.icon.white{color:#FFF;}
.icon.black{color:#333;}

.icon.tag:before{content:"\2605";}
.icon.tag.color:before{color:#FFD200;}
.icon.hint:before{content:"\26ab";}
.icon.hint.color:before{color:#E26215;}
.icon.edit:before{content:"\221a";}
.icon.fullscreen:before{content:"\78";}
.icon.window:before{content:"\203b";}
.icon.remove:before{content:"\2573";}
.icon.delete:before{content:"\2573";}
.icon.related:before{content:"\1f503"; margin:0 5px 0 10px;}
.icon.undo:before{content:"\21ba"; margin:0 5px 0 10px;}
.icon.redo:before{content:"\21bb"; margin:0 5px 0 10px;}
.icon.add:before{content:"\2199";}
.icon.copy:before{content:"\29c9";}
.icon.note:before{content:"\221a";}
.icon.ans_guide:before{content:"!";}
.icon.play_sound:before{content:"\1f50a";}
.icon.uploaded:before{content:"\21a5";}
.icon.search:before{content:"\1f50d";}
.icon.report:before{content:"\1f4c8";}
.icon.exercise:before{content:"\2261";}
.icon.attachment:before{content:"\1f4ce";}
.icon.export:before{content:"\2197";}
.icon.show_answer:before{content:"\2030";}

.btn_loadMore{
	width: 100%;
	padding: 0px 10px 0px 0px;
	font-size:16px;
    display: none;
}
.btn_loadMore a{
	background-color: #dcdcdc;
	text-align: center;
	display: block;
	width: 100%;
	margin-right: auto;
	margin-left: 5px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-radius: 5px;
	color: #536f8a;
}