/*reset css*/
* {
	box-sizing: border-box;
	padding: 0; margin: 0;
	/*prevent callout to copy image, etc when tap to hold*/
	-webkit-touch-callout: none;
	/*prevent dragable*/
	 -webkit-user-drag: none;
	/*prevent auto adjust font size of wide block, etc when IOS Safari in landscape*/
	-webkit-text-size-adjust: none;
}
/*default: input, textarea, select, button, label*/
input, button, select, label {
	max-width: 100%;
	vertical-align: middle;
}
input, button, select {
	background: white;
}
input[type="file"] {
	background: none;
}
input[type="button"], input[type="submit"], input[type="reset"], button, select {
	color: #0075ff;
}
input[type="text"],
input[type="tel"], input[type="url"], input[type="email"],
input[type="number"], input[type="search"], input[type="password"],
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="week"], input[type="month"], select {
	height: 40px;
	line-height: 100%;
	padding: 0 5px;
	border: 1px solid rgb(100,100,100);
	border-radius: 5px;
	font-size: 16px;
	font-weight: normal;
}
input[type="number"] {
	padding-right: 0; /*Google Chrome Configuration*/
}
textarea {
	padding: 5px;
	font-size: 16px;
	tab-size: 4;
	resize: none;
}
input[type="text"]:focus,
input[type="tel"]:focus, input[type="url"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="password"]:focus,
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus,
input[type="week"]:focus, input[type="month"]:focus, textarea:focus, select:focus {
	outline-color: #0075ff;
}
input[type="button"], input[type="submit"], input[type="reset"], button {
	height: 40px;
	border: 1px solid rgb(200,200,200);
	border-radius: 5px;
	font-size: 16px;
	font-weight: normal;
}
input[type="checkbox"], input[type="radio"] {
	accent-color: #0075ff;
	width: 18px;
	height: 18px;
}
input[type="color"] {
	height: 40px;
	border: 1px solid rgb(200,200,200);
	border-radius: 5px;
}
input[type="button"], input[type="submit"], input[type="reset"], button, [button], input[type="color"], select, label[for] {
	-webkit-user-select: none; /*prevent text selection*/
	cursor: pointer;
}
/*display*/
[displayNone] { display: none !important; }
/*width*/
[w0] { width: 0 !important; } [wAuto] { width: auto !important; }
[w10] { width: 10px !important; } [w15] { width: 15px !important; }
[w20] { width: 20px !important; } [w25] { width: 25px !important; }
[w30] { width: 30px !important; } [w35] { width: 35px !important; }
[w40] { width: 40px !important; } [w45] { width: 45px !important; }
[w50] { width: 50px !important; } [w60] { width: 60px !important; }
[w70] { width: 70px !important; } [w80] { width: 80px !important; }
[w90] { width: 90px !important; } [w100] { width: 100px !important; }
[w110] { width: 110px !important; } [w120] { width: 120px !important; }
[w130] { width: 130px !important; } [w140] { width: 140px !important; }
[w150] { width: 150px !important; } [w160] { width: 160px !important; }
[w170] { width: 170px !important; } [w180] { width: 180px !important; }
[w190] { width: 190px !important; } [w200] { width: 200px !important; }
[w210] { width: 210px !important; } [w220] { width: 220px !important; }
[w230] { width: 230px !important; } [w240] { width: 240px !important; }
[w250] { width: 250px !important; } [w260] { width: 260px !important; }
[w270] { width: 270px !important; } [w280] { width: 280px !important; }
[w290] { width: 290px !important; } [w300] { width: 300px !important; }
[wp25] { width: 25% !important; } [wp50] { width: 50% !important; }
[wp75] { width: 75% !important; } [wp100] { width: 100% !important; }
/*max-width*/
[mw350] { max-width: 350px; } [mw400] { max-width: 400px; }
[mw450] { max-width: 450px; } [mw500] { max-width: 500px; }
[mw550] { max-width: 550px; } [mw600] { max-width: 600px; }
[mw650] { max-width: 650px; } [mw700] { max-width: 700px; }
[mw750] { max-width: 700px; } [mw800] { max-width: 800px; }
[mw850] { max-width: 850px; } [mw900] { max-width: 900px; }
[mw950] { max-width: 950px; } [mw1000] { max-width: 1000px; }
/*height*/
[h10] { height: 10px !important; } [h15] { height: 15px !important; }
[h20] { height: 20px !important; } [h25] { height: 25px !important; }
[h30] { height: 30px !important; } [h35] { height: 35px !important; }
[h40] { height: 40px !important; } [h45] { height: 45px !important; }
[h50] { height: 50px !important; } [h60] { height: 60px !important; }
[h70] { height: 70px !important; } [h80] { height: 80px !important; }
[h90] { height: 90px !important; } [h100] { height: 100px !important; }
[h110] { height: 110px !important; } [h120] { height: 120px !important; }
[h130] { height: 130px !important; } [h140] { height: 140px !important; }
[h150] { height: 150px !important; } [h160] { height: 160px !important; }
[h170] { height: 170px !important; } [h180] { height: 180px !important; }
[h190] { height: 190px !important; } [h200] { height: 200px !important; }
[h210] { height: 210px !important; } [h220] { height: 220px !important; }
[h230] { height: 230px !important; } [h240] { height: 240px !important; }
[h250] { height: 250px !important; } [h260] { height: 260px !important; }
[h270] { height: 270px !important; } [h280] { height: 280px !important; }
[h290] { height: 290px !important; } [h300] { height: 300px !important; }
[h350] { height: 350px !important; } [h400] { height: 400px !important; }
[h450] { height: 450px !important; } [h500] { height: 500px !important; }
[h550] { height: 550px !important; } [h600] { height: 600px !important; }
[hp25] { height: 25% !important; } [hp50] { height: 50% !important; }
[hp75] { height: 75% !important; } [hp100] { height: 100% !important; }
/*padding*/
[p0] { padding: 0 !important; } [p5] { padding: 5px !important; }
[p10] { padding: 10px !important; } [p15] { padding: 15px !important; }
[p20] { padding: 20px !important; } [p25] { padding: 25px !important; }
[p30] { padding: 30px !important; } [p40] { padding: 40px !important; }
[p50] { padding: 50px !important; } [p60] { padding: 60px !important; }
[p70] { padding: 70px !important; } [p80] { padding: 80px !important; }
[p90] { padding: 90px !important; } [p100] { padding: 100px !important; }
/*padding-top*/
[pt0] { padding-top: 0 !important; } [pt5] { padding-top: 5px !important; }
[pt10] { padding-top: 10px !important; } [pt15] { padding-top: 15px !important; }
[pt20] { padding-top: 20px !important; } [pt25] { padding-top: 25px !important; }
[pt30] { padding-top: 30px !important; } [pt40] { padding-top: 40px !important; }
[pt50] { padding-top: 50px !important; } [pt60] { padding-top: 60px !important; }
[pt70] { padding-top: 70px !important; } [pt80] { padding-top: 80px !important; }
[pt90] { padding-top: 90px !important; } [pt100] { padding-top: 100px !important; }
/*padding-right*/
[pr0] { padding-right: 0 !important; } [pr5] { padding-right: 5px !important; }
[pr10] { padding-right: 10px !important; } [pr15] { padding-right: 15px !important; }
[pr20] { padding-right: 20px !important; } [pr25] { padding-right: 25px !important; }
[pr30] { padding-right: 30px !important; } [pr40] { padding-right: 40px !important; }
[pr50] { padding-right: 50px !important; } [pr60] { padding-right: 60px !important; }
[pr70] { padding-right: 70px !important; } [pr80] { padding-right: 80px !important; }
[pr90] { padding-right: 90px !important; } [pr100] { padding-right: 100px !important; }
/*padding-bottom*/
[pb0] { padding-bottom: 0 !important; } [pb5] { padding-bottom: 5px !important; }
[pb10] { padding-bottom: 10px !important; } [pb15] { padding-bottom: 15px !important; }
[pb20] { padding-bottom: 20px !important; } [pb25] { padding-bottom: 25px !important; }
[pb30] { padding-bottom: 30px !important; } [pb40] { padding-bottom: 40px !important; }
[pb50] { padding-bottom: 50px !important; } [pb60] { padding-bottom: 60px !important; }
[pb70] { padding-bottom: 70px !important; } [pb80] { padding-bottom: 80px !important; }
[pb90] { padding-bottom: 90px !important; } [pb100] { padding-bottom: 100px !important; }
/*padding-left*/
[pl0] { padding-left: 0 !important; } [pl5] { padding-left: 5px !important; }
[pl10] { padding-left: 10px !important; } [pl15] { padding-left: 15px !important; }
[pl20] { padding-left: 20px !important; } [pl25] { padding-left: 25px !important; }
[pl30] { padding-left: 30px !important; } [pl40] { padding-left: 40px !important; }
[pl50] { padding-left: 50px !important; } [pl60] { padding-left: 60px !important; }
[pl70] { padding-left: 70px !important; } [pl80] { padding-left: 80px !important; }
[pl90] { padding-left: 90px !important; } [pl100] { padding-left: 100px !important; }
/*margin*/
[m0] { margin: 0 !important; } [m5] { margin: 5px !important; }
[m10] { margin: 10px !important; } [m15] { margin: 15px !important; }
[m20] { margin: 20px !important; } [m25] { margin: 25px !important; }
[m30] { margin: 30px !important; } [m40] { margin: 40px !important; }
[m50] { margin: 50px !important; } [m60] { margin: 60px !important; }
[m70] { margin: 70px !important; } [m80] { margin: 80px !important; }
[m90] { margin: 90px !important; } [m100] { margin: 100px !important; }
/*margin-top*/
[mt0] { margin-top: 0 !important; } [mt5] { margin-top: 5px !important; }
[mt10] { margin-top: 10px !important; } [mt15] { margin-top: 15px !important; }
[mt20] { margin-top: 20px !important; } [mt25] { margin-top: 25px !important; }
[mt30] { margin-top: 30px !important; } [mt40] { margin-top: 40px !important; }
[mt50] { margin-top: 50px !important; } [mt60] { margin-top: 60px !important; }
[mt70] { margin-top: 70px !important; } [mt80] { margin-top: 80px !important; }
[mt90] { margin-top: 90px !important; } [mt100] { margin-top: 100px !important; }
/*margin-right*/
[mr0] { margin-right: 0 !important; } [mr5] { margin-right: 5px !important; }
[mr10] { margin-right: 10px !important; } [mr15] { margin-right: 15px !important; }
[mr20] { margin-right: 20px !important; } [mr25] { margin-right: 25px !important; }
[mr30] { margin-right: 30px !important; } [mr40] { margin-right: 40px !important; }
[mr50] { margin-right: 50px !important; } [mr60] { margin-right: 60px !important; }
[mr70] { margin-right: 70px !important; } [mr80] { margin-right: 80px !important; }
[mr90] { margin-right: 90px !important; } [mr100] { margin-right: 100px !important; }
/*margin-bottom*/
[mb0] { margin-bottom: 0 !important; } [mb5] { margin-bottom: 5px !important; }
[mb10] { margin-bottom: 10px !important; } [mb15] { margin-bottom: 15px !important; }
[mb20] { margin-bottom: 20px !important; } [mb25] { margin-bottom: 25px !important; }
[mb30] { margin-bottom: 30px !important; } [mb40] { margin-bottom: 40px !important; }
[mb50] { margin-bottom: 50px !important; } [mb60] { margin-bottom: 60px !important; }
[mb70] { margin-bottom: 70px !important; } [mb80] { margin-bottom: 80px !important; }
[mb90] { margin-bottom: 90px !important; } [mb100] { margin-bottom: 100px !important; }
/*margin-left*/
[ml0] { margin-left: 0 !important; } [ml5] { margin-left: 5px !important; }
[ml10] { margin-left: 10px !important; } [ml15] { margin-left: 15px !important; }
[ml20] { margin-left: 20px !important; } [ml25] { margin-left: 25px !important; }
[ml30] { margin-left: 30px !important; } [ml40] { margin-left: 40px !important; }
[ml50] { margin-left: 50px !important; } [ml60] { margin-left: 60px !important; }
[ml70] { margin-left: 70px !important; } [ml80] { margin-left: 80px !important; }
[ml90] { margin-left: 90px !important; } [ml100] { margin-left: 100px !important; }
/*[wrapper]*/
[wrapper] {
	margin-right: auto !important;
	margin-left: auto !important;
}
/*flex container*/
[flexCenter] {
	display: flex; align-items: center;
	justify-content: center;
}
[flexR], [flexEnd] {
	display: flex; align-items: center;
	justify-content: flex-end;
}
[flexL], [flexStart] {
	display: flex; align-items: center;
	justify-content: flex-start;
}
[flexAround] {
	display: flex; align-items: center;
	justify-content: space-around;
}
[flexBetween] {
	display: flex; align-items: center;
	justify-content: space-between;
}
[flexSCenter] {
	display: flex; align-items: stretch;
	justify-content: center;
}
[flexSR], [flexSEnd] {
	display: flex; align-items: stretch;
	justify-content: flex-end;
}
[flexSL], [flexSStart] {
	display: flex; align-items: stretch;
	justify-content: flex-start;
}
[flexSAround] {
	display: flex; align-items: stretch;
	justify-content: space-around;
}
[flexSBetween] {
	display: flex; align-items: stretch;
	justify-content: space-between;
}
[iflexCenter] {
	display: inline-flex; align-items: center;
	justify-content: center;
}
[iflexR], [iflexEnd] {
	display: inline-flex; align-items: center;
	justify-content: flex-end;
}
[iflexL], [iflexStart] {
	display: inline-flex; align-items: center;
	justify-content: flex-start;
}
[iflexAround] {
	display: inline-flex; align-items: center;
	justify-content: space-around;
}
[iflexBetween] {
	display: inline-flex; align-items: center;
	justify-content: space-between;
}
[iflexSCenter] {
	display: inline-flex; align-items: stretch;
	justify-content: center;
}
[iflexSR], [iflexSEnd] {
	display: inline-flex; align-items: stretch;
	justify-content: flex-end;
}
[iflexSL], [iflexSStart] {
	display: inline-flex; align-items: stretch;
	justify-content: flex-start;
}
[iflexSAround] {
	display: inline-flex; align-items: stretch;
	justify-content: space-around;
}
[iflexSBetween] {
	display: inline-flex; align-items: stretch;
	justify-content: space-between;
}
[flexColumn] {
	flex-direction: column;
}
[flexWrap] {
	flex-wrap: wrap;
}
/*gap*/
[gap10] { gap: 10px; }
[gap20] { gap: 20px; }
[gap30] { gap: 30px; }
[gap40] { gap: 40px; }
[gap50] { gap: 50px; }
[gapRow10] { row-gap: 10px; }
[gapRow20] { row-gap: 20px; }
[gapRow30] { row-gap: 30px; }
[gapRow40] { row-gap: 40px; }
[gapColumn10] { column-gap: 10px; }
[gapColumn20] { column-gap: 20px; }
[gapColumn30] { column-gap: 30px; }
[gapColumn40] { column-gap: 40px; }
/*flex child*/
[flex0] { flex: 0 0 auto; }
[flex1] { flex: 1 1 0; }
[flex2] { flex: 2 1 0; }
[flex3] { flex: 3 1 0; }
[flex4] { flex: 4 1 0; }
/*inline position : text, inline-block elements*/
[inlineLimit] {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
[inlineCenter] { text-align: center; }
[inlineR] { text-align: right; }
[inlineL] { text-align: left; }
/*input:only-child, textarea:only-child, select:only-child,
label:only-child, button:only-child {
	display: block;
}*/
[buttonSwitch]:only-child {
	display: flex;
}
[inlineCenter]>input:only-child, [inlineCenter]>select:only-child,
[inlineCenter]>label:only-child, [inlineCenter]>button:only-child,
[inlineCenter]>[buttonSwitch] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
[inlineR]>input:only-child, [inlineR]>select:only-child,
[inlineR]>label:only-child, [inlineR]>button:only-child,
[inlineR]>[buttonSwitch] {
	display: block;
	margin-left: auto;
}
[inlineL]>input:only-child, [inlineL]>select:only-child,
[inlineL]>label:only-child, [inlineL]>button:only-child,
[inlineL]>[buttonSwitch] {
	display: block;
	margin-right: auto;
}
/*fixed position*/
[fixedT] { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }
[fixedR] { position: fixed; top: 0; right: 0; height: 100%; z-index: 100; }
[fixedB] { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 100; }
[fixedL] { position: fixed; top: 0; left: 0; height: 100%; z-index: 100; }
[fixedTR] { position: fixed; top: 0; right: 0; z-index: 100; }
[fixedTL] { position: fixed; top: 0; left: 0; z-index: 100; }
[fixedBR] { position: fixed; bottom: 0; right: 0; z-index: 100; }
[fixedBL] { position: fixed; bottom: 0; left: 0; z-index: 100; }
/*absolute position*/
[relative] { position: relative; }
[absT] { position: absolute; top: 0; left: 0; width: 100%; }
[absR] { position: absolute; top: 0; right: 0; height: 100%; }
[absB] { position: absolute; bottom: 0; left: 0; width: 100%; }
[absL] { position: absolute; top: 0; left: 0; height: 100%; }
[absTR] { position: absolute; top: 0; right: 0; }
[absTL] { position: absolute; top: 0; left: 0; }
[absBR] { position: absolute; bottom: 0; right: 0; }
[absBL] { position: absolute; bottom: 0; left: 0; }
/*[ground], [scene], [veil]*/
[ground] {
	position: fixed;
	top: 0; left: 0;
	width: 100vw; height: 100vh;
	z-index: 100;
}
[scene] {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 100;
}
[veil] {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	/*z-index: 100;*/
}
/*[column]*/
[column] {
	text-align: center;
}
[column]>* {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
/*overflow*/
[autoFlow] { overflow: auto; }
[autoFlowY] { overflow-y: auto; }
[autoFlowX] { overflow-x: auto; }
[hiddenFlow] { overflow: hidden; }
[hiddenFlowY] { overflow-y: hidden; }
[hiddenFlowX] { overflow-x: hidden; }
[scrollFlow] { overflow: scroll; }
[scrollFlowY] { overflow-y: scroll; }
[scrollFlowX] { overflow-x: scroll; }
/*wrapperSelect*/
[wrapperSelect] {
	color: #0075ff; /*decoration point*/
	caret-color: #0075ff; /*decoration point*/
	display: inline-block;
	position: relative;
	width: 240px; /*decoration point*/
	max-width: 100%;
}
[wrapperSelect]>select {
	color: inherit;
	caret-color: inherit;
	width: 100% !important;
	-webkit-appearance: none;
}
[wrapperSelect]:after {
	color: inherit;
	position: absolute;
	top: 50%;
	right: 5px;
	transform: translateY(-50%);
	content: '\0025BC';
	font-size: 12px;
	pointer-events: none;
}
[wrapperSelect][transperent] {
	color: inherit;
	caret-color: inherit;
}
[wrapperSelect][transperent]>select {
	background: none !important;
	padding: 0 !important;
	border: none !important;
}
[wrapperSelect][transperent]>select:focus {
	outline: none !important;
}
[wrapperSelect][transperent]:after {
	right: 0 !important;
}
/*table layout*/
[wrapTable] {
	/*styling max-width, height and margin at [wrapTable](table's parent)*/
	overflow-y: auto;
}
[wrapTable]::-webkit-scrollbar, table::-webkit-scrollbar {
	width: 0;
}
table {
	table-layout: fixed;
	width: 100%;
	border-spacing: 0;
}
caption, th, td {
	padding: 5px;
	vertical-align: top;
	overflow: hidden;
}
tfoot {
	text-align: center;
}
table input, table button, table select {
	height: auto;
}
table div {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
th>div, td>div {
	display: flex;
	justify-content: center;
	align-items: center;
}
th[inlineR]>div, td[inlineR]>div {
	justify-content: flex-end;
}
th[inlineL]>div, td[inlineL]>div {
	justify-content: flex-start;
}
table input[type="checkbox"]:not(:only-child),
table input[type="radio"]:not(:only-child) {
	margin-left: 0;
	margin-right: 6px;
}
/*table background, color, font-weight and box-shadow*/
[wrapTable] {
	background: rgb(200,200,200);
}
thead, tfoot, [wrapTable] caption {
	background: rgb(64,128,255);
	color: white;
}
caption, th, td {
	font-weight: normal;
}
tbody tr {
	background: rgba(255,255,255);
}
tbody tr:nth-child(even) {
	background: rgba(240,240,240);
}
[wrapTable] thead tr:last-child {
	box-shadow: 0 8px 8px rgba(255,255,255,0.5);
}
[wrapTable] tfoot tr:first-child {
	box-shadow: 0 -8px 8px rgba(255,255,255,0.5);
}
/*table border*/
[wrapTable], table {
	border-width: 1px; /*decoration point*/
	border-style: solid;
	border-color: rgb(100,100,100); /*decoration point*/
}
[wrapTable]>table {
	border-width: 0;
}
[wrapTable] caption {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
th, td {
	border-width: 1px;
	border-style: solid;
	border-left-width: 0;
}
th:last-child, td:last-child {
	border-right-width: 0;
}
thead th, thead td, tbody th, tbody td {
	border-top-width: 0;
}
tbody tr:last-child th, tbody tr:last-child td, tfoot th, tfoot td {
	border-bottom-width: 0;
}
caption, thead, tfoot {
	border-color: rgb(200,200,200); /*decoration point*/
}
tbody {
	border-color: rgb(100,100,100); /*decoration point*/
}
tr, th, td, th:before, td:before {
	border-color: inherit;
}
/*[onlyGrid], [bodyOnlyGrid], [onlyBG], [bodyOnlyBG], [onlyFrame], [bodyOnlyFrame]*/
table[onlyGrid]>*, table[onlyGrid] tr, table[onlyGrid] tr>*,
table[bodyOnlyGrid] tbody, table[bodyOnlyGrid] tbody tr, table[bodyOnlyGrid] tbody tr>*,
table[onlyFrame]>*, table[onlyFrame] tr, table[onlyFrame] tr>*,
table[bodyOnlyFrame] tbody, table[bodyOnlyFrame] tbody tr, table[bodyOnlyFrame] tbody tr>* {
	background: none !important;
	box-shadow: none !important;
}
table[bodyOnlyGrid] tr, table[bodyOnlyFrame] tr {
	box-shadow: none !important;
}
table[onlyBG], table[onlyBG] tbody tr, table[onlyBG] tr>*,
table[onlyBG] tr>*:before, table[onlyBG] tr>*:after,
table[bodyOnlyBG] tbody tr, table[bodyOnlyBG] tbody tr>*,
table[bodyOnlyBG] tbody tr>*:before, table[bodyOnlyBG] tbody tr>*:after,
table[onlyFrame], table[onlyFrame]>*, table[onlyFrame] tr, table[onlyFrame] tr>*,
table[onlyFrame] tr>*:before, table[onlyFrame] tr>*:after,
table[bodyOnlyFrame] tbody tr, table[bodyOnlyFrame] tbody tr>*,
table[bodyOnlyFrame] tbody tr>*:before, table[bodyOnlyFrame] tbody tr>*:after {
	border-width: 0 !important;
}
table[onlyGrid] caption, table[onlyGrid] thead, table[onlyGrid] tbody,
table[onlyGrid] tfoot {
	border-color: inherit;
}
/*table[fixedHead], table[fixedFoot] : scrollable tbody*/
table[fixedHead] caption {
	position: sticky;
	top: 0;
	height: 40px;
	line-height: 24px;
	padding: 8px 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
table[fixedHead] thead {
	position: sticky;
	top: 0;
}
table[fixedHead] caption+thead {
	top: 40px;
}
table[fixedFoot] tfoot {
	position: sticky;
	bottom: 0;
}
/*table[sizeS], table[bodySizeS]*/
table[sizeS] caption, table[sizeS] tr>*, table[bodySizeS] tbody tr>* { /*th,td*/
	height: 30px;
	line-height: 20px;
	padding: 5px;
}
table[sizeS][fixedHead] caption+thead {
	top: 30px;
}
table[sizeS] input, table[sizeS] button, table[sizeS] select,
table[sizeS] label, table[sizeS] tr>*>div,
table[bodySizeS] tbody input, table[bodySizeS] tbody button,
table[bodySizeS] tbody select, table[bodySizeS] tbody label,
table[bodySizeS] tbody tr>*>div {
	height: 20px;
}
table[sizeS] tr>*>div:not(:first-child),
table[bodySizeS] tbody tr>*>div:not(:first-child) {
	margin-top: 5px;
}
table[sizeS] [buttonSwitch], table[bodySizeS] [buttonSwitch] {
	width: 40px;
}
table[sizeS] input, table[sizeS] button, table[sizeS] select,
table[bodySizeS] tbody input, table[bodySizeS] tbody button,
table[bodySizeS] tbody select {
	background: none;
	border: none;
	outline: none;
}
table[sizeS] input[type="text"], table[sizeS] input[type="url"],
table[sizeS] input[type="email"], table[sizeS] input[type="number"],
table[sizeS] input[type="search"], table[sizeS] select,
table[bodySizeS] tbody input[type="text"], table[bodySizeS] tbody input[type="url"],
table[bodySizeS] tbody input[type="email"], table[bodySizeS] tbody input[type="number"],
table[bodySizeS] tbody input[type="search"], table[bodySizeS] tbody select {
	width: 100%;
}
table[sizeS] input[type="checkbox"], table[sizeS] input[type="radio"],
table[bodySizeS] tbody input[type="checkbox"],
table[bodySizeS] tbody input[type="radio"] {
	background: auto; /**/
	margin-top: 1px;
	margin-bottom: 1px;
}
/*table[sizeM], table[bodySizeM]*/
table[sizeM] caption, table[sizeM] tr>*, table[bodySizeM] tbody tr>* { /*th,td*/
	height: 40px;
	line-height: 24px;
	padding: 8px 5px;
}
table[sizeM][fixedHead] caption+thead {
	top: 40px;
}
table[sizeM] input, table[sizeM] button, table[sizeM] select,
table[sizeM] label, table[sizeM] tr>*>div,
table[bodySizeM] tbody input, table[bodySizeM] tbody button,
table[bodySizeM] tbody select, table[bodySizeM] tbody label,
table[bodySizeM] tbody tr>*>div {
	height: 24px;
}
table[sizeM] tr>*>div:not(:first-child),
table[bodySizeM] tbody tr>*>div:not(:first-child) {
	margin-top: 8px;
}
table[sizeM] input[type="checkbox"], table[sizeM] input[type="radio"],
table[bodySizeM] tbody input[type="checkbox"],
table[bodySizeM] tbody input[type="radio"] {
	height: 18px;
	margin-top: 3px;
	margin-bottom: 3px;
}
/*table[sizeL], table[bodySizeL]*/
table[sizeL] caption, table[sizeL] tr>*, table[bodySizeL] tbody tr>* { /*th,td*/
	height: 50px;
	line-height: 30px;
	padding: 10px 8px;
}
table[sizeL][fixedHead] caption+thead {
	top: 50px;
}
table[sizeL] input, table[sizeL] button, table[sizeL] select,
table[sizeL] div:not([buttonSwitch]) label, table[sizeL] tr>*>div:not([buttonSwitch]),
table[bodySizeL] tbody input, table[bodySizeL] tbody button,
table[bodySizeL] tbody select, table[bodySizeL] tbody div:not([buttonSwitch]) label,
table[bodySizeL] tbody tr>*>div:not([buttonSwitch]) {
	height: 30px;
}
table[sizeL] [buttonSwitch], table[bodySizeL] tbody [buttonSwitch] {
	margin-top: 3px;
	margin-bottom: 3px;
}
table[sizeL] tr>*>div:not(:first-child),
table[bodySizeL] tbody tr>*>div:not(:first-child) {
	margin-top: 10px;
}
table[sizeL] input[type="checkbox"], table[sizeL] input[type="radio"],
table[bodySizeL] tbody input[type="checkbox"],
table[bodySizeL] tbody input[type="radio"] {
	height: 18px;
	margin-top: 6px;
	margin-bottom: 6px;
}
/*table[narrowView] : layout(responsive web design)*/
table[narrowView="true"] {
	display: block !important;
	overflow-y: auto !important;
}
[wrapTable] table[narrowView="true"] {
	max-height: 100% !important;
}
table[narrowView="true"] thead tr>*:not([visibleNarrowView]),
table[narrowView="true"] tfoot tr>*:not([visibleNarrowView]) {
	/*can modify by [visibleNarrowView]*/
	display: none !important;
}
table[narrowView="true"] caption, table[narrowView="true"] thead, table[narrowView="true"] tfoot {
	/*in case table height or max-height is fixed*/
	z-index: 3;
}
table[narrowView="true"] tr {
	display: table !important;
	table-layout: fixed !important;
	width: 100% !important;
}
table[narrowView="true"] col {
	width: auto !important;
}
table[narrowView="true"] th, table[narrowView="true"] td {
	display: block !important;
	position: relative;
	width: 100% !important;
	height: 40px;
	line-height: 24px;
	padding: 8px 5px;
	padding-left: 52% !important;
	text-align: left !important;
}
table[narrowView="true"] th:before, table[narrowView="true"] td:before {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 50% !important;
	height: 100%;
	padding-top: inherit;
	padding-right: 10px;
	padding-bottom: inherit;
	padding-left: 10px;
	font-weight: bold;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
table[narrowView="true"] th>div, table[narrowView="true"] td>div { /**/
	height: 24px !important;
	justify-content: flex-start !important;
}
table[narrowView="true"] input[type="checkbox"],
table[narrowView="true"] input[type="radio"] {
	height: 18px;
	margin-top: 3px;
	margin-bottom: 3px;
}
table[narrowView="true"] input[type="checkbox"]:only-child,
table[narrowView="true"] input[type="radio"]:only-child {
	margin-left: 0;
	margin-right: auto;
}
/*table[narrowView="true"] : background-color and box-shadow*/
table[narrowView="true"] tbody tr {
	background: rgba(255,255,255,0.25); /*decoration point*/
	background: rgb(64,128,255);
}
table[narrowView="true"] tbody th, table[narrowView="true"] tbody td {
	background: rgba(255,255,255,0.8); /*decoration point*/
	background: rgba(255,255,255);
}
table[narrowView="true"] tbody th:nth-child(even),
table[narrowView="true"] tbody td:nth-child(even){
	background: rgba(240,240,240,0.8); /*decoration point*/
	background: rgba(240,240,240);
}
table[narrowView="true"] thead tr:last-child,
table[narrowView="true"] tfoot tr:first-child {
	box-shadow: none;
}
table[narrowView="true"] input, table[narrowView="true"] button,
table[narrowView="true"] select {
	background: white;
}
/*table[narrowView="true"] : border*/
table[narrowView="true"] th, table[narrowView="true"] td {
	border-right-width: 0;
}
table[narrowView="true"] th:before, table[narrowView="true"] td:before {
	border-right-width: 1px;
	border-right-style: solid;
}
table[narrowView="true"] tbody th, table[narrowView="true"] tbody td {
	border-bottom: none;
	border-top-width: 1px;
}
table[narrowView="true"] tbody tr:not(:last-child) {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
/*table[narrowView="true"] : [hasSmallButton], [hasOneCheckbox]*/
table[narrowView="true"][hasSmallButton] tbody tr,
table[narrowView="true"][hasOneCheckbox] tbody tr {
	position: relative;
	padding-top: 50px;
	counter-increment: rowIndex;
}
table[narrowView="true"][hasSmallButton] tbody tr:before,
table[narrowView="true"][hasOneCheckbox] tbody tr:before {
	color: white; /*decoration point*/
	display: block;
	position: absolute;
	top: 10px;
	left: 12px;
	line-height: 30px;
	content: 'No. 'counter(rowIndex);
	text-shadow: 0 0 12px rgba(40,40,40,0.5); /*decoration point*/
	z-index: 1;
}
table[narrowView="true"][hasOneCheckbox] tbody tr:before {
	left: 40px;
}
/*table[narrowView="true"][hasSmallButton]*/
table[narrowView="true"] tbody tr>[hasSmallButton],
table[narrowView="true"] tbody tr>[hasSmallButton]:before {
	position: static;
	height: 0;
	padding: 0;
	border: none;
	font-size: 0;
}
table[narrowView="true"] button[btnNarrowView] {
	position: absolute;
	top: 10px;
	width: 40px;
	height: 30px;
	z-index: 2;
}
table[narrowView="true"] button[btnNarrowView="1"] {
	right: 10px;
}
table[narrowView="true"] button[btnNarrowView="2"] {
	right: 60px;
}
table[narrowView="true"] button[btnNarrowView="3"] {
	right: 110px;
}
table[narrowView="true"] button[btnNarrowView="4"] {
	right: 160px;
}
/*table[narrowView="true"][hasOneCheckbox]*/
table[narrowView="true"][hasOneCheckbox] tbody tr>[hasCheckbox],
table[narrowView="true"][hasOneCheckbox] tbody tr>[hasCheckbox]:before {
	position: static;
	height: 0;
	padding: 0;
	border: none;
	font-size: 0;
}
table[narrowView="true"][hasOneCheckbox] input[type="checkbox"] {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}
/*table[narrowView="true"] : small buttons*/
table[narrowView="true"] button[deleteNarrowView],
table[narrowView="true"] button[editNarrowView],
table[narrowView="true"] button[moreNarrowView] {
	width: 30px !important;
	height: 24px;
	margin: 0;
}
table[narrowView="true"] button span {
	display: none;
}
table[narrowView="true"] button[deleteNarrowView]:after {
	content: "\2716";
}
table[narrowView="true"] button[editNarrowView]:after {
	content: "\270E";
}
table[narrowView="true"] button[moreNarrowView]:after {
	content: "\22EE";
}
/*[showSymbol]*/
[showSymbol="delete"]:after {
	content: "\2716";
}
[showSymbol="edit"]:after {
	content: "\270E";
}
[showSymbol="more"]:after {
	content: "\22EE";
}
/*[noBorder]*/
[noBorder], tr[noBorder] th, tr[noBorder] td {
	border-width: 0;
}
[noBorderT], tr[noBorderT] th, tr[noBorderT] td {
	border-top-width: 0;
}
[noBorderR], tr[noBorderR] th, tr[noBorderR] td {
	border-right-width: 0;
}
[noBorderB], tr[noBorderB] th, tr[noBorderB] td {
	border-bottom-width: 0;
}
[noBorderL], tr[noBorderL] th, tr[noBorderL] td {
	border-left-width: 0;
}
/*scrolling*/
[disableScroll] {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
[noScrollbar]::-webkit-scrollbar {
	width: 0; /*vertical scrollbar*/
	height: 0; /*horizontal scrollbar*/
}
::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}
::-webkit-scrollbar-track {
	background: rgba(255,255,255,0.1);
}
::-webkit-scrollbar-thumb {
	background: rgba(200,200,200,0.8);
	border-radius: 9px;
}