statDetails { line-height:1; margin-top: 3em; }
statDetails a { text-decoration: none; }

statRow[data-stat] { cursor:pointer; font-style:italic; }
statRow[data-tooltip]:not([data-stat]) { cursor:help; }

statDetailHeader { font-size: 100%; }
statDetailTitle { display: block; font-size:120%; line-height: 150%; font-weight: bold; margin-bottom: 0.3em; }
statDetailCloseButton { cursor: pointer; font-weight:bold; color:chocolate; }

.comparisonColumn		{ display:flex; width:100%; height:100%; padding:0; margin:0; position:relative; }
.comparisonColumn bar { display:block; width:100%; margin-left:1px; margin-top:auto; }
.comparisonColumn pin { display:none; position:absolute; left:1px; right:0; top:6lh; height:1.2lh; background-color:brown; border-top:1px solid #202020 }
.comparisonColumn pin[data-visible='true'] { display: block; background-color:indianred; }
.comparisonColumn:hover pin { display:block; }
.comparisonColumn:hover { background:#777; }

.comparisonRow		{ display:grid; grid-auto-columns:36px 1px 1fr; width: 100%; height:36px; margin-bottom:1px; padding:0; position:relative; }
.comparisonRow bar { display:flex; grid-column: 3;					width: 100%; height:100%; margin-right:auto; background:#222; }
.comparisonRow img { padding:0; margin:0;							width: 100%; height:100%;  }
.comparisonRow name { display:block; color: black; margin:auto -1000px auto 8px; font-size:90%; }
.comparisonRow pin { display:none; position:absolute; width:1.5rlh; left:-1.5rlh; top:0; bottom:-1px; background-color:brown; border-right:1px solid #202020 }
.comparisonRow pin[data-visible='true'] { display: block; background-color:indianred; }
.comparisonRow:hover pin { display:block; }
.comparisonRow:hover { background:#333; }

skillRow { display:grid; grid-template-columns:120px 1fr; gap:0.7rem; margin-bottom:4rem; margin-top:0.5rem; margin-left: -0.1rem; }
skillRow h3 { margin-left: 0; margin-top:0; }
skillRow h4 { margin-left: 0; }
skillRow .skillIcon { width:120px; height:120px; border-radius:20px; border:1px solid greenyellow; }

statRow { display: flex; width:100%; }
statRow statName { display: inline-block; width:10em; flex-shrink: 0; }
statRow statValue { display: inline-block; width:6em; text-align:right; }

headBlock { display:grid; grid-template-columns: 1fr 1fr auto; row-gap: 3em; }
headRow { display: block; width:100%; margin-bottom:0.5em; }
headRow statName { display: inline-block; width:10em; }
headRow statValue { display: inline-block; width:auto; }

#headInformation statRow { }
neighborList figure { text-align:center; color:yellowgreen; display:inline-block; margin:0; }
neighborList figure img { display: block; margin-bottom:2px; }
neighborList figure.centerHero { color: orange; }

editableSelectWrapper { position:relative; display:block; box-sizing: border-box; border:1px solid #323232; width:100%; max-width:100%;}
editableSelectWrapper:focus-within { border:1px solid orange; }
editableSelectWrapper[data-valid="false"] { background: indianred; }
.lightArea editableSelectWrapper[data-valid="false"] { background: pink; }
.lightArea editableSelectWrapper input[type='text'] { background-color: transparent; }
.lightArea editableSelectWrapper select { background-color: transparent; }

editableSelectWrapper select { border:none; width:100%; margin:0; padding:4px 0; background-color:transparent; }
editableSelectWrapper input[type='text'] { position:absolute; top:0; left:0; right:2em; border:0; background:transparent; }
editableSelectWrapper input[type='text'] :focus { outline:none; }
editableSelectWrapper select:focus { outline:none; }

skinList  { display:grid; grid-template-columns:repeat(auto-fit, 160px); gap:40px; row-gap:45px; }
skin	  { display:grid; grid-template-columns:1fr; row-gap: 2px; width:160px; grid-auto-rows: min-content; background: #222; padding: 10px; }
skin row  { display: block; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; }
skin name { display: block; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; font-weight:bold; }
skin cost { margin-left: -3px; }
skinDivider { height:10px; width:100%; }
skinNote { display:block; }

gearList { display: flex; gap: 20px; width: 100%; flex-wrap: wrap; margin-bottom:20px; }
gearLevel { width:min-content; }
gearLevel name { display:block; }
gearLevel gearSet { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto auto; grid-auto-flow:row; width: min-content; }
gearLevel gearSet a img { width:63px; height:63px; }

label { font-size:80%; }
leftLabel { display:block; box-sizing:border-box; margin:auto 0; width:100%; text-align:right; font-size:80%; }
rightLabel { display:block; box-sizing:border-box; margin:auto 0; width:100%; text-align:left; font-size:80%; }

.sparseSelect option[data-disabled="true"] { color: gray; }
buffRow { display:block; font-size:80%; padding:7px 4px 1px 4px; cursor:pointer; color:gray; }

petList { display: grid; grid-template-columns: repeat(2, auto); width: max-content; }

.statForm { display: grid; margin-top: 3rlh; width: 100%; grid-template-columns: 1fr 230px 1fr 230px 1fr; grid-gap: 6px }
@media (max-width: 600px) and (orientation: portrait) {
	.statForm { display: none; }
	headBlock { display: flex; flex-direction: column; }
	petList { display:flex; flex-wrap: wrap; max-width: 100%; }
}