@charset "utf-8";
/* CSS Document */
/*無障礙相關*/
.btn-feedback-send:focus,
.feedback-text:focus{
	border: 4px solid #1b1b1b !important;
}

.row.survey-row {
	padding: 10px 0px;
}
.feedback-survey {
	font-size:1.125em;
	margin-bottom: 40px;
}
 .feedback-survey .legend-title{
	display: inline-block;
	padding: 5px 15px;
	background-color: #8b0045;
	border-radius: 30px;
	color: #fff;
	font-size: 1.25em;
} 
.title-w1{
	max-width: 12em;
}
.title-w2{
	max-width: 19em;
}

.feedback-form p{
	font-size:1.25rem;
}
.role-group,
.option-group{
	display: flex;
}
.role-group .role-list{
	width: 90px;
}
.role-group .role-list:last-child {
    width: 120px;
}
.option-group .option-list{
	width: 20%;
}
.option-head{
	display: flex;
	justify-content: space-between;
}
.option-head hr{
	width: 100px;
	height: 1px;
	border-collapse: collapse;

}
input[type='radio'] {
	width: 18px;
	height: 18px;
}
.option-list input[type='radio'] + label{
	 width:30px;
	 font-size: 1.125em;
}
.option-list{
	margin-right:1px;
	padding:2px 10px;
	box-sizing:border-box;
}
.information .survey-row{
	padding: 30px 0px;
	border-bottom: 1px solid #dbdbdb;
}
.information .survey-row-1{
	padding: 20px 0px;
}
.questionnaire .survey-row{
	padding: 20px 0px;
	border-bottom: 1px solid #dbdbdb;
}
.feedback-text{
	width: 100%;
	height: 10em;
}

.form-select-text{
	border:1px solid #555;
	font-size: 1em;
	border-radius: 2px;
	padding: 4px 8px;
}
.form-input-text{
	border:1px solid #555;
	font-size: 1em;
	border-radius: 2px;
	padding: 4px 8px;
}
.form-requirement{
	border: 2px dotted red!important;
}
.survey-head{
	position: relative;
}
.survey-head p{
	padding-left:36px;
}
.survey-head .surver-number{
	display: block;
	width: 30px;
	height: 30px;
	background-color: #efefef;
	color: #1D1D1D;
	border-radius: 15px;
	text-align: center;
	padding: 0px;
	position: absolute;
	left: 14px;
	font-size: 1.3rem;
	transition: all 0.2s;
}
.survey-head .surver-number.active{
	background-color: #0dcaf0;
	color: #000;
}
.data-transfer{
	display: none; 
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0, 0.75);
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 99999;
	justify-content: center;
}
.no-scroll {
	overflow: hidden;
}
.loding-container{
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.loding-box{
	width: 200px;
	height:200px;
	color: #fff;
	text-align: center;
	padding: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.loding-box p{
	font-size: 1.875rem;
}

.loading-dots {
	width: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px; 
	margin-top: 10px;
}
.dot {
	width: 20px;
	height:20px;
	background-color: #fff; 
   
	animation: grow-shrink 1.5s infinite ease-in-out;
}

.btn-feedback-send {
	background-color: #dee2e6;
	width: 100%;
}
.btn-feedback-send:hover {
	background-color: #53a7ff;
	color: #fff;
}
@keyframes grow-shrink {
	0%, 100% {
		transform: scale(1); 
		opacity: 1;
	}
	50% {
		transform: scale(1.5);
		opacity: 0.2;
	}
}
.loading-dots .dot:nth-child(1) {
	animation-delay: 0s;
}
.loading-dots .dot:nth-child(2) {
	animation-delay: 0.3s;
}
.loading-dots .dot:nth-child(3) {
	animation-delay: 0.6s;
}
.loading-dots .dot:nth-child(4) {
	animation-delay: 0.9s;
}
.loading-dots .dot:nth-child(5) {
	animation-delay: 1.2s;
}