.charsheet {
    font-family: "cursive", "serif";
    background-color: white;
}

label input[type=checkbox] {
    margin-right: 0.5em;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="text"] {
    text-align: center;
}

button[type="roll"]:before {
    float: left;
}

.sheet-inventory,
.sheet-actions,
.sheet-feats,
.sheet-perks,
.sheet-flaws {
    position: relative;
}

.repcontainer:not(:empty) {
    border: 2px solid gray;
    border-radius: 0.7em;
}

.repcontrol {
    position: absolute;
    top: 1em;
}

.sheet-actions .repcontrol {
    top: 2.5em;
    left: 30%;
}

.sheet-inventory .repcontrol {
    left: 30%;
    top: 2.5em;
}

.repcontrol .repcontrol_edit,
.repcontrol .repcontrol_add {
    width: 1.5em;
    font-family: "pictos";
    padding: 0;
    color: transparent;
    background: transparent;
    border: 0;
    box-shadow: none;
    float: none;
    text-shadow: none;
    overflow: hidden;
}

.repcontrol .repcontrol_edit:before {
    color: black;
    content: "(";
    font-size: 1.2em;
}

.repcontrol .repcontrol_add:before {
    color: green;
    content: "+";
    font-size: 1.2em;
}

.editmode ~ .repcontrol .repcontrol_edit:before {
    color: red;
    content: ")";
}

.repitem {
    padding: 3%;
    border-radius: 0.5em;
}

.repitem:nth-child(odd) {
    background-color: #EEE;
}

.sheet-advantage-disadvantage {
    background-color: #CCC;
    margin: 2em auto;
}

.sheet-advantage-disadvantage .sheet-labels {
    background-color: #AAA;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1em;
    border-top-right-radius: 1em;
    border: 2px solid black;
    border-bottom: 0;
}

.sheet-advantage-disadvantage .sheet-labels,
.sheet-advantage-disadvantage .sheet-inputs {
    display: flex;
    justify-content: space-between;
}

.sheet-advantage-disadvantage .sheet-labels div {
    flex: 1 1;
    padding: 1em;
    height: auto;
}

.sheet-labels div:first-child:before {
    content: "}";
    font-family: "pictos";
    padding-right: 1em;
}

.sheet-labels div:last-child:after {
    content: "}";
    font-family: "pictos";
    padding-left: 1em;
}

.sheet-advantage-disadvantage .sheet-labels div:last-child {
    text-align: right;
}

.sheet-advantage-disadvantage .sheet-inputs div {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.sheet-advantage-disadvantage .sheet-inputs div:nth-child(-n+6) {
    background-color: indianred;
}

.sheet-advantage-disadvantage .sheet-inputs div:nth-child(n+8) {
    background-color: mediumseagreen;
}

.sheet-advantage-disadvantage .sheet-inputs input,
.sheet-advantage-disadvantage .sheet-inputs label {
    flex: 1 1;
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: 2em;
    padding: 0.5em 0;
}

.sheet-advantage-disadvantage .sheet-inputs input:checked ~ label {
    background-color: gold;
}

.sheet-advantage-disadvantage {
    position: absolute;
    font-size: 0.7em;
    top: 0.5em;
    padding-top: 1em;
    background: transparent;
    width: 100%;
    z-index: 1000;

    display: none;
}

.sheet-advantage-disadvantage .sheet-inputs {
    background: white;
    border-bottom-left-radius: 1.2em;
    border-bottom-right-radius: 1.2em;
    border: 2px solid black;
    border-top: 0;
    overflow: hidden;
}

.sheet-advantage-disadvantage .sheet-inputs input {
    width: auto;
    opacity: 0;
    position: absolute;
    left: 25%;
    height: 100%;
}

button:hover ~ .sheet-advantage-disadvantage,
.sheet-advantage-disadvantage:hover {
    display: flex;
    flex-direction: column;
}
.sheet-character-header {
    min-width: 60em;
}

.sheet-character-header input {
    background: transparent;
    border: none;
    border-bottom: 2px solid black;
    border-radius: 0;
    box-shadow: none;
    color: darkgoldenrod;
    font-weight: bold;
    font-size: 1.1em;
    height: 1.5em;
    text-align: left;
}

.sheet-character-header input[type="number"] {
    text-align: center;
}

.sheet-field-row {
    display: flex;
    flex-direction: row;
}

.sheet-field {
    display: flex;
    flex-direction: row;
    flex: 1 1 30%;

    min-width: 0;
    padding-right: 2%;
}

.sheet-field label {
    flex: 0 1;
}

.sheet-field input {
    flex: 1 3;
    width: 3em;
}

.sheet-banner {
    display: flex;
    width: 100%;
}

.sheet-info {
    flex: 1 1 75%;
    max-width: 75%;
}

.sheet-logo {
    background: url(http://www.openlegendrpg.com/assets/img/open_legend_lg_logo.png) center right no-repeat;
    background-size: contain;

    flex: 1 0 25%;
}

.sheet-configuration {
    position: relative;
}

.sheet-configuration .sheet-option-toggle {
    opacity: 0;
    position: absolute;
    right: 0;
    width: 1.5em;
    z-index: 2;
}

.sheet-configuration .sheet-option-toggle-label {
    position: absolute;
    right: 0;
    font-family: "pictos";
    font-size: 1.5em;
}

.sheet-configuration > div {
    height: 2em;
    margin: 0;
    text-align: right;
    width: 97%;
}

.sheet-byline {
    color: darkgray;
}

.sheet-options label {
    text-align: right;
    font-size: 1em;
}

.sheet-options label input {
    margin-top: -0.1em;
}

.sheet-configuration .sheet-options {
    display: none;
}

.sheet-configuration .sheet-option-toggle:checked ~ .sheet-byline {
    display: none;
}

.sheet-configuration .sheet-option-toggle:checked ~ .sheet-options {
    display: block;
}

.sheet-character-body {
    display: flex;

    width: 100%;
}

.sheet-character-body > div {
    display: flex;

    flex: 1 1 60%;

    flex-direction: column;
    min-width: 0;
}

.sheet-character-body .sheet-attributes-block {
    background-color: #EEE;
    flex: 1 1 40%;
    margin-right: 1em;
    padding: 1em;
    min-width: 25em;
}

.sheet-section-header .sheet-header-field {
    font-size: 0.7em;
    margin: 0 auto;
    text-align: center;
    width: 36%;
}

.sheet-header {
    font-size: 2em;
    margin: 0.5em 0;
    text-align: center;
}

.sheet-section-header label {
    display: inline-block;
    margin: 0;
    padding-right: 3%;
    text-align: right;
    white-space: nowrap;
    width: 60%;
}

.sheet-section-header input {
    display: inline-block;
    height: 1.5em;
    width: 3em !important; /* required due to overly specific Roll20 defaults */
}

.sheet-attributes .repitem {
    margin: 0;
    padding: 0;
}

.sheet-attributes .sheet-header {
    background: #CCC;
    margin: 0 auto 0.5em;
    padding: 0.2em;
}

.sheet-attribute-group {
    display: flex;
    flex-direction: row;
}

.sheet-attribute-group button[type="roll"] {
    text-align: right;
}

.sheet-attribute-group-header {
    background: #CCC;

    display: block;
    font-size: 1.5em;

    margin-top: 5%;

    padding: 1% 5%;
    width: 90%;
}

.sheet-attribute-group-labels {
    display: flex;
}

.sheet-attribute-group {
    display: flex;
    flex-direction: column;
}

.sheet-attribute-group .sheet-attribute-row {
    display: flex;
    flex: 1 1;
    font-weight: bold;
    justify-content: flex-end;
    position: relative;
    text-align: center;
}

.sheet-attribute-group .sheet-attribute-row > div:first-child {
    min-width: 50%;
    text-align: left;
}

.sheet-attribute-group .sheet-attribute-row > div {
    flex: 1 1;
    margin-bottom: 1em;
}

.sheet-attribute-group .sheet-attribute-row > div:last-child {
    min-width: 20%;
}

.sheet-attribute-group .sheet-attribute-row > div:last-child input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    height: 2.1em;
    margin-right: -5px;
    text-align: right;
    width: 2.5em;
    -webkit-appearance: none;
}

.sheet-attribute-group select,
.sheet-attribute-group input {
    border: 1px solid gray;
}

.sheet-attribute-group select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    height: 2.1em;
    line-height: 1em;
    margin: 0;
    width: 2.5em;
    -webkit-appearance: none;
}

.sheet-attribute-group input {
    text-align: center;
}

.sheet-attribute-group .sheet-dice input {
    width: 2.5em !important;
}

.sheet-inventory .repeating_inventory,
.sheet-inventory .repitem {
    display: flex;
}

.sheet-inventory .repeating_inventory > div,
.sheet-inventory .repitem > div {
    display: flex;
    flex: 1 1 20%;
    flex-direction: column;
    justify-content: center;
}

.sheet-inventory .repeating_inventory > .sheet-text-field,
.sheet-inventory .repitem > .sheet-text-field {
    flex-basis: 80%;
}

.sheet-inventory .repeating_inventory label,
.sheet-inventory .repitem label {
    flex: 1 1;
    margin: 0;
}

.sheet-inventory .repeating_inventory textarea,
.sheet-inventory .repitem textarea {
    flex: 1 1;
    margin: 0em 0.5em;
    min-width: 0;
    height: auto;
    width: 90%;
}

.sheet-stats {
    flex: none;
}

.sheet-actions,
.sheet-feats-perks-flaws,
.sheet-inventory {
    border-top: 2px solid black;
    min-width: 32em;
    padding: 1.5em 0;
}

.sheet-stats {
    display: flex;
}

.sheet-stats > div {
    flex: 1 1;

    display: flex;
    min-width: 19em;
    flex-direction: column;

    justify-content: flex-start;

    width: 50%;
}

.sheet-defenses > div {
    flex: 1 1 50%;

    display: flex;
    padding: 0.5em 0;

    text-align: center;
}

.sheet-defenses > div > div {
    flex: 1 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 1em;
}

.sheet-defenses .sheet-score {
    margin-right: 0;
    border: 2px solid gray;
    min-height: 8.3em;
    min-width: 8em;
}

.sheet-defenses .sheet-components {
    margin: 1.7em;
    margin-left: -2px;
    min-height: 7em;
    border: 2px solid gray;
    border-left: 0;
}

.sheet-score label {
    text-align: center;
}

.sheet-score input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 3em;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    width: 2em !important; /* required due to overly specific Roll20 defaults */
}

.sheet-components div {
    font-size: 0.7em;

    text-align: left;

    min-width: 13em;
}

.sheet-components label {
    display: inline-block;
    margin: 0;
    padding-right: 3%;
    text-align: right;
    white-space: nowrap;
    width: 45%;
}

.sheet-components input {
    border: 0;
    border-bottom: 2px solid black;
    border-radius: 0;
    box-shadow: none;
    display: inline-block;
    height: 1.5em;
    text-align: center;
    width: 3em !important; /* required due to overly specific Roll20 defaults */
}

.sheet-other {
    display: flex
    flex-direction: column;
}

.sheet-other > div {
    flex: 1 0 20%;
    padding: 0 2em;
    align-items: center;
}

.sheet-other label {
    font-size: 1em;
    margin-bottom: 0.25em;
    margin-top: 0.3em;
}

.sheet-other .sheet-score input {
    font-size: 2.5em;
}

.sheet-other > .sheet-hitpoints {
    padding-top: 2em;
    border: 2px solid gray;
    margin: 1em;
}

.sheet-hitpoints > div {
    display: flex;
    justify-content: center;
}

.sheet-hitpoints .sheet-header {
    margin-top: 0;
}

.sheet-hitpoints .sheet-score:not(:last-child) input {
    border-right: 1px solid black;
}

.sheet-lethal input {
    color: red;
}

.sheet-lp-speed {
    display: flex;
    justify-content: center;
    text-align: center;
}

.sheet-lp-speed > div {
    flex: 1 1;
    border: 2px solid gray;
    margin: 0.2em;
    padding: 1em 0;
}

.sheet-wealth {
    text-align: center;
    width: 10em;
    margin: 0 auto;
}

.sheet-wealth > div {
    border: 2px solid gray;
    margin: 0.2em;
    padding: 1em 0;
}

.sheet-actions .repeating_actions,
.sheet-actions .repitem {
    display: flex;
    flex-direction: column;
}

.sheet-actions .repeating_actions > div,
.sheet-actions .repitem > div {
    flex: 1 1;

    display: flex;

    width: 101%;
}

.sheet-actions .repeating_actions > div > div,
.sheet-actions .repitem > div > div {
    line-height: 2em;
    margin-right: 1%;
}

.sheet-actions .repeating_actions .sheet-is-bane,
.sheet-actions .repitem .sheet-is-bane,
.sheet-actions .repeating_actions .sheet-is-boon,
.sheet-actions .repitem .sheet-is-boon {
    display: none;
}

.sheet-actions .repeating_actions .sheet-is-boon input,
.sheet-actions .repitem .sheet-is-boon input {
    height: 2.2em;
    width: 3em;
}

.sheet-actions input[value="bane"] ~ .sheet-is-bane {
    display: flex;
}

.sheet-actions input[value="boon"] ~ .sheet-is-boon {
    display: flex;
}

.sheet-actions .repeating_actions input,
.sheet-actions .repitem input {
    flex: 1 1;
    min-width: 0;
    width: 10.5em;
}

.sheet-actions .repeating_actions select,
.sheet-actions .repitem select {
    flex: 1 1;
    min-width: 0;
    width: auto;
}

.sheet-actions .repeating_actions button[type="roll"],
.sheet-actions .repitem button[type="roll"] {
    width: 1.35em;
    text-align: right;
}

.sheet-action-info .sheet-text-field {
    flex: 1 1;
}

.sheet-action-info .sheet-text-field input {
    width: 100%;
}

.sheet-action-details > div {
    display: flex;
}

.sheet-actions .repeating_actions .sheet-action-details,
.sheet-actions .repitem .sheet-action-details {
    position: relative;
}

.sheet-actions .repeating_actions .sheet-action-details .sheet-text-field,
.sheet-actions .repitem .sheet-action-details .sheet-text-field {
    flex: 1 1;
}

.sheet-actions .repeating_actions .sheet-text-field.sheet-dice,
.sheet-actions .repitem .sheet-text-field.sheet-dice {
    flex: none;
}

.sheet-actions .repeating_actions .sheet-action-details input,
.sheet-actions .repitem .sheet-action-details input {
    width: auto;
}


.sheet-actions .repeating_actions .sheet-dice input[type="number"],
.sheet-actions .repitem .sheet-dice input[type="number"] {
    border: 1px solid gray;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
    flex: none;
    height: 2.1em;
    margin-right: -5px;
    text-align: right;
    width: 2.5em;
    -webkit-appearance: none;
}

.sheet-actions .repeating_actions .sheet-dice select,
.sheet-actions .repitem .sheet-dice select {
    border: 1px solid gray;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0;
    flex: none;
    height: 2.1em;
    line-height: 1em;
    margin: 0;
    width: 2.5em;
    -webkit-appearance: none;
}

.sheet-actions input[type="text"] {
    text-align: left;
}

.sheet-feats-perks-flaws {
    display: flex;
}

.sheet-feats-perks-flaws fieldset,
.sheet-feats-perks-flaws .repitem {
    display: flex;
}

.sheet-feats-perks-flaws fieldset .sheet-text-field,
.sheet-feats-perks-flaws .repitem .sheet-text-field {
    flex: 1 1;
}

.sheet-feats-perks-flaws .sheet-text-field textarea {
    flex: 1 1;
    margin: 0em 0.5em;
    min-width: 0;
    height: auto;
    width: 90%;
}

.sheet-feats {
    flex: 2 1;
    margin-right: 3%;
}

.sheet-perks-flaws {
    flex: 1 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sheet-perks-flaws > div {
    flex: 1 1;
}

.sheet-feats .sheet-section-header {
    display: flex;
}

.sheet-feats .sheet-section-header > div {
    flex: 1 1;
}

.sheet-feats .sheet-section-header .sheet-header-field {
    margin: 0;
    text-align: left;
    width: 100%;
}

.sheet-perks-flaws input[type="text"] {
    text-align: left;
}

.sheet-feats input[type="number"] {
    text-align: center;
    height: 100%;
}

/* Roll Template Styles */
.sheet-rolltemplate-olmin-attr table {
  background-color: white;
  border: 2px solid black;
  border-top: 0;
  border-spacing: 0;
  width: 100%;
}

.sheet-rolltemplate-olmin-attr caption {
  background-color: #CCC;
  border: 2px solid black;
  border-bottom: 1px solid black;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.5em;
}

.sheet-rolltemplate-olmin-attr td {
  text-align: center;
}

.sheet-rolltemplate-olmin-attr .sheet-roll {
  font-size: 5em;
  line-height: 1.1em;
  padding-bottom: 0.25em;
}

/* Override the default inline roll coloration */
.sheet-rolltemplate-olmin-attr .inlinerollresult {
    background-color: transparent !important;
    border: 0 !important;
}

.sheet-rolltemplate-olmin-attr .sheet-pl {
  background-color: darkgray;
  color: black;
  display: flex;
  justify-content: center;
  padding: 0.5em;
}

.sheet-rolltemplate-olmin-attr .sheet-pl span:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.sheet-rolltemplate-olmin-attr .sheet-pl span {
  background-color: transparent;
  color: gray;
  flex: 1 0;
  font-size: 1.25em;
  line-height: 1.5em;
}

.sheet-rolltemplate-olmin-attr .sheet-pl .sheet-pl-pass {
    background-color: limegreen;
    color: black;
}

.sheet-rolltemplate-olmin-attr .sheet-pl .sheet-pl-limit,
.sheet-rolltemplate-olmin-attr .sheet-pl .sheet-pl-pass:last-child {
  background-color: gold;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  color: black;
}