@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);


textarea {
  font-size: 100%;
  vertical-align: bottom;
}


/*******一致性的格式*******/


input, select {
  height: 20px;
  font-size: 100%;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.40);
  padding: 2px 5px;
  border-radius: 3px;
}
select {
  height: 25px
}

.fs100{
	font-size: 100%;
}

.fs08{
	font-size: 0.8em;
/*	word-wrap: break-word;*/
}

.w20 {
	width: 20px;
}

.w30 {
	width: 30px;
}

.w40 {
	width: 40px;
}

.w50{
	width: 50px;
}

.w60{
	width: 60px;
}

.w80{
	width: 80px;
}

.w100{
	width:100px;

}

.w200 {
	width: 200px;
}

.text-red-500 {
	color: red;
	font-weight: 500;
}

.app-feedback-note {
	display: block;
	width: fit-content;
	max-width: min(100%, 960px);
	margin: 0 0 8px 0;
	padding: 8px 12px;
	border: 1px solid #e7c79a;
	border-radius: 8px;
	background-color: #fff3df;
	color: #8a2f00;
	line-height: 1.6;
	box-sizing: border-box;
}

.app-feedback-note:empty {
	display: none;
}

.app-feedback-note--success {
	border: 1px solid rgba(34, 197, 94, .35);
	background: rgba(34, 197, 94, .12);
	color: #14532d;
}

.app-feedback-note--error {
	border-color: #e7c79a;
	background-color: #fff3df;
	color: #8a2f00;
}



/* colors */
.bg-g1{
  background-color: #31572c;

}

.bg-g2{
  background-color: #4f772d;
/*  font: white;*/
}

.bg-g3{
  background-color: #90a955;
}

.fc-w{
    color: white;
}


/*格式*/

.padding-10{
  padding: 10px;
}

.line {
  text-decoration: underline;
}


.iflex{
  display: inline-flex;
  flex-wrap: wrap;
/*  flex-grow: 1;*/

}

.mar-5-10{
  margin: 5px 10px;
}

/*handsontable*/


.handsontable {
/*    font-weight:bold;*/
    font-size:1em;
}

.handsontable td {
    padding: 5px;
}

.handsontable .htDimmed {
    color: #999;
    font-style: italic;
    background-color: #eee;
}

.handsontable thead th.ht__active_highlight {
    background-color: #91a21c;
    color: #000;
}

.handsontable td.area:before {
    background: #c4d203;
}

.handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
    background-color: #bbc28b;
}

.handsontable .rowHeader, .handsontable .colHeader {
	font-size: 0.8em;
}

.handsontable th {
	background-color: #dbe279;
}

.handsontable .currentRow {
	background-color: #faf0d4;
	color: black;
}

.handsontable.listbox tr:hover td, .handsontable.listbox tr td.current{
	background-color: #ccc;
}




/* CSS */
button {
  appearance: none;
  background-color: #FAFBFC;
  border: 1px solid rgba(27, 31, 35, 0.15);
  border-radius: 6px;
  box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
  box-sizing: border-box;
  color: #24292E;
  cursor: pointer;
  display: inline-block;
  font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 14px;
  font-weight: 500;
  line-height: 15px;
  list-style: none;
  padding: 5px 10px;
  position: relative;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: break-word;
}

button:hover {
  background-color: #F3F4F6;
  text-decoration: none;
  transition-duration: 0.1s;
}

button:disabled {
  background-color: #FAFBFC;
  border-color: rgba(27, 31, 35, 0.15);
  color: #959DA5;
  cursor: default;
}

button:active {
  background-color: #EDEFF2;
  box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
  transition: none 0s;
}

button:focus {
  outline: 1px transparent;
}

/*button:before {
  display: none;
}*/

button:-webkit-details-marker {
  display: none;
}


.datasavebutton {
  width: 800px;
  background-color: beige;
}

.datasavebutton:hover {
  background-color: #d8d89d;
  text-decoration: none;
  transition-duration: 0.1s;
}

.recruitbutton{
  background-color: darkgoldenrod;
  color: white;
  letter-spacing: 1px;
}

.recruitbutton:hover {
  background-color: #8f690c;
  text-decoration: none;
  transition-duration: 0.1s;
}

.rollbutton{
  background-color: lightsteelblue;
/*  color: white;*/
  letter-spacing: 1px;
}

.rollbutton:hover {
  background-color: #dadcdf;
  text-decoration: none;
  transition-duration: 0.1s;
}

.finishbutton{
  background-color: lightcoral;
/*  color: white;*/
  font-weight: 800;
  letter-spacing: 1px;
}

.finishbutton:hover {
  background-color: #f1bfbf;
  text-decoration: none;
  transition-duration: 0.1s;
}

.tablesorter {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tablesorter th,
.tablesorter td {
  padding: 5px 10px;
  border: 1px solid #ddd;
}
.tablesorter-header-inner {
  font-weight: 700;

}

.tablesorter thead th{
  background-color: #cdcdcd;
  text-align: left;
  font-weight: 700;
  position: sticky;
  top: 0;
}

.tablesorter tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.tablesorter tbody tr:hover {
  background-color: #ddd;
}

/* 排序指示符 */
.tablesorter-headerAsc::after {
  content: " ▲";
  font-size: 12px;
  float: right;
  margin-left: 5px;
  margin-top:-25px; 
}

.tablesorter-headerDesc::after {
  content: " ▼";
  font-size: 12px;
  float: right;
  margin-left: 5px;
  margin-top:-25px;
}



.tablesorter-filter-row input{
  font-size: 14 px;
  padding:2px 0 2px 5px;
}

/*結構*/
.pages{
  display: flex;
  margin-bottom: 10px;
}

.recruittableout, .slrolltableout {
  display: none;
}

.savenote {
  font-weight:500; 
  margin-left: 30px; 
  font-size:90%; 
  color:red;
}