body {
    font-family: 'Segoe UI', 'Microsoft JhengHei', '微軟正黑體', sans-serif;
    background-color: #f8f9fa;
    color: #333;
    line-height: 1.6;
    font-size: 16px;
}

/* ============================================
   主內容區域
   ============================================ */
.container.top10.bottom5 {
    background-color: white;
    border-radius: 8px;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid #eaeaea;
}

/* 標題樣式 */
h2 {
    text-align: center;
    color: #2c3e50;
    margin-bottom: 30px;
    padding-bottom: 15px;
    font-weight: 600;
    border-bottom: 2px solid #eee;
}


/*title*/
.logo {
   max-height: 50px;
   height: 100%;
   width: auto;
   padding-right:10px;
}

.titleCh {
	font-weight: bold;
}
.titleChMobile {
	font-weight: bold;
	font-size:large;
}
.titlePt {
	font-size:x-small;
}


/*title*/

.card {
	border:1px solid;
	border-radius: 15px;
	padding: 20px;
	border-color: #ccc;
	background-color: rgb(248, 248, 248);
	margin:5px;
}

.space {
	margin-right:5px;
}

.questionnaire {
	position: relative;
  padding: 15px;

  border-color: #e5e5e5 #eee #eee;
  border-style: solid;
  border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	background-color:#F2F3F7;
}

.upload-form {
	position: relative;
  padding: 15px;
  margin:  15px 0px 15px 0px;
  border-color: #e5e5e5 #eee #eee;
  border-style: solid;
  border-width: 1px;
	border-style: solid;
	border-radius: 4px;
	background-color:#F2F3F7;
}
.required:after { 
   content:"*";
   color:red;
}

/* Numbered lists like 1, 1.1, 2.2.1... */
ol li {display:block;} /* hide original list counter */
ol > li:first-child {counter-reset: item;} /* reset counter */
ol > li {counter-increment: item; position: relative;} /* increment counter */
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} 
/* print counter */

/* footer */
#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
}
.noBottom {
	margin-bottom:0px !important;
}
.height30 {
	min-height:30px !important;
}


/* footer */


/*step*/
.stepwizard-step p {
    margin-top: 10px;
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;
    width: 50%;
    position: relative;
    margin-top:10px;
    margin-bottom:20px;
}
.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;
}
.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}
.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.data-table {
	border-collapse: collapse;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #19B2C4;
	border-bottom-color: #19B2C4;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;	
}

.data-table td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 24px;
	padding: 2px;
	color: #333;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #aabcfe;
	border-bottom-color: #aabcfe;
	border-left-color: #aabcfe;
}

.data-table th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 24px;
	padding: 2px;
	color: #333;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #aabcfe;
	border-bottom-color: #aabcfe;
	border-left-color: #aabcfe;
}

.data-table-group-header {
	background: #e4e4e4;
	font-weight: bold;
	text-indent: 4px;
}

.text-nowrap {
    white-space: nowrap;
}

@media only screen and (max-width: 400px) {
	.mobile {
		display:none;
	}
	.mobileThin > div  {
		white-space: normal !Important;
		word-wrap: break-word; 
	}
	
	.exp {
		width:100%;
	}
	
	.stepwizard {
    display: table;
    width: 80%;
    position: relative;
    margin-top:10px;
    margin-bottom:10px;
 }
}
@media only screen and (max-width: 800px) {
	.pad {
		display:none;
	}
	
	.exp {
		width:100%;
	}
	
	.stepwizard {
    display: table;
    width: 80%;
    position: relative;
    margin-top:10px;
    margin-bottom:10px;
 }
}

/*step*/

/*position fix*/
.top10 {
	margin-top:10px;
}
.top30 {
	margin-top:30px;
}
/*position fix*/

.uploadGroup {
	display: -webkit-flex;
  	display: flex;
}

.uploadBtn {
	width: 80px;
	margin-left:-80px;
}

.uploadContent {
	-webkit-flex: 1;
    flex: 1;
    margin-right:85px;
}

.countdownBar {
	BACKGROUND-COLOR: red;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}

.info {
	font-style:italic;
	color: rgb(100, 99, 99);
}