html {
    font-size : 16px;
    line-height: 24px;
    min-height: 100vh;
    font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
}

table {
  	font-size: 16px;
    line-height: 24px ;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 23px !important;
        line-height: 32px !important;
    }
    table {
    	font-size: 23px !important;
        line-height: 32px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
        line-height: 36px !important;
    }
    table {
    	font-size: 26.75px !important;
        line-height: 36px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important;
        line-height: 38px !important;
    }
    table {
    	font-size: 30px !important;
        line-height: 38px !important;
    }
    
}
@media only screen and (min-width: 569px){
    html {
        font-size: 33px !important;
        line-height: 40px !important;
    }
    table {
    	font-size: 33px !important;
        line-height: 40px !important;
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 36px !important; 
        line-height: 42px !important;
    }
    table {
    	font-size: 36px !important;
        line-height: 42px !important;
    }
} 

span {
	height: 1em;
}

ul {
	margin: 10px;
	padding: 10px;
}

.myBody{
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width:100%;
	min-width:320px;
	min-height: 95vh;
	padding-top: 0px;
	//background-image: url(../../image/layout/whiteColor.jpg);
	//background-image: url(../../image/layout/02.jpg);
	background-image: url(../../image/layout/bkg_blue.jpg);
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	background-attachment:fixed;
	//background-repeat: repeat;
	//background-position: top;
}

.div_normal {
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	width:95%;
}

.input_normal {
	padding: 4px 10px;
	font-size: 0.7em;
	margin: 4px 4px;
	box-sizing: border-box;
	border: 2px solid silver;
    border-radius: 4px;
    // border: none;
    // border-bottom: 2px solid red;
    background-color: #fafefc;
    font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
}
/*
input.text {
	font-size: 0.7em;
	padding: 4px 10px;
    border-radius: 4px;
    border-top: solid 1px #999999;
    border-left: solid 1px #999999;
    border-right: solid 1px #999999;
    border-bottom: solid 1px #cccccc;
    background: url('../../image/irs/inputbackgr.gif') top left no-repeat;
    font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
}
*/
.btn_center {
	margin:auto;
    display:block;
}

.btn_back {
	position: absolute;
	margin-top: 0.1em;
	margin-left: 0.3em;
	height: 1.6em;
	width: 1.1em;
	background-image: url('../../image/irs/btn_back.png');
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	cursor: pointer;
}

.btn_remove {
	position: absolute;
	right: 0.2em;
	top: 0.1em;
	height: 0.8em;
	width: 0.8em;
	background-image: url('../../image/irs/btn_close2.png');
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	cursor: pointer;
}

.btn_menu {
	position: absolute;
	margin-top: 0.2em;
	margin-right: 0.3em;
	right: 0.3em;
	height: 1.3em;
	width: 1.3em;
	background-image: url('../../image/irs/menu.png');
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	cursor: pointer;
}

.div_menu {
	position: absolute;
	margin-top: 1.8em;
	margin-right: 0.3em;
	right: 0.5em;	
	background-color: #ededf7;
	box-shadow: 5px 5px 5px #888888;
	border: 1px solid rgba(233, 214, 220, 0.64);
	z-index: 9999;
	color: #333;
	border-radius: 3px;
}

.ul_menu {
	font-size: 0.9em; 
	list-style-type: none;
}

textarea {
	max-width:90%;
}
/*
header {
    font-size: 1.2em;
    color: #222222;
    text-align: center;
    //background-color: #EAD9C2;
    background-color: rgba(227, 251, 253, 0.6);
    line-height:1.5em;
    height: 1.5em;
    vertical-align: middle;
    border-radius: 5px;
    margin-left: 10px;
    margin-right:10px;
    margin-top:10px;
}
*/

header {
    font-size: 1.2em;
    color: #222222;
    text-align: center;
    //background-color: #EAD9C2;
    background-color: rgba(214, 214, 238, 0.65);
    line-height:1.5em;
    height: 1.5em;
    vertical-align: middle;
	box-shadow: 0px 5px 5px #888888;    
}

table {
	border-collapse:collapse;
}

th, td {
	border: 1px solid #cccccc;
	padding: 4px;
}

th {
	font-size: 0.9em;	
}

tbody tr:nth-child(even) {
	//background-color: #feffe8;
	background-color: #f4f8ff;
}

tbody tr:nth-child(odd) {
	//background-color: #e7f1fa;
	background-color: #f1f1f1;
}

td {
	color: #333333;
}

table thead {
	border: 1px solid #cccccc;
	color: #f2f7f7;
	background-color: #0755a3;
}

.empty_table {
	border: 0px;
	color: #000000;
	background-color: rgba(0, 0, 0, 0.0);
}

tr.optionTr:nth-child(even) {
	padding-left: 4px;
	padding-right: 4px;
	//background-color: #feffe8;
	background-color: #f8f8f8;
}

tr.optionTr:nth-child(odd) {
	padding-left: 4px;
	padding-right: 4px;
	//background-color: #e7f1fa;
	background-color: #e8e8e8;
}

.div_ask {
	position: fixed;
	//left: 20%;
	//top: 10%;
	right: 10px;
	bottom:10px;
	width: 60%;
	//height: 60%;
	min-height: 420px;
	min-width: 160px;
	background-color: #EAF0F5;
	box-shadow: 5px 5px 5px #888888;
}

.div_notify {
	position: fixed;
	right: 10px;
	bottom: 10px;
	padding: 6px;
	color: #555;
	font-size: 0.8rem;
	border:1px solid #8ed9f6;
	//background-color: #EAF0F5;
	background-color: #e3f7fc;
	text-align: right;
	font-weight: bold;
	box-shadow: 5px 5px 5px #444;
	border-radius: 4px;
}

.div_float {
	position: fixed;
	z-index:99;
	top: 20%;
	width: 100%;
	text-align:center;
}

.div_float_inner {
	padding: 0.6em;
	width: 60%;
	min-width: 16em;
	margin:auto;
	background: #f5f9f0;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9fcf7), to(#f5f9f0));
    background: -moz-linear-gradient(#f9fcf7, #f5f9f0);
    background: -o-linear-gradient(#f9fcf7, #f5f9f0);
    background: linear-gradient(#f9fcf7, #f5f9f0);
	box-shadow: 5px 5px 5px #888888;
	border-radius: 3px;
}

.div_ask_content {
	margin: auto;
	width: 90%;
	height: 300px;
	overflow: auto;
	border: 1px solid #31706E;
	background-color: #F6F6F6;
	font-size: 0.6em;
}

/**學生提問區-製作類似對話框*/
.arrow_box {
	position: relative;
	background: #d7f3f7;
	border: 0px solid #0b0e33;
	word-break: break-all;
	margin-left: 20px;
	margin-right:20px;
	border-radius: 3px;
	margin-top: 4px;
	margin-bottom: 16px;
	box-shadow: 5px 5px 5px #888888;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 10%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(215, 243, 247, 0);
	border-bottom-color: #d7f3f7;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box:before {
	border-color: rgba(11, 14, 51, 0);
	border-bottom-color: #0b0e33;
	border-width: 11px;
	margin-top: -11px;
}

.ask_user_img, .ask_time_img {
	width: 0.7rem;
	height: 0.7rem;
}

.divStuInfo {
	margin-left: 10px;
	margin-top: 10px; 
}

.ask_user_img {
	background-image: url('../../image/irs/ask_user.png');
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;	
}

.ask_time_img {
	background-image: url('../../image/irs/ask_time.png');
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;	
}


.btn_submit {
	background: #ECDBC7;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#F1EBE4), to(#ECDBC7));
	background: -moz-linear-gradient(#F1EBE4, #ECDBC7);
    background: -o-linear-gradient(#F1EBE4, #ECDBC7);
    background: linear-gradient(#F1EBE4, #ECDBC7);
}

.div_listitem, .div_listitem2, .div_listitem3, .div_listitem4 {
	cursor: pointer;
	font-size: 0.8em;
	border: solid 1px rgba(227, 251, 253, 0.6);
    width: 90%;
    border-radius: 6px;
    margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left:10px;
	box-shadow: 3px 3px 3px #888888;
	color: #333;
}

.div_listitem {
	background: #f5ac49;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#fad6a5), to(#f5ac49));
    background: -moz-linear-gradient(#fbd39d, #f5ac49);
    background: -o-linear-gradient(#fbd39d, #f5ac49);
    background: linear-gradient(#fbd39d, #f5ac49);
}

.div_listitem2 {
	background: #d1ce87;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f8ffe8), to(#d5d187));
    background: -moz-linear-gradient(#f8ffe8, #d5d187);
    background: -o-linear-gradient(#f8ffe8, #d5d187);
    background: linear-gradient(#f8ffe8, #d5d187);
}

.div_listitem3 {
	background: #afaad0;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#dadbeb), to(#afaad0));
    background: -moz-linear-gradient(#dadbeb, #afaad0);
    background: -o-linear-gradient(#dadbeb, #afaad0);
    background: linear-gradient(#dadbeb, #afaad0);
}

.div_listitem4 {
	background: #aae0fb;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#dff0fd), to(#aae0fb));
    background: -moz-linear-gradient(#dff0fd, #aae0fb);
    background: -o-linear-gradient(#dff0fd, #aae0fb);
    background: linear-gradient(#dff0fd, #aae0fb);
}

.div_typeitem {
	background: #f5f9f0;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9fcf7), to(#f5f9f0));
    background: -moz-linear-gradient(#f9fcf7, #f5f9f0);
    background: -o-linear-gradient(#f9fcf7, #f5f9f0);
    background: linear-gradient(#f9fcf7, #f5f9f0);
	//cursor: pointer;
	font-size: 0.8em;
	border: solid 1px rgba(166, 166, 183, 0.6);
    width: 90%;
    border-radius: 3px;
    margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left:10px;
	box-shadow: 3px 3px 3px #888888;
}


.align_center {
	padding-left:0px;
	text-align:center;
}

.align_left {
	text-align:left;
}

.align_right {
	text-align:right;
}

.valign_middle {
	vertical-align: middle;	
}

.valign_top {
	vertical-align: top;	
}

select {
	/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
	border: 2px solid rgba(198, 199, 207, 0.73);
	/*很关键：将默认的select选择框样式清除*/
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/*在选择框的最右侧中间显示小箭头图片*/
	background-color: #e0e1e0;
	background: url(../../image/irs/arrow.png) no-repeat scroll right, linear-gradient(to bottom, #fafef9, #d0d1d0);
	background: url(../../image/irs/arrow.png) no-repeat scroll right, -webkit-gradient(linear, 0 0, 0 100%, from(#fafef9), to(#d0d1d0));
	background: url(../../image/irs/arrow.png) no-repeat scroll right, -moz-linear-gradient(#fafef9, #d0d1d0);
	background: url(../../image/irs/arrow.png) no-repeat scroll right, -o-linear-gradient(#fafef9, #d0d1d0);
	
	/*为下拉小箭头留出一点位置，避免被文字覆盖*/
	padding-right: 1.2em;
	padding-left: 0.4em;
	font-size: 0.6em;
	height: 1.6em;
	border-radius: 3px; 
	margin-left: 0.4em;
    font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "標楷體", DFKai-SB, sans-serif;
}

option {
	background-color: #f3f5f3;	
}

hr {
	margin: 10px;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }

/**產生遮罩用*/
.maskLayer {
	background-color: #9D9D9D;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	filter: alpha(opacity = 50);
	opacity: 0.5;
	z-index: 1;
	position: fixed;
}

.btn_search {
	font-size: 1em;
	width: 1.4em; 
	height: 1.4em; 
	background: url(../../image/irs/search.png);
	background-size:100% 100%; 
	cursor: pointer; 
	border: none;
}

/**radio美化部分
http://abgne.tw/css/apply-css3/css3-custom-radio-and-checkbox-button-style.html
*/
.radio_period input[type="radio"] {
	display: none; 
}

.radio_period input[type="radio"] + label {
	display: inline-block;
	background-color: #f1edea;
	cursor: pointer;
	padding: 5px 5px;
	color: #333;
	border-radius: 3px;
}

.radio_period input[type="radio"]:checked + label {
	background-color: #ee2c2c;
	color: #fff;
	border-radius: 3px;
}

/**radio&checkbox美化部分(label無文字版)*/
.radio_notext input[type="radio"] {
	display: none; 
}

.radio_notext input[type="radio"] + label  {
	display: inline-block;
	background: url('../../image/irs/bkg_unchecked.png');
	cursor: pointer;
	height: 0.8em;
	width: 0.8em;
	background-size: 100% 100%;
}

.radio_notext input[type="radio"]:checked+label {
	background: url('../../image/irs/chk_red.png');
	background-size: 100% 100%;
}

.radio_notext input[type="checkbox"] {
	display: none; 
}

.radio_notext input[type="checkbox"] + label  {
	display: inline-block;
	background: url('../../image/irs/bkg_unchecked.png');
	cursor: pointer;
	height: 0.8em;
	width: 0.8em;
	background-size: 100% 100%;
}

.radio_notext input[type="checkbox"]:checked+label {
	background: url('../../image/irs/chk_red.png');
	background-size: 100% 100%;
}

/**check-box美化部分*/
.chk_beauty input[type="checkbox"] {
    display: none;
}

.chk_beauty input[type="checkbox"] + label {
    display: inline-block;
    background-color: #efefef;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 3px;
}

.chk_beauty input[type="checkbox"]:checked + label {
    background-color: #f3d42e;
    border-radius: 3px;
}

.li_default { /*快捷選單項目加上底線*/
	border-bottom:1px solid #928181;
	margin-bottom: 0.3em;
}

.div_subqu {
	position: relative;
	margin: 0.4em;
	background-color: #fefede;
	box-shadow: 3px 3px 3px #888888;
	border: 1px solid silver;
}

.div_subqu_title {
	position: relative;
	height: 1.0em;
	background-color: #b46969;
}

.div_subqu_title:hover {
	background-color: #570000;
	cursor: move;
}

.div_subqu_edit {
	position: absolute;
	top: 1.2em;
	right: 0.3em;
	height: 2em;
	width:2em;
	background-image: url('../../image/irs/btn_edit.png');
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	cursor: pointer;
}

.img_subqu {
	height:4em;
	background-repeat:no-repeat;
	background-size:contain;
}

.div_qu_desc {
	padding-left: 0.4em;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	background-color: #fafae1;
	border: 1px solid #b9c8ab;
	border-radius: 3px;
}

.div_qu_desc2 {
	padding-left: 0.4em;
	padding-right: 2.4em;
}

.assign_stu_div {
    display: inline-block; 
	width: 6em;
	cursor: pointer;
	padding: 0.5em;
	margin: 10px;
	//border: 1px #555 solid;
	background-color: #e4e6f3;
	border-radius: 3px;
	vertical-align : top;
	box-shadow: 3px 3px 3px #888888;
}

.assign_stu_div_img_checked, .assign_stu_div_img_uncheck {
	width: 0.8em; height: 0.8em;
}

.assign_stu_div_img_checked {
	background: url('../../image/irs/chk_red.png');
	background-size: contain;
}

.assign_stu_div_img_uncheck {
	background: url('../../image/irs/bkg_unchecked.png');
	background-size: contain;
}

.menu_square_level1, .menu_square_level2 {
	display: inline-block;
	text-align: center;
	width: 5em;
	height:5em;
	font-size: 1.0em;
	margin-left: 15px;
	margin-right: 15px;
	padding: 0px;
}

.menu_square_level1 {
	line-height: 5em;
	font-size: 1.2em;
}

td.menu_td {
	width:5em;
	height:5em;
	border: 0px;
}

.span_func {
	font-size: 0.7em;
	color: #600000;
	//font-weight: bold;
}

/**jqplot-圓餅圖部分CSS更改*/
td.jqplot-table-legend {
	border: 0px;
	font-size: 0.6em;
}

.small_td {
	font-size:0.7em;
	line-height: 1.2em;
}

.mark_font {
	color: #304AA1;
	font-weight: bold;
}

.table_border {
	border:1px solid #b9d4f0; 
	padding:5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #fffff0;
}

.img_btn_add, .img_btn_del {
	font-size: 1em; width: 1em; height: 1em;
	background-color: rgba(0,0,0,0);
	cursor: pointer;	
	border: 0px;
}

.img_btn_add {
	background-image:url(../../image/irs/btn_add.png);
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
}

.img_btn_del {
	background-image:url(../../image/irs/btn_del.png);
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
}

.field_set {
	border: 2px solid #95a9b2; 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	//box-shadow: 3px 3px 3px #888888;
	/*
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#f0f0f0), to(#eaeaea));
    background: -moz-linear-gradient(#f0f0f0, #eaeaea);
    background: -o-linear-gradient(#f0f0f0, #eaeaea);
    background: linear-gradient(#f0f0f0, #eaeaea);
    */
}

.field_set legend {
    padding: 5px 10px;
    color: #333;
}


.btn_people {
	font-size: 1em;
	height: 1em;
	width: 1em;
	background-image: url('../../image/irs/btn_people.png');
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	background-color: rgba(0,0,0,0);
	cursor: pointer;	
	border: 0px;
}

/*(20170118)上傳圖片按鈕部分美化*/
.file {
    position: relative;
    display: inline-block;
    background: #d3e9fc;
    border: 0px solid #d1dcde;
    border-radius: 6px;
    padding: 4px 12px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    color: #333;
    border: 1px solid #bababa;
}

.file_head {
	display: inline-block;
	font-size: 1em;
	height: 1em;
	width: 1em;
	background-image: url('../../image/irs/pic_upload.png');
	-moz-background-size:100% 100%;
	-webkit-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;
	border: 0px;
}

.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}

.file:hover {
    background: #85d2fc;
    border-color: #30a2ed;
    color: #004974;
    text-decoration: none;
}

.th_chk, .td_chk {
	background-color: #eee;
	padding-left:8px;
	padding-right: 8px;
}