/*書籤*/
div[name=items]
{
	
	position: relative; /* 讓元素不影響其他元素 */
	top: 20px;
	padding: 15px 20px 20px 20px;
	margin-right: 10px;
	/*border: 1px solid gray;
	border-bottom: none;*/
	border-radius: 15px 15px 0px 0px;
	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
	cursor: pointer;
    transition: padding 0.2s ease-in-out; /* 增加動畫效果 */

}

div[name=items]:hover
{
	
	transform: translateY(-20px);
	
}

.active
{
	
	transform: translateY(-20px);
	
}

/*讓表單滑行*/
div[class=tab-content]
{
	
	max-height: 500px;
	overflow-y: auto;
	position: relative;
	z-index: 10;

}

/*讓表頭固定*/
thead
{
	
	position: sticky;
	top: 0;
	z-index: 10;

}

/*note*/
div[name=note]
{
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: bold;
	color: #468A99;
	
}

/*比較按鈕*/
[name=compare]
{

	padding: 10px 30px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	/*border: 3px solid #015275;*/
	border-radius: 15px;
	color: #468A99;
	background-color: #C1DBE1;
	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	
}

[name=compare]:hover
{
	
	background-color: #A8BEC3;
	
}

/*全選按鈕*/
div[name=scAll]
{
	
	padding: 0px 2px;
	border: 1px solid #e8e8e8;
	border-radius: 50px;
	font-size: 16px;
	text-align: center;
	color: black;
	background-color: white;
	cursor: pointer;
	
}

div[name=scAll]:hover
{
	
	background-color: #e8e8e8;
	
}

/*表格*/
table[class=combo]
{
	
	width: 100%;
	font-size: 20px;
	color: black;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);

}

tr[color=lightBlue]
{
	
	color: white;
	background-color: #01A9D1;
	
}

tr[color=grey]
{

	background-color: #82B6D1;
	
}

th[class=combo-th], td[class=combo-td]
{
	
	padding: 10px 5px;
	
}

td[class=combo-td][name=name]
{
	
	cursor: pointer;
	
}

td[class=combo-td][name=name]:hover
{
	
	color: red;
	
}

input[type=checkbox]
{
	
	width: 20px;
	height: 20px;
	margin-right: 10px;
	cursor: pointer;
	
}

td[class=combo-td][name=detial]
{
	
	cursor: pointer;
	
}

td[class=combo-td][name=detial]:hover
{
	
	color: orange;
	
}

/*顏色*/
/*A*/
div[name=items][id=A]
{
	
	font-weight: bold;
	color: white;
	background-color: #77A2BB;
	
}

div[class=tab-pane][id=A] tr[class=combo][color=lightblue]
{
	
	color: white;
	background-color: #77A2BB;
	
}

div[class=tab-pane][id=A] tr[class=combo][color=grey]
{

	background-color: #c9e3f2;
	
}

/*B*/
div[name=items][id=B]
{
	
	font-weight: bold;
	color: white;
	background-color: #C28888;
	
}

div[class=tab-pane][id=B] tr[class=combo][color=lightblue]
{
	
	color: white;
	background-color: #C28888;
	
}

div[class=tab-pane][id=B] tr[class=combo][color=grey]
{

	background-color: #f5c6c6;
	
}

/*C*/
div[name=items][id=C]
{
	
	font-weight: bold;
	color: white;
	background-color: #91A792;
	
}

div[class=tab-pane][id=C] tr[class=combo][color=lightblue]
{
	
	color: white;
	background-color: #91A792;
	
}

div[class=tab-pane][id=C] tr[class=combo][color=grey]
{

	background-color: #e4f5e4;
	
}

/*D*/
div[name=items][id=D]
{
	
	font-weight: bold;
	color: white;
	background-color: #C5B647;
	
}

div[class=tab-pane][id=D] tr[class=combo][color=lightblue]
{
	
	color: white;
	background-color: #C5B647;
	
}

div[class=tab-pane][id=D] tr[class=combo][color=grey]
{

	background-color: #e3deb8;
	
}

/*E*/
div[name=items][id=E]
{
	
	font-weight: bold;
	color: white;
	background-color: #B09BBA;
	
}

div[class=tab-pane][id=E] tr[class=combo][color=lightblue]
{
	
	color: white;
	background-color: #B09BBA;
	
}

div[class=tab-pane][id=E] tr[class=combo][color=grey]
{

	background-color: #ded3e3;
	
}

[name=forE]
{
	
	display: none;
	font-size: 18px;
	color: #8D3F87;
	
}

/*遮罩與跳窗*/
loading
{
	
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.5);
	z-index: 9999999;
	overflow-y: hidden;
	
}

loading p
{
	
	font-size: 20px;
	font-weight: bold;
	color: black;
	
}

mask
{
	
	display: none;
	align-items: center;
	justify-content: center;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999999;
	overflow-y: hidden;
	
}

div[class=action]
{

	width: 750px;
	padding: 50px;
	margin: auto;
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
	
}

div[name=compareContent]
{
	
	width: 90%;
	padding: 50px;
	background-color: white;
	
}

div[class=action][name=B]
{

	border: 4px solid #C28888;
	background-color: #FFFFFF;
	
}

div[class=action][name=D]
{

	border: 4px solid #C5B647;
	background-color: #FFFFFF;
	
}


close
{
	
	display: block;
	position: absolute;
	top: 5px;
	right: 10px;
	font-size: 20px;
	font-family: fontAwesome;
	cursor: pointer;
	
}

[id=downloadBtn]
{

	margin: 5px 0px;
	padding: 0px 20px;
	border-radius: 10px;
	text-align: center;
	background-color: #C3B642;
	
}

[id=downloadBtn]:hover
{
	
	background-color: #A59A38;
	
}

close:hover
{
	
	color: black;
	
}

div[class=action] p
{
	
	margin-bottom: 30px; 
	font-weight: bold;
	font-size: 20px;
	color: black;
	
}

div[class=action] p[name=B]
{
	
	font-size: 30px;
	color: #C28888;
	
}

div[class=action] p[name=D]
{
	
	font-size: 30px;
	color: #C5B647;
	
}

/*BC彈窗文字*/
p[name=BCPurpose]
{
	
	white-space: pre-wrap;
	
}

/*compare*/
mask
{
	
	justify-content: center;
	align-items: flex-start;
	
}

div[name=tableContent]
{
	
	height: 700px;
	overflow-y: auto;
	
}

table[name=compareContent]
{
	
	padding: 50px;
	font-size: 20px; /* orangle: 20px; */
	/*text-align: flex-start;*/
	color: black;
	border: 1px solid black;
	overflow-y: auto;
	
}

table[name=compareContent] th
{
	
	padding: 10px;
	text-align: center;
	border: 1px solid black;
	color: white;
	background-color: #77A2BB;
	/*white-space: nowrap;*/
	
}

table[name=compareContent] td
{
	
	padding: 10px;
	text-align: center;
	font-weight: bold;
	border: 1px solid black;
	
}

td[class=compar][name=item]
{
	
	text-align: left;
	color: #77A2BB;
	background-color: #F7F3EB;
	
}

/*div[class=myContent]
{
	
	margin: 30px 0px;
	display: flex; 
	flex-direction: column; 
	align-items: center;
	font-size: 18px;
	color: black;
	 
}*/

/*div[class=compar]
{
	
	margin: 20px 0px;
	display: flex; 
	width: 70%; 
	justify-content: space-between;
	
}*/

/*table[id=comparisonTable] 
{
    width: 100%;
    border-collapse: collapse;
    text-align: left;
	
}

th[class=compar] , td[class=compar] 
{
    border: 1px solid #ddd;
    padding: 2px;
        
}

th[class=compar] 
{
    background-color: #f4f4f4;
	
}

td[class=compar][name=O]
{
	
	text-align: center;
	
}

button[class=submit]
{
	
	padding: 2px 10px; 
	border-radius: 2px;
	text-align: center;
	font-weight: bold;
	background-color: #82B6D1;

}

button[class=submit]:hover
{
	
	background-color: #77A6BF;
	
}*/

@media screen and (max-width: 768px) {

  div[name=items] {
    flex-direction: column;
    margin: 10px 0;
    padding: 10px;
    font-size: 16px;
    text-align: center;
  }

  div[class=tab-content] {
    height: auto;
    max-height: 400px;
  }

  table[class=combo],
  table[name=compareContent] {
    font-size: 16px;
  }

  th[class=combo-th],
  td[class=combo-td],
  table[name=compareContent] td,
  table[name=compareContent] th {
    padding: 6px;
  }

  div[class=action] {
    width: 95%;
    padding: 20px;
  }

  div[name=compareContent] {
    width: 100%;
    padding: 20px;
  }

  p[name=number] {
    font-size: 32px !important;
  }

  div[name=note] {
    font-size: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  [name=compare] {
    font-size: 16px;
    padding: 8px 20px;
  }

  div[name=scAll] {
    font-size: 14px;
  }

  div[name=tableContent] {
    height: 400px;
  }

  close {
    top: 10px;
    right: 15px;
    font-size: 24px;
  }
  

	div[name=tableContent] {
    width: 100%;
    overflow-x: auto;
  }

  table[name=compareContent] {
    width: 1000px; /* 強制表格寬度，啟用橫向捲軸 */
    font-size: 16px;
  }

  table[name=compareContent] th,
  table[name=compareContent] td {
    padding: 8px;
    font-size: 16px;
    white-space: nowrap; /* 避免文字換行，提升可讀性 */
  }


	div[class=action]
	{
		width: 750px;
		max-height: 90vh; /* 高度限制在畫面內 */
		overflow-y: auto; /* 超出範圍就可滾動 */
		padding: 10px;
		margin: auto;
		display: flex;
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start; /* 內容從上方開始 */
		border-radius: 20px;
		box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
	}
  div[name=compareContent] {
    width: 100%;
    padding: 30px 20px;
  }

  div[class=action] p,
  div[class=action] p[name=B],
  div[class=action] p[name=D] {
    font-size: 20px;
    text-align: center;
  }

  close {
    font-size: 24px;
    top: 10px;
    right: 15px;
  }

}