/* ===================================== */

/* FONT FACES */

/* ===================================== */

/* DMSans - Primary Font Family */
@font-face {
    font-family: 'DMSans';
    src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'DMSans';
    src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'DMSans';
    src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/fonts/dm-sans-v17-latin_latin-ext-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Bird of Feather';
    src: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/fonts/bird-of-feather.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

div.container {
    --sheet-primary-color: #cc9133;
    --sheet-background-color: #fff4e7;
}

.sheet-type-select[value="npc"]~div.container {
    --sheet-primary-color: #2babe3;
    --sheet-background-color: #e7f4fb;
}

.sheet-type-select[value="adversary"]~div.container {
    --sheet-primary-color: #da3831;
    --sheet-background-color: #f9e7e4;
}

/* ===================================== */

/* ROLL20 INTEGRATION */

/* ===================================== */

.characterviewer,
.characterviewer .tab-content .sheetform,
.characterviewer .tab-content .sheetform .charactersheet,
.characterviewer .tab-content .sheetform .charactersheet .container {
    height: 100%;
}

.characterviewer .tab-content .sheetform .charactersheet .container {
    display: grid;
    grid-template-rows: 0 calc(100% - 16px) 16px 0;
}

.eem {
    display: grid;
    grid-template-rows: 100px 32px calc(100% - 132px);
}

.characterviewer .tab-content {
    height: calc(100% - 61px);
}

.ui-dialog .charsheet {
    padding: 0;
}

.ui-dialog .charsheet input[type="number"] {
    width: 100%;
}

.ui-dialog .charsheet .treasure button[type=action],
.ui-dialog .charsheet .sheet-attributes button[type=action],
.ui-dialog .charsheet .sheet-adversary-preview button[type=action] {
    background: transparent;
    color: #000000;
    padding: 0;
    margin: 0;
    border: none;
    font-size: 15px;
    text-shadow: none;
    box-shadow: none;
    text-align: left;
}

.ui-dialog .charsheet .treasure button[type=action]:hover,
.ui-dialog .charsheet .sheet-attributes button[type=action]:hover,
.ui-dialog .charsheet .sheet-adversary-preview button[type=action]:hover {
    color: var(--sheet-primary-color);
    text-decoration: underline solid 1px #000000;
    font-weight: 600;
}

.ui-dialog .charsheet button[type=action].treasure {
    float: right;
    border: none;
    background: transparent;
}

.ui-dialog .charsheet button[type=action]:hover h2 {
    color: #000000;
    text-decoration: underline solid 1px var(--sheet-primary-color);
}

.ui-dialog .charsheet button[type=action]::before {
    content: '';
}

.clearRoll {
    text-decoration: none;
}

.sheet-rolltemplate-attack,
.sheet-rolltemplate-check,
.sheet-rolltemplate-description {
    --sheet-primary-color: #cc9133;
    --sheet-background-color: #fff4e7;
    background-color: #ffffff;
    border: solid var(--sheet-primary-color) 2px;
    border-radius: 8px;
    color: #000000;
    overflow: hidden;

}

.sheet-rolltemplate-attack:has(.sheet-adversary),
.sheet-rolltemplate-check:has(.sheet-adversary),
.sheet-rolltemplate-description:has(.sheet-adversary) {
    --sheet-primary-color: #da3831;
    --sheet-background-color: #f9e7e4;

}

.sheet-rolltemplate-attack:has(.sheet-npc),
.sheet-rolltemplate-check:has(.sheet-npc),
.sheet-rolltemplate-description:has(.sheet-npc) {
    --sheet-primary-color: #2babe3;
    --sheet-background-color: #e7f4fb;
}

.sheet-rolltemplate-attack ul,
.sheet-rolltemplate-check ul,
.sheet-rolltemplate-description ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sheet-rolltemplate-attack h3,
.sheet-rolltemplate-check h3,
.sheet-rolltemplate-description h3 {
    padding: 8px;
    text-align: center;
    background-color: var(--sheet-background-color);
    color: #000000;
    font-size: 14px;
}

.sheet-rolltemplate-attack h4,
.sheet-rolltemplate-check h4,
.sheet-rolltemplate-description h4 {
    padding: 4px;
    font-size: 13px;
    font-weight: normal;
    color: #000000;
}

.sheet-rolltemplate-attack h5,
.sheet-rolltemplate-check h5,
.sheet-rolltemplate-description h5 {
    padding: 4px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    color: #e62c2c;
    background-color: var(--sheet-background-color);
    margin-top: -8px;
}

.sheet-rolltemplate-attack h2,
.sheet-rolltemplate-check h2,
.sheet-rolltemplate-description h2 {
    background-color: var(--sheet-primary-color);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    padding: 4px;
    line-height: 16px;
}

.sheet-rolltemplate-attack h2 i,
.sheet-rolltemplate-check h2 i,
.sheet-rolltemplate-description h2 i {
    font-size: 12px;
    font-weight: normal;
    text-transform: none;
    color: var(--sheet-background-color);
    padding: 4px;
    line-height: 16px;
}

.sheet-rolltemplate-attack span.inlinerollresult,
.sheet-rolltemplate-check span.inlinerollresult {
    border: 1.5px solid var(--sheet-primary-color);
    border-radius: 4px;
}

.sheet-rolltemplate-attack span.inlinerollresult.fullcrit,
.sheet-rolltemplate-check span.inlinerollresult.fullcrit {
    border: 2px solid #08a500;
}

.sheet-rolltemplate-attack span.inlinerollresult.fullfail,
.sheet-rolltemplate-check span.inlinerollresult.fullfail {
    border: 2px solid #e62c2c;
}

.sheet-rolltemplate-attack .sheet-critical-hit span.inlinerollresult,
.sheet-rolltemplate-check .sheet-critical-hit span.inlinerollresult {
    font-weight: bolder;
    font-size: 20px;
    line-height: 30px;
    border-radius: 7px;
    border-width: 4px;
    border-style: outset;
}

/* ===================================== */

/* GLOBAL CONTAINER & LAYOUT */

/* ===================================== */

.container {
    --radiusouter: 8px;
    --radius: 7px;
    --thickness: 2px;

    background-color: var(--sheet-background-color);
    margin: 0;
    padding: 0;
    min-width: 850px;
    min-height: 595px;
    letter-spacing: 0.075em;
}

.container textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--sheet-primary-color) #ffffff;
}

/* Firefox-specific adjustment using feature query */
@supports (-moz-appearance: none) {
    .container textarea {
        scrollbar-width: auto;
    }
}

@media (min-width: 768px) {
    .container {
        width: unset;
    }
}

@media (min-width: 880px) {
    .container {
        width: unset;
    }
}

@media (min-width: 992px) {
    .container {
        width: unset;
    }
}

/* ===================================== */

/* CORNER BOX COMPONENT */

/* ===================================== */

.corner-box-wrapper {
    display: block;
    height: 50px;
    margin: 8px;
    margin-top: 18px;
}

/* Corner Box - Main Container */
.corner-box {
    shape-rendering: geometricprecision;
    height: 100%;
    padding: var(--radiusouter);
    clip-path: polygon(0 var(--radiusouter),
            var(--radiusouter) 0,
            calc(100% - var(--radiusouter)) 0,
            100% var(--radiusouter),
            100% calc(100% - var(--radiusouter)),
            calc(100% - var(--radiusouter)) 100%,
            var(--radiusouter) 100%,
            0 calc(100% - var(--radiusouter)));
    background-color: var(--sheet-primary-color);
    position: relative;
}

/* Corner Box - Inner White Background */
.corner-box::before {
    shape-rendering: geometricprecision;
    display: block;
    content: '';
    position: relative;
    left: calc(var(--thickness) * 1 - var(--radiusouter));
    top: calc(var(--thickness) * 1 - var(--radiusouter));
    width: calc(100% - var(--thickness) * 2 + var(--radiusouter) * 2);
    height: calc(100% - var(--thickness) * 2 + var(--radiusouter) * 2);
    clip-path: polygon(0 var(--radius),
            var(--radius) 0,
            calc(100% - var(--radius)) 0,
            100% var(--radius),
            100% calc(100% - var(--radius)),
            calc(100% - var(--radius)) 100%,
            var(--radius) 100%,
            0 calc(100% - var(--radius)));
    background-color: #ffffff;
    z-index: -1;
}

/* Corner Box - Header Label */
.corner-box-wrapper .corner-box-header {
    margin-bottom: -12px;
    margin-left: 8px;
    background-color: white;
    color: var(--sheet-primary-color);
    text-transform: uppercase;
    height: 16px;
    width: fit-content;
    padding: 4px;
    position: relative;
    z-index: 1;
    font: 13px 'DMSans', sans-serif;
    font-weight: 600;
}

/* Corner Box - Content Area */
.corner-box .content {
    width: calc(100% - var(--radiusouter) * 2);
    display: block;
    position: absolute;
    top: var(--radiusouter);
    left: var(--radiusouter);
}

.corner-box .inner-header {
    margin-left: -4px;
    margin-top: -4px;
}

.corner-box .content.two-columns {
    grid-template-columns: fit-content(50%) auto;
    display: grid;
}

/* Corner Box - Labels */
.corner-box label {
    font: 12px 'DMSans', sans-serif;
    font-weight: 900;
    color: var(--sheet-primary-color);
    display: flex;
    align-items: center;
    padding-right: 4px;
    height: 100%;
    margin-bottom: 0;
    max-height: 26px;
    line-height: 13px;
}

/* Corner Box - Input Fields */
.corner-box input {
    border: none;
    background-color: #ffffff;
    font-family: 'DMSans', sans-serif;
    font-size: 16.5px;
    line-height: 22px;
    font-weight: 600;
    padding: 2px 4px;
    width: 100%;
    height: auto;
    border-radius: 0;
    color: #000000;
    margin: 0;
}

/* Corner Box - Textarea Fields */
.corner-box .content textarea {
    width: 96%;
    resize: none;
    line-height: 18px;
    font-family: 'DMSans', sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    height: 54px;
    border: none;
    background-color: transparent;
    color: #000000;
}

/* Corner Box - Side Variant */
.corner-box-wrapper.side {
    margin-top: 0;
    height: 58px;
}

.corner-box-wrapper.side .corner-box {
    margin-bottom: 8px;
}

/* ===================================== */

/* XP ROWS (LEVEL & EXPERIENCE) */

/* ===================================== */

.xp-rows {
    grid-template-rows: 0% 50% 50%;
    grid-template-columns: 78px;
    display: grid;
    vertical-align: middle;
    height: 64px;
    margin: 8px;
    margin-top: 18px;
}

.xp-rows::after {
    background-color: #000000;
    content: '';
}

.xp-rows .corner-box-wrapper {
    height: 18px;
    margin: 0;
}

.xp-rows .corner-box input {
    font-size: 15px;
    padding: 0 4px;
    margin-top: -2px;
}

.xp-background {
    position: relative;
    height: min-content;
    width: min-content;
    height: 80px;
    background-color: var(--sheet-background-color);
}

.xp-background::after {
    background-color: var(--sheet-primary-color);
    mask-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/xp_bw.png");
    content: '';
    position: absolute;
    top: -17px;
    left: -11px;
    height: 100px;
    width: 100%;
    mask-size: 100%;
    mix-blend-mode: plus-lighter;
}

.xp-background img {
    position: relative;
    top: -17px;
    left: -11px;
    height: 100px;
    width: 100px;
    max-width: none;
}

/* ===================================== */

/* NAVIGATION BAR & TAB SYSTEM */

/* ===================================== */

/* Nav Bar Container */
.nav-bar {
    background-color: var(--sheet-primary-color);
    margin-left: 8px;
    margin-right: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Nav Bar Buttons */
.nav-bar button {
    font-family: 'DMSans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    padding: 5px 10px;
    padding-bottom: 7px;
    border: 2px solid var(--sheet-primary-color);
    border-bottom: none;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background-color: var(--sheet-primary-color);
    color: #ffffff;
    cursor: pointer;
    letter-spacing: -0.25px;
}

/* Nav Bar Button Hover */
.nav-bar button:hover {
    position: relative;
    top: -7px;
    padding-bottom: 14px;
    margin-bottom: -7px;
    box-shadow: 0 0 4px rgb(0 0 0 / 10%);
}

/* Tab Content Containers - Hidden by Default */
.sheet-npc,
.sheet-adversary-definition,
.sheet-adversary-preview,
.sheet-attributes,
.sheet-inventory,
.sheet-background,
.sheet-notes,
.sheet-portrait,
.sheet-settings {
    display: none;
    border: 2px solid var(--sheet-primary-color);
    border-top: none;
    margin: 8px;
    margin-top: 0;
    background-color: #ffffff;
    padding: 8px;
}

/* Active Tab Button Styling */
.eem .sheet-tabstoggle[value="attributes"]~div.nav-bar .sheet-button0,
.eem .sheet-tabstoggle[value="inventory"]~div.nav-bar .sheet-button1,
.eem .sheet-tabstoggle[value="background"]~div.nav-bar .sheet-button2,
.eem .sheet-tabstoggle[value="notes"]~div.nav-bar .sheet-button3,
.eem .sheet-tabstoggle[value="portrait"]~div.nav-bar .sheet-button4,
.eem .sheet-tabstoggle[value="settings"]~div.nav-bar .sheet-button5,
.eem .sheet-tabstoggle[value="npc"]~div.nav-bar .sheet-button-npc,
.eem .sheet-tabstoggle[value="adversary-definition"]~div.nav-bar .sheet-button-adversary,
.eem .sheet-tabstoggle[value="adversary-preview"]~div.nav-bar .sheet-button-preview {
    background-color: #ffffff;
    color: var(--sheet-primary-color);
    position: relative;
    top: -7px;
    padding-bottom: 14px;
    margin-bottom: -7px;
    box-shadow: none !important;
}

.eem .sheet-button5 {
    float: right;
}

.eem .sheet-button5 .gear-icon {
    font-size: 17px;
    margin-left: 4px;
    line-height: 0;
    font-weight: 400;
}

/* Show Selected Tab Content */
.eem .sheet-tabstoggle[value="npc"]~div.sheet-npc,
.eem .sheet-tabstoggle[value="adversary-definition"]~div.sheet-adversary-definition,
.eem .sheet-tabstoggle[value="adversary-preview"]~div.sheet-adversary-preview,
.eem .sheet-tabstoggle[value="attributes"]~div.sheet-attributes,
.eem .sheet-tabstoggle[value="inventory"]~div.sheet-inventory,
.eem .sheet-tabstoggle[value="background"]~div.sheet-background,
.eem .sheet-tabstoggle[value="notes"]~div.sheet-notes,
.eem .sheet-tabstoggle[value="portrait"]~div.sheet-portrait,
.eem .sheet-tabstoggle[value="settings"]~div.sheet-settings {
    display: grid;
}

.eem .sheet-type-pc,
.eem .nav-bar button.sheet-type-pc,
.eem .header.sheet-type-pc,
.eem .sheet-type-npc,
.eem .nav-bar button.sheet-type-npc,
.eem .header.sheet-type-npc,
.eem .sheet-type-adversary,
.eem .nav-bar button.sheet-type-adversary,
.eem .header.sheet-type-adversary {
    display: none;
}

.eem .sheet-type-select[value="pc"]~div.sheet-type-pc,
.eem .sheet-type-select[value="npc"]~div.sheet-type-npc,
.eem .sheet-type-select[value="adversary"]~div.sheet-type-adversary {
    display: block;
}

.eem .sheet-type-select[value="pc"]~.nav-bar button.sheet-type-pc,
.eem .sheet-type-select[value="npc"]~.nav-bar button.sheet-type-npc,
.eem .sheet-type-select[value="adversary"]~.nav-bar button.sheet-type-adversary {
    display: inline-block;
}

.eem .sheet-type-select[value="pc"]~.header.sheet-type-pc,
.eem .sheet-type-select[value="npc"]~.header.sheet-type-npc,
.eem .sheet-type-select[value="adversary"]~.header.sheet-type-adversary {
    display: grid;
}

/* ===================================== */

/* CHARACTER HEADER */

/* ===================================== */

.eem .header {
    background-color: var(--sheet-background-color);
    color: var(--sheet-primary-color);
    display: grid;
    height: 100px;
    grid-template-columns: 4fr 3fr 100px 140px 82px;
}

.eem .header.sheet-type-npc {
    grid-template-columns: 1fr 1fr 140px 82px;
}

.eem .header.sheet-type-adversary {
    grid-template-columns: max-content auto 140px 82px;
}

.eem .header.sheet-type-adversary .adversary-name {
    font-size: 66px;
    font-weight: 400;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--sheet-primary-color);
    margin: 0;
    margin-left: 4px;
    margin-top: 14px;
    font-family: 'Bird of Feather', sans-serif;
    border: none;
    background-color: transparent;
    field-sizing: content;
    width: fit-content;
    padding: 0;
    padding-right: 4px;
    padding-left: 4px;
    padding-top: 10px;
    height: 70px;
}

.eem .header.sheet-type-adversary .adversary-type-symbol {
    width: auto;
    height: 50px;
    margin: auto 0;
    background-color: var(--sheet-primary-color);
    mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/creatures.svg');
    mask-repeat: no-repeat;
    float: left;
}

.eem .header.sheet-type-adversary input.adversary-type[value="creature"]~.adversary-type-symbol {
    mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/creatures.svg');
}

.eem .header.sheet-type-adversary input.adversary-type[value="critter"]~.adversary-type-symbol {
    mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/critters.svg');
}

.eem .header.sheet-type-adversary input.adversary-type[value="creeper"]~.adversary-type-symbol {
    mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/creepers.svg');
}

.eem .header .frame {
    padding: 8px;
    margin: 8px;
    border: 1px solid var(--sheet-primary-color);
    background-color: #ffffff;
    display: block;
    height: 40px;
    border-radius: 8px;
}

.eem .header .logo {
    margin-top: 27px;
    margin-left: -4px;
    margin-right: 0;
    max-width: 100%;
    height: min-content;
    position: relative;
}

.eem .header .logo img {
    max-width: 100%;
}

.eem .header .logo::after {
    background-color: var(--sheet-primary-color);
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    mask-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/logo-flat.png');
    width: 100%;
    height: 100%;
    mask-size: 100%
}

.eem .header .top-avatar {
    margin: 18px auto;
    height: 62px;
    width: 62px;
    border: 2px solid var(--sheet-primary-color);
    border-radius: 4px;
    object-fit: cover;
}

.eem .header img.top-avatar:not([src]) {
    border: none;
    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stars.png');
    background-size: contain;
    background-repeat: no-repeat;
    outline: 4px solid var(--sheet-background-color);
    outline-offset: -2px;
}

.header .corner-box label {
    letter-spacing: normal;
    font-weight: 600;
}

.header small {
    color: var(--sheet-primary-color);
    font-size: 10px;
    letter-spacing: -0.02em;
    display: block;
    position: relative;
    top: -10px;
    text-align: left;
}

/* ===================================== */

/* ATTRIBUTES TAB */

/* ===================================== */

/* Attributes Tab Layout */
.eem .sheet-attributes {
    grid-template-columns: minmax(auto, 240px) minmax(auto, 130px) 1fr 1fr;
    padding: 10px 8px 9px 16px !important;
    grid-template-rows: repeat(3, 90px 17px) 93px calc(100% - 414px)
}

/* Attribute Box Component */
.attribute-box {
    font-family: 'DMSans', sans-serif;
    font-size: 16px;
    grid-template-columns: 95px 35px auto;
    display: grid;
    width: 200px;
    align-items: center;
    letter-spacing: normal;
}

.attribute-box ul {
    list-style: none;
    margin: 0;
    margin-top: 4px;
}

.attribute-box li {
    height: 20px;
    color: #000000;
}

.attribute-box h2 {
    font-size: 15.5px;
    color: var(--sheet-primary-color);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 22px;
    overflow: visible;
    display: block;
    width: 100px;
}

.charsheet input[type="number"]::-webkit-inner-spin-button,
.charsheet input[type="number"]::-webkit-outer-spin-button {
    display: none;
}

.charsheet input[type="number"] {
    -moz-appearance: textfield;
}

.ui-dialog .charsheet .attribute-box input {
    border: none;
    border-bottom: 0.5px solid var(--sheet-primary-color);
    border-radius: 0;
    background-color: transparent;
    width: 30px;
    font-size: 16px;
    height: 16px;
    padding: 3px;
    padding-left: 0;
    color: #000000;
    text-align: center;
}

/* Dice Field Component */
.dice-field {
    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/dice.png');
    width: 62px;
    height: 71px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgb(255 255 255 / 80%);
    background-blend-mode: lighten;
}

.ui-dialog .charsheet .dice-field input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: #000000;
}

/* Stat Box Base Styles */
.stat-box {
    font-family: 'DMSans', sans-serif;
    font-size: 16px;
    max-height: 100px;
    margin-left: 10px;
    margin-right: 0;
}

.stat-box h2 {
    font-size: 15.5px;
    color: var(--sheet-primary-color);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 22px;
    overflow: visible;
    display: block;
    width: 100px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.ui-dialog .charsheet .stat-box input.big {
    position: absolute;
    width: 60px;
    height: 40px;
    border: none;
    background-color: transparent;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: #000000;
}

.ui-dialog .charsheet .stat-box input.small {
    position: absolute;
    width: 64px;
    height: 48px;
    border: none;
    background-color: transparent;
    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/small_frame.svg');
    background-repeat: no-repeat;
    background-position: center;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #000000;
    border-radius: 8px;
}

label.small {
    font-size: 9px;
    margin-bottom: 0;
    padding-right: 0;
    display: block;
    position: relative;
    overflow: visible;
    height: 0;
    width: 50px;
    text-align: center;
}

/* Stat Box - Courage Variant */
.stat-box.stat-courage {
    position: relative;
    background: 0 22px url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_1.png") no-repeat;
    background-size: auto 58px;
    background-color: rgb(255 255 255 / 80%);
    background-blend-mode: lighten;
}

.stat-box.stat-courage input.big {
    top: 28px;
    left: 1px;
}

.stat-box.stat-courage input.small {
    top: 38px;
    left: 52px;
}

.stat-box.stat-courage label.small {
    top: 8px;
    left: 60px;
}

/* Stat Box - Attack Variant */
.stat-box.stat-attack {
    position: relative;
    z-index: 1;
}

.stat-box.stat-attack input.big {
    top: 36px;
    left: -5px;
    z-index: 1;
}

.stat-box.stat-attack input.small {
    top: 20px;
    left: 54px;
    z-index: 1;
}

.stat-box.stat-attack label.small {
    top: -12px;
    left: 62px;
}

/* Stat Box - Defense Variant */
.stat-box.stat-defense {
    position: relative;
    background: 0 22px url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_3.png") no-repeat;
    background-size: auto 70px;
    background-color: rgb(255 255 255 / 80%);
    background-blend-mode: lighten;
}

.stat-box.stat-defense input.big {
    top: 34px;
    left: 2px;
}

.stat-box.stat-defense input.small {
    top: 49px;
    left: 54px;
}

.stat-box.stat-defense label.small {
    top: 17px;
    left: 61px;
}

/* Stat Box - Mettle Variant */
.stat-box.stat-mettle {
    grid-column: 1;
    position: relative;
    background: 0 22px url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_6.png") no-repeat;
    background-size: auto 72px;
    background-color: rgb(255 255 255 / 80%);
    background-blend-mode: lighten;
}

.stat-box.stat-mettle input.big {
    top: 42px;
    left: 5px;
}

/* Stat Box - Quest Points Variant */
.stat-box.stat-quest {
    position: relative;
    background: 0 22px url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_4.png") no-repeat;
    background-size: 90px 68px;
    background-color: rgb(255 255 255 / 80%);
    background-blend-mode: lighten;
}

.stat-box.stat-quest input.big {
    top: 40px;
    left: 8px;
}

/* Note Box Component */
.note-box {
    margin-left: 8px;
    margin-right: 16px;
}

.note-box h2 {
    font-family: 'DMSans', sans-serif;
    font-size: 15px;
    color: var(--sheet-primary-color);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 22px;
    overflow: visible;
    display: block;
    width: 100%;
    position: relative;
}

.note-box textarea,
.note-box .fake-textarea,
.note-box .repcontainer,
.note-box .repcontainer .sheet-auto-expand {
    border: none;
    background-color: transparent;
    background-image: linear-gradient(rgba(0, 0, 0, 0.07) 2px, transparent 2px);
    background-size: 100% 21px;
    background-attachment: local;
    font-family: 'DMSans', sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 21px;
    margin-top: -4px;
    color: #000000;
    resize: none;
    height: 100%;
    width: 100%;
    margin-bottom: 0;
}

.note-box .repcontainer .sheet-auto-expand {

    background-color: #eee;
    background-image: linear-gradient(rgba(0, 0, 0, 0.07) 2px, transparent 2px);
}

/* Sparkle Icon */
.sparkle {
    color: var(--sheet-primary-color);
    display: inline-block;
    vertical-align: middle;
    align-self: center;
    margin: 0 -4px;
    background-image: url('https: //raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/star.png');
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: center;
    width: 11px;
    height: 11px;
}

.note-box .hint,
.note-box .sparkle {
    margin-top: -2px;
}

.note-box h2.hint {
    margin-right: 3px;
}

/* Separator Line */
.separator {
    border-bottom: 2px solid var(--sheet-primary-color);
    margin-top: 8px;
    margin-bottom: 4px;
    margin-right: 20px;
}

/* ===================================== */

/* NPC TAB */

/* ===================================== */

.eem .sheet-npc {
    grid-template-columns: auto auto;
    grid-template-rows: min-content 8px 84px auto;
}

.eem .sheet-npc .note-box.flexible div {
    height: calc(calc(100% - 23px) - mod(calc(100% - 23px), 21px));
}

/* ===================================== */

/* ADVERSARY DEFINITION TAB */

/* ===================================== */

.eem .sheet-adversary-definition {
    font-family: 'DMSans', sans-serif;
    grid-template-columns: 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
    grid-template-rows: repeat(6, 25px 18px 18px);
    min-height: 417px;
    font-weight: 600;
    line-height: 21px;
}

.eem .sheet-adversary-definition .separator {
    height: min-content;
    grid-column-end: span 12;
    margin: auto 0;
}

.eem .sheet-adversary-definition h2 {
    font-size: 15.5px;
    color: var(--sheet-primary-color);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 22px;
    margin-bottom: 2px;
}

.eem .sheet-adversary-definition input {
    height: 20px;
    margin-right: 5px;
}

.eem .sheet-adversary-definition .levels {
    grid-column-end: span 6;
    display: grid;
    grid-template-columns: max-content 64px max-content 64px;
}

.eem .sheet-adversary-definition input[type="number"] {
    font-family: 'DMSans', sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    padding: 0;
    width: 60px;
    height: auto;
    color: #000000;
    margin: 0 4px;
    text-align: center;
}

.eem .sheet-adversary-definition .levels :nth-child(3) {
    margin-left: 8px;

}

.eem .sheet-adversary-definition input.adversary-type[value="creeper"]~.non-creeper {
    display: none;
}

.eem .sheet-adversary-definition input.adversary-type[value="creeper"]~.creeper-swap {
    grid-column: 7;
    grid-row: 1;
}

/* ===================================== */

/* ADVERSARY PREVIEW TAB */

/* ===================================== */

.eem .sheet-adversary-preview {
    grid-template-columns: 140px 140px 1fr;
    grid-template-rows: 74px 110px 116px 110px calc(100% - 410px);
    padding: 10px 8px 9px 16px !important;
    min-height: 414px;
}

.eem .sheet-adversary-preview .adversary-basic-info,
.eem .sheet-adversary-preview .adversary-basic-info h2,
.eem .sheet-adversary-preview .adversary-basic-info span {
    font-family: 'DMSans', sans-serif;
    font-size: 15px;
    color: var(--sheet-primary-color);
    font-weight: 700;
    letter-spacing: 0;
}

.eem .sheet-adversary-preview .adversary-basic-info {
    display: grid;
    grid-column: span 3;
    grid-template-columns: 124px 124px 1fr 1fr 1fr 3fr;
    grid-column-gap: 10px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0 8px;
    background-color: var(--sheet-background-color);
    border-top: 2px solid #cc9133;
    border-bottom: 2px solid #cc9133;
}

.eem .sheet-adversary-preview .adversary-basic-info h2 {
    line-height: 22px;
}

.eem .sheet-adversary-preview .adversary-basic-info div {
    min-height: 60px;
    width: 100%;
    text-align: center;
    place-content: center;
    align-items: baseline;

}

.eem .sheet-adversary-preview .adversary-basic-info select {
    margin: 0;
    width: auto;
    float: left;
    padding: 0 4px;
    height: 20px;
    width: 75px;
    margin-left: 4px;
}

.eem .sheet-adversary-preview .adversary-basic-info .two-columns {
    display: grid;
    grid-template-columns: min-content min-content;
    border: none;
    padding: 0 5px;
    text-align: left;
}

.eem .sheet-adversary-preview .adversary-basic-info .right-border {
    position: relative;
    z-index: 1;
    border-right: 2px solid #cc9133;
}

.eem .sheet-adversary-preview .stat-wrangle,
.eem .sheet-adversary-preview .stat-parley {
    display: none;
}

.eem .sheet-adversary-preview input.adversary-type[value="critter"]~.stat-wrangle,
.eem .sheet-adversary-preview input.adversary-type[value="creature"]~.stat-parley {
    display: block;
}

.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.stat-courage,
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.stat-defense,
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.stat-mettle,
.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.adversary-basic-info .non-creeper {
    display: none;
}

.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.adversary-basic-info .keywords {
    grid-column: span 6;
}

.eem .sheet-adversary-preview input.adversary-type[value="creeper"]~.stat-attack {
    grid-column: span 2;
    grid-row: span 3;
    justify-self: center;
    height: 100%;
    margin: auto;
    padding-bottom: 20px;
    padding-right: 4px;
}

.eem .sheet-adversary-preview .stat-wrangle,
.eem .sheet-adversary-preview .stat-parley {
    background-size: auto 58px;
    background-position: 0 22px;
    background-color: rgb(255 255 255 / 80%);
    background-blend-mode: lighten;
    background-repeat: no-repeat;
}

.eem .sheet-adversary-preview .stat-parley {
    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_5.png');
}

.eem .sheet-adversary-preview .stat-wrangle {
    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stats_5b.png');
}

.eem .sheet-adversary-preview .stat-parley input.small,
.eem .sheet-adversary-preview .stat-wrangle input.small {
    position: relative;
    top: 16px;
    left: 54px;
}

.eem .sheet-adversary-preview .stat-parley label.small,
.eem .sheet-adversary-preview .stat-wrangle label.small {
    position: relative;
    top: -40px;
    left: 62px;
}

.eem .sheet-adversary-preview input.min-level[value="2"]~select option.lt-2,
.eem .sheet-adversary-preview input.min-level[value="3"]~select option.lt-3,
.eem .sheet-adversary-preview input.min-level[value="4"]~select option.lt-4,
.eem .sheet-adversary-preview input.min-level[value="5"]~select option.lt-5,
.eem .sheet-adversary-preview input.min-level[value="6"]~select option.lt-6,
.eem .sheet-adversary-preview input.min-level[value="7"]~select option.lt-7,
.eem .sheet-adversary-preview input.min-level[value="8"]~select option.lt-8,
.eem .sheet-adversary-preview input.min-level[value="9"]~select option.lt-9,
.eem .sheet-adversary-preview input.min-level[value="10"]~select option.lt-10,
.eem .sheet-adversary-preview input.max-level[value="1"]~select option.gt-1,
.eem .sheet-adversary-preview input.max-level[value="2"]~select option.gt-2,
.eem .sheet-adversary-preview input.max-level[value="3"]~select option.gt-3,
.eem .sheet-adversary-preview input.max-level[value="4"]~select option.gt-4,
.eem .sheet-adversary-preview input.max-level[value="5"]~select option.gt-5,
.eem .sheet-adversary-preview input.max-level[value="6"]~select option.gt-6,
.eem .sheet-adversary-preview input.max-level[value="7"]~select option.gt-7,
.eem .sheet-adversary-preview input.max-level[value="8"]~select option.gt-8,
.eem .sheet-adversary-preview input.max-level[value="9"]~select option.gt-9 {
    display: none;
}

.eem .sheet-adversary-preview select option.goon,
.eem .sheet-adversary-preview select option.bruiser,
.eem .sheet-adversary-preview select option.champion {
    display: none;
}

.eem .sheet-adversary-preview select option.tiny,
.eem .sheet-adversary-preview select option.small,
.eem .sheet-adversary-preview select option.medium,
.eem .sheet-adversary-preview select option.folk,
.eem .sheet-adversary-preview select option.large,
.eem .sheet-adversary-preview select option.huge {
    display: none;
}

.eem .sheet-adversary-preview input.keyword-tiny[value="on"]~select option.tiny,
.eem .sheet-adversary-preview input.keyword-small[value="on"]~select option.small,
.eem .sheet-adversary-preview input.keyword-medium[value="on"]~select option.medium,
.eem .sheet-adversary-preview input.keyword-folk[value="on"]~select option.folk,
.eem .sheet-adversary-preview input.keyword-large[value="on"]~select option.large,
.eem .sheet-adversary-preview input.keyword-huge[value="on"]~select option.huge {
    display: unset;
}

.eem .sheet-adversary-preview input.keyword-goon[value="on"]~select option.goon,
.eem .sheet-adversary-preview input.keyword-bruiser[value="on"]~select option.bruiser,
.eem .sheet-adversary-preview input.keyword-champion[value="on"]~select option.champion {
    display: unset;
}

.eem .sheet-adversary-preview input.adversary-disadvantage[value="false"]~.stat-wrangle .disadvantage-note,
.eem .sheet-adversary-preview input.adversary-disadvantage[value="false"]~.stat-parley .disadvantage-note {
    display: none;
}

/* ===================================== */

/* BACKGROUND TAB */

/* ===================================== */

.eem .sheet-background {
    grid-template-columns: auto auto;
    grid-template-rows: 105px 8px calc(calc(100% - 113px) / 2 - mod(calc(calc(100% - 113px)/2), 21px)) 21px auto;
}

.eem .sheet-background .note-box div {
    height: calc(100% - mod(100%, 21px) - 19px);
}

/* Corner Box - Background Tab Variant */
.sheet-background .corner-box-wrapper,
.sheet-npc .corner-box-wrapper {
    margin-top: 8px;
    height: 73px;
    margin-bottom: 25.5px;
}

.sheet-background textarea,
.sheet-npc textarea {
    height: 100%;
    margin-bottom: 10px;
}

.sheet-background .corner-box .content textarea,
.sheet-npc .corner-box .content textarea {
    padding-top: 0;
    padding-bottom: 0;
    height: 56px;
}

/* ===================================== */

/* NOTES TAB */

/* ===================================== */

.eem .sheet-notes .note-box {
    margin-top: 4px;
    padding-bottom: 6px;
}

.eem .sheet-notes .note-box div {
    height: calc(100% - 16px - mod(calc(100% - 16px), 21px));
}

/* ===================================== */

/* INVENTORY TAB */

/* ===================================== */

.eem .sheet-inventory {
    grid-template-rows: 50px calc((100% - 250px)) 60px 140px;
    padding-bottom: 9px !important;
}

.eem .sheet-inventory .note-box div {
    height: calc(100% - mod(100%, 21px) - 19px);
}

/* Inventory - Vertical Line Separator */
.eem .sheet-inventory .vertical-line {
    height: calc(100% - 15px);
    margin-top: 15px;
    background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/vertical_line.png');
    background-size: 6px 6px;
}

.eem .sheet-inventory .inventory-upper .vertical-line {
    height: calc(100% - 35px);
    margin-top: 35px;
}

/* Inventory - Upper Section */
.eem .sheet-inventory .inventory-upper {
    display: inline-grid;
    position: relative;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 6px 1fr;
}

.eem .sheet-inventory .inventory-upper h2 {
    margin-top: -2px;
    padding: 2px;
    text-align: center;
    width: 100%;
    background-color: var(--sheet-primary-color);
    color: #ffffff;
    padding-right: 6px;
    position: relative;
    z-index: 2;
}

.eem .sheet-inventory .inventory-upper h2.worn {
    padding-right: 30px;
}

.eem .sheet-inventory .inventory-upper textarea {
    margin-top: -2px;
    position: relative;
    z-index: 1;
}

.eem .sheet-inventory .inventory-upper .watermark {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    text-align: center;
    align-content: center;
    opacity: 0.2;
}

.eem .sheet-inventory .inventory-upper .watermark img {
    margin-top: 28px;
}

.eem .sheet-inventory .inventory-upper .watermark.carried {
    left: 50%;
}

/* Inventory - Lower Section */
.eem .sheet-inventory .inventory-lower {
    display: inline-grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 2fr 6px 1fr 6px 1fr;
    position: relative;
}

.eem .sheet-inventory .inventory-lower .crafting-icons {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30px;
    margin-top: 8px;
}

.eem .sheet-inventory .inventory-lower .crafting-icons img {
    max-height: 16px;
    max-width: 20px;
    margin: 8px;
}

.eem .sheet-inventory .inventory-lower .fake-textarea.crafting {
    margin-top: 6px;
    line-height: 16px;
    font-size: 14px;
    background-size: 100% 16px;
    background-position-y: -2px;
    margin-left: 24px;
    width: calc(100% - 24px);
    height: 128px;
    padding-right: 8px;
}

.eem .sheet-inventory .inventory-lower .fake-textarea.coins section {
    display: inline-block;
    line-height: 21px;
    margin-right: 4px;
    vertical-align: inherit;
}

.eem .sheet-inventory .inventory-lower .fake-textarea.coins section.small {
    font-size: 10px;
    color: var(--sheet-primary-color);
    font-weight: 600;
}

.eem .sheet-inventory .inventory-lower section.hint {
    color: #999999;
    margin-top: 0;
    padding-left: 4px;
    padding-right: 4px;
}

.eem .sheet-inventory .inventory-lower .fake-textarea.coins {
    padding-top: 2px;
    margin-top: 34px;
    height: 84px;
    display: grid;
    grid-template-columns: min-content min-content auto;
    grid-template-rows: repeat(4, 21px);
    padding-right: 8px;
}

.eem .sheet-inventory .inventory-lower .fake-textarea.rations {
    padding-top: 2px;
    margin-top: 44px;
    height: 63px;
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: repeat(3, 21px);
    align-items: center;
    column-gap: 4px;
    padding-right: 8px;
}

.eem .sheet-inventory .inventory-lower input {
    border: none;
    background-color: transparent;
    font-family: 'DMSans', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #000000;
    width: inherit;
    text-align: center;
}

.eem .sheet-inventory .inventory-lower .fake-textarea textarea {
    height: 34px;
    line-height: 16px;
    font-size: 13px;
    padding: 1px 2px;
    margin: 0;
    margin-bottom: -2px;
    background: none;
    box-sizing: border-box;
    vertical-align: top;
}

/* Firefox-specific adjustment using feature query */
@supports (-moz-appearance: none) {
    .eem .sheet-inventory .inventory-lower .fake-textarea textarea {
        padding: 0;
    }
}

/* Inventory - Stripe Upper */
.eem .sheet-inventory .stripe.upper {
    display: grid;
    grid-template-columns: 2fr 2fr;
}

.eem .sheet-inventory .stripe.upper h2.inventory {
    float: left;
    display: block;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    padding: 8px;
    background-color: var(--sheet-primary-color);
    color: #ffffff;
    position: relative;
}

/* Inventory - Stripe Lower */
.eem .sheet-inventory .stripe.lower {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

.eem .sheet-inventory .stripe.lower section.hint {
    display: inline-block;
    margin: 12px 0;
    margin-left: -4px;
    font-weight: 600;
    color: #999999;
}

.eem .sheet-inventory .right-align {
    text-align: right;
}

/* Inventory - Stripe Base Styles */
.eem .sheet-inventory .stripe {
    width: calc(100% - 16px);
    margin: 8px;
    height: 38px;
    background-color: var(--sheet-background-color);
    border-top: 2px solid var(--sheet-primary-color);
}

.eem .sheet-inventory .stripe h2 {
    font: 13.5px 'DMSans', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--sheet-primary-color);
    display: block;
    margin: 11px;
    float: left;
    align-content: center;
    line-height: 16px;
}

.eem .sheet-inventory .stripe h2.small {
    margin: 11px 0;
}

.eem .sheet-inventory .stripe h2.treasure {
    float: right;
}

.eem .sheet-inventory .stripe label {
    display: inline;
    font-size: 8px;
    color: var(--sheet-primary-color);
    line-height: 100%;
    margin: 0;
    align-content: center;
    font-weight: 600;
    margin-left: 4px;
    text-rendering: optimizelegibility;
}

.eem .sheet-inventory .stripe .checkbox-group {
    display: inline-grid;
    grid-template-columns: 8px min-content;
    grid-template-rows: 50% 50%;
    height: 26px;
    align-content: center;
    margin: 6px;
    margin-left: 16px;
    float: left;
}

.eem .sheet-inventory .stripe input.small {
    float: left;
    width: 22px;
    background-color: transparent;
    border: none;
    text-align: center;
    font-size: 14px;
    color: #000000;
    padding: 0;
    margin: 10px 0;
}

.eem .sheet-inventory .stripe img {
    float: left;
}

.eem .sheet-inventory .stripe img.crafting {
    height: 53px;
    margin-top: -8px;
    margin-left: 4px;
}

.eem .sheet-inventory .stripe img.coins {
    height: 62px;
    margin-top: -10px;
}

.eem .sheet-inventory .stripe img.rations {
    height: 62px;
    margin-top: -11px;
}

.eem .sheet-inventory .stripe div.treasure {
    float: right;
    width: 73px;
    height: 68px;
    margin-top: -16px;
    background-image: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/treasure.png");
    background-repeat: no-repeat;
    background-size: auto 68px;
    margin-right: -5px;
    position: relative;
    z-index: 3;
}

.eem .sheet-inventory .stripe div.treasure input {
    width: 36px;
    background-color: transparent;
    border: none;
    text-align: center;
    font: 18px 'DMSans', sans-serif;
    font-weight: 600;
    color: #000000;
    padding: 0;
    padding-left: 8px;
    margin: 24px 0 0 24px;
}

.eem .sheet-inventory .stripe .corner-box-wrapper {
    float: left;
    height: 32px;
    width: 132px;
    margin: 0;
    margin-top: -3px;
    padding-right: 8px;
}

.eem .sheet-inventory .stripe .corner-box-wrapper .content {
    margin-top: 2px;
}

.eem .sheet-inventory .stripe .corner-box-wrapper .content label {
    font-size: 12px;
}

.eem .sheet-inventory .stripe .corner-box-wrapper .content input {
    text-align: center;
}

/* ===================================== */

/* PORTRAIT TAB */

/* ===================================== */
.eem .sheet-portrait {
    grid-template-columns: auto 430px auto;
    place-items: center;
}

.eem .sheet-portrait img {
    height: 360px;
    border: 8px double var(--sheet-primary-color);
    border-radius: 16px;
}

.eem .sheet-portrait img:not([src]) {
    border: none;
    background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/stars.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    outline: 4px solid #ffffff;
    outline-offset: -2px;
    width: 105px;
}

/* ===================================== */

/* SETTINGS TAB */

/* ===================================== */
.eem .sheet-settings {
    line-height: 28px;
    grid-template-rows: repeat(7, min-content);
}

.eem .sheet-settings label {
    margin: 0;
    line-height: 28px;
    color: var(--sheet-primary-color);
}

.eem .sheet-settings span {
    margin: 0 8px;
}

.eem .sheet-settings .separator {
    margin-right: 0;
    height: min-content;
}

.eem .sheet-settings select {
    margin: 0;
}

.eem .sheet-settings .hint {
    font-size: 10px;
    color: #999999;
    font-family: 'DMSans', sans-serif;
    letter-spacing: 0;
    font-weight: 600;
    margin-left: 0;
}

.eem .sheet-settings .sparkle {
    margin-left: 4px;
}

.eem .sheet-settings .settings-radio {
    display: grid;
    grid-template-columns: minmax(250px, max-content) min-content min-content min-content min-content 16px auto;
    grid-template-rows: min-content;
    height: min-content;
}

.eem .sheet-settings .settings-dropdown {
    display: grid;
    grid-template-columns: minmax(250px, max-content) min-content 16px auto;
    height: min-content;
}

/* ===================================== */

/* UTILITY CLASSES */

/* ===================================== */

/* Hint Text Styling */
h2.hint,
label.hint {
    width: fit-content;
    display: inline-block;
}

section.hint {
    font-size: 9px;
    color: #999999;
    display: inline-flex;
    width: fit-content;
    vertical-align: middle;
    font-family: 'DMSans', sans-serif;
    letter-spacing: -0.02em;
}

.eem .note-box .repitem .sheet-auto-expand {
    display: none;
    font-family: 'DMSans', sans-serif;
}

.eem .note-box .repitem input.skilledit[value="on"]~.sheet-auto-expand {
    display: block;
    min-height: 21px;
    margin-top: 0;
    width: 100%;
}

.container textarea.skill-description {
    scrollbar-width: thin;
    scrollbar-color: #ccc #eee;
}

.eem .note-box .repitem input {
    font-family: 'DMSans', sans-serif;
    font-weight: 600;
}

.eem .note-box .repitem input[type="text"] {
    border: none;
    outline: none;
    background-color: transparent;
    color: #000;
    font-size: 15px;
    text-transform: uppercase;
    padding: 0;
    height: 16px;
    width: calc(100% - 24px);
    margin-top: 2px;
}

.eem .note-box .repitem input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    font-size: 20px;
    line-height: 18px;
    text-align: center;
    border: none;
    position: relative;
    margin-right: 6px;
    vertical-align: middle;
    cursor: pointer;
    background-color: transparent;
    color: var(--sheet-primary-color);
    padding: 0;
    margin: 0;
    margin-top: -1px;
}

.eem .note-box .repitem input[type="checkbox"]:after {
    content: "+";
    display: block;
    width: 16px;
}

.eem .note-box .repitem input[type="checkbox"]:focus {
    outline: none;
}

.eem .note-box .repitem input[type="checkbox"]:checked:after {
    content: '-';
    display: block;
    width: 16px;
}

.eem .note-box .repeating_skills_container {
    position: relative;
    height: calc(100% - mod(100%, 21px));
    width: 100%;
}

.eem .sheet-attributes .note-box .repeating_skills_container {
    height: calc(100% - mod(100%, 21px));
    margin-top: -12px;
}

.eem .note-box .repcontainer {
    position: relative;
    height: calc(100% - 56px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sheet-primary-color) #ffffff;
    width: 100%;
}

.eem .sheet-attributes .note-box .repcontainer {
    height: calc(100% - 38px);
}

.eem .note-box .repcontrol {
    margin-top: 8px;
}

.eem .note-box .repcontrol_add,
.eem .note-box .repcontrol_edit,
.eem .note-box .repcontrol_move,
.eem .note-box .repcontrol_del {
    border: 1px solid var(--sheet-primary-color);
    border-style: outset;
    background: linear-gradient(#fff, #fff, var(--sheet-background-color));
    text-transform: uppercase;
    font: bold 14px 'DMSans', sans-serif;
    color: var(--sheet-primary-color);
}

.eem .note-box .repcontrol_move,
.eem .note-box .repcontrol_del {
    width: 14px;
    height: 14px;
    padding: 2px;
}

.eem .note-box .repcontrol_move {
    float: right;
    padding-top: 0;
    padding-bottom: 4px;
}

.eem .note-box .repcontrol_del {
    font-family: 'Pictos', sans-serif;
    font-weight: normal;
    margin-left: 1px;
    margin-right: 8px;
}

.eem .sheet-auto-expand {
    position: relative;
    /* For absolute positioning */
    overflow: hidden;
    /* Hide overflow */
}

.eem .sheet-auto-expand span {
    visibility: hidden;
    /* Hide the span */
    white-space: pre-wrap;
    /* Preserve formatting */
    display: block;
    /* Takes full width */
    font: inherit;
    font-size: 14.5px;
    letter-spacing: 0;
    line-height: 21px;
    /* Match textarea padding */
}

.eem .sheet-auto-expand textarea {
    position: absolute;
    /* Overlay the span */
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: 100%;
    /* Cover the span area */
    resize: none;
    /* Disable manual resizing */
    box-sizing: border-box;
    /* Important for padding/border */
    overflow: hidden;
    background: none;
    padding: 0 4px;
}

/* ===================================== */

/* FOOTER */

/* ===================================== */

.footer {
    font: 9px 'DMSans', sans-serif;
    color: var(--sheet-primary-color);
    width: 100%;
    display: block;
    text-align: center;
    padding-bottom: 6px;
}

/* ===================================== */

/* Share Button */

/* ===================================== */

.btn-share {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    top: 3px;
    right: 0;
}

.btn-share div {
    width: 100%;
    height: 100%;
    mask: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/LandOfEem/images/icon-chat.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: var(--sheet-primary-color);
}

.btn-share:hover div {
    background-color: #000;
}