.charsheet input {
    display: inline-block;
    width: 160px;
}

.charsheet {
    background-color: white;
}

.charsheet select {
    width: 42px;
}

/* Sections Headers */
h2, h3 {
    text-align: center;
}

/* General Information Grid */
.sheet-info-grid {
    display: grid;
    grid-template-columns: repeat(2, max-content minmax(7ch, 1fr) minmax(2ch, auto)) max-content minmax(7ch, 1fr);
    align-items: center;
}

.sheet-spacer {
    height: 20px;
}

.sheet-info-grid > label {
    width: 12ch;
    margin: 2px 1ch 2px 2px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 0px;
}

.sheet-info-grid > input[type="text"] {
    width: auto;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding-bottom: 0;
}

/* Attributes Grid */
.sheet-attributes-grid > h3:nth-of-type(1) { grid-column: 1 / span 2; }
.sheet-attributes-grid > h3:nth-of-type(2) { grid-column: 4 / span 2; }
.sheet-attributes-grid > h3:nth-of-type(3) { grid-column: 7 / span 2; }
.sheet-attributes-grid {
    display: grid;
    grid-template-columns:
        repeat(2, max-content max-content minmax(2ch, auto))
        max-content max-content;
    align-items: center;
}

.sheet-attributes-grid > h4 {
    width: 16ch;
    margin: 2px 1ch 2px 2px;
}

.sheet-attributes-grid .sheet-fake-align {
    display: inline-block;
    width: 14px;
}

/* Abilities Grid */
.sheet-abilities-grid > h3:nth-of-type(1) { grid-column: 1 / span 2; }
.sheet-abilities-grid > h3:nth-of-type(2) { grid-column: 4 / span 2; }
.sheet-abilities-grid > h3:nth-of-type(3) { grid-column: 7 / span 2; }
.sheet-abilities-grid {
    display: grid;
    grid-template-columns:
        repeat(2, max-content max-content minmax(2ch, auto))
        max-content max-content;
    align-items: center;
}

.sheet-abilities-grid > h4 {
    width: 16ch;
    margin: 2px 1ch 2px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Advantages Grid */
.sheet-advantages-grid {
    display: grid;
    grid-template-columns:
        repeat(2, max-content max-content minmax(2ch, auto))
        max-content max-content;
    align-items: center;
}

.sheet-advantages-grid > h3:nth-of-type(1)  { grid-column: 1 / span 2; }
.sheet-advantages-grid > h3:nth-of-type(2)  { grid-column: 4 / span 2; }
.sheet-advantages-grid > h3:nth-of-type(3)  { grid-column: 7 / span 2; }
.sheet-advantages-grid > .sheet-virtue      { grid-column: 7; }
.sheet-advantages-grid > .sheet-virtue-dots { grid-column: 8; }
.sheet-advantages-grid > .sheet-virtue.sheet-row2,
.sheet-advantages-grid > .sheet-virtue.sheet-row2 + .sheet-virtue-dots {
    grid-row: 2 / span 2;
}
.sheet-advantages-grid > .sheet-virtue.sheet-row4,
.sheet-advantages-grid > .sheet-virtue.sheet-row4 + .sheet-virtue-dots {
    grid-row: 4 / span 2;
}
.sheet-advantages-grid > .sheet-virtue.sheet-row6,
.sheet-advantages-grid > .sheet-virtue.sheet-row6 + .sheet-virtue-dots {
    grid-row: 6 / span 2;
}

.sheet-advantages-grid > input[type="text"] {
    width: 16ch;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding-bottom: 0;
}

.sheet-advantages-grid h4 {
    width: 16ch;
    margin: 2px 1ch 2px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Other - Traits, Paths, Humanity, Health */
.sheet-other-grid {
    display: grid;
    grid-template-columns: repeat(3, 32%);
    grid-column-gap: 2%;
}

.sheet-other-grid textarea {
    box-sizing: border-box;
    resize: vertical;
}

.sheet-other-grid > div:nth-of-type(3) > div > textarea {
    height: 2.5em;
}

.sheet-other-grid h3 {
    margin-top: 0.5em;
}

/* Traits and Paths */
.sheet-single-col-grid > h3  { grid-column: 1 / span 2; }
.sheet-single-col-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
}

.sheet-single-col-grid > input[type="text"] {
    width: 16ch;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding-bottom: 0;
}

/* Humanity */
.sheet-humanity {
    text-align: center;
}

.sheet-humanity > input[type="text"] {
    width: 76%;
    border-width: 0 0 1px 0;
    border-radius: 0;
    padding-bottom: 0;
    text-align: center;
}

.sheet-humanity .sheet-dots {
    text-align: center;
}

.sheet-humanity .sheet-dots > .sheet-fake-align {
    display: inline-block;
    width: 15px;
}

/* Willpower */
.sheet-willpower .sheet-dots,
.sheet-willpower .sheet-checks {
    text-align: center;
}

.sheet-willpower .sheet-checks > .sheet-fake-align {
    display: inline-block;
    width: 15px;
}

/* Blood Pool */
.sheet-bloodpool > .sheet-checks {
    text-align: center;
}

.sheet-bloodpool > .sheet-checks > .sheet-fake-align {
    display: inline-block;
    width: 14px;
}

.sheet-bloodpool > .sheet-limit {
    text-align: center;
}

/* Dice Pools */
.sheet-dice-pools-grid > h3  { grid-column: 1 / span 4; }
.sheet-dice-pools-grid {
    display: grid;
    grid-template-columns: max-content auto auto max-content;
    align-items: center;
}

.sheet-dice-pools-grid > input[type="checkbox"] {
    opacity: 1;
    position: initial;
}

.sheet-dice-pools-grid > select,
.sheet-dice-pools-grid > select > option {
    width: 98%;
}

button.sheet-DP1,
button.sheet-DP2,
button.sheet-DP2,
button.sheet-DP3,
button.sheet-DP4,
button.sheet-DP5 {
    display: inline;
}

button.sheet-DP1wSpec,
button.sheet-DP2wSpec,
button.sheet-DP2wSpec,
button.sheet-DP3wSpec,
button.sheet-DP4wSpec,
button.sheet-DP5wSpec {
    display: none;
}

input.sheet-DP1Spec:checked ~ div > button.sheet-DP1,
input.sheet-DP2Spec:checked ~ div > button.sheet-DP2,
input.sheet-DP2Spec:checked ~ div > button.sheet-DP2,
input.sheet-DP3Spec:checked ~ div > button.sheet-DP3,
input.sheet-DP4Spec:checked ~ div > button.sheet-DP4,
input.sheet-DP5Spec:checked ~ div > button.sheet-DP5 {
    display: none;
}

input.sheet-DP1Spec:checked ~ div > button.sheet-DP1wSpec,
input.sheet-DP2Spec:checked ~ div > button.sheet-DP2wSpec,
input.sheet-DP2Spec:checked ~ div > button.sheet-DP2wSpec,
input.sheet-DP3Spec:checked ~ div > button.sheet-DP3wSpec,
input.sheet-DP4Spec:checked ~ div > button.sheet-DP4wSpec,
input.sheet-DP5Spec:checked ~ div > button.sheet-DP5wSpec {
    display: inline;
}

/* Health */
.sheet-health-grid {
    display: grid;
    grid-template-columns: 60% auto auto;
    align-items: center;
}

.sheet-health-grid > div {
    text-align: center;
}

/* Additional - Stuff that should be reworked or removed */
.sheet-additional-grid {
    display: grid;
    grid-template-columns: repeat(3, 32%);
    grid-column-gap: 2%;
}

.sheet-additional-grid textarea {
    box-sizing: border-box;
    resize: vertical;
}

/* Something */
div.sheet-col-blessure
{
	width:calc(100% - 90px);
}

/* Hide actual dot/checkbox */
input[type="radio"],
input[type="checkbox"]
{
    position: absolute;
    opacity: 0;
    width:15px;
    cursor: pointer;
    z-index: 1;
    margin-top: 6px;
}

/* Styles common to fake dot and checkbox */
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: middle;
    display: inline-block;
    vertical-align: middle;
    
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
    
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Styles unique to fake dot (checked or left of checked) */
input[type="radio"] + span::before
{
    content: "•";
    width: 12px;
    height: 12px;
    font-size: 36px;
    
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

/* Styles unique to fake checkbox (unchecked) */
input[type="checkbox"] + span::before
{
    position:relative;
    content: "";
    opacity: .25;
    width: 14px;
    height: 14px;
    font-size: 12px;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

/* Styles unique to fake checkbox (checked) */
input[type="checkbox"]:checked + span::before
{
    content: "✖";
    color: #a00;
    
    -moz-box-shadow: 0 0 2px transparent;
    -webkit-box-shadow: 0 0 2px transparent;
    box-shadow: 0 0 2px transparent;
}

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:checked ~ input[type="radio"] + span::before
{    
    content: "";
}

input.sheet-used+span::before
{
    content: "✖";
    width: 12px;
    height: 12px;
    font-size: 12px;
    
    -moz-border-radius: 0%;
    -webkit-border-radius: 0%;
    border-radius: 0%;
}

input.sheet-zero:checked + span::before
{
    opacity: 0;
}

input.sheet-zero:hover + span::before
{
    opacity: 1;
}

input.sheet-zero+ span::before
{
    font-size: 12px;
    content: "✖";
    opacity: 0.25;
}

h4.sheet-SCorI1,
h4.sheet-SCorI2,
h4.sheet-CorC1,
h4.sheet-CorC2
{
    display: block;
}

input.sheet-SCorI1,
input.sheet-SCorI2,
input.sheet-CorC1,
input.sheet-CorC2
{
    width: 120px;
}

input.sheet-SCorI1:checked ~ h4.sheet-SCorI1,
input.sheet-SCorI2:checked ~ h4.sheet-SCorI2
{
    display: none;
}

input.sheet-CorC1:checked ~ h4.sheet-CorC1,
input.sheet-CorC2:checked ~ h4.sheet-CorC2
{
    display: none;
}