/*----------------- Font ------------------*/

@font-face {
    font-family: Kungfont;
    src: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Emberwind/fonts/Kungfont-Regular.ttf");
}

@font-face {
    font-family: ProximaNova;
    src: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Emberwind/fonts/ProximaNova-Regular.ttf");
}

.charsheet .kungfont {
    font-family: Kungfont, ProximaNova, serif;
    font-size: 32px;
    border: 2px solid transparent;
}

.charsheet .d20font {
    font-family: dicefontd20, serif;
}

.charsheet * {
    font-family: ProximaNova, "Proxima Nova", "ProximaNova-Regular", serif;
}

.top-logo {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/emberwind-logo-black.png");
    float: right;
    margin-bottom: -60px
}

body.sheet-darkmode .top-logo {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/emberwind-logo-white.png");
    margin-bottom: -40px
}

/*----------------- Container ------------------*/

.charsheet {
    background-color: transparent;
    color: black;
}

.sheet-darkmode .sheetform {
    background-color: transparent;
}

.container {
    background-color: transparent;
    max-width: 1100px;
    height: 900px;
}

.charsheet label {
    margin: 0;
    font-weight: normal;
    font-size: 1.0em;
}

/*----------------- Common Dark Mode ------------------*/

body.sheet-darkmode input,
body.sheet-darkmode textarea {
    color: #eee;
    background-color: #878787;
}

body.sheet-darkmode summary {
    color: #eee;
    background-color: dimgrey;
}

body.sheet-darkmode button,
body.sheet-darkmode optgroup,
body.sheet-darkmode select,
body.sheet-darkmode .charsheet label,
body.sheet-darkmode .charsheet {
    color: #eee;
    background-color: transparent;
}

body.sheet-darkmode select {
    -webkit-appearance: none;
    -moz-appearance: none;
    /*background: transparent url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSd3aGl0ZScgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+) no-repeat;*/
    background-position-x: 100%;
    border-radius: 2px;
    padding-right: 2rem;
}

body.sheet-darkmode select > option {
    background: dimgrey;
}

body.sheet-darkmode .btn,
body.sheet-darkmode .btn.btn-default {
    color: #ffffff;
    text-shadow: rgba(24, 26, 27, .75) 0 1px 1px;
    background-color: #1e2021;
    background-image: linear-gradient(#181a1b, #26292b);
    border-color: #3e4446 #3e4446 #43494c;
    box-shadow: rgba(24, 26, 27, .2) 0 1px 0 inset, rgba(0, 0, 0, .05) 0 1px 2px
}

body.sheet-darkmode .btn:hover,
body.sheet-darkmode .btn.btn-default:hover {
    color: #c8c3bc;
    background-image: linear-gradient(#3e4446, #3e4446);
    background-color: #3e4446;
}

.charsheet .btn-danger,
body.sheet-darkmode .btn-danger {
    background-color: rgb(218, 79, 73);
    background-image: -webkit-linear-gradient(top, rgb(238, 95, 91), rgb(189, 54, 47));
}

.btn-danger:hover,
body.sheet-darkmode .btn-danger:hover {
    background-color: #bd362f;
}

/*----------------- Images ------------------*/

img.toughness-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-b.png");
}

body.sheet-darkmode img.toughness-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-w.png");
}

img.resistance-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-b.png");
}

body.sheet-darkmode img.resistance-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-w.png");
}

img.dodge-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-b.png");
}

body.sheet-darkmode img.dodge-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-w.png");
}

img.willpower-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-b.png");
}

body.sheet-darkmode img.willpower-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-w.png");
}

.toughness-image {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-b.png");
}

.resistance-image {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-b.png");
}

.dodge-image,
body.sheet-darkmode .dodge-image {
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-b.png");
}

.dodge-image:hover,
body.sheet-darkmode .dodge-image:hover {
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-w.png");
}

.willpower-image,
body.sheet-darkmode .willpower-image {
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-b.png");
}

.willpower-image:hover,
body.sheet-darkmode .willpower-image:hover {
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-w.png");
}

.npc-rank-img {
    height: 25px;
    width: 25px;
}

.npc-rank-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/grunt-w.png");
}

.init-btn:hover > .npc-rank-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/grunt-b.png");
}

.npc-rank-indicator[value="Awakened"] ~ .npc-rank-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/awakened-w.png");
}

.init-btn:hover > .npc-rank-indicator[value="Awakened"] ~ .npc-rank-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/awakened-b.png");
}

.npc-rank-indicator[value="Elite"] ~ .npc-rank-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/elite-w.png");
}

.init-btn:hover > .npc-rank-indicator[value="Elite"] ~ .npc-rank-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/elite-b.png");
}

.npc-rank-indicator[value="Boss"] ~ .npc-rank-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/boss-w.png");
}

.init-btn:hover > .npc-rank-indicator[value="Boss"] ~ .npc-rank-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/foes/boss-b.png");
}

/*------------ Repeating Buttons ------------*/

.repcontrol .btn {
    border: 0 solid transparent;
    background: none;
    font-size: 0;
    box-shadow: none;
    margin-bottom: 1px;
    font-family: Pictos, serif;
    font-style: normal;
}

body.sheet-darkmode .repcontrol .btn {
    border: 0 solid transparent;
    background: none;
}

.repcontrol .repcontrol_edit::after {
    content: '(';
}

.editmode ~ .repcontrol .repcontrol_edit::after {
    content: ')';
}

.repcontrol .repcontrol_add::before {
    content: '&';
}

.repcontrol .repcontrol_add::before,
.repcontrol .repcontrol_edit::after {
    visibility: visible;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 2px;
    font-size: 12px;
    height: 12px;
    width: 12px;
    padding: 2px 4px 2px 4px;
    color: #333;
}

body.sheet-darkmode .repcontrol .repcontrol_add::before,
body.sheet-darkmode .repcontrol .repcontrol_edit::after {
    background-color: #3e4446;
}

.repcontrol .repcontrol_edit:hover::after,
.repcontrol .repcontrol_add:hover::before {
    background-color: #EFEFEF;
}

div.repcontrol button.repcontrol_add::before,
div.repcontrol button.repcontrol_edit::before  {
    font-family: Pictos, serif;
    position: relative;
    color: #000;
}

body.sheet-darkmode div.repcontrol button.repcontrol_add::before,
body.sheet-darkmode div.repcontrol button.repcontrol_edit::after  {
    color: #fff;
}


.repitem .repcontrol_del {
    font-family: Pictos, serif;
}

.repitem .repcontrol_move {

}

/*----------------- Sheet Settings ------------------*/
.tab-button + span,
.tab-button + span + span {
    font-weight: bold;
    font-size: 20px;
    margin-left: -20px;
}

input.tab-button {
    height: 21px;
    opacity: 0;
    z-index: 2;
}

.tab-button:hover + span,
.tab-button:hover + span + span,
.tab-button:hover * {
    color: blue;
}

.text-pictos {
    font-family: pictos, fantasy;
}

input.nav:checked + span,
input.nav:not(:checked) + span + span {
    display: none;
}

input.nav:checked ~ .block-container.block-settings {
    display: block;
}

.block-settings {
    border: 2px dashed dimgrey;
    width: auto;
}

.settings-row {
    padding: 5px;
}

.settings-col {
    padding: 5px;
}

/*----------------- PC / NPC ------------------*/

.block-container {
    display: none;
}

input.page-control[value="pc"] ~ .block-container.block-pc {
    padding-top: 10px;
    display: block;
    width: 1100px;
}

input.page-control[value="npc"] ~ .block-container.block-npc {
    padding-top: 10px;
    display: block;
}

/*----------------- Tabs ------------------*/

.charsheet .tabs-toggle[value="inventory"] ~ div.tab-inventory,
.charsheet .tabs-toggle[value="conditions"] ~ div.tab-conditions,
.charsheet .tabs-toggle[value="guide"] ~ div.tab-guide {
    display: flex;
}

.charsheet .tabs-toggle[value="character"] ~ div.tab-character {
    display: grid;
}

.charsheet .tab-content {
    display: none;
}

button.tab {
    width: 150px;
    height: 25px;
    border: none;
    margin: -5px 0 0 0;
    text-align: center;
    display: inline-block;
    background: #bababa;
    color: white;
    font-size: 16px;
}

body.sheet-darkmode button.tab {
    background: #414042;
    color: white;
}

button.tab:hover {
    background: dimgrey;
    color: white;
    font-weight: bold;
    /*border-style: solid;*/
}

body.sheet-darkmode button.tab:hover {
    background: dimgrey;
}

button.tab:focus,
button.tab:visited {
    background: dimgrey;
    /*color: white;*/
    font-weight: bold;
    /*border-style: solid;*/
}

body.sheet-darkmode button.tab:focus,
body.sheet-darkmode button.tab:visited {
    background: dimgrey;
}

input.tab {
    width: 150px;
    height: 25px;
    position: relative;
    left: 6px;
    top: 2px;
    margin: -1.5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

input.tab + span::before {
    content: attr(title);
    border: 2px solid white;
    margin: -5px 0 0 0;
    text-align: center;
    display: inline-block;
    background: #bababa;
    width: 150px;
    height: 23px;
    font-size: 16px;
    position: absolute;
    left: 30px;
    color: white;
}

input.tab:checked + span::before {
    background: dimgrey;
    color: white;
    font-weight: bold;
    border-style: solid;
}

input.tab2 + span::before {
    left: 181px;
}

input.tab3 + span::before {
    left: 331px;
}

input.tab4 + span::before {
    left: 481px;
}

div.tab-content {
    padding: 5px 0 5px 0;
}

.separator {
    width: auto;
    background-color: #bababa;
    height: 3px;
}

body.sheet-darkmode .separator {
    background-color: #414042;
}

/*----------------- Advantage Tabs ------------------*/

.advantage-box {
    width: auto;
    /*height: 125px;*/
    /*background-color: #EE5F57;*/
}

.small-hex.advantage-hex,
.hex.advantage-hex,
.large-hex.advantage-hex {
    background: #EE5F57;
}

.toggle-advantage,
.toggle-normal,
.toggle-disadvantage {
    /*content: attr(title);*/
    border: 2px solid white;
    margin: -5px 0 0 0;
    text-align: center;
    background: dimgrey;
    /*font-size: 16px;*/
    color: white;
}

body.sheet-darkmode .toggle-advantage,
body.sheet-darkmode .toggle-normal,
body.sheet-darkmode .toggle-disadvantage {
    border: 2px solid darkgray;
}

.toggle-advantage:hover,
.toggle-normal:hover,
.toggle-disadvantage:hover {
    background: darkgray;
    color: white;
}

input.page-control[value="on"] ~ .block-container.mod-block {
    display: block;
}

.mod-box {
    border: 5px solid #bababa;
}

body.sheet-darkmode .mod-box {
    border: 5px solid #878787;
}

.mod-box-red {
    border: 5px solid #FEB8AE;
}

body.sheet-darkmode .mod-box-red {
    border: 5px solid #f58e8d;
}

.mod-box-blue {
    border: 5px solid #B8DCF9;
}

body.sheet-darkmode .mod-box-blue {
    border: 5px solid #72c8eb;
}

.mod-box-green {
    border: 5px solid #BAE0CB;
}

body.sheet-darkmode .mod-box-green {
    border: 5px solid #80cfac;
}

.mod-box-yellow {
    border: 5px solid #FDD5B0;
}

body.sheet-darkmode .mod-box-yellow {
    border: 5px solid #f9b174;
}

/*----------------- GRIDS ------------------*/

.main {
    display: grid;
    grid-gap: 4px;
    grid-template-columns: 31% 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "main-stats main-actions";
}

.main-stats {
    grid-area: main-stats;
    display: grid;
    width: fit-content;
    height: fit-content;
    padding-right: 5px;
    grid-row-gap: 2px;
    grid-column-gap: 5px;
    grid-template-columns: auto;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "image" "name" "tier" "info" "aspects" "attribute1" "header1" "stats1" "common1" "attribute2" "header2" "stats2" "common2" "header3" "common3" "header4" "common4" "header5" "common5";
}

.main-inventory {
    width: fit-content;
    height: fit-content;
    grid-area: main-stats;
}

.main-actions {
    grid-area: main-actions;
}

.skills-grid {
    display: grid;
    width: auto;
    height: fit-content;
    grid-template-columns: 47% 1fr 47%;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "skill-left skill-label skill-right"
}

.actions-grid {
    display: grid;
    width: auto;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 0.5fr 1.5fr 1fr 1fr 1fr 40% 1.5fr;
    grid-template-areas: "action-button action-name action-type action-target action-range action-effect action-speed";
}

.actions-info-grid {
    display: grid;
    width: auto;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 0.5fr 1.5fr 1fr 1fr 1fr 40% 1fr;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "action-button action-name action-name action-name action-name action-effect action-effect";
}

.action-detail-grid {
    display: grid;
    width: auto;
    height: auto;
    grid-template-columns: 1fr;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "top-detail" "middle-detail" "bottom-detail";
}

.quick-guide-grid {
    display: grid;
    width: auto;
    height: auto;
    padding-bottom: 3px;
    grid-row-gap: 3px;
    grid-template-columns: 1fr;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "guide-top" "guide-middle" "guide-bottom";
}

.npc-actions-grid {
    display: grid;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 0.5fr 1.5fr 1fr 1fr 50%;
    grid-template-areas: "action-button action-name action-type action-range action-effect";
}

.npc-actions-info-grid {
    display: grid;
    width: auto;
    height: fit-content;
    padding-bottom: 3px;
    grid-column-gap: 3px;
    grid-template-columns: 0.5fr 1.5fr 1fr 1fr 50%;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "action-button action-name action-name action-name action-effect";
}

.npc-grid {
    margin: 0 auto;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 25px;
    -webkit-column-gap: 25px;
    column-gap: 25px;
}

@media screen and (max-width: 1100px) {
    .npc-grid {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

.npc-grid-item {
    overflow: hidden;
    min-width: 0;
    width: 100%;
    /*margin: 5px 0;*/
    display: inline-block;
    box-sizing: border-box;
}

.npc-conditions-grid {
    margin: 0 auto;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    padding-left: 10px;
    padding-top: 5px;
}

@media screen and (max-width: 690px) {
    .npc-conditions-grid {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count:2;
    }
}

body.sheet-darkmode .npc-conditions-grid {
    background-color: dimgrey;
}

.npc-condition {
    background-color: lightgrey;
    border-bottom: 2px solid whitesmoke;
}

body.sheet-darkmode .npc-condition {
    background-color: dimgrey;
    border-bottom: 2px solid black;
}

.npc-condition-item-grid {
    display: grid;
    width: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: fit-content(100%);
}

.grid-2-col {
    display: grid;
    width: auto;
    height: fit-content;
    grid-column-gap: 3px;
    grid-template-columns: 1fr 1fr;
}

.grid-3-col {
    display: grid;
    width: auto;
    height: fit-content;
    grid-column-gap: 3px;
    grid-template-columns: 1fr 1fr;
}

.grid-4-col {
    display: grid;
    width: auto;
    height: fit-content;
    grid-column-gap: 3px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/*----------------- Quick Guide ------------------*/

.guide-top {
    grid-area: guide-top;
    padding: 7px;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-gap: 15px;
    box-sizing: border-box;
    width: 100%;
}

.guide-top > div {
    padding: 5px;
}

.guide-middle {
    grid-area: guide-middle;
    padding: 7px;
}

.guide-middle-grid {
    border: 5px solid #bababa;
    padding: 7px;
    display: grid;
    grid-template-columns: 1fr max-content 1fr max-content 1fr;
    grid-gap: 5px;
    box-sizing: border-box;
    width: 100%;
}

body.sheet-darkmode .guide-middle-grid {
    border: 5px solid #414042;
}

.chevron-arrow-right {
    display: inline-block;
    background-color: #bababa;
    width: 33px;
    height: 111%;
    margin-top: -10px;
    clip-path: polygon(52% 0, 100% 53%, 52% 100%, 36% 100%, 81% 52%, 35% 0);
}

body.sheet-darkmode .chevron-arrow-right {
    background-color: #414042;
}

.guide-bottom {
    grid-area: guide-bottom;
    padding: 7px;
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-gap: 15px;
    box-sizing: border-box;
    width: 100%;
}

.guide-special {
    padding: 25px 10px 10px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 15px;
    box-sizing: border-box;
    width: 100%;
    margin-top: -25px;
    z-index: -1;
    position: relative;
}

.guide-header {
    height: 50px;
    width: fit-content;
    padding: 0 50px 0 50px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: white;
    background-position-y: 2px;
    background-position-x: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/step-header-2.png");
}

.guide-header-big {
    font-weight: bold;
    font-size: 1.6em;
}

.guide-header-long {
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/red-bar-tall.png");
}

.guide-header-small {
    font-weight: bold;
    font-size: 1.25em;
}

.guide-p {
    /*background: -webkit-linear-gradient(130deg, #f1413a 60%, #B8DCF9 50%);*/
    background: -webkit-linear-gradient(130deg, #f1413a 65%, #14a4de 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.sheet-darkmode .guide-p {
    background: -webkit-linear-gradient(130deg, #FEB8AE 65%, #B8DCF9 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*----------------- Conditions ------------------*/

.condition-grid {
    display: grid;
    width: auto;
    grid-template-columns: 2fr 0.75fr 75%;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "condition value description";
}

.condition-with-foe-grid {
    display: grid;
    width: auto;
    grid-template-columns: 2fr 0.75fr 37.5% 37.5%;
    grid-auto-rows: fit-content(100%);
    grid-template-areas: "condition value description-hero description-foe";
}

.condition-grid > div,
.condition-with-foe-grid > div {
    background-color: white;
    padding: 5px;
    border-bottom: 1px solid dimgrey;
}

body.sheet-darkmode .condition-grid > div,
body.sheet-darkmode .condition-with-foe-grid > div {
    background-color: inherit;
    border-bottom: 1px solid white;
}

.condition-grid > div:nth-child(1),
.condition-grid > div:nth-child(2),
.condition-with-foe-grid > div:nth-child(1),
.condition-with-foe-grid > div:nth-child(2),
.condition-with-foe-grid > div:nth-child(3) {
    border-right: 1px solid dimgrey;
}

body.sheet-darkmode .condition-grid > div:nth-child(1),
body.sheet-darkmode .condition-grid > div:nth-child(2),
body.sheet-darkmode .condition-with-foe-grid > div:nth-child(1),
body.sheet-darkmode .condition-with-foe-grid > div:nth-child(2),
body.sheet-darkmode .condition-with-foe-grid > div:nth-child(3) {
    border-right: 1px solid white;
}

.condition-grid > .condition,
.condition-with-foe-grid > .condition,
.condition-grid > .value,
.condition-with-foe-grid > .value {
    display: flex;
    justify-content: center;
    align-items: center;
}

.condition-grid > .description,
.condition-with-foe-grid > .description-hero,
.condition-with-foe-grid > .description-foe {
    display: flex;
    align-items: center;
}

.condition-selector-max {
    grid-area: condition-selector;
    display: flex;
    justify-content: center;
    padding-top: 3px;
}

.condition-selector-max {
    flex-flow: row wrap;
}


/*----------------- Sections ------------------*/

.section {

}

.flex-col {
    display: flex;
    flex-flow: row wrap;
    /*justify-content: flex-start;*/
}

.charsheet .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.charsheet .flex-center-left {
    display: flex;
    justify-content: center;
}

/*----------------- Image section ------------------*/
.image {
    grid-area: image;
    height: 55px;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

.image:active {
    box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.6);
}

.init-btn::before {
    content: "";
    display: none;
}

.init-btn {
    height: 100%;
    width: 100%;
    background-color: #EE5F57;
    background-image: none;
    border: none;
    padding: 3px 5px;
}

body.sheet-darkmode .init-btn {
    background-color: #EE5F57;
    background-image: none;
}

.init-btn:hover,
body.sheet-darkmode .init-btn:hover {
    background-color: #EE5F57;
    background-image: none;
}

.init-btn span {
    font-size: 1.25em;
    font-weight: bold;
    color: white;
}

.init-btn:hover span {
    color: black;
}

.class-img {
    height: 50px;
    width: 50px;
    content: "";
    display: none;
}

.class-control[value="archer"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/archer-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="archer"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/archer-b.png");
}

.class-control[value="ardent"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/ardent-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="ardent"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/ardent-b.png");
}

.class-control[value="atlanta"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/atlanta-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="atlanta"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/atlanta-b.png");
}

.class-control[value="druid"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/druid-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="druid"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/druid-b.png");
}

.class-control[value="invoker"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/invoker-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="invoker"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/invoker-b.png");
}

.class-control[value="rogue"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/rouge-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="rogue"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/rouge-b.png");
}

.class-control[value="spiritualist"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/spiritualist-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="spiritualist"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/spiritualist-b.png");
}

.class-control[value="tactician"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/tactician-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="tactician"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/tactician-b.png");
}

.class-control[value="warrior"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/warrior-w.png");
    display: inline-flex;
}

.init-btn:hover > .class-control[value="warrior"] ~ .class-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/classes/warrior-b.png");
}

/*----------------- Button section ------------------*/

.action-button {
    grid-area: action-button;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*----------------- Name section ------------------*/

.name {
    grid-area: name;
    display: flex;
    align-items: center;
}

.name-header {
    height: 40px;
    width: 115px;
    margin-left: -20px;
    padding: 0 5px 0 5px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: white;
    background-position-y: 2px;
    background-position-x: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/step-header-2.png");
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.name-header span {
    float: left;
    width: fit-content;
    font-weight: bold;
    margin-left: 20px;
    padding-top: 10px;
    position: center;
    font-size: 1.25em;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.name input {
    width: 85%;
    padding: 3px;
    border-bottom: 1px solid dimgrey;
}

/*----------------- Tier section ------------------*/

.tier {
    grid-area: tier;
    display: flex;
    border-bottom: 2px solid lightgrey;
}

body.sheet-darkmode .tier {
    border-bottom: 2px solid #414042;
}

.tier span {
    font-weight: bold;
    padding: 3px;
}

.tier input {
    padding: 3px;
    text-align: center;
}

.info-tier-box {
    padding-top: 2px;
}

/*----------------- Info section ------------------*/
.info {
    grid-area: info;
    height: auto;
    /*border: 3px solid #EE5F57;*/
}

.info-hp-text {
    border: 3px solid lightgrey;
    background-color: lightgrey;
    padding: 10px 5px 10px 5px;
    color: dimgrey;
    font-weight: bold;
}

body.sheet-darkmode .info-hp-text {
    border: 3px solid #414042;
    background-color: #414042;
    color: white;
}

.npc-info-hp-text {
    background-color: #EE5F57;
    padding: 4px 5px 3px 5px;
    color: white;
    font-weight: bold;
}

.info-hp-box {
    width: 35%;
    background-color: #e6e7e8;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-left: 10px;
    margin-left: -5px;
    border: 3px solid lightgrey;
}

body.sheet-darkmode .info-hp-box {
    background-color: dimgrey;
    border: 3px solid #414042;
}

.info-hp-box input {
    font-weight: bold;
    text-align: right;
    background: transparent;
}

input.medium {
    width: 50%;
    padding: 2px;
}

.info-tier-box {
    float: right;
    padding-right: 5px;
}

.info-class-box {
    align-content: center;
    padding-top: 7px;
    padding-left: 5px;
    font-weight: bold;
}

.info-subclass-box {
    padding: 2px 5px 2px 5px;
    font-weight: bold;
}

.info-custom-class {
    padding: 2px 0 2px 5px;
    display: none;
    font-weight: bold;
}

.class-control[value="custom"] ~ .info-custom-class {
    display: block;
}

/*----------------- Aspects section ------------------*/
.aspects {
    grid-area: aspects;
    border-bottom: 3px solid lightgrey;
    display: none;
}

.aspects-col {
    width: 30%;
    padding-left: 3px;
    padding-right: 3px;
}

.aspect-dropdown {
    display: inline-block;
    position: relative;
}

.aspect-button {
    display: inline-block;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    padding: 4px 3px;
    background-color: #ffffff;
    border: 1px solid lightgrey;
    cursor: pointer;
    white-space: normal;
    margin-right: 20px;
}

body.sheet-darkmode .aspect-button {
    background-color: inherit;
    border: 1px solid lightgrey;
}

.aspect-button > span {
    margin-right: 8px;
}

.aspect-button:after {
    content: '';
    position: absolute;
    top: 15px;
    right: 10px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
}

body.sheet-darkmode .aspect-button:after {
    border-top: 5px solid lightgrey;
}

.aspect-button:hover {
    background-color: #eeeeee;
}

body.sheet-darkmode .aspect-button:hover {
    background-color: dimgray;
}

.aspect-off-switch:checked ~ .aspect-button,
.aspect-def-switch:checked ~ .aspect-button,
.aspect-util-switch:checked ~ .aspect-button {
    background-color: lightgrey;
}

body.sheet-darkmode .aspect-off-switch:checked ~ .aspect-button,
body.sheet-darkmode .aspect-def-switch:checked ~ .aspect-button,
body.sheet-darkmode .aspect-util-switch:checked ~ .aspect-button {
    background-color: #414042;
}

.charsheet .aspect-off-switch,
.charsheet .aspect-def-switch,
.charsheet .aspect-util-switch {
    display: none;
}

.aspect-off-switch ~ .aspect-off,
.aspect-def-switch ~ .aspect-def,
.aspect-util-switch ~ .aspect-util {
    display: none;
}

.aspect-off-switch:checked ~ .aspect-off,
.aspect-def-switch:checked ~ .aspect-def,
.aspect-util-switch:checked ~ .aspect-util {
    display: block;
}

/*----------------- Headers ------------------*/

div.header {
    background-color: dimgrey;
    color: white;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

body.sheet-darkmode div.header {
    background-color: #414042;
}

.header1 {
    grid-area: header1;
}

.header2 {
    grid-area: header2;
}

.header3 {
    grid-area: header3;
}

.header4 {
    grid-area: header4;
}

.header5 {
    grid-area: header5;
}

.header1, .header2, .header3, .header4, .header5 {
    background-color: dimgrey;
    color: white;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

body.sheet-darkmode .header1,
body.sheet-darkmode .header2,
body.sheet-darkmode .header3,
body.sheet-darkmode .header4,
body.sheet-darkmode .header5 {
    background-color: #414042;
}

/*----------------- Attribute section ------------------*/

.attribute1 {
    grid-area: attribute1;
    display: none;
}

.attribute2 {
    grid-area: attribute2;
    display: none;
}

.attribute-col {
    display: inline-flex;
    width: 70%;
    font-weight: bold;
    text-align: center;
    padding-top: 6px;
    padding-bottom: 8px;
    padding-right: 2px;
    color: black;
}

.character-version-control[value="aspect"] ~ .aspects,
.character-version-control[value="attribute"] ~ .attribute1,
.character-version-control[value="attribute"] ~ .attribute2 {
    display: block;
}

/*----------------- Stats ------------------*/

.stats1 {
    grid-area: stats1;
}

.stats2 {
    grid-area: stats2;
}

.stats-col {
    width: 70%;
    font-weight: bold;
    text-align: center;
    padding: 3px 0 4px 2px;
    color: black;
}

.stat-value {
    float: right;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-left: -2px;
}

.stat-value input {
    text-align: right;
    font-weight: bold;
}

/*----------------- Common ------------------*/

.common1 {
    grid-area: common1;
}

.common2 {
    grid-area: common2;
}

.skill-left {
    grid-area: skill-left;
    border: 1px solid dimgrey;
}

body.sheet-darkmode .skill-left {
    border: 1px solid #414042;
}

.skill-label {
    grid-area: skill-label;
    background-color: dimgrey;
    color: white;
    writing-mode: vertical-rl;
    text-align: center;
    font-weight: bold;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-bottom: 0;
}

body.sheet-darkmode .skill-label {
    background-color: #414042;
}

.skill-right {
    grid-area: skill-right;
    border: 1px solid dimgrey;
}

body.sheet-darkmode .skill-right {
    border: 1px solid #414042;
}

.skill {
    display: block;
    /*width: 99%;*/
    height: auto;
    /*text-align: center;*/
    font-weight: bold;
    font-size: 0.75em;
    padding-top: 4px;
    padding-bottom: 4px;
    border: 1px solid dimgrey;
    background: #e6e7e8;
    /*margin-bottom: -5px;*/
}

body.sheet-darkmode .skill {
    border: 1px solid #414042;
    background: dimgrey;
}

.skill input {
    float: right;
    text-align: right;
    border: none;
    background: transparent;
    font-weight: bold;
    font-size: 1.25em;
}

.skill button[type=roll] {
    background: transparent;
    border: none;
    font-weight: bold;
    /*float: left;*/
    padding: 2px;
}

body.sheet-darkmode .skill button[type=roll] {
    color: white;
}

.skill button[type=roll]:before {
    /*content: " ";*/
}

.skill button[type=roll]:hover {
    background-color: lightgrey;
}

body.sheet-darkmode .skill button[type=roll]:hover {
    background-color: #414042;
}

.common3 {
    grid-area: common3;
}

.common4 {
    grid-area: common4;
}

.common5 {
    grid-area: common5;
}

/*----------------- Actions ------------------*/

.action-damage-vs {
    display: none;
}

.tide-action-damage-indicator[value="1"] ~ .action-damage-vs,
.tide-action-damage-indicator[value="2"] ~ .action-damage-vs,
.action-damage-indicator[value="1"] ~ .action-damage-vs,
.action-damage-indicator[value="2"] ~ .action-damage-vs {
    display: inline-flex;
}

.tide-action-damage-indicator[value="1"] ~ .tide-action-damage-toughness,
.tide-action-damage-indicator[value="2"] ~ .tide-action-damage-resistance,
.tide-action-damage-indicator[value="3"] ~ .tide-action-damage-piercing,
.action-damage-indicator[value="1"] ~ .action-damage-toughness,
.action-damage-indicator[value="2"] ~ .action-damage-resistance,
.action-damage-indicator[value="3"] ~ .action-damage-piercing,
.melee-damage-indicator[value="1"] ~ .melee-damage-toughness,
.melee-damage-indicator[value="2"] ~ .melee-damage-resistance,
.ranged-damage-indicator[value="1"] ~ .ranged-damage-toughness,
.ranged-damage-indicator[value="2"] ~ .ranged-damage-resistance {
    opacity: 1;
}

.tide-action-damage-resistance,
.tide-action-damage-piercing,
.action-damage-resistance,
.action-damage-piercing {
    margin-left: -23px;
}

.melee-damage-resistance,
.ranged-damage-resistance {
    margin-left: -20px;
}

.tide-action-damage-resistance,
.tide-action-damage-toughness,
.tide-action-damage-piercing,
.action-damage-resistance,
.action-damage-toughness,
.action-damage-piercing,
.melee-damage-resistance,
.melee-damage-toughness,
.ranged-damage-resistance,
.ranged-damage-toughness {
    opacity: 0;
}

.description-control[value="Amplify"] ~ .action-amp-effect,
.description-control[value="Trigger"] ~ .action-trig-effect,
.description-control[value="Sustain"] ~ .action-sust-effect {
    display: block;
}

.action-amp-effect,
.action-trig-effect,
.action-sust-effect {
    display: none;
}

.action-amp-effect,
.action-trig-effect,
.action-sust-effect,
.action-description {
    padding: 2px 5px 0 5px;
}

.indicator,
.sheet-rolltemplate-action .indicator {
    padding: 1px;
    font-size: 1em;
    font-weight: bold;
    font-style: italic;
}

.action-name {
    grid-area: action-name;
    font-weight: bold;
}

.action-name button[type=roll] {
    background: transparent;
    border: none;
    font-weight: bold;
    width: 100%;
    height: 100%;
    white-space: normal;
    word-wrap: break-word;
    font-size: 1.0em;
}

.action-name button[type=roll]:before {
    content: " ";
}

.action-name button[type=roll]:hover {
    background-color: #e6e7e8;
    color: blue;
}

.action-type {
    grid-area: action-type;
}

.action-type-border-bottom-1 {
    border-bottom: 1px solid black;
}

body.sheet-darkmode .action-type-border-bottom-1 {
    border-bottom: 1px solid white;
}

.action-target {
    grid-area: action-target;
}

.action-range {
    grid-area: action-range;
}

.action-effect {
    grid-area: action-effect;
}

.action-speed {
    grid-area: action-speed;
}

.action-centered {
    background-color: #e6e7e8;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.action-leftCentered {
    background-color: #e6e7e8;
    display: flex;
    align-items: center;
    padding: 3px;
}

.action-text {
    background-color: #e6e7e8;
    text-align: center;
    padding: 3px;
}

body.sheet-darkmode .action-centered,
body.sheet-darkmode .action-leftCentered,
body.sheet-darkmode .action-text {
    background-color: dimgrey;
    color: white;
}

.action-tide-centered {
    background-color: #FEE9D4;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px;
}

.action-tide-leftCentered {
    background-color: #FEE9D4;
    display: flex;
    align-items: center;
    padding: 3px;
}

.action-tide-text {
    background-color: #FEE9D4;
    text-align: center;
    padding: 3px;
}

body.sheet-darkmode .action-tide-centered,
body.sheet-darkmode .action-tide-leftCentered,
body.sheet-darkmode .action-tide-text {
    background-color: #F9B276;
    color: black;
}

.action-header {
    width: auto;
    height: auto;
    background-color: dimgrey;
    color: white;
    font-weight: bold;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-right: -5px;
}

.action-header-left {
    width: auto;
    height: auto;
    background-color: dimgrey;
    color: white;
    font-weight: bold;
    text-align: left;
    padding-top: 3px;
    padding-left: 5px;
    margin-right: -5px;
}

body.sheet-darkmode .action-header,
body.sheet-darkmode .action-header-left {
    background-color: #414042;
}

.action-info-title {
    font-weight: bold;
    display: flex;
    align-items: center;
}

.action-info {
    font-size: 0.8em;
    display: flex;
    align-items: center;
}

input.roll-control[value="0"] ~ .action-damage,
input.roll-control[value="2"] ~ .action-damage,
input.roll-control[value="3"] ~ .action-healing,
input.roll-control[value="4"] ~ .action-trigger {
    display: block;
}

input.custom-damage-control[value="0"] ~ .action-custom-damage {
    display: block;
}

.action-damage {
    display: none;
}

.action-custom-damage {
    display: none;
}

.action-healing {
    display: none;
}

.action-trigger {
    display: none;
}

input.action-description-indicator[value="3"] ~ .action-healing-description,
input.action-description-indicator[value="0"] ~ .action-damage-description,
input.action-description-indicator[value="2"] ~ .action-auto-hit-description {
    display: block;
}

.action-damage-description {
    display: none;
}

.action-auto-hit-description {
    display: none;
}

.action-healing-description {
    display: none;
}

.action-field {
    display: none;
}

.action-field-indicator[value="show"] ~ .action-field {
    display: block;
}

/*----------------- Character Columns ------------------*/

.stats {
    top: 45px;
    width: 33%;
    height: auto;
    position: absolute;
}

.skills {
    top: 45px;
    width: 66%;
    height: auto;
    position: absolute;
}

/*----------------- Colours ------------------*/

.charsheet .black-text,
body.sheet-darkmode .black-text {
    color: black;
}

.charsheet .white-text,
body.sheet-darkmode .white-text {
    color: white;
}

.light-red {
    background-color: #feeceb;
    /*background-color: #fbd4c9;*/
}

body.sheet-darkmode .light-red {
    background-color: #f58e8d;
}

.light-red-text {
    color: #FEB8AE;
}

.red {
    background-color: #FEB8AE;
}

body.sheet-darkmode .red {
    background-color: #f15d5c;
}

.red-only-text {
    color: #f1413a;
}

.red-text {
    color: #f1413a;
}

body.sheet-darkmode .red-text {
    color: #FEB8AE;
}

.deep-red {
    background-color: #f1413a;
    color: white;
}

.deep-red-text {
    color: #f1413a;
}

.blue {
    background-color: #B8DCF9;
}

body.sheet-darkmode .blue {
    background-color: #14a4de;
}

.blue-text {
    color: #14a4de;
}

body.sheet-darkmode .blue-text {
    color: #cbe0f5;
}

.light-blue {
    background-color: #cbe0f5;
}

body.sheet-darkmode .light-blue {
    background-color: #72c8eb;
}

.green {
    background-color: #BAE0CB;
}

body.sheet-darkmode .green {
    background-color: #4abb88;
}

.green-text {
    color: #4abb88;
}

body.sheet-darkmode .green-text {
    color: #d3ebdc;
}

.light-green {
    background-color: #d3ebdc;
}

body.sheet-darkmode .light-green {
    background-color: #80cfac;
}

.yellow {
    background-color: #FDD5B0;
}

body.sheet-darkmode .yellow {
    background-color: #f89e51;
}

.yellow-text {
    color: #F9B276;
}

body.sheet-darkmode .yellow-text {
    color: #fee3cb;
}

.light-yellow {
    background-color: #fee3cb;
}

body.sheet-darkmode .light-yellow {
    background-color: #f9b174;
}

.red .blue .green .yellow {
    text-align: center;
    text-decoration-style: double;
}

.lightestgrey {
    background-color: #ededed;
}

.lightgrey {
    /*background-color: #E7E8EA;*/
    background-color: #e6e7e8;
}

.grey {
    /*background-color: darkgrey;*/
    background-color: lightgrey;
}

.dimgrey {
    background-color: dimgrey;
}

.purple-text {
    color: #845a91;
}

.purple {
    background-color: #E5DCED;
}

body.sheet-darkmode .purple {
    background-color: #845a91;
}

.npc-red-text {
    color: indianred;
}

/*----------------- Selectors ------------------*/

select.selector {
    vertical-align: top;
    width: 100%;
}

select.selector-fit {
    width: auto;
}

/*----------------- Inputs ------------------*/

input.x-small {
    width: 8%;
    margin: 4px;
}

input.small,
.charsheet input.small {
    width: 20%;
}

input[type=number].medium {
    width: 50%;
}

input.cap {
    width: 60%;
}

input.right {
    text-align: right;
}

/*----------------- CAP Check ------------------*/

.critical {
    border: 5px solid #FEB8AE;
}

body.sheet-darkmode .critical {
    border: 5px solid #f58e8d;
}

.accuracy {
    border: 5px solid #BAE0CB;
}

body.sheet-darkmode .accuracy {
    border: 5px solid #80cfac;
}

.penetration {
    border: 5px solid;
    border-image: linear-gradient(to bottom, #72c8eb 50%, #FEB8AE 50%, #FEB8AE 50%) 5;
}

body.sheet-darkmode .penetration {
    border-image: linear-gradient(to bottom, #72c8eb 50%, #f58e8d 50%, #f58e8d 50%) 5;
}

.cap-main-col {
    width: 30%;
}

.cap-sep-col {
    width: fit-content;
    padding: 12px 3px 12px 3px;
}

/*-----------------  ------------------*/

.title {
    float: left;
    font-weight: bold;
    padding: 3px;
}

.subtitle {
    padding: 1px;
    font-size: 0.75em;
}

.charsheet .bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.normal {
    font-weight: normal;
    font-style: normal;
}

.center-text {
    text-align: center;
}

.right-text {
    text-align: right;
}

.size-25-box {
    width: 25px;
    height: 25px;
}

.size-20-box {
    width: 20px;
    height: 20px;
}

.no-padding {
    padding: 0;
}

.padding-2 {
    padding: 2px;
}

.padding-3 {
    padding: 3px;
}

.padding-2505 {
    padding: 2px 5px 0 5px;
}

.padding-2525 {
    padding: 2px 5px 2px 5px;
}

.padding-0525 {
    padding: 0 5px 2px 5px;
}

.padding-top-2 {
    padding-top: 2px;
}

.padding-top-3 {
    padding-top: 3px;
}

.padding-top4 {
    padding-top: 4px;
}

.padding-top5 {
    padding-top: 5px;
}

.padding-left10 {
    padding-left: 10px;
}

.padding-right2 {
    padding-right: 2px;
}

.charsheet .padding-right5 {
    padding-right: 5px;
}

.charsheet .padding-right10 {
    padding-right: 10px;
}

.padding-right20 {
    padding-right: 20px;
}

.padding-bottom3 {
    padding-bottom: 3px;
}

.padding-bottom5 {
    padding-bottom: 5px;
}

.padding-bottom10 {
    padding-bottom: 10px;
}

.padding-bottom15 {
    padding-bottom: 15px;
}

.padding-bottom20 {
    padding-bottom: 20px;
}

.padding-bottom25 {
    padding-bottom: 25px;
}

.padding-v-2 {
    padding-bottom: 2px;
    padding-top: 2px;
}

.padding-v-3 {
    padding-bottom: 3px;
    padding-top: 3px;
}

.padding-v-5 {
    padding-bottom: 5px;
    padding-top: 5px;
}

.padding-v-10 {
    padding-bottom: 10px;
    padding-top: 10px;
}

.padding-v-15 {
    padding-bottom: 15px;
    padding-top: 15px;
}

.padding-v-20 {
    padding-bottom: 20px;
    padding-top: 20px;
}

.padding-h-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.padding-h-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.padding-h-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.padding-h-20 {
    padding-left: 20px;
    padding-right: 20px;
}

.no-border {
    border: none;
}

.transparent {
    background-color: transparent;
}

body.sheet-darkmode .transparent {
    background-color: transparent;
}

.border-bottom-1 {
    border-bottom: 1px solid black;
}

.border-bottom-2 {
    border-bottom: 2px solid black;
}

body.sheet-darkmode .border-bottom-2 {
    border-bottom: 2px solid #414042;
}

.border-bottom-grey-1 {
    border-bottom: 1px solid dimgrey;
}

.border-bottom-grey-2 {
    border-bottom: 2px solid dimgrey;
}

.border-red {
    border: 3px solid #EE5F57;
}

input.custom-number-input::-webkit-outer-spin-button,
input.custom-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].custom-number-input {
    -moz-appearance: textfield; /* Firefox */
    width: 1.4em;
    height: 1.5em;
    text-align: center;
}

input[type=number].small-number-input {
    width: 1.4em;
    height: 1.5em;
    text-align: left;
}

input.move-number-input::-webkit-outer-spin-button,
input.move-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number].move-number-input {
    -moz-appearance: textfield; /* Firefox */
    width: 1.9em;
    height: 1.5em;
    border: none;
    border-bottom: 1px solid grey;
}

.charsheet button[type=roll].custom-roll-button::before {
    content: "";
}

.charsheet button[type=roll].custom-roll-button,
body.sheet-darkmode .custom-roll-button {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-color: transparent;
    /*background-image: none;*/
}

body.sheet-darkmode .custom-roll-button:hover {
    /*background-image: none;*/
    background-color: transparent;
}

/*----------------- Inventory / Bio ------------------*/

.inventory-header {
    font-weight: bold;
    /*font-variant: small-caps;*/
    font-size: 1.7em;
    border-bottom: 2px solid dimgrey;
    width: fit-content;
    margin-bottom: 5px;
}

.inventory-title {
    background-color: dimgrey;
    color: white;
    text-align: center;
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
}

body.sheet-darkmode .inventory-title {
    background-color: #414042;
}

.inventory-box {
    border: 2px solid dimgrey;
}

body.sheet-darkmode .inventory-box {
    border: 2px solid #414042;
}

.inventory-box-upper {
    background-color: dimgrey;
    color: white;
    border-bottom: 2px solid lightgrey;
    padding: 2px;
}

body.sheet-darkmode .inventory-box-upper {
    background-color: #414042;
    border-bottom: 2px solid dimgrey;
}

.inventory-box-lower {
    background-color: #e6e7e8;
}

body.sheet-darkmode .inventory-box-lower {
    background-color: dimgrey;
    border-bottom: 2px solid #414042;
}

.inventory-selector {
    border-color: lightgrey;
}

input.white-text[type=text] {
    color: white;
}

/*** FOR CHECKBOX SELECTION ***/
/*** FOR SHOW/HIDE ***/
input[type=checkbox].tab-hide {
    display: inline-block;
    width: 24px;
    opacity: 0;
    z-index: 2;
}

input[type=checkbox].tab-hide + div {
    display: inline-block;
    margin-left: -27px;
    width: 25px;
    font-family: pictos, fantasy;
    font-size: 2.0em;
    color: #A0A0A0;
    cursor: pointer;
}

input[type=checkbox].tab-hide:checked + div {
    display: inline-block;
    color: black;
}

input[type=checkbox].tab-hide:hover + div,
input[type=checkbox].tab-hide:hover * {
    display: inline-block;
    color: blue;
}

/*** END FOR SHOW/HIDE ***/
/*** END FOR CHECKBOX SELECTION ***/

.inlineBlock {
    display: inline-block;
}

.vertTop {
    vertical-align: top;
}

.padLeft {
    padding-Left: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*----------------- Settings ------------------*/

.settings-box {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: relative;
    background: #3FB315;
}

.settings {
    z-index: 2;
    opacity: 0;
    bottom: 50%;
    left: -50%;
    position: absolute;
}

/* Settings button as gear (uses letter 'y' in pictos font) as a checkbox to be used with js */
.settings + span {
    display: inline-block;
    position: absolute;
    bottom: 50%;
    left: -50%;
    font-size: 20px;
    font-family: pictos, fantasy;
    color: #A0A0A0;
    cursor: pointer;
}

.settings:checked + span {
    color: black;
    display: inline-block;
}

.settings:hover + span,
.settings:hover * {
    color: blue;
    display: inline-block;
}

.show-hide {
    display: none;
}

input[type=checkbox].tab-hide:checked ~ .show-hide {
    display: inline-block;
}

.displaySettings {
    display: block;
    background-color: #ededed;
    border: 2px dotted dimgrey;
    margin-bottom: 10px;
    margin-left: 9%;
}

body.sheet-darkmode .displaySettings {
    background-color: dimgrey;
    border: 2px dotted #414042;
}

.melee_display_settings_flag[value="hide"] ~ .displaySettings,
.ranged_display_settings_flag[value="hide"] ~ .displaySettings,
.maneuver_display_settings_flag[value="hide"] ~ .displaySettings,
.displaySettingsFlag[value="hide"] ~ .displaySettings {
    display: none;
}

.charsheet summary {
    cursor: pointer;
}

.action-type-bar {
    background-color: dimgrey;
}

.action-type-bar > div > label {
    color: white;
}

body.sheet-darkmode .action-type-bar {
    background-color: #414042;
}

.action-attack-bar {
    background-color: lightgrey;
}

body.sheet-darkmode .action-attack-bar {
    background-color: #545355;
}

/*----------------- NPC Sheet ------------------*/

.npc-action-check-indicator[value="1"] ~ .npc-action-check-description,
.npc-action-check-indicator[value="2"] ~ .npc-action-check-description,
.npc-action-check-indicator[value="4"] ~ .npc-action-check-description,
.npc-action-check-indicator[value="1"] ~ .npc-action-dodge,
.npc-action-check-indicator[value="2"] ~ .npc-action-willpower,
.npc-action-check-indicator[value="3"] ~ .npc-action-auto-hit,
.npc-action-check-indicator[value="4"] ~ .npc-action-skill {
    display: inline-flex;
}

.npc-action-check-description,
.npc-action-dodge,
.npc-action-willpower,
.npc-action-auto-hit,
.npc-action-skill {
    display: none
}

.description-control[value="4"] ~ .npc-action-trigger,
.description-control[value="2"] ~ .npc-action-damage {
    display: block;
}

.npc-action-trigger,
.npc-action-damage {
    display: none;
}

/*----------------- Expandable textarea ------------------*/

.auto-expand {
    position: relative;
    min-height: 18px;
    cursor: text;
    word-wrap: break-word;
    border-radius: 2px;
    padding: 2px;
}

.auto-expand span {
    visibility: hidden;
    white-space: pre-wrap;
    display: block;
}

.auto-expand textarea {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    margin: 0;
    overflow: hidden;
    resize: none;
    height: 100%;
    width: 100%;
    display: block;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 2px;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    padding: inherit;
    text-align: inherit;
    text-transform: inherit;
}

/*-----------------  ------------------*/

.top-detail {
    grid-area: top-detail;
    background-color: #3FB315;
    width: fit-content;
}

.middle-detail {
    grid-area: middle-detail;
    align-content: center;
    width: fit-content;
}

.bottom-detail {
    grid-area: bottom-detail;
    align-content: center;
    background-color: cadetblue;
}

/* Boring Pre-defined width & height options */

.charsheet .width-auto {
    width: auto;
}

.charsheet .width-half {
    width: 49%;
}

.charsheet .width-third {
    width: 32%;
}

.charsheet .width5 {
    width: 5%;
}

.charsheet .width6 {
    width: 6%;
}

.charsheet .width10 {
    width: 10%;
}

.charsheet .width15 {
    width: 15%;
}

.charsheet .width20 {
    width: 20%;
}

.charsheet .width25 {
    width: 25%;
}

.charsheet .width30 {
    width: 30%;
}

.charsheet .width35 {
    width: 35%;
}

.charsheet .width39 {
    width: 39%;
}

.charsheet .width40 {
    width: 40%;
}

.charsheet .width45 {
    width: 45%;
}

.charsheet .width50 {
    width: 50%;
}

.charsheet .width55 {
    width: 55%;
}

.charsheet .width60 {
    width: 60%;
}

.charsheet .width65 {
    width: 65%;
}

.charsheet .width70 {
    width: 70%;
}

.charsheet .width75 {
    width: 75%;
}

.charsheet .width80 {
    width: 80%;
}

.charsheet .width85 {
    width: 85%;
}

.charsheet .width90 {
    width: 90%;
}

.charsheet .width95 {
    width: 95%;
}

.charsheet .width100 {
    width: 100%;
}

.charsheet .height5 {
    height: 5px;
}

.charsheet .height10 {
    height: 10px;
}

.charsheet .height15 {
    height: 15px;
}

.charsheet .height17 {
    height: 17px;
}

.charsheet .height20 {
    height: 20px;
}

.charsheet .height25 {
    height: 25px;
}

.charsheet .height30 {
    height: 30px;
}

.charsheet .height35 {
    height: 35px;
}

.charsheet .height40 {
    height: 40px;
}

.charsheet .height50 {
    height: 50px;
}

.charsheet .height75 {
    height: 75px;
}

.charsheet .height80 {
    height: 80px;
}

.charsheet .height100 {
    height: 100px;
}

.charsheet .height150 {
    height: 150px;
}

/*----------------- Hexagons ------------------*/

.enemy-dice,
.small-enemy-dice {
    font-family: dicefontd6, fantasy;
    position: absolute;
    z-index: 3;
    color: #9E76B3;
}

.enemy-dice {
    font-size: 50px;
}

.small-enemy-dice {
    font-size: 35px;
}

div.enemy-hex {
    display: none;
}

.grunt {
    padding-top: 50px;
    min-width: 390px;
    height: 330px;
    margin-top: -30px;
}

.awakened {
    padding-top: 75px;
    padding-left: 40px;
    height: 375px;
    min-width: 440px;
    margin-top: -5px;
}

.elite {
    padding-left: 40px;
    height: 400px;
    min-width: 410px;
    margin-top: -5px;
}

.boss {
    padding-left: 40px;
    height: 500px;
    min-width: 520px;
    margin-top: -5px;
}

.npc-ring-indicator[value="1"] ~ div.grunt,
.npc-ring-indicator[value="2"] ~ div.awakened,
.npc-ring-indicator[value="3"] ~ div.elite,
.npc-ring-indicator[value="4"] ~ div.boss {
    display: block;
}

/*------------- Hex colours ------------------*/

.hex.hex-4, .small-hex.hex-4, .large-hex.hex-4 {
    background: #ece3f0;
}

.hex.hex-3, .small-hex.hex-3, .large-hex.hex-3 {
    background: #d6c6e1;
}

.hex.hex-2, .small-hex.hex-2, .large-hex.hex-2 {
    background: #b796c6;
}

.hex.hex-1, .small-hex.hex-1, .large-hex.hex-1 {
    background: #a074b2;
}

.hex.hex-0, .small-hex.hex-0, .large-hex.hex-0 {
    background: #a074b2;
}

.hex.veteran-hex-4, .small-hex.veteran-hex-4 {
    background: #fabeaf;
}

.hex.veteran-hex-3, .small-hex.veteran-hex-3 {
    background: #f9b09f;
}

.hex.veteran-hex-2, .small-hex.veteran-hex-2 {
    background: #f69e8c;
}

.hex.veteran-hex-1, .small-hex.veteran-hex-1 {
    background: #fdbeaf;
}

/*------------- Hexes ------------------*/

input[type=checkbox].hex-button:checked ~ .hex.veteran-hex-1,
input[type=checkbox].hex-button:checked ~ .hex.veteran-hex-2,
input[type=checkbox].hex-button:checked ~ .hex.veteran-hex-3,
input[type=checkbox].hex-button:checked ~ .hex.veteran-hex-4,
input[type=checkbox].small-hex-button:checked ~ .small-hex.veteran-hex-1,
input[type=checkbox].small-hex-button:checked ~ .small-hex.veteran-hex-2,
input[type=checkbox].small-hex-button:checked ~ .small-hex.veteran-hex-3,
input[type=checkbox].small-hex-button:checked ~ .small-hex.veteran-hex-4 {
    background-color: transparent;
}

input[type=checkbox].hex-button:checked + span::before,
input[type=checkbox].small-hex-button:checked + span::before {
    content: "&";
    font-family: pictos, fantasy;
    color: black;
}

body.sheet-darkmode input[type=checkbox].hex-button:checked + span::before,
body.sheet-darkmode input[type=checkbox].small-hex-button:checked + span::before {
    color: white;
}

.charsheet input[type=checkbox].hex-button:hover + span + div,
.charsheet input[type=checkbox].hex-button:hover ~ .hex.veteran-hex-1,
.charsheet input[type=checkbox].hex-button:hover ~ .hex.veteran-hex-2,
.charsheet input[type=checkbox].hex-button:hover ~ .hex.veteran-hex-3,
.charsheet input[type=checkbox].hex-button:hover ~ .hex.veteran-hex-4,
.charsheet input[type=checkbox].hex-button:hover + span + div,
.charsheet input[type=checkbox].small-hex-button:hover + span + div,
input[type=checkbox].small-hex-button:hover ~ .small-hex.veteran-hex-1,
input[type=checkbox].small-hex-button:hover ~ .small-hex.veteran-hex-2,
input[type=checkbox].small-hex-button:hover ~ .small-hex.veteran-hex-3,
input[type=checkbox].small-hex-button:hover ~ .small-hex.veteran-hex-4 {
    background-color: indianred;
}

body.sheet-darkmode .hex-button + span::before,
body.sheet-darkmode .small-hex-button + span::before {
    color: whitesmoke;
}

body.sheet-darkmode .hex-button + span,
body.sheet-darkmode .small-hex-button + span {
    border-color: #1f1f1f;
    background-color: #1f1f1f;
}

input[type=checkbox].hex-button {
    opacity: 0;
    z-index: 5;
    margin-left: -50px;
    position: relative;
    top: 55px;
    width: 20px;
    height: 20px
}

.hex-button + span,
.small-hex-button + span {
    background-color: white;
    border-color: white;
    position: relative;
    display: inline-block;
    z-index: 4;
}

.hex-button + span {
    width: 24px;
    height: 12px;
    top: 62px;
    margin-left: -21px;
}

.small-hex-button + span {
    width: 15px;
    height: 8px;
    top: 37px;
    margin-left: -16px;
}

.hex-button + span:before,
.small-hex-button + span::before {
    cursor: pointer;
    content: "3";
    font-family: pictos, fantasy;
    color: black;
    display: flex;
    justify-content: center;
    width: 0;
    height: 0;
    border-bottom: 8px solid;
    border-color: inherit;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    position: absolute;
    top: -7px;
    font-size: 1.35em;
}

.small-hex-button + span::before {
    border-bottom: 5px solid;
    border-color: inherit;
    border-left: 8px solid transparent;
    border-right: 7px solid transparent;
    top: -4.5px;
    font-size: 0.9em;
}

.hex-button + span:after,
.small-hex-button + span:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -7.5px;
    border-top: 8px solid;
    border-color: inherit;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

.small-hex-button + span::after {
    border-top: 4px solid;
    border-color: inherit;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    bottom: -3px;
}

.hex {
    width: 75px;
    height: 43px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 173px;
    position: relative;
    float: left;
    margin: 13px 2px;
    text-align: center;
    zoom: 1;
}

.hex .corner-1,
.hex .corner-2,
.small-hex .corner-1,
.small-hex .corner-2,
.large-hex .corner-1,
.large-hex .corner-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    z-index: 1;
    overflow: hidden;
    backface-visibility: hidden;
}

.hex .corner-1,
.small-hex .corner-1,
.large-hex .corner-1 {
    z-index: 0;
    transform: rotate(60deg);
}

.hex .corner-2,
.small-hex .corner-2,
.large-hex .corner-2 {
    transform: rotate(-60deg);
}

.hex .corner-1::before,
.hex .corner-2::before,
.small-hex .corner-1::before,
.small-hex .corner-2::before,
.large-hex .corner-1::before,
.large-hex .corner-2::before {
    width: 173px;
    height: 173px;
    content: "";
    position: absolute;
    background: inherit;
    top: 0;
    left: 0;
    z-index: 1;
    background-repeat: no-repeat;
    backface-visibility: hidden;
}

.hex .corner-1::before,
.small-hex .corner-1::before,
.large-hex .corner-1::before {
    transform: rotate(-60deg) translate(-87px, 0px);
    transform-origin: 0 0;
}

.hex .corner-2::before,
.small-hex .corner-2::before,
.large-hex .corner-2::before {
    transform: rotate(60deg) translate(-48px, -11px);
    bottom: 0;
}

/* Custom styles*/
.hex .inner,
.small-hex .inner,
.large-hex .inner {
    color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}

.inner > textarea,
.sheet-darkmode .inner > textarea {
    width: 100%;
    height: 100%;
    background: transparent;
    color: black;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    resize: none
}

.small-hex .inner > textarea {
    line-height: 1.25em;
    font-size: 0.75em;
}

.hex .inner > textarea {
    line-height: 1em;
    font-size: 1em;
}

.large-hex .inner > textarea {
    line-height: 1.5em;
    font-size: 1.25em;
}

/*------------- Small/Large hexes ---------------*/

input[type=checkbox].small-hex-button {
    opacity: 0;
    margin-left: -34px;
    margin-top: -10px;
    z-index: 5;
    position: relative;
    top: 40px;
    width: 15px;
    height: 15px;
}

.small-hex {
    width: 50px;
    height: 30px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 173px;
    position: relative;
    float: left;
    margin: 8px 2px;
    text-align: center;
    zoom: 1;
}

.large-hex {
    width: 100px;
    height: 57px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: auto 173px;
    position: relative;
    float: left;
    margin: 16px 2px;
    text-align: center;
    zoom: 1;
}

/*----------------- Tools Tips ------------------*/

.hover-tip {
    cursor: pointer;
}

.hover-tip-text {
    display: none;
    position: absolute;
    z-index: 6;

    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 2px;
    border-radius: 6px;
}

.hover-tip:hover ~ .hover-tip-text {
    display: inline-block;
}

/*----------------- Roll templates ------------------*/

.sheet-rolltemplate-condition-info *,
.sheet-rolltemplate-turn *,
.sheet-rolltemplate-skill *,
.sheet-rolltemplate-action *,
.sheet-rolltemplate-basic-action * {
    font-family: "Proxima Nova", "ProximaNova-Regular", serif;
}

.sheet-rolltemplate-condition-info .sheet-kungfont,
.sheet-rolltemplate-turn .sheet-kungfont,
.sheet-rolltemplate-skill .sheet-kungfont,
.sheet-rolltemplate-action .sheet-kungfont,
.sheet-rolltemplate-basic-action .sheet-kungfont {
    font-family: "Kungfont-Regular", Kungfont, "Proxima Nova", "ProximaNova-Regular", ProximaNova, serif;
    font-size: 16px;
}

.sheet-rolltemplate-condition-info .sheet-container,
.sheet-rolltemplate-turn .sheet-container,
.sheet-rolltemplate-skill .sheet-container,
.sheet-rolltemplate-basic-action .sheet-container,
.sheet-rolltemplate-action .sheet-container {
    background-color: #ffffff;
    border: 1px solid white;
    padding: 2px;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-condition-info .sheet-container,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-container,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .sheet-container,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-container,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-container {
    background-color: dimgrey;
    color: white;
    border: 1px solid dimgrey;
}

.sheet-rolltemplate-condition-info .sheet-header-bar,
.sheet-rolltemplate-turn .sheet-header-bar,
.sheet-rolltemplate-skill .sheet-header-bar,
.sheet-rolltemplate-basic-action .sheet-header-bar,
.sheet-rolltemplate-action .sheet-header-bar {
    background-color: dimgrey;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-condition-info .sheet-header-bar,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-header-bar,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .sheet-header-bar,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-header-bar,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-bar {
    background-color: #414042;
}

.sheet-rolltemplate-action .sheet-header-tide-bar {
    background-color: #F9B276;
}

.sheet-rolltemplate-turn .sheet-header-npc-special-bar,
.sheet-rolltemplate-action .sheet-header-npc-special-bar {
    background-color: #a074b2;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-header-npc-special-bar,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-special-bar {
    background-color: #845a91;
}

.sheet-rolltemplate-action .sheet-header-npc-learned-bar {
    background-color: #f8a18c;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-learned-bar {
    background-color: #f15d5c;
}

.sheet-rolltemplate-action .sheet-header-tide-bar > div,
.sheet-rolltemplate-action .sheet-header-tide-bar > div > h1,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-tide-bar > div > h1 {
    color: black;
}

.sheet-rolltemplate-condition-info .sheet-header-bar > div,
.sheet-rolltemplate-condition-info .sheet-header-bar > div > h1,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-condition-info .sheet-header-bar > div > h1,
.sheet-rolltemplate-turn .sheet-header-bar > div,
.sheet-rolltemplate-turn .sheet-header-bar > div > h1,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-header-bar > div > h1,
.sheet-rolltemplate-turn .sheet-header-npc-special-bar > div,
.sheet-rolltemplate-turn .sheet-header-npc-special-bar > div > h1,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-header-npc-special-bar > div > h1,
.sheet-rolltemplate-skill .sheet-header-bar > div,
.sheet-rolltemplate-skill .sheet-header-bar > div > h1,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .sheet-header-bar > div > h1,
.sheet-rolltemplate-action .sheet-header-bar > div,
.sheet-rolltemplate-action .sheet-header-bar > div > h1,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-bar > div > h1,
.sheet-rolltemplate-basic-action .sheet-header-bar > div,
.sheet-rolltemplate-basic-action .sheet-header-bar > div > h1,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-header-bar > div > h1,
.sheet-rolltemplate-action .sheet-header-npc-special-bar > div,
.sheet-rolltemplate-action .sheet-header-npc-special-bar > div > h1,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-special-bar > div > h1 {
    color: white;
}

.sheet-rolltemplate-condition-info div,
.sheet-rolltemplate-turn div,
.sheet-rolltemplate-skill div,
.sheet-rolltemplate-basic-action div,
.sheet-rolltemplate-action div {
    padding: 2px;
}

.sheet-rolltemplate-condition-info .sheet-tcat,
.sheet-rolltemplate-turn .sheet-tcat,
.sheet-rolltemplate-skill .sheet-tcat,
.sheet-rolltemplate-basic-action .sheet-tcat,
.sheet-rolltemplate-action .sheet-tcat {
    font-weight: bold;
    font-size: 0.75em;
    font-variant: small-caps;
    line-height: 1.6em;
    padding-left: 5px;
    text-align: left;
}

.sheet-rolltemplate-condition-info .sheet-tcat-text,
.sheet-rolltemplate-turn .sheet-tcat-text,
.sheet-rolltemplate-skill .sheet-tcat-text,
.sheet-rolltemplate-basic-action .sheet-tcat-text,
.sheet-rolltemplate-action .sheet-tcat-text {
    font-size: 0.85em;
}

.sheet-rolltemplate-condition-info .sheet-tcat-header,
.sheet-rolltemplate-turn .sheet-tcat-header,
.sheet-rolltemplate-skill .sheet-tcat-header,
.sheet-rolltemplate-basic-action .sheet-tcat-header,
.sheet-rolltemplate-action .sheet-tcat-header {
    font-weight: bold;
    font-size: 1em;
    font-variant: small-caps;
    line-height: 20px;
}

.sheet-rolltemplate-condition-info .sheet-tcat-subheader,
.sheet-rolltemplate-turn .sheet-tcat-subheader,
.sheet-rolltemplate-skill .sheet-tcat-subheader,
.sheet-rolltemplate-basic-action .sheet-tcat-subheader,
.sheet-rolltemplate-action .sheet-tcat-subheader {
    font-size: 0.8em;
    font-style: italic;
}

.sheet-rolltemplate-condition-info .sheet-separator,
.sheet-rolltemplate-turn .sheet-separator,
.sheet-rolltemplate-skill .sheet-separator,
.sheet-rolltemplate-basic-action .sheet-separator,
.sheet-rolltemplate-action .sheet-separator {
    background-color: #d3d3d3;
    width: auto;
    padding: 1px;
}

.sheet-rolltemplate-turn .inlinerollresult,
.sheet-rolltemplate-skill .inlinerollresult,
.sheet-rolltemplate-basic-action .inlinerollresult,
.sheet-rolltemplate-action .inlinerollresult {
    background-color: #ffffff;
    border: 3px solid #000000;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .inlinerollresult {
    background-color: grey;
    border: 3px solid #414042;
}

.sheet-rolltemplate-skill .inlinerollresult.fullcrit,
.sheet-rolltemplate-basic-action .inlinerollresult.fullcrit,
.sheet-rolltemplate-action .inlinerollresult.fullcrit {
    border: 3px solid #3FB315;
}

.sheet-rolltemplate-skill .inlinerollresult.fullfail,
.sheet-rolltemplate-basic-action .inlinerollresult.fullfail,
.sheet-rolltemplate-action .inlinerollresult.fullfail {
    border: 3px solid #B31515;
}

.sheet-rolltemplate-skill .sheet-crit .inlinerollresult,
.sheet-rolltemplate-basic-action .sheet-crit .inlinerollresult,
.sheet-rolltemplate-action .sheet-crit .inlinerollresult {
    border: 3px solid #3FB315;
}

.sheet-rolltemplate-skill .sheet-fail .inlinerollresult,
.sheet-rolltemplate-basic-action .sheet-fail .inlinerollresult,
.sheet-rolltemplate-action .sheet-fail .inlinerollresult {
    border: 3px solid #B31515;
}

.sheet-rolltemplate-skill .sheet-pierce .inlinerollresult,
.sheet-rolltemplate-basic-action .sheet-pierce .inlinerollresult,
.sheet-rolltemplate-action .sheet-pierce .inlinerollresult {
    border: 3px solid dodgerblue;
    background-color: rgba(255,255,255,0.75);
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-skill .sheet-pierce .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-pierce .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-pierce .inlinerollresult {
    background-color: rgba(50,50,50,0.75);
}

.sheet-rolltemplate-action .sheet-critical,
.sheet-rolltemplate-basic-action .sheet-critical {
    height: 51px;
    width: 154px;
    margin-top: -10px;
    padding: 0 5px 0 5px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: white;
    font-family: "Kungfont-Regular", Kungfont, "Proxima Nova", "ProximaNova-Regular", ProximaNova, serif;
    font-variant: small-caps;
    font-size: 20px;
    background-position-y: 2px;
    background-position-x: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/step-header-2.png");
}

.sheet-rolltemplate-action .sheet-piercing,
.sheet-rolltemplate-basic-action .sheet-piercing {
    padding: 7px;
    background-position-y: 0;
    background-position-x: 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/step3.png");
}

.sheet-rolltemplate-action .sheet-toughness-img,
.sheet-rolltemplate-basic-action .sheet-toughness-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-b.png");
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-toughness-img,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-toughness-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/toughness-w.png");
}

.sheet-rolltemplate-action .sheet-resistance-img,
.sheet-rolltemplate-basic-action .sheet-resistance-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-b.png");
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-resistance-img,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-resistance-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/resistance-w.png");
}

.sheet-rolltemplate-action .sheet-dodge-img,
.sheet-rolltemplate-basic-action .sheet-dodge-img,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-dodge-img,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-dodge-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-w.png");
}

.sheet-rolltemplate-action .sheet-willpower-img,
.sheet-rolltemplate-basic-action .sheet-willpower-img,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-willpower-img,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-willpower-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-w.png");
}

.sheet-rolltemplate-action .sheet-header-npc-learned-bar .sheet-dodge-img,
.sheet-rolltemplate-basic-action .sheet-header-npc-learned-bar .sheet-dodge-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-b.png");
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-learned-bar .sheet-dodge-img,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-header-npc-learned-bar .sheet-dodge-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/dodge-w.png");
}

.sheet-rolltemplate-action .sheet-header-npc-learned-bar .sheet-willpower-img,
.sheet-rolltemplate-basic-action .sheet-header-npc-learned-bar .sheet-willpower-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-b.png");
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-header-npc-learned-bar .sheet-willpower-img,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-header-npc-learned-bar .sheet-willpower-img {
    content: url("https://raw.githubusercontent.com/lexibrown/roll20-character-sheets/master/Emberwind/images/values/willpower-w.png");
}

.sheet-rolltemplate-condition-info .sheet-flex-center,
.sheet-rolltemplate-turn .sheet-flex-center,
.sheet-rolltemplate-skill .sheet-flex-center,
.sheet-rolltemplate-action .sheet-flex-center,
.sheet-rolltemplate-basic-action .sheet-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheet-rolltemplate-action .sheet-indicator,
.sheet-rolltemplate-basic-action .sheet-indicator {
    padding: 1px;
    font-variant: small-caps;
    font-size: 1em;
    font-weight: bold;
    font-style: italic;
}

.sheet-rolltemplate-action .sheet-footer,
.sheet-rolltemplate-basic-action .sheet-footer {
    color: grey;
    font-size: 0.8em;
    margin-top: -3px;
    margin-bottom: -5px;
    font-variant: small-caps;
    font-weight: bold;
    font-style: italic;
    padding: 0;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-footer,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-footer {
    color: whitesmoke;
}

.sheet-rolltemplate-action .sheet-damage .inlinerollresult,
.sheet-rolltemplate-basic-action .sheet-damage .inlinerollresult {
    border: none;
    background-color: lightgrey;
    padding: 0 4px;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-action .sheet-damage .inlinerollresult,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-basic-action .sheet-damage .inlinerollresult {
    border: none;
    background-color: grey;
}

.sheet-rolltemplate-turn .sheet-damage .inlinerollresult {
    border: none;
    background-color: lightgrey;
    padding: 0 7px;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-turn .sheet-damage .inlinerollresult {
    background-color: grey;
}

/*-------------------------*/