html {
	position: relative;
	min-height: 100%;
}

body {
	font-family: "Arial","Helvetica","微軟正黑體","Microsoft JhengHei","黑體","SimHei","儷黑 Pro","LiHei Pro Medium","蘋果儷中黑","Apple LiGothic Medium","新細明體","PMingLiU","細明體","MingLiU","標楷體","DFKai-sb","sans-serif" !important;
	font-size: 16px;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	/*margin-bottom: 80px;*/
}

a, a:link, a:active, a:visited {
	text-decoration: none; 
}

.icon_logo {
	height: 50px;
}

.content {
	/*min-height: calc(100vh - 120px);*/
	margin-bottom: 80px;
}

.progress {
	font-size: 1rem;
}


.card-title {
	color: #4472c4;
}

.card-footer {
	background: #fff;
    border-top: 0px;
}

button.Cbtn{
	padding: 10px 25px;
	background-color: #DADADA;
	color: #666;
	margin: 10px 2px;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
	border-radius: 3px;
}

button.Cbtn-primary{
	background-color: #5AADF2;
	color: #FFF;
}

button.Cbtn-primary:hover{
	background-color: #7dbef5;
	color: #FFF;
}

button.Cbtn-danger{
	background-color: #fc5a5a;
	color: #FFF;
}

button.Cbtn-danger:hover{
	background-color: #fd7676;
	color: #FFF;
}

.card-header-title {
	font-size: 1.35rem;
	min-width: 90px;
}

.card-header-third {
    margin-top: -20px;
	margin-left: 10px;
	margin-right: 10px;
	box-shadow:1px 5px 15px #a2a2a2;
	background-color: #8BC6EC;
	background-image: linear-gradient(135deg, #9599E2 0%, #8BC6EC   100%);
}

.card-section-third span i{
	background: linear-gradient(-90deg, #F4D00C, #F2635F); 
}
.card-section{
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.30), 0 2px 10px 0 rgba(0,0,0,.09);
}

.card-section:hover{
	box-shadow:1px 1px 20px #d2d2d2;
}

.card-section:hover > .card-header-third {
	background: #9599E2;
}

.que_show_title {
	color: #9599E2;
    font-weight: bold;
	font-size: 2.3rem;
    padding-bottom: 14px !important;
}

.circle-number {
    border: 0.1em solid #D47936;
	background: #D47936;
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
}

.circle-number p {
	margin-top: 0.10em;
    font-size: 1.15em;
    font-weight: bold;
    font-family: sans-serif;
    color: #fff;
}

.btn-glyphicon {  padding:8px 10px; background:#ffffff; margin-right:4px; }
.icon-btn { padding: 3px 15px 3px 4px; border-radius:50px;}
.img-circle { border-radius: 50%; }


.icon-btn-correct { 
	color: #fff;
    background-color: #aa96da;
    border-color: #aa96da;
}

.text-correct {
	color: #aa96da!important;
}
 
.icon-btn-wrong { 
	color: #fff;
    background-color: #ffaaa5;
    border-color: #ffaaa5;
}

.text-wrong {
	color: #ffaaa5!important;
}

.icon-btn-incomplete { 
	color: #fff;
    background-color: #CD5C5C;
    border-color: #CD5C5C;
}

.text-incomplete {
	color:#CD5C5C!important;
}

.fa-padding {
	padding-right: 8px;
}

.fa-padding-lg {
	padding-right: 12px;
}

.fa-warnning {
	color: #FA8072;
	padding-right: 18px;
	font-size: 3rem
}

.modal-header {
	border-bottom: 0px;
}

.modal-footer {
	border-top: 0px;
}



.btn-submit {
	font-size: 1.6rem;
}



.crd-pool {
	box-shadow: 0 1px 4px 0 rgba(0,0,0,.14);
}
	
.crd-pool-unsubmit {
	border-top: 4px solid #CD5C5C;
}

.crd-pool-submit-01 {
	border-top: 4px solid #aa96da;
}

.tbl-textarea {	
	border: none;
	border-radius: 20px;
	outline: none;
	padding: 10px;
	font-size: 1em;
	color: #676767;
	transition: border 0.5s;
	-webkit-transition: border 0.5s;
	-moz-transition: border 0.5s;
	-o-transition:der-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	border: solid 2px #98d4f3;	
	-webkit-box-sizing:bor
}
.tbl-textarea:focus{
	border: solid 3px #77bde0;	
}

.tbl-textarea:disabled {
	background: #fff;
}


.td-nowarp {
	white-space: nowrap;
}

.crd-result {
	box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08); 
	border-radius: 16px;
}

.bubble {
    background-color: #fff0f5;
    background-image: -webkit-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:    -moz-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:     -ms-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:      -o-linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    background-image:         linear-gradient(top, hsla(0,0%,100%,.5), hsla(0,0%,100%,0));
    border-radius: 5px;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5), 3px 3px 0 hsla(0,0%,0%,.1);
    color: #333;
    display: inline-block;
    padding: 15px 25px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
	width: 100%;
}

/*
.bubble:after, .bubble:before {
    border-bottom: 25px solid transparent;
    border-right: 25px solid #fff0f5;
    bottom: -25px;
    content: '';
    position: absolute;
    right: 25px;
}

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
}
*/

.img-screen {
	border-radius: 12px;
}

.img-qrcode {
	box-shadow: inset 0 0 4px rgba(163,139,217, .9);
	border-radius: 20px;
	cursor: pointer;
	transition: 0.3s;
}

.img-qrcode:hover {
	opacity: 0.7;
}

.qrCodeModal {
	display: none;  
	position: fixed;  
	z-index: 1;  
	padding-top: 80px; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;  
	overflow: auto;  
	background-color: rgb(0,0,0);  
	background-color: rgba(0,0,0,0.9); 
}

.qrCodeModal-content-num {
	color: #fff;
	text-align: center;
	padding-bottom: 12px;
}

.qrCodeModal-content-text {
    background: white;
    margin-top: 10px;
	margin-left: 30px;
	margin-right: 30px;
    padding-top: 30px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 20px;
	color: #e610d4;
}

.qrCodeModal-content-text li {
	padding-bottom: 40px;
}

.qrCodeModal-content {
	margin: auto;
	display: block;
	width: 40%;
}

.fullimage-content {
	margin: auto;
	display: block;
	width: 90%;
}

.fullitemimage-content {
	margin: auto;
	display: block;
}

.qrCodeModal {  
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)} 
	to {-webkit-transform:scale(1)}
}

@keyframes zoom {
	from {transform:scale(0)} 
	to {transform:scale(1)}
}

.qrCodeModalClose {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.qrCodeModalClose:hover,
.qrCodeModalClose:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

@media only screen and (max-width: 700px){
	.modal-content {
		width: 100%;
	}
	
	.qrCodeModal-content {
		width: 80%;
	}

}

.fab {
	width: 60px;
	height: 60px;
	background-color: #03A9F4;
	border-radius: 50%;
	box-shadow: 0 6px 8px 0 #666;
	font-size: 24px;
	line-height: 60px;
	color: white;
	text-align: center;
	position: fixed;
	right: 30px;
	bottom: 100px;
	transition: all 0.1s ease-in-out;
	cursor: pointer;
}

.fab:hover {
   box-shadow: 0 6px 14px 0 #666;
   transform: scale(1.07);
}


.tooltip-inner {
	font-family: "Arial","Helvetica","微軟正黑體","Microsoft JhengHei","黑體","SimHei","儷黑 Pro","LiHei Pro Medium","蘋果儷中黑","Apple LiGothic Medium","新細明體","PMingLiU","細明體","MingLiU","標楷體","DFKai-sb","sans-serif" !important;
    background-color: rgba(3, 169, 244, 0.75);
    color: #fff;
    width: auto;
    max-width: 150px;
    font-size: 100%;
    white-space: nowrap;
	padding: 10px 18px;
	margin-right: 10px;
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 2px 8px 0 #666;
	border-radius: 20px;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
	border-left-color: transparent; 
}


/*----------------------------------------------*/
/*  For Line 									*/
/*----------------------------------------------*/

.line-container { 
	display: flex; 
	flex-direction: column; 
	position:relative; 
	cursor: pointer;
}

.bound { 
	display: flex; 
	justify-content: space-around; 
}

.bound .item { 
	padding: 8px 12px;
	border-radius: 28px;
	border: 1pt solid #a4d4ff;
}

.lower-bound{ 
	margin-top: 150px;
}

.item_seled{ 
	background-color: #a4d4ff; 
	border-radius: 28px;
}


/*----------------------------------------------*/
/*  Client Display Options CSS Activity ID: 1	*/
/*----------------------------------------------*/

.q1-table{
	border-collapse: separate;
	border-spacing: 8px;
}

.q1-table h4 {
	margin-bottom: 0px;
}

.q1-table thead th {
	color: #fff;
	border-radius: 12px;
	vertical-align: middle;
	text-align: center;
}


.q1-table tbody td {
	color: #000;
	border-radius: 12px;
	vertical-align: middle;
	text-align: center;
}

.q1-table thead th:nth-child(2){
	background: #F58221;
}

.q1-table thead th:nth-child(3){
	background: #00B9F1;
}

.q1-table tbody tr:nth-child(1) td:nth-child(1){
	background: #A2D294;
}

.q1-table tbody tr:nth-child(2) td:nth-child(1){
	background: #F494BE;
}


/*----------------------------------------------*/
/*  Client Display Options CSS Activity ID: 4	*/
/*----------------------------------------------*/

.q4-table{
	border-collapse: separate;
	border-spacing: 8px;
}

.q4-table h4 {
	margin-bottom: 0px;
}

.q4-table thead th {
	color: #fff;
	border-radius: 12px;
	vertical-align: middle;
	text-align: center;
}

.q4-table tbody td {
	color: #000;
	border-radius: 12px;
	vertical-align: middle;
	text-align: center;
}

.q4-table thead th:nth-child(1){
	background: #F58221;
}

.q4-table thead th:nth-child(2){
	background: #1AB36B;
}

.q4-table thead th:nth-child(3){
	background: #EF59A1;
}

.q4-table thead th:nth-child(4){
	background: #00B9F1;
}

.q4-table tbody td:nth-child(1){
	background: #FED5B1;
}

.q4-table tbody td:nth-child(2){
	background: #E3F2E7;
}

.q4-table tbody td:nth-child(3){
	background: #FCDEEB;
}

.q4-table .rbn-lg {
	/*
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	border: 4px solid #ccc;
	border-top-color: #bbb;
	border-left-color: #bbb;
	background: #fff;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	*/
	width: 18px;
	height: 18px;
}
.q4-table .rbn-lg:checked {
	/*border: 20px solid #4099ff;*/
}


.q4-admin-table{
	border-collapse: separate;
	border-spacing: 10px;
}


.q4-admin-table-label {
	border-radius: 12px;
	vertical-align: middle;
	text-align: center;
	background: #FED5B1;
}

.q4-admin-table-true {
	border-radius: 12px;
	vertical-align: middle;
	text-align: center;
	background: #E3F2E7;
}

.q4-admin-table-false {
	border-radius: 12px;
	vertical-align: middle;
	text-align: center;
	background: #FCDEEB;
}

.q4-admin-table .fa-thumbs-o-up,
.q4-admin-table .fa-thumbs-o-down {
	font-size: 20px;
	padding-right: 8px;
}

/*----------------------------------------------*/
/*  Client Display Options CSS Activity ID: 9	*/
/*----------------------------------------------*/



.q9-row input[type="radio"], .q10-row input[type="radio"] {
	display: none;
}

.q9-row input[type="radio"]:checked + .box {
	/*background-color: #007e90;*/
}

.q9-row input[type="radio"]:checked + .box span {
	transform: translateY(40px);
}

.q9-row input[type="radio"]:checked + .box span:before {
	transform: translateY(0px);
	opacity: 1;
}


.q9-row input[type="radio"]:checked + .rectbox {
	  border-width: 6px; 
	  box-shadow: 12px 8px 12px #999;	
}

.q9-row input[type="radio"]:checked + .opt-7.rectbox  {
	border-color: red;
}
.q9-row input[type="radio"]:checked + .opt-6.rectbox  {
	border-color: red;
}
.q9-row input[type="radio"]:checked + .opt-5.rectbox  {
	border-color: red;
}

.q9-row input[type="radio"]:checked + .opt-4.rectbox  {
	border-color: red;
}

.q9-row input[type="radio"]:checked + .opt-3.rectbox  {
	border-color: red;
}

.q9-row input[type="radio"]:checked + .opt-2.rectbox  {
	border-color: red;
}

.q9-row input[type="radio"]:checked + .opt-1.rectbox  {
	border-color: red;
}

.rd_ans {
 	text-align: center;
    padding: 4px;
    font-weight: 800;
    font-size: 1.2rem;
    color: #ff0000;
    border: 3px solid #e9e752;
    border-radius: 12px;
    margin-top: 4px;
}
   

.q9-row input[type="checkbox"]:checked + .box {
	/*background-color: #007e90;*/
}

.q9-row input[type="checkbox"]:checked + .box span {
	transform: translateY(40px);
}

.q9-row input[type="checkbox"]:checked + .box span:before {
	transform: translateY(0px);
	opacity: 1;
}


.q9-row input[type="checkbox"] {
	display: none;
}
.q9-row input[type="checkbox"]:checked + .opt-7.rectbox  {
	border-color: red;
}

.q9-row input[type="checkbox"]:checked + .opt-6.rectbox  {
	border-color: red;
}

.q9-row input[type="checkbox"]:checked + .opt-5.rectbox  {
	border-color: red;
}

.q9-row input[type="checkbox"]:checked + .opt-4.rectbox  {
	border-color: red;
}

.q9-row input[type="checkbox"]:checked + .opt-3.rectbox  {
	border-color: red;
}

.q9-row input[type="checkbox"]:checked + .opt-2.rectbox  {
	border-color: red;
}

.q9-row input[type="checkbox"]:checked + .opt-1.rectbox  {
	border-color: red;
}

.q9-row .rectbox.box150 {
	width: 150px;
	height: 150px;
	transition: all 250ms ease;
	will-change: transition;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	position: relative;
	font-weight: 900;
	border-radius: 50%;
	border: 2pt solid #868686;
	box-shadow: 2px 2px 8px #999;	
}

.q9-row .rectbox.box150:active {
	transform: translateY(10px);
}

.q9-row .rectbox.box150 span {
	position: absolute;
	transform: translate(0, 18px);
	left: 0;
	right: 0;
	top: 40px;
	transition: all 300ms ease;
	font-size: 1.3em;
	user-select: none;
}


.q9-row .rectbox {
	width: 130px;
	height: 130px;
	background-color: #fff;
	transition: all 250ms ease;
	will-change: transition;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	position: relative;
	font-weight: 900;
	border-radius: 100px;
	border: 2pt solid #868686;
	box-shadow: 2px 2px 8px #999;	
}

	
.q9-row .rectbox:active {
	transform: translateY(10px);
}

.q9-row .rectbox span {
	position: absolute;
	transform: translate(0, 18px);
	left: 0;
	right: 0;
	top: 24px;
	transition: all 300ms ease;
	font-size: 1.3em;
	user-select: none;
}




.q9-row .box, .q10-row .box {
	width: 140px;
	height: 140px;
	background-color: #fff;
	transition: all 250ms ease;
	will-change: transition;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	position: relative;
	font-weight: 900;
	border-radius: 100px;
	border: 2pt solid #868686;
	box-shadow: 2px 4px 6px #999;	
}

.q9-row .box:active {
	transform: translateY(10px);
}

.q9-row .box span {
	position: absolute;
	transform: translate(0, 18px);
	left: 0;
	right: 0;
	transition: all 300ms ease;
	font-size: 1.3em;
	user-select: none;
}

.q9-row .box span:before {
	font-size: 1.15em;
	font-family: FontAwesome;
	display: block;
	transform: translateY(-70px);
	opacity: 0;
	transition: all 300ms ease-in-out;
	font-weight: normal;
}

.q10-row .box span {
	position: absolute;
	transform: translate(0, 18px);
	left: 0;
	right: 0;
	transition: all 300ms ease;
	font-size: 1.3em;
	user-select: none;
}





.q9-row .opt-1, .q10-row .opt-1 {
    background-color: #cce5ff;
    border-color: #b8daff;
}

.q9-row .opt-2, .q10-row .opt-2 {
	background-color: #f8d7da;
    border-color: #f5c6cb;
}

.q9-row .opt-3, .q10-row .opt-3 {
    background-color: #fff3cd;
    border-color: #ffeeba
}

.q9-row .opt-4, .q10-row .opt-4 {
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.q9-row .opt-5, .q10-row .opt-5 {
    background-color: #c2f7cb;
    border-color: #aedeb6;
}

.q9-row .opt-6, .q10-row .opt-6 {
	background-color: #ffe596;
    border: 1pt solid #ecdba6;
}

.q9-row .opt-7, .q10-row .opt-7 {
	background-color: #cdd1ce;
    border: 1pt solid #becac1;
}




.q9-row .opt-1 span, .q10-row .opt-1 span {
	color: #004085;
}

.q9-row .opt-2 span, .q10-row .opt-2 span {
	color: #721c24;
}

.q9-row .opt-3 span, .q10-row .opt-3 span {
	color: #856404;
}

.q9-row .opt-4 span, .q10-row .opt-4 span {
	color: #0c5460;
}

.q9-row .opt-5 span, .q10-row .opt-5 span {
	color: #1b1e21;
}

.q9-row .opt-6 span, .q10-row .opt-6 span {
	color: #1b1e21;
}

.q9-row .opt-7 span, .q10-row .opt-7 span {
	color: #1b1e21;
}

.q9-row .opt-1 span:before {
	content: "\f087";
}

.q9-row .opt-2 span:before {
	content: "\f087";
}

.q9-row .opt-3 span:before {
	content: "\f087";
}

.q9-row .opt-4 span:before {
	content: "\f087";
}

.q9-row .opt-5 span:before {
	content: "\f087";
}

.q9-row .opt-6 span:before {
	content: "\f087";
}

.q9-row .opt-7 span:before {
	content: "\f087";
}


.q9-row .rectbox span:before {
	content: "";
	background: white;
}
 
/* 支持 反對 */
.q9-row .opttf-1 {
    background-color: #cce5ff;
    border-color: #b8daff;
}

.q9-row .opttf-2 {
	background-color: #f8d7da;
    border-color: #f5c6cb;
}

.q9-row .opttf-1 span {
	color: #004085;
}

.q9-row .opttf-2 span {
	color: #721c24;
}

.q9-row .opttf-1 span:before {
	content: "\f087";
}

.q9-row .opttf-2 span:before {
	content: "\f088";
}

/* Tick */

.q9-row input[type="checkbox"]:checked + .chkbox {
	/*background-color: #007e90;*/
}

.q9-row input[type="checkbox"]:checked + .chkbox span {
	transform: translateY(10px);
}

.q9-row input[type="checkbox"]:checked + .chkbox span:before {
	transform: translateY(0px);
	opacity: 1;
}


.q9-row .chkbox {
	width: 60px;
	height: 60px;
	background-color: #fff;
	transition: all 250ms ease;
	will-change: transition;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	position: relative;
	font-weight: 900;
	border-radius: 100px;
	border: 2pt solid #868686;
	box-shadow: 2px 4px 6px #999;	
}

.q9-row .chkbox:active {
	transform: translateY(4px);
}

.q9-row .chkbox span {
	position: absolute;
	transform: translate(0, 18px);
	left: 0;
	right: 0;
	transition: all 300ms ease;
	font-size: 1.3em;
	user-select: none;
}

.q9-row .chkbox span:before {
	font-size: 1.15em;
	font-family: FontAwesome;
	display: block;
	transform: translateY(-70px);
	opacity: 0;
	transition: all 300ms ease-in-out;
	font-weight: normal;
	
}

.q9-row .opttick-1 {
    background-color: #cce5ff;
    border-color: #b8daff;
    margin-left: 24px;
}

.q9-row .opttick-2 {
	background-color: #f8d7da;
    border-color: #f5c6cb;
     margin-left: 24px;
}

.q9-row .opttick-3 {
    background-color: #fff3cd;
    border-color: #ffeeba; 
 	margin-left: 24px;
}

.q9-row .opttick-4 {
    background-color: #d1ecf1;
    border-color: #bee5eb;
 	margin-left: 24px;
}

.q9-row .opttick-5 {
    background-color: #d6d8d9;
    border-color: #c6c8ca;
    margin-left: 24px;
}

.q9-row .opttick-1 span {
	color: #004085;
}

.q9-row .opttick-2 span {
	color: #721c24;
}

.q9-row .opttick-3 span {
	color: #856404;
}

.q9-row .opttick-4 span {
	color: #0c5460;
}

.q9-row .opttick-5 span {
	color: #1b1e21;
}

.q9-row .opttick-1 span:before {
	content: "\f00c";
}

.q9-row .opttick-2 span:before {
	content: "\f00c";
}

.q9-row .opttick-3 span:before {
	content: "\f00c";
}

.q9-row .opttick-4 span:before {
	content: "\f00c";
}

.q9-row .opttick-5 span:before {
	content: "\f00c";
}

.q9-row .opttick-6 span:before {
	content: "\f00c";
}

.q9-row .opttick-7 span:before {
	content: "\f00c";
}














.q9-client-row .box {
	width: 100px;
	height: 100px;
	display: inline-block;
	text-align: center;
	position: relative;
	font-weight: 900;
	border-radius: 50px;
	border: 2pt solid #868686;
	box-shadow: 2px 4px 6px #999;	
}

.q9-client-row .box130 {
	width: 130px;
	height: 130px;
	display: inline-block;
	text-align: center;
	position: relative;
	font-weight: 900;
	border-radius: 50%;
	border: 2pt solid #868686;
	box-shadow: 2px 4px 6px #999;	
}


.q9-client-row .opt-1 {
    background-color: #cce5ff;
    border-color: #b8daff;
}

.q9-client-row .opt-2 {
	background-color: #f8d7da;
    border-color: #f5c6cb;
}

.q9-client-row .opt-3 {
	background-color: #fff3cd;
    border-color: #ffeeba;
}

.q9-client-row .opt-4 {
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.q9-client-row .opt-5 {
    background-color: #c2f7cb;
    border-color: #aedeb6;
}

.q9-client-row .opt-6 {
    background-color: #ffe596;
    border-color: #ecdba6;
}

.q9-client-row .opt-7 {
    background-color: #cdd1ce;
    border-color: #becac1;
}

.form-control.tbl-textarea.disable {
	display: none;
}
tr.disable {
	display: none;
}





.q9-client-row .opt-1 span {
	color: #004085;
}

.q9-client-row .opt-2 span {
	color: #721c24;
}

.q9-client-row .opt-3 span {
	color: #856404;
}

.q9-client-row .opt-4 span {
	color: #0c5460;
}

.q9-client-row .opt-5 span {
	color: #1b1e21;
}

.q9-client-row .opt-6 span {
	color: #1b1e21;
}

.q9-client-row .opt-7 span {
	color: #1b1e21;
}

.q9-client-row .box span {
	position: absolute;
	transform: translate(0, 34px);
	left: 0;
	right: 0;
	font-size: 1.15em;
}

.q9-client-row .box130 span {
	position: absolute;
	transform: translate(0, 50px);
	left: 0;
	right: 0;
	font-size: 1.15em;

}


.q9-client-row .progress {
    height: 20px;
    /*background: #e9ecef;*/
	background: #f8f9fa;
    border-radius: 8px;
    box-shadow: none;
    overflow: visible;
}

.q9-client-row .progress .progress-bar {
    position: relative;
    -webkit-animation: animate-positive 2s;
    animation: animate-positive 2s;
	overflow: visible;
	border-top-left-radius:8px;
	border-bottom-left-radius:8px;
}

.q9-client-row .prgopt-1 .progress .progress-bar { 
	background-color: #cce5ff;
    border: 1pt solid #b8daff;
    border-radius: 25px;
}

.q9-client-row .prgopt-2 .progress .progress-bar { 
	background-color: #f8d7da;
    border: 1pt solid #f5c6cb;
    border-radius: 25px;
}

.q9-client-row .prgopt-3 .progress .progress-bar { 
	background-color: #fff3cd;
    border: 1pt solid #ffeeba;
    border-radius: 25px;
}

.q9-client-row .prgopt-4 .progress .progress-bar { 
	background-color: #d1ecf1;
    border: 1pt solid #bee5eb;
    border-radius: 25px;
}

.q9-client-row .prgopt-5 .progress .progress-bar { 
	background-color: #d6d8d9;
    border: 1pt solid #c6c8ca;
    border-radius: 25px;
}

.q9-client-row .prgopt-6 .progress .progress-bar { 
	background-color: #ffe596;
    border: 1pt solid #ecdba6;
    border-radius: 25px;
}

.q9-client-row .prgopt-7 .progress .progress-bar { 
	background-color: #cdd1ce;
    border: 1pt solid #becac1;
    border-radius: 25px;
}


.q9-client-row .progress .progress-value {
    display: block;
    font-size: 1.15rem;
    font-weight: bold;
    color: #007e90;
    position: absolute;
    top: -32px;
    right: -8px;
}

.q9-client-row .prgopt-1 .progress .progress-value { 
	color: #004085;
}

.q9-client-row .prgopt-2 .progress .progress-value { 
	color: #383d41;
}

.q9-client-row .prgopt-3 .progress .progress-value { 
	color: #856404;
}

.q9-client-row .prgopt-4 .progress .progress-value { 
	color: #0c5460;
}

.q9-client-row .prgopt-5 .progress .progress-value { 
	color: #1b1e21;
}

.q9-client-row .prgopt-6 .progress .progress-value { 
	color: #1b1e21;
}

.q9-client-row .prgopt-7 .progress .progress-value { 
	color: #1b1e21;
}


.itm_2_1-行政管理權 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_2_1-立法權 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_2_1-獨立的司法和終審權 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 8px;
}

.itm_2_1-參與對外事務權 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-radius: 8px;
}

.itm_2_1-其他（請注明） {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #0c5460;
	background-color: #c2f7cb;
    border-color: #aedeb6;
    border-radius: 8px;
}

.itm_5_1-支持 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_5_1-反對 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_7_1-支持 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_7_1-反對 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_13_1-支持 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_13_1-反對 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_15_1-支持 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_15_1-反對 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_16_1-支持 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_16_1-反對 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_19_1-支持 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_19_1-反對 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_8_1-安椂山 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_8_1-唐玄宗 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_8_1-楊貴妃 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 8px;
}

.itm_8_1-李林甫 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-radius: 8px;
}

.itm_8_1-楊國忠 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color:  #c6c8ca;
    border-radius: 8px;
}


.itm_9_1-禪讓制 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_9_1-世襲制 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_11_1-儒家 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_11_1-墨家 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_11_1-道家 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 8px;
}

.itm_11_1-法家 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-radius: 8px;
}

.itm_20_1-楊貴妃 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_20_1-唐玄宗 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_20_1-李林甫 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 8px;
}

.itm_20_1-楊國忠 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-radius: 8px;
}

.itm_20_1-安椂山 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color:  #c6c8ca;
    border-radius: 8px;
}



.itm_21_1-藩鎮割據 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_21_1-宦官專權 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_21_1-朋黨相爭 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 8px;
}

.itm_21_1-民變四起 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-radius: 8px;
}

.itm_23_1-行政效率低下 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_23_1-國庫入不敷支 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_23_1-對外作戰失利 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 8px;
}

.itm_30_1-會 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_30_1-不會 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_31_1-支持 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_31_1-反對 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}

.itm_32_1-會 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
}

.itm_32_1-不會 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
}






.itm_17_0-禁胡語 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #004085;
	background-color: #cce5ff;
    border-color: #b8daff;
    border-radius: 8px;
    margin-right: 8px;
}

.itm_17_0-禁胡服 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    border-radius: 8px;
    margin-right: 8px;
}

.itm_17_0-改姓氏 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 8px;
    margin-right: 8px;
}

.itm_17_0-禁歸葬 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    border-radius: 8px;
    margin-right: 8px;
}

.itm_17_0-倡通婚 {
	font-weight: bold;
	border: 1pt solid #868686;
    padding: 6px 12px;
    color: #1b1e21;
    background-color: #d6d8d9;
    border-color:  #c6c8ca;
    border-radius: 8px;
    margin-right: 8px;
}


.opt-client-img {
    width: 100px;
    display: block;
    margin: 0 auto;
    padding-bottom: 12px;
}

.opt-client-img-120 {
    width: 120px;
    display: block;
    margin: 0 auto;
    padding-bottom: 12px;
}

.opt-chart-img {
    height: 100px;
    display: inline-block;
    margin: 0 auto;
    padding-bottom: 8px;
	padding-right: 8px;
	
}

/*-------------------*/
/*  Chart Type = 2   */
/*-------------------*/

.client-prg-control{ 
	display: flex; 
	position: relative; 
	height: 60px;
	margin: 50px 100px;
}

.client-prg-control .rect{ 
	width: 50%; 
	color: #000; 
	display: flex; 
	align-items: center;
	justify-content: center; 
	white-space: nowrap; 
	box-shadow: 2px 4px 6px #999;
}

.rect1{ 
	margin-top: 10px;
	background-color: #cce5ff;
	background-image: linear-gradient(270deg, #cce5ff 0%, #a7c8ea 100%);
	border: 1pt solid #b8daff;
}
.rect2{ 
	margin-top: 10px;
	background-color: #f8d7da;
	background-image: linear-gradient(90deg, #f8d7da 0%, #eea5ab 100%);
	border: 1pt solid #f5c6cb;
}

.client-prg-control .circle{
	position: absolute; 
	color: #fff;     
	width: 100px;
	height: 100px; 
	top: -18px; 
	border-radius: 50%; 
	display: flex; 
	justify-content: center; 
	align-items: center;  
	font-size: 18px;
	border-radius: 100px;
	border: 2pt solid #868686;
	box-shadow: 2px 4px 6px #999;
}

.client-prg-control .circle1{ 
	left:-53px; 
	color: #004085;
	background-color: #cce5ff;
	border-color: #b8daff;
	font-weight: 900;
}

.client-prg-control .circle_text {
	padding-left: 4px;
	padding-right: 4px;
}

.client-prg-control .circle_icon {
	opacity: 0.7;
	font-size: 24px;
}

.client-prg-control .circle2{ 
	right:-53px; 
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;		
	font-weight: 900;			
}

.client-prg-control .num{ 
	position: absolute; 
}

.client-prg-control .num1{
	color: #004085;
	left:-80px; 
	margin-top: 20px;
	font-size: 20px;
	font-weight: bold;
}

.client-prg-control .num2{
	color: #721c24;
	right:-80px;
	margin-top: 20px;
	font-size: 20px;
	font-weight: bold;
}
		

.select-opttf-1, .itm_10_1, .itm_98_1, .itm_105_1 {
    background-color: #cce5ff;
    border-color: #b8daff;
	border-radius: 8px;
}
.select-opttf-2, .itm_10_2, .itm_98_2, .itm_105_2 {
	background-color: #f8d7da;
    border-color: #f5c6cb;
	border-radius: 8px;
}
.select-opttf-3, .itm_10_3, .itm_98_3, .itm_105_3 {
	background-color: #fff3cd;
    border-color: #fff3cd;
	border-radius: 8px;
}
.select-opttf-4, .itm_10_4, .itm_98_4, .itm_105_4 {
	background-color: #d1ecf1;
    border-color: #d1ecf1;
	border-radius: 8px;
}

.itm_10_1, .itm_10_2, 
.itm_98_1, .itm_98_2, .itm_98_3, .itm_98_4,
.itm_105_1, .itm_105_2, .itm_105_3, .itm_105_4  {
	padding: 4px 12px;
    width: 80px;
    display: inline-block;
}

.itm-bf {
	width: 150px;
    display: inline-block;
}








.btn-toggle {
	margin: 0 9rem;
	padding: 0;
	position: relative;
	border: none;
	height: 1.5rem;
	width: 3rem;
	border-radius: 1.5rem;
	color: #6b7381;
	background: #bdc1c8;
}
.btn-toggle:focus,
.btn-toggle.focus,
.btn-toggle:focus.active,
.btn-toggle.focus.active {
	outline: none;
}
.btn-toggle:before,
.btn-toggle:after {
	line-height: 1.5rem;
	width: 8rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	position: absolute;
	bottom: 0;
	transition: opacity 0.25s;
}
.btn-toggle:before {
	content: "按答案選項排列";
	left: -8rem;
}
.btn-toggle:after {
	content: "按提交次序排列 ";
	right: -8rem;
	opacity: 0.5;
}
.btn-toggle > .handle {
	position: absolute;
	top: 0.1875rem;
	left: 0.1875rem;
	width: 1.125rem;
	height: 1.125rem;
	border-radius: 1.125rem;
	background: #fff;
	transition: left 0.25s;
}
.btn-toggle.active {
	transition: background-color 0.25s;
}
.btn-toggle.active > .handle {
	left: 1.6875rem;
	transition: left 0.25s;
}
.btn-toggle.active:before {
	opacity: 0.5;
}
.btn-toggle.active:after {
	opacity: 1;
}
.btn-toggle.btn-sm:before,
.btn-toggle.btn-sm:after {
	line-height: -0.5rem;
	color: #fff;
	letter-spacing: 0.75px;
	left: 0.4125rem;
	width: 2.325rem;
}
.btn-toggle.btn-sm:before {
	text-align: right;
}
.btn-toggle.btn-sm:after {
	text-align: left;
	opacity: 0;
}
.btn-toggle.btn-sm.active:before {
	opacity: 0;
}
.btn-toggle.btn-sm.active:after {
	opacity: 1;
}
.btn-toggle.btn-xs:before,
.btn-toggle.btn-xs:after {
	display: none;
}
.btn-toggle:before,
.btn-toggle:after {
	color: #6b7381;
}
.btn-toggle.active {
	background-color: #29b5a8;
}


.q7pcb {	
    border: 2px solid #bcb1bc;
    border-radius: 12px;
    padding: 20px;
	font-size: 20px;
	font-family: DFKai-sb, "標楷體","微軟正黑體","Microsoft JhengHei","黑體","SimHei","儷黑 Pro","LiHei Pro Medium","蘋果儷中黑";
}


.optional.disable {
	display: none;
}

.stamp {
	--r: 7px; /* control the radius */
	height: 250px;
	aspect-ratio: 1.5;
	padding: calc(2*var(--r));
	background: #D1EAFB;
	mask: 
		radial-gradient(var(--r),#0000 97%,#000) round 
	   	calc(-1.5*var(--r)) calc(-1.5*var(--r))/calc(3*var(--r)) calc(3*var(--r)), 
	  	linear-gradient(#000 0 0) no-repeat 50%/calc(100% - 3*var(--r)) calc(100% - 3*var(--r));
}