/*MyEdit(easy)*/

/* button + i ; 可以搭配 w3-em-N  w3-over-text-white w3-over-text-fff w3-over-text-black w3-over-text-000  */
.w3-easy-button { font-size: 1em; line-height: 1; display: inline-block; overflow: hidden; margin: 1px 0; padding: .5em .7em .5em .7em; color: inherit; color: #fff; background-color: #ccc; border: none; border-radius: 100px; outline: 0; cursor: pointer; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; }
.w3-easy-button-icon { font-size: 1em; line-height: 1; display: inline-block; overflow: hidden; margin: 1px 0; padding: .5em .7em .5em .45em; color: inherit; color: #fff; background-color: #ccc; border: none; border-radius: 100px; outline: 0; cursor: pointer; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; }
.w3-easy-button.but-thin { padding: .4em .6em .4em .6em; }
.w3-easy-button.but-fat { padding: .7em 1em .7em 1em; }
.w3-easy-button.but-fatter { padding: 1em 1.2em 1em 1.2em; }
.w3-easy-button-icon.but-thin { padding: .4em .6em .4em .4em; }
.w3-easy-button-icon.but-fat { padding: .7em 1em .65em .7em; }
.w3-easy-button-icon.but-fatter { padding: 1em 1.2em 0.95em 1.2em; }

/* tag + i ; 可以搭配 w3-em-N */
.w3-easy-tag { font-size: 1em; line-height: 1; display: inline-block; overflow: hidden; margin: 1px 0; padding: .5em .8em .4em .8em; color: inherit; color: #fff; background-color: #ccc; border: none; border-radius: 100px; outline: 0; text-align: center; vertical-align: middle; white-space: nowrap; text-decoration: none; }
.w3-easy-tag i { position: relative; top: -.12em; font-size: 1em; line-height: 1 !important; vertical-align: middle; }
.w3-easy-tag.tag-thin { padding: .4em .6em .3em .6em; }
.w3-easy-tag.tag-fat { padding: .8em 1em .6em 1em; }

/* table : 一般表格色 + 斑馬式表格色(frag)   */
.w3-easy-table { width: 100%; display: table; border-spacing: 0; border-collapse: collapse; border: 1px solid #c4c4c4; }
.w3-easy-table tr { background-color: #fff; border-bottom: 1px solid #c4c4c4; }
.w3-easy-table tr:nth-child(odd) { background-color: #fff; }
.w3-easy-table tr:nth-child(even) { background-color: #fff; }
.w3-easy-table th { display: table-cell; padding: 8px 8px; background-color: #fff; border: 1px solid #c4c4c4; text-align: left; vertical-align: top; white-space: nowrap; }
.w3-easy-table th p { font-size: 1.2rem; font-weight: 500; text-align: center; white-space: nowrap; }
.w3-easy-table td { display: table-cell; padding: 8px 8px; border: 1px solid  #c4c4c4; text-align: left; vertical-align: top; }
.w3-easy-table td p { white-space: nowrap; }
.w3-easy-table td[align='center'] { text-align: center; }
.w3-easy-table td[valign='middle'] { vertical-align: middle !important; }
.w3-easy-table.table-frag tr { background-color: #fff; border-bottom: 1px solid #c4c4c4; }
.w3-easy-table.table-frag tr:nth-child(odd) { background-color: #fff; }
.w3-easy-table.table-frag tr:nth-child(even) { background-color: #f3f3f3; }
.w3-easy-table.table-frag th { background-color: #e3e3e3; border: 1px solid #c4c4c4; }
.w3-easy-table.table-frag td { border: 1px solid  #c4c4c4; }

/* table : 表格變區塊 */
table.w3-easy-table-data { width: 100%; table-layout: fixed; }
@media (min-width:0) and (max-width:600px) {
	table.w3-easy-table-data { width: 100%; border: 0; }
	table.w3-easy-table-data thead { display: none; }
	table.w3-easy-table-data tr { width: 100%; display: block; }
	table.w3-easy-table-data td { display: block; border: 0; text-align: right; }
	table.w3-easy-table-data td::before { content: attr(data-label); font-weight: 400; float: left; text-transform: uppercase; }
	table.w3-easy-table-data td:last-child { border-bottom: 0; }
}
table.w3-easy-table-data-xs { width: 100%; table-layout: fixed; }
@media (min-width:0) and (max-width:450px) {
	table.w3-easy-table-data-xs { width: 100%; border: 0; }
	table.w3-easy-table-data-xs thead { display: none; }
	table.w3-easy-table-data-xs tr { width: 100%; display: block; }
	table.w3-easy-table-data-xs td { display: block; border: 0; text-align: right; }
	table.w3-easy-table-data-xs td::before { content: attr(data-label); font-weight: 400; float: left; text-transform: uppercase; }
	table.w3-easy-table-data-xs td:last-child { border-bottom: 0; }
}
table.w3-easy-table-data-ei { width: 100%; table-layout: fixed; }
@media (min-width:0) and (max-width:800px) {
	table.w3-easy-table-data-ei { width: 100%; border: 0; }
	table.w3-easy-table-data-ei thead { display: none; }
	table.w3-easy-table-data-ei tr { width: 100%; display: block; }
	table.w3-easy-table-data-ei td { display: block; border: 0; text-align: right; }
	table.w3-easy-table-data-ei td::before { content: attr(data-label); font-weight: 400; float: left; text-transform: uppercase; }
	table.w3-easy-table-data-ei td:last-child { border-bottom: 0; }
}
table.w3-easy-table-data-pc { width: 100%; table-layout: fixed; }
@media (min-width:0) and (max-width:992px) {
	table.w3-easy-table-data-pc { width: 100%; border: 0; }
	table.w3-easy-table-data-pc thead { display: none; }
	table.w3-easy-table-data-pc tr { width: 100%; display: block; }
	table.w3-easy-table-data-pc td { display: block; border: 0; text-align: right; }
	table.w3-easy-table-data-pc td::before { content: attr(data-label); font-weight: 400; float: left; text-transform: uppercase; }
	table.w3-easy-table-data-pc td:last-child { border-bottom: 0; }
}
table.w3-easy-table-data-lg { width: 100%; table-layout: fixed; }
@media (min-width:0) and (max-width:1200px) {
	table.w3-easy-table-data-lg { width: 100%; border: 0; }
	table.w3-easy-table-data-lg thead { display: none; }
	table.w3-easy-table-data-lg tr { width: 100%; display: block; }
	table.w3-easy-table-data-lg td { display: block; border: 0; text-align: right; }
	table.w3-easy-table-data-lg td::before { content: attr(data-label); font-weight: 500; float: left; text-transform: uppercase; }
	table.w3-easy-table-data-lg td:last-child { border-bottom: 0; }
}

/* i vs text <i data-text=""> */

/*.w3-easy-img-icon-text { position: relative; display: inline-block; }
.w3-easy-img-icon-text > span { position: absolute; top: 0; left: 0; width: 50%; height: 50%; }
.w3-easy-img-icon-text > span > i { position: absolute; right: 0; bottom: 0; line-height: 1; color: #fff; transform: translate(50%, 50%); text-align: center; }
.w3-easy-img-icon-text > span > i::after { content: attr(data-text); font-size: 1rem; width: 100%; display: block; margin-top: .3rem; }*/

/* ring */
.w3-easy-ring { line-height: 2em; width: 2em; height: 2em; display: inline-block; color: #fff; background: #000; border-radius: 100px; text-align: center; vertical-align: middle; }
.w3-easy-ring.ring-sm { line-height: 1.8em; width: 1.8em; height: 1.8em; }
.w3-easy-ring.ring-border {  color: #000; background: transparent; border: 1px solid #000; }

.w3-easy-ring-text { font-size: 1em; line-height: 1; display: inline-block; text-align: center; vertical-align: middle; }
.w3-easy-ring-text::after { content: attr(data-text); font-size: 1rem; font-weight: 500; line-height: 1; width: 100%; display: block; margin-top: .1em; }

/* text+bull */

/* ICON+Ring*/

/*UL+LI*/

/* dl-dt-dd*/