@charset "UTF-8";

table th, table td {
  background-clip: padding-box; /* Add this line */
}

/* core */
 
.tableSpace { width: 100%; position: relative; margin: 15px auto 60px;}

.tableSpace th[class*="tableSpace__"] { position: relative; line-height: 1.2em; font-weight: normal; }
.tableSpace th[class*="tableSpace__"].is-active:after { content: "\f0d8"; display: inline-block; font: normal normal normal 20px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; }
.tableSpace th[class*="tableSpace__"].is-active.asc:after { content: "\f0dd"; }
 

.tableSpace table th { height: 110px; vertical-align: middle; cursor: pointer; }

/*.tableSpace table th, .tableSpace table td { padding: 6px 3px; }*/

/*.tableSpace table th { padding: 6px 16px;}*/

.tableSpace table th { padding: 6px auto;}

/*.tableSpace table td { height: 50px; padding: 5px 0; text-align: center; }*/

.tableSpace table td { height: 3em; padding: 5px 2px; text-align: right; }
.tableSpace table td a {padding: 5px;}

td.tableSpace__NO, td.tableSpace__CODE, td.tableSpace__GROUP_NAME  { text-align: center !important;}
td.tableSpace__STOCK_DESC { font-weight: bold !important; text-align: left !important; white-space: nowrap; min-width:90px !important;}

.pcHead-wrapper { width: 100%; visibility: hidden; position: absolute; top: 0; min-width:280px;}
.pcHead-wrapper table { width: 100%;}
.pcHead-wrapper.is-stickyHead { position: fixed; visibility: visible; background-color: #fff;}

/*.pcHead-wrapper.is-stickyHead { visibility: visible;}*/


/*.pcHead-wrapper th { background-color: #fff; } */

.is-stickyHead .scrollable--stickyRight, .is-stickyHead .stickyFirst, .is-stickyHead .pcHead-wrapper { visibility: visible; }

.table-wrapper th { text-align: center; }

.scrollable th { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; }

.scrollable th.is-hover, .scrollable td.is-hover { color: white; background-color: #009fe9 !important; }
/*.scrollable th.is-hover2, .scrollable td.is-hover2 { border-left: 1px solid #eee !important;  border-right: 1px solid #eee !important;}*/


.scrollable th.is-hover a, .scrollable td.is-hover a { color: white; }

.scrollable:hover { cursor: move; }

.scrollable--stickyRight { width: 90%; position: fixed; top: 0; z-index: 999; overflow: hidden !important; visibility: hidden; }

.scrollable--stickyRight th.is-hover, .scrollable--stickyRight td.is-hover { color: white; background-color: #009fe9 !important; }

.scrollable--stickyRight th.is-hover a, .scrollable--stickyRight td.is-hover a { color: white; }

.scrollable--stickyRight th { background-color: #fff; border-bottom: 1px solid #ccc; }

.scrollable--stickyRight td { opacity: 0; }

.stickyFirst { width: 10%; position: fixed; top: 0; overflow: hidden !important; visibility: hidden; }

.stickyFirst table { width: 100%; }

.stickyFirst th { font-size: 13px; background-color: #fff; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; }

.stickyFirst td { opacity: 0; }

/*.pinned th { border-top: 1px solid #ccc; outline: 1px solid #ccc; }*/

.pinned tr.is-hover td { color: white; background-color: #009fe9 !important; }

.pinned tr.is-hover td a { color: white; }

.pinned th { vertical-align: middle; }

.pinned th, .pinned td { font-size: 13px; }

.pinned .tbody:nth-child(odd) td { background-color: #eee; }

/* theme */
/* .table-wrapper .responsive {
} */
table.responsive { width: 100%; border: 1px solid #ccc;}

table.responsive th, table.responsive td { min-width: 3.8%; font-size: 13px;}
table.responsive td {border-left: 1px solid #fff;}

table.responsive th.is-hover, table.responsive td.is-hover { color: white; background-color: #009fe9 !important; }
table.responsive th.is-hover { border-bottom: 1px solid #ccc !important; }

table.responsive th.is-hover a, table.responsive td.is-hover a { color: white; }

/*table.responsive th.is-hover font, table.responsive td.is-hover font { color: #98e698 !important; }*/

table.responsive th.is-hover font, table.responsive td.is-hover font { color: white !important; }

table.responsive th.is-hover font[color*="red"], table.responsive td.is-hover font[color*="red"] { color: #cc0000 !important; }
table.responsive th.is-hover font[color*="#32CD32"], table.responsive td.is-hover font[color*="#32CD32"] { color: #99ff33 !important; }

table.responsive th { text-align: center; vertical-align: middle; position: relative; border-right: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }


table.responsive .tbody td font[color*="white"] {padding: 3px 4px 2px 8px; background-color: #dc0000 !important; }
table.responsive .tbody td font[color*="black"] {padding: 3px 4px 2px 8px; background-color: #33ff33 !important; }

table.responsive th:hover { background: #009fe9; color: #fff; border-bottom: 1px solid #ccc;}


table.responsive .tbody:hover td a { color: #fff;}
table.responsive .tbody td a:hover { color: #fff; text-decoration: none; padding: 4px; border: 1px solid #fff; border-radius: 3px;}
table.responsive .tbody td a:focus { color: #fff; text-decoration: none;}

table.responsive .tbody:hover td font { color: #98e698 !important; }
table.responsive .tbody:hover td font[color*="#333"] { color: #fff !important; }
table.responsive .tbody:hover td font[color*="red"] { color: #d20000 !important; }

table.responsive .tbody:hover td font[color*="white"] {padding: 3px 4px 2px 8px; color: white !important; background-color: #dc0000 !important; }
table.responsive .tbody:hover td font[color*="black"] {padding: 3px 4px 2px 8px; color: black !important; background-color: #33ff33 !important; }

table.responsive .tbody td.is-hover font[color*="white"] {padding: 3px 4px 2px 8px; color: white !important; background-color: #dc0000 !important; }
table.responsive .tbody td.is-hover font[color*="black"] {padding: 3px 4px 2px 8px; color: black !important; background-color: #33ff33 !important; }

table.responsive .tbody:nth-child(odd) td { background-color: #eee; border-left: 1px solid #eee;}

table.responsive .tbody:hover td { color: #fff; background-color: #009fe9 !important; border-left: 1px solid #009fe9;}
table.responsive .tbody:hover td.is-hover2 { color: #fff; background-color: #009fe9 !important; border-left: 1px solid #dc0000 !important; border-right: 1px solid #dc0000 !important;}


/*
table.responsive .tbody2:nth-child(odd) td { background-color: #fff; }
table.responsive .tbody2:nth-child(even) td { background-color: #eee; }
*/


.nine-content-txt { margin-bottom: 6px; }

.table-loading { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); position: fixed; top: 0; left: 0; z-index: 99999999; opacity: 0; visibility: hidden; transition: all .3s; }

.table-loading:after { position: absolute; display: block; width: 100%; text-align: center; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%); }

.table-loading.is-resort { opacity: 1; visibility: visible; }

.table-loading.is-resort:after { content: '資料重新排序中...'; }

.table-loading.is-show { opacity: 1; visibility: visible; }

.table-loading.is-show:after { content: '資料讀取中...'; }



@media (min-width: 1680px) { 
	.tableSpace { max-width: 95%; /* margin: 0 auto; */ } 
	.pcHead-wrapper.is-stickyHead { max-width: 95%; left: 2.5%; } 
	table.responsive th, table.responsive td { font-size: 14px;}
}


@media (min-width: 1900px) { 
	table.responsive th, table.responsive td { font-size: 15px;}
}

@media only screen and (max-width: 1599px) { table.responsive th { padding: 6px 16px; } }

/*@media (max-width: 1599px) and (min-width: 1140px) { .tableSpace table.responsive { display: block;} }*/

@media (max-width: 1599px) and (min-width: 1024px) { .tableSpace table.responsive { display: block;} }

@media only screen and (max-width: 767px) { table.responsive th:hover { background: #009fe9 !important; }
  .scrollable--stickyRight { width: 65%; }
  .stickyFirst { width: 35%; } }


table.responsive td:first-child { border-left: 1px solid #ccc; }
table.responsive td:last-child { border-right: 1px solid #ccc; }

table.responsive th:first-child { border-left: 1px solid #ccc; }
table.responsive th:last-child { border-right: 1px solid #ccc; }

table.responsive .tbody:nth-child(odd) td:first-child { border-left: 1px solid #ccc;}
table.responsive .tbody:nth-child(odd) td:last-child { border-right: 1px solid #ccc;}


  
table.responsive th.is-hover2 {border: 1px solid #dc0000 !important; outline:2px solid #dc0000 !important; }
/*table.responsive th.is-hover2 {border: 1px solid #dc0000 !important}*/

table.responsive td.is-hover2 {border-left: 1px solid #dc0000 !important; border-right:1px solid #dc0000 !important; }

table.responsive .tbody:last-child td.is-hover2 {border-bottom: 1px solid #dc0000 !important}

/* table.responsive td:hover.is-hover2 {border-left: 1px solid #dc0000 !important; border-right:1px solid #dc0000 !important; } */

/*table.responsive .tbody:nth-child(odd) td.is-hover2 {background-color: #fff; border-left: 1px solid #009fe9 !important; border-right:1px solid #009fe9 !important; }*/

/*table.responsive th.is-hover2, table.responsive td.is-hover2 { border-left: 1px solid #009fe9 !important;  border-right: 1px solid #ccc !important; box-sizing: border-box !important;}*/

@media only screen and (max-width: 480px) {   
  table.responsive td, table.responsive th {white-space: normal;}
}