/*--------------------------  有提是跟變色框的表單 ---------------------------------------*/
form div.dynamiclabel{ /* div container for each form field with pop up label */
  display: block;
  margin: 30px;
	font: 16px;
  position: relative;
}


form div.dynamiclabel input[type="text"],input[type="password"], form div.dynamiclabel textarea{
  width: 150px;
  padding: 5px;
  border: 1px solid #c3c3c3;
  border-radius: 7px;
}

form div.dynamiclabel textarea{
	height: 200px;
}


form div.dynamiclabel label{ /* pop up label style */
  position: absolute;
  left: 0;
  background: lightyellow;
  border: 1px solid yellow;
  border-radius: 2px;
  padding: 3px 10px;
  box-shadow: 4px 1px 5px gray;
  font-weight: bold;
	-webkit-backface-visibility: hidden;
	top: 10px; /* initial top position of label relative to dynamiclabel container */
  -moz-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.4s ease-in-out; /* Safari doesn't seem to support cubic-bezier values beyond 0 to 1, so use keyword value instead */
  -o-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
  z-index: -1;
}


form div.dynamiclabel > *:focus{ /* when user focuses on child element inside div.dynamiclabel */
  border: 1px solid #45bcd2;
  box-shadow: 0 0 8px 2px #98d865;
}


form div.dynamiclabel > *:focus + label{ /* label style when user focuses on child element inside div.dynamiclabel */
  opacity: 1;
  z-index:100;
	top: -35px; /* Post top position of label on focus relative to dynamiclabel container */
	-ms-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

/*--------------------------  有提是跟變色框的表單 ---------------------------------------*/

input[type="text"],input[type="password"],textarea{  /*所有text,power,textarea定義*/
  padding: 5px;
  border: 1px solid #c3c3c3;
  border-radius: 7px;
  overflow-y:auto; /*隱藏下拉式箭頭 overflow-y: visible|hidden|scroll|auto|no-display|no-content;*/
  height:30px;
/*  color: #996600*/
}

#Td_title{  /*標題*/
  font-size:20px;
  color:#333; /*顏色*/
  text-align: center; /*文字置中*/
}

#TdDirectory,#TdDirectory > td{  /*所有表單目錄 <tr align="center" id="TdDirectory"> */
  font-size:14px;
  background-color:#333;  /*背景顏色*/
  color:#FFF; /*顏色*/
  padding: 5px;  /*間距*/ 
  /*border: 0px solid #c3c3c3; 外框*/
  border-radius: 7px; /*圓角半徑*/
  text-align: center; /*文字置中*/
}

td{
	font-size:14px;
	}
	
/* placeholder 提示文字顏色*/
::-webkit-input-placeholder { color:#aaa; }
::-moz-placeholder { color:#aaa; } /* firefox 19+ */
:-ms-input-placeholder { color:#aaa; } /* ie */
input:-moz-placeholder { color:#aaa; }

/*表單禁用設定*/
input[readonly],input[disabled],textarea:disabled
{
	background:#eee;
}

/*警告方框紅字*/
#txt_red{
text-align: center; /*文字置中*/	
font:normal 16px Verdana, Geneva, sans-serif;
font-style:normal;
color:#f00;
background:#f5f5f5;
border:0px solid #bbb;
text-shadow:0px 1px 0px #fff;
box-shadow:0px 1px 11px #d1cfd1;
-moz-box-shadow:0px 1px 11px #d1cfd1;
-webkit-box-shadow:0px 1px 11px #d1cfd1;
border-radius:10px 10px 10px 10px;
-moz-border-radius:10px 10px 10px 10px;
-webkit-border-radius:10px 10px 10px 10px;
width: auto;
padding:10px 10px;
cursor:pointer;
margin:0 auto;
display: inline-block;
}

input[type="text"]:hover,input[type="checkbox"]:hover,input[type="select"]:hover,textarea:hover
 { /*滑鼠經過*/
	box-shadow:0px 0px 10px #000;  /*周圍發光*/
}

input[type="button"], input[type="submit"]{
	font-size:13px;
	font-family:Arial;
	font-weight:normal;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border:1px solid #0;
	padding:5px 10px;
	text-decoration:none;
	
	/* 設定背景漸層效果，支援不同瀏覽器的前綴 
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) );
	*/
	background-color:#ededed;
	
	color:#0;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
 	-webkit-box-shadow:inset 1px 1px 0px -50px #ffffff;
 	-moz-box-shadow:inset 1px 1px 0px -50px #ffffff;
 	box-shadow:inset 1px 1px 0px -50px #ffffff;
	/*box-shadow:0px 0px 16px #FF0;*/
}

input[type="button"]:hover, input[type="submit"]:hover { /*滑鼠經過*/
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) );
	background-color:#dfdfdf;
	box-shadow:0px 0px 16px #000;  /*周圍發光*/
}
input[type="button"]:active, input[type="submit"]:active { /*滑鼠按下*/
	position:relative;
	top:1px;
}
/*--------------------------  upload表單 ---------------------------------------*/

/*--------------------------  密碼眼睛 ---------------------------------------*/
  .custom-input {
    position: relative;display: inline-block;
  }

  .custom-input input {
    padding-right: 30px; /* 留出右侧空间以容纳眼睛图标 */
  }

  .custom-input .eye-icon {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    cursor: pointer;
  }
/*--------------------------  密碼眼睛 ---------------------------------------*/

/*--------------------------  常用類別 ---------------------------------------*/
/* 垂直對中 class="center_vertical" */
.center_vertical {
    display: flex;
    justify-content: center;
    align-items: center;
}
/*--------------------------  常用類別 ---------------------------------------*/

/*--------------------------  文字閃爍 ---------------------------------------*/
@keyframes blinking_txt {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.blinking-text {
  animation: blinking_txt 5s infinite;
}

/*--------------------------  選單文字 ---------------------------------------*/
select {
    font-size: 15px; /* 調整字體大小 */
    padding: 2px;  /* 增加內邊距讓選單看起來更舒適 */
}

/*--------------------------  table-box 表格 ---------------------------------------*/
.table-box123{
    width:60%;
    margin:auto;
}

.table-box123 table{
    width:100%;
    border-collapse:collapse;
    font-family:"Microsoft JhengHei",sans-serif;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,0.08);
    text-align:center;   /* 文字置中 */
}

.table-box123 th{
    background:#f3f4f6;
    color:#374151;
    padding:14px;
    border-bottom:2px solid #d1d5db;
}

.table-box123 td{
    padding:12px 14px;
    border-bottom:1px solid #e5e7eb;
}

.table-box123 tr:hover{
    background:#f9fafb;
}
/*--------------------------  table-box 表格 ---------------------------------------*/