.theme-clean-dark.sheet-background {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/theme-clean-dark-bg.jpg) 50% 0% !important;
    background-color: #09090a !important;
}


/* TEMP Bottom White Bar Fix */


@media (min-width: 1200px) and (max-width: 1366px) {
    
    
        div#layout-root {
            height: calc(100vh - 72px) !important;
        }

}


/* GENERAL */



.theme-switch__gradiant {
    width: 100%;
    background: linear-gradient(90deg, rgb(42, 42, 42) 50%, rgba(42, 42, 42, 0) 100%);
}


div#drawer-character-container h3 {
    font-weight: 400;
    font-family: GoodOTCondBold;
    pointer-events: none;
    z-index: 9;
}




/* Sharing Banner Offset */

div.theme-clean-dark .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 98px !important;
}

div.theme-clean-dark .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    div.theme-clean-dark .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */




/* ========== HAND-DRAWN HEROICS THEME ========== */




.theme-hand-drawn-heroics div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div li h4 {
    font-size: 16px;
    text-transform: none;
    font-family: 'ArchitectsDaughter';
}


.theme-hand-drawn-heroics div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div li div {
  background: white !important;
}


.theme-hand-drawn-heroics div#equipment-container div#other-items label {
    font-family: 'Permanent Marker';
    color: black;
}

.theme-hand-drawn-heroics div#equipment-container div#other-items fieldset {
    border: none;
}

div#equipment-container div#other-items .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl {
    background-color: transparent;
    background-image: none !important;
}



div.theme-hand-drawn-heroics div#character-bulk-container div {
    font-family: WalterTurncoat;
    font-size: 13px;
    font-weight: 700;
}

div.theme-hand-drawn-heroics div#avatar-box > span {
    filter: brightness(2);
}

div.theme-hand-drawn-heroics div#tab-container div#scrollToggledDisplay div#box-content {
    border-image-source: none !important;
}


div.theme-hand-drawn-heroics div.MuiPopperUnstyled-root li h5 {
    font-family: DeliciousHandrawn;
    font-size: 12px !important;
    font-weight: 700;
}

div.theme-hand-drawn-heroics div.MuiPopperUnstyled-root {
    z-index: 10;
    background: white;
}


div#tab-container svg[data-testid="SearchIcon"] path {
    fill: transparent !important;
    background: transparent !important;
}

div.theme-hand-drawn-heroics div#tab-container div#character-currency-container > div:first-child > div > div:first-child > div:nth-child(2) span img {
    filter: opacity(0) !important;
}

div.theme-hand-drawn-heroics div#tab-container div#character-currency-container > div:first-child > div > div:first-child > div:nth-child(2) span:after {
    content: "P";
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    padding: 0px 4px;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 9px;
    border: 1px solid gray !important;
    border-radius: 50%;
    position: relative;
    top: -1px;
}

div.theme-hand-drawn-heroics div#tab-container div#character-currency-container > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) span:after {
    content: "G";
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    padding: 0px 3px;
    color: black;
    font-family: Permanent Marker;
    font-weight: 700;
    font-weight: 400;
    font-size: 9px;
    border: 1px solid gray !important;
    border-radius: 50%;
    position: relative;
    top: -1px;
}

div.theme-hand-drawn-heroics div#tab-container div#character-currency-container > div:first-child > div:nth-child(3) > div:first-child > div:nth-child(2) span:after {
    content: "S";
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    padding: 0px 4px;
    color: black;
    font-family: Permanent Marker;
    font-weight: 700;
    font-weight: 400;
    font-size: 9px;
    border: 1px solid gray !important;
    border-radius: 50%;
    position: relative;
    top: -1px;
}

div.theme-hand-drawn-heroics div#tab-container div#character-currency-container > div:first-child > div:nth-child(4) > div:first-child > div:nth-child(2) span:after {
    content: "C";
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    padding: 0px 4px;
    color: black;
    font-family: Permanent Marker;
    font-weight: 700;
    font-weight: 400;
    font-size: 9px;
    border: 1px solid gray !important;
    border-radius: 50%;
    position: relative;
    top: -1px;
}


div.theme-hand-drawn-heroics div#top-header-container {
    background: white;
    border: none;
}

div.theme-hand-drawn-heroics div#character-sheet button {
  font-family: DeliciousHandrawn;
  font-weight: 700;
}
div.theme-hand-drawn-heroics div#character-sheet svg {
    -webkit-mask-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-pencil-hatch.png);
    -webkit-mask-size: 5px;
    mask-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-pencil-hatch.png);
    mask-size: 5px;
}

div.theme-hand-drawn-heroics div#character-sheet svg path {
  fill: rgb(15, 15, 15)
}

div.theme-hand-drawn-heroics span.MuiLinearProgress-root.MuiLinearProgress-colorPrimary.MuiLinearProgress-determinate {
    -webkit-mask-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-pencil-hatch.png);
    -webkit-mask-size: 36px;
    mask-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-pencil-hatch.png);
    mask-size: 36px;
}

div.theme-hand-drawn-heroics div#top-header-components-container > div:first-child > div:first-child >div:first-child, div.theme-hand-drawn-heroics div#top-header-components-container > div:first-child > div:first-child > div:nth-child(2) {
  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
  background-color: transparent !important;
  color: black;
  font-family: Permanent Marker;
  font-weight: 400;
  font-size: 11px;
  border: solid !important;
  border-image-slice: 14 14 14 14 !important;
  border-image-width: 6px 6px 6px 6px !important;
  border-image-outset: 2px 4px 2px 4px !important;
  border-image-repeat: round round !important;
  position: relative;
  z-index: 9;
  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#top-header-components-container > div:first-child > div:nth-child(2) > div:first-child {
  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
  background-color: transparent !important;
  color: black;
  font-family: Permanent Marker;
  font-weight: 400;
  font-size: 11px;
  border: solid !important;
  border-image-slice: 14 14 14 14 !important;
  border-image-width: 6px 6px 6px 6px !important;
  border-image-outset: 4px 4px 4px 4px !important;
  border-image-repeat: round round !important;
  position: relative;
  z-index: 9;
  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;

}

div.theme-hand-drawn-heroics div#top-header-components-container > div:nth-child(2) > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-hero-p.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

div.theme-hand-drawn-heroics div#top-header-components-container > div:nth-child(2) > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-hero-p.png) !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
}

div.theme-hand-drawn-heroics div#top-header-components-container > div:nth-child(2) > div:first-child > div:first-child svg path {
    fill: transparent;
    background: transparent;
}

div.theme-hand-drawn-heroics div#hero-points-box > div:first-child input {
  color: black !important;
  font-family: ArchitectsDaughter;
  font-weight: 700;
}

div.theme-hand-drawn-heroics div#top-header-components-container > div:nth-child(2) > div:first-child > div {
  color: black;
  font-family: ArchitectsDaughter;
  font-weight: 700;
  position: relative;
  top: 4px
  
}

div.theme-hand-drawn-heroics div#top-header-name-container {
  filter: grayscale(1);
}

div.theme-hand-drawn-heroics div#content-container div#squareComponentHeader {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black !important;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 1px 1px 1px 1px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#content-container div#squareComponentContent {
    font-family: 'GloriaHallelujah';
    padding-top: 1px;
}

div.theme-hand-drawn-heroics div#saving-throws-component-style div#squareComponentContent {
    font-family: 'GloriaHallelujah';
    padding-top: 1px;
}

div.theme-hand-drawn-heroics div#saving-throws-component-style div#squareComponentFooter {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-2.png);
    background-color: transparent !important;
    background-size: cover;
    color: black !important;
    font-family: Permanent Marker;
    border: 1.5px solid gray;
    font-weight: 400;
    font-size: 11px;
}

div.theme-hand-drawn-heroics div#saving-throws-component-style div#squareComponentContainer {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 1px 1px 1px 1px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#saving-throws-component-style div#squareComponentHeader {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black !important;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 1px 1px 1px 1px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    font-family: 'GloriaHallelujah';
    padding-left: 2px;
}

div.theme-hand-drawn-heroics div#speed-container div#squareComponentFooter {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-2.png);
    background-color: transparent !important;
    background-size: cover;
    color: black !important;
    font-family: Permanent Marker;
    border: 1.5px solid gray;
    font-weight: 400;
    font-size: 11px;
    border-radius: 0px;
}

div.theme-hand-drawn-heroics div#content-container div#squareComponentContainer {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 1px 1px 1px 1px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#noteDisplayHideCard div {
    font-family: 'ArchitectsDaughter';
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(1) > div:first-child > div:first-child > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-circle-frame-2.png);
    background-color: transparent !important;
    background-size: cover;
    box-shadow: none !important;
    border: none !important;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(1) > div:first-child > div:first-child > div:first-child div {
    font-family: Permanent Marker;
    font-weight: 400;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-2.png);
    background-color: transparent !important;
    background-size: cover;
    border: 1.5px solid gray;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div#box-content > div:nth-child(1) > div:first-child > div:first-child > div:first-child > div:first-child {
    color: black !important;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
    font-family: 'WalterTurncoat';
    font-weight: 700;
    font-size: 14px;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) > div:first-child > div > div:first-child {
    font-family: 'ArchitectsDaughter';
    font-weight: 700;
}


div.theme-hand-drawn-heroics div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-circle-frame-2.png);
    background-color: transparent !important;
    box-shadow: none;
    border: none;
    background-size: cover;
    box-shadow: none !important;
    border: none !important;
}

div.theme-hand-drawn-heroics div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-2.png);
    background-color: transparent !important;
    background-size: cover;
    color: black !important;
    font-family: Permanent Marker;
    border: 1.5px solid gray;
    font-weight: 400;
    font-size: 11px;
}

div.theme-hand-drawn-heroics div#armor-class-container div#box-content svg path:last-of-type {
    fill: transparent;
    stroke: transparent;
}

div.theme-hand-drawn-heroics div#armor-class-container div#box-content svg + div {
    background: transparent;
}

div.theme-hand-drawn-heroics div#armor-class-container div#box-content img {
    display: none !important;
}

div.theme-hand-drawn-heroics div#armor-class-container div#box-content > div:nth-child(3) > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-armor-section.png);
    background-repeat: no-repeat;
    background-size: contain;
}

div.theme-hand-drawn-heroics div#armor-class-container div#box-content > div:first-child > div:nth-child(2) > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shield.png) !important;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top 2px left 3px;
}

div.theme-hand-drawn-heroics div#hit-points-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-heart.png) !important;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top 4px left;
}

div.theme-hand-drawn-heroics div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div > div:first-child {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

div.theme-hand-drawn-heroics div#hit-points-container div#BoxHeaderText svg path {
    fill: black !important;
}


div.theme-hand-drawn-heroics div#hp-box-grid > div:first-child > div:nth-child(2) button {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    line-height: 1;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 4px 4px 4px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#hp-box-grid > div:first-child > div:nth-child(2) button:hover {
    border-image-width: 6px 6px 6px 6px !important;
}

div.theme-hand-drawn-heroics div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) > div:first-child {
    background: transparent !important;
    border: none !important;
}

div.theme-hand-drawn-heroics div#content-container div#boxComponentValue {
    font-family: 'ArchitectsDaughter';
    font-weight: 700;
}

div.theme-hand-drawn-heroics div#hit-points-container svg path {
    fill: transparent;
    stroke: transparent;
}

div.theme-hand-drawn-heroics div#hit-points-container svg + div {
    background: transparent !important;
}

div.theme-hand-drawn-heroics div#hit-points-container svg + div div {
  color: black !important;
  font-family: Mynerve;
  font-weight: 700;
  margin-bottom: -4px;
}

div.theme-hand-drawn-heroics div#hit-points-container svg + div + div {
  font-family: Permanent Marker;
  color: black;
}

div.theme-hand-drawn-heroics div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) > div:first-child h6 {
    color: black !important;
    font-family: Permanent Marker;
    font-weight: 400;
}

div.theme-hand-drawn-heroics div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) > div:first-child > div:first-child > div:first-child > div:last-child > div:first-child {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    line-height: 1;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 4px 4px 4px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#hit-points-container button {
    background: transparent;
    color: black;
    font-family: Permanent Marker;
    box-shadow: none;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#hit-points-container button:hover {
    border-image-width: 6px 6px 6px 6px !important;
}

div.theme-hand-drawn-heroics div#hit-points-container span {
    font-family: 'Permanent Marker' !important;
    font-weight: 400;
    font-size: 12px;
}

div.theme-hand-drawn-heroics div#hit-points-container div#box-content > div:not(:first-of-type) > div:not(:first-of-type) p {
    font-family: 'ArchitectsDaughter';
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

div.theme-hand-drawn-heroics div#hit-points-container div#box-content > div:nth-child(2) > div:first-child > div:first-child > div:nth-child(2) {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-gear.png) !important;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
}

div.theme-hand-drawn-heroics div#hit-points-container div#box-content > div:nth-child(3) > div:first-child > div:nth-child(2) {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-gear.png) !important;
    background-color: transparent !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
}


div.theme-hand-drawn-heroics div#ability-scores-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div {
    box-shadow: none !important;
    border: solid !important;
    border-radius: 0px;
    border-image-slice: 14 14 14 14 !important;
    line-height: 1;
    border-image-width: 2px 3px 2px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
	margin-bottom: 5px;
    z-index: 9;
	background-color: white;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics .MuiDataGrid-columnHeaderTitle {
    font-family: Permanent Marker !important;
    font-size: 10px !important;
}

div.theme-hand-drawn-heroics .attribute-cell h3 {
    font-family: 'WalterTurncoat' !important;
    font-weight: 700;
    font-size: 14px !important;
}

div.theme-hand-drawn-heroics .score-cell h3 {
    font-family: GloriaHallelujah !important;
    font-size: 16px !important;
}


div.theme-hand-drawn-heroics div#ability-scores-container .mod-cell > div:first-child {
  background: transparent;
  box-shadow: none;
  border: solid !important;
  border-image-slice: 14 14 14 14 !important;
  border-image-width: 3px 3px 3px 3px !important;
  border-image-outset: 0px 0px 0px 0px !important;
  border-image-repeat: round round !important;
  position: relative;
  z-index: 9;
  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  margin-right: 4px;
}

div.theme-hand-drawn-heroics div#ability-scores-container .mod-cell p {
  font-family: GloriaHallelujah;
  font-weight: 700;
}

div.theme-hand-drawn-heroics div#character-sheet h3 {
    font-family: DeliciousHandrawn;
    font-size: 14px;
    font-weight: 700;
}

div.theme-hand-drawn-heroics div#avatar-box {
  border: solid !important;
  border-image-slice: 14 14 14 14 !important;
  border-image-width: 6px 6px 6px 6px !important;
  border-image-outset: 2px 2px 2px 2px !important;
  border-image-repeat: round round !important;
  position: relative;
  z-index: 9;
  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}


div.theme-hand-drawn-heroics div#top-header-name-container h1 {
  font-family: Schoolbell !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: black;
}

div.theme-hand-drawn-heroics div#top-header-name-container h4 {
    font-family: WalterTurncoat;
    font-weight: 700;
    color: black;
    margin-left: 2px;
    font-size: 12px;
}

div.theme-hand-drawn-heroics div#top-header-name-container h6 {
  font-family: DeliciousHandrawn;
  color: black;
  font-weight: 700;
}

div.theme-hand-drawn-heroics div#top-header-name-container h6:after {
     content: "";
     display: block;
     background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-single-line.png);
     background-size: contain;
     height: 2px;
     width: 100%;
     background-repeat: no-repeat;
     position: relative;
     top: -2px;
}

div.theme-hand-drawn-heroics div#top-header-name-container h1 + div:nth-child(2) + div > div > div > p {
    font-family: GloriaHallelujah;
    color: #3f3f3f;
    font-weight: 700;
}

/* Sharing Banner Offset */

div.theme-hand-drawn-heroics .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 98px !important;
}

div.theme-hand-drawn-heroics .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    div.theme-hand-drawn-heroics .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */



/* Theme Height Settings */

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-hand-drawn-heroics div#skills-actions-container {
        max-height: calc(100vh - 710px);
        border-radius: 0px;
    }
  
     div.theme-hand-drawn-heroics div#equipment-container {
        max-height: calc(100vh - 718px);
        border-radius: 0px;
    }
  
     div.theme-hand-drawn-heroics div#spells-container {
        max-height: calc(100vh - 718px);
        border-radius: 0px;
    }
  
     div.theme-hand-drawn-heroics div#feats-container {
        max-height: calc(100vh - 718px);
        border-radius: 0px;
    }
  
     div.theme-hand-drawn-heroics div#details-container {
        max-height: calc(100vh - 718px);
        border-radius: 0px;
    }
  
}



div.theme-hand-drawn-heroics.sheet-background {
  background: url("https://content.demiplane.com/nexus/pathfinder-2e/character/hh-background-body.jpg") !important;
  background-color: #ffffff !important;
  background-repeat: no-repeat !important;
  background-size: 2440px !important;
  background-position: top center!important;
}

div.theme-hand-drawn-heroics div#dice-roller-container {
    filter: drop-shadow(0px 0px 24px #f3f3f3);
    z-index: 99;
}

div.theme-hand-drawn-heroics div#details-container input {
    z-index: 9;
    color: black;
}

@media (max-width: 1024px) {

  div.theme-hand-drawn-heroics div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child {
        background: linear-gradient(360deg, #f3f3f3 0%, rgba(32, 32, 32, 0) 100%);
    }
    
  div.theme-hand-drawn-heroics div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child button {
    color: black;
  } 
  
  div.theme-hand-drawn-heroics div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child button {
    color: black;
  }
  
  div.theme-hand-drawn-heroics div#skills-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) + div + div button {
    color: black;
  }
  
  div.theme-hand-drawn-heroics div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child svg {
    color: black;
  }
  
  div.theme-hand-drawn-heroics div#skills-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) + div + div svg path {
    color: black;
  }
  
  
  
  div.theme-hand-drawn-heroics div#actions-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child {
        background: linear-gradient(360deg, #f3f3f3 0%, rgba(32, 32, 32, 0) 100%);
    }
    
  div.theme-hand-drawn-heroics div#actions-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child button {
    color: black;
  } 
  
  div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:last-of-type button svg {
    fill: transparent !important;
    background-color: transparent;
}

  div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:last-of-type button svg path {
    fill: transparent !important;
    background-color: transparent;
}
  
  div.theme-hand-drawn-heroics div#actions-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child button {
    color: black;
  }
  
  div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) + div button {
    color: black;
  }
  
  div.theme-hand-drawn-heroics div#actions-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child svg {
    color: black;
  }
  
  div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) + div svg path {
    color: black;
  }
  
}

@media (max-width: 742px) {

    div.theme-hand-drawn-heroics div#top-header-name-container + div > div:first-child > div:first-child {
        background-color: white;
        padding: 12px;
        height: 75px;
        display: flex;
        width: 75px;
		background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-circle-frame-2.png);
		background-color: transparent !important;
		background-size: cover;
		box-shadow: none !important;
		border: none !important;
        border-radius: 50%;
        align-items: center;
        margin-right: 8px;
    }
	

div.theme-hand-drawn-heroics div#top-header-name-container + div > div:first-child > div:first-child p {
    color: black;
    font-family: 'Schoolbell';
    font-weight: 700;
}

  
     div.theme-hand-drawn-heroics div#scrollToggledDisplay {
       background: white;
	   border: none;
     }
	 
	 div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content > div:first-child {
		font-size: 14px;
	}
	 
	 div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content {
			border: none !important;
			border-radius: 0px;
	}
	
	div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content div#squareComponentContainer div#squareComponentContent {
		background: white;
	}
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content div#squareComponentContainer {
        border: solid !important;
		border-image-slice: 14 14 14 14 !important;
		border-image-width: 3px 3px 3px 3px !important;
		border-image-outset: 2px 2px 2px 2px !important;
		border-image-repeat: stretch stretch !important;
		position: relative;
		z-index: 0;
		border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  }
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content > div.MuiGrid-root.MuiGrid-item > div > div > div > div:nth-child(2) {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-2.png);
    background-color: transparent !important;
    background-size: cover;
    color: black !important;
    font-family: Permanent Marker;
    border: 1.5px solid gray;
    font-weight: 400;
    font-size: 11px;
}

div.theme-hand-drawn-heroics div#scrollToggledDisplay div {
    font-family: DeliciousHandrawn;
    font-weight: 700;
}
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay > div:first-child > div:nth-child(4) > div button {
    color: #234665;
	box-shadow: none;
	background: white;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 2px 2px 2px 2px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay > div:first-child > div:nth-child(3) div#box-content > div:nth-child(2) > div:first-child > div:first-child > div:first-child {
    background-color: white;
    background: white;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  }
  
  
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    background-color: white;
	background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-circle-frame-2.png);
    background-color: transparent !important;
    background-size: cover;
    box-shadow: none !important;
    border: none !important;
  }
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child div {
    color: #393636;
  }
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content div#squareComponentContainer,  div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content div#squareComponentContainer div#squareComponentContent {
    background-color: white !important;
  }
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content div#squareComponentContainer, div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content div#squareComponentContainer {
    border: 1.5px solid #234665;
  }
  
  div.theme-hand-drawn-heroics div#scrollToggledDisplay div#box-content div#squareComponentContainer div#squareComponentFooter {
	  background-color: white;
	  color: black;
	  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-1.png);
	  background-size: auto 180%;
	  background-color: transparent !important;
	  color: black;
	  font-family: Permanent Marker;
	  font-weight: 400;
	  font-size: 11px;
	  border: solid !important;
	  border-image-slice: 14 14 14 14 !important;
	  border-image-width: 6px 5px 6px 5px !important;
	  border-image-outset: 2px 2px 2px 2px !important;
	  border-image-repeat: round round !important;
	  position: relative;
	  z-index: 1;
	  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
	
  }
  
  
}

div.theme-hand-drawn-heroics div#content-container svg {
  filter: invert(.5);
}

div.theme-hand-drawn-heroics div#content-container + div#tab-container > div:first-child > div:nth-child(2) svg {
  filter: invert(.5);
}


div.theme-hand-drawn-heroics div#top-header-components-container > div:first-child > div:nth-child(2) > div:first-child {
    font-weight: 400;
    background-color: rgb(42 42 42);
    border: 1px solid #3276b5;
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dice-pointer-icon.svg) 0 20, auto;
}

div.theme-hand-drawn-heroics div#top-header-components-container > div:first-child > div:first-child >div:first-child, div.theme-hand-drawn-heroics div#top-header-components-container > div:first-child > div:first-child > div:nth-child(2) {
    background-color: #2a2a2a;
}

div.theme-hand-drawn-heroics div#content-container div#box-component > div:first-child {
    border: none;
}

div.theme-hand-drawn-heroics div#tab-container div#box-component > div:first-child {
    border: none;
}

div.theme-hand-drawn-heroics div#box-header {
  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-1.png);
  background-size: auto 180%;
  background-color: transparent !important;
  color: black;
  font-family: Permanent Marker;
  font-weight: 400;
  font-size: 11px;
  border: solid !important;
  border-image-slice: 14 14 14 14 !important;
  border-image-width: 6px 5px 6px 5px !important;
  border-image-outset: 2px 2px 2px 2px !important;
  border-image-repeat: round round !important;
  position: relative;
  z-index: 1;
  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#armor-class-container div#box-content {
    z-index: 1 !important;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child {
  border: solid !important;
  border-image-slice: 14 14 14 14 !important;
  border-image-width: 3px 3px 3px 3px !important;
  border-image-outset: 2px 2px 2px 2px !important;
  border-image-repeat: round round !important;
  position: relative;
  z-index: 2;
  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;  
}

div.theme-hand-drawn-heroics div#content-container div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child {
  border: none !important;
}

div.theme-hand-drawn-heroics div#BoxHeaderText {
    color: black;
  font-family: ArchitectsDaughter;
  text-transform: uppercase;
  font-weight: 700;
}

div.theme-hand-drawn-heroics div#content-container div#box-content {
  background: white;
  border: solid !important;
  border-image-slice: 14 14 14 14 !important;
  border-image-width: 0px 6px 6px 6px !important;
  border-image-outset: 2px 2px 2px 2px !important;
  border-image-repeat: stretch stretch !important;
  position: relative;
  z-index: 0;
  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#tab-container div#box-content {
  background: white;
  border: solid !important;
  border-image-slice: 14 14 14 14 !important;
  border-image-width: 0px 6px 6px 6px !important;
  border-image-outset: 2px 2px 2px 2px !important;
  border-image-repeat: stretch stretch !important;
  position: relative;
  z-index: 0;
  border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#box-component > div:first-child {
    border-collapse: separate;
    border-radius: 12px;
}

div.theme-hand-drawn-heroics div#content-container div#box-content div, div.theme-hand-drawn-heroics div#content-container div#box-content p, div.theme-hand-drawn-heroics div#content-container div#box-content h1, div.theme-hand-drawn-heroics div#content-container div#box-content h2, div.theme-hand-drawn-heroics div#content-container div#box-content h3, div.theme-hand-drawn-heroics div#content-container div#box-content h4, div.theme-hand-drawn-heroics div#content-container div#box-content h5, div.theme-hand-drawn-heroics div#content-container div#box-content h6 {
    color: #393636;
}

div.theme-hand-drawn-heroics div#tab-container div#box-content div, div.theme-hand-drawn-heroics div#tab-container div#box-content p, div.theme-hand-drawn-heroics div#tab-container div#box-content h1, div.theme-hand-drawn-heroics div#tab-container div#box-content h2, div.theme-hand-drawn-heroics div#tab-container div#box-content h3, div.theme-hand-drawn-heroics div#tab-container div#box-content h4, div.theme-hand-drawn-heroics div#tab-container div#box-content h5, div.theme-hand-drawn-heroics div#tab-container div#box-content h6 {
    color: #393636;
}


div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(1) > div:first-child > div:first-child > div:first-child {
    background-color: #fdfdfd;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}


div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child {
    background-color: transparent;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child {
    background-color: #580006;
}

div.theme-hand-drawn-heroics div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:first-child > div:first-child > div:first-child {
    color: white !important;
}

div.theme-hand-drawn-heroics div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-hand-drawn-heroics div#hp-box-grid input {
    color: black;
	background-color: white;
}

div.theme-hand-drawn-heroics div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:first-child {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-hand-drawn-heroics div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) > div:first-child {
    background: #7f7f7f;
}

div.theme-hand-drawn-heroics div#hit-points-container svg + div {
    background: #7f7f7f;
}

div.theme-hand-drawn-heroics div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) > div:first-child h6 {
  color: white;
}


/* Ability Scores Section */

div.theme-hand-drawn-heroics div[data-id="strength-row"] {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-strength.jpg) !important;
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-color: transparent;
}

div.theme-hand-drawn-heroics div[data-id="dexterity-row"] {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-dexterity.jpg) !important;
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: left 15px center;
    background-color: transparent;
}

div.theme-hand-drawn-heroics div[data-id="constitution-row"] {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-constitution.jpg) !important;
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-color: transparent;
}

div.theme-hand-drawn-heroics div[data-id="intelligence-row"] {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-intelligence.jpg) !important;
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-color: transparent;
}

div.theme-hand-drawn-heroics div[data-id="wisdom-row"] {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-wisdom.jpg) !important;
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: left 20px center;
    background-color: transparent;
}

div.theme-hand-drawn-heroics div[data-id="charisma-row"] {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-charisma.jpg) !important;
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: left 18px center;
    background-color: transparent;
}


div.theme-hand-drawn-heroics div#ability-scores-container .mod-cell p:hover {
    color: black !important;
}


div.theme-hand-drawn-heroics .mod-cell > div:first-child {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}


div.theme-hand-drawn-heroics div#saving-throws-component-style div#squareComponentContent {
    background-color: white !important;
    border: none !important;
    box-shadow: none !important;
}

div.theme-hand-drawn-heroics div#saving-throws-component-style div#squareComponentFooter {
    background-color: rgb(88 0 6);
    color: white;
}

div.theme-hand-drawn-heroics div#speed-container div#squareComponentContent {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-hand-drawn-heroics div#speed-container div#squareComponentFooter {
    background-color: rgb(63 63 63);
    color: white;
}

div.theme-hand-drawn-heroics div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-hand-drawn-heroics div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
    background-color: rgb(88 0 6);
    color: white;
}

/* Sheet Bottom */

div.theme-hand-drawn-heroics div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
    box-shadow: none;
    border: none;
    background-color: transparent;
    padding-bottom: 0px;
}

div.theme-hand-drawn-heroics div#tab-list-container h3 {
    color: black;
    filter: grayscale(1);
 	border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 0px 0px 3px 0px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
	font-family: DeliciousHandrawn;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}


div.theme-hand-drawn-heroics div#tab-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
    background: white;
    color: black;
	border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
	font-family: DeliciousHandrawn;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;			
}

div.theme-hand-drawn-heroics div#tab-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary svg {
    background: transparent;
    fill: transparent;
}

div.theme-hand-drawn-heroics div#tab-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-search-icon.png) !important;
    background-color: transparent !important;
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: left 8px center;
	border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
	font-family: DeliciousHandrawn;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#tab-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary input {
    font-family: ArchitectsDaughter;

}

div.theme-hand-drawn-heroics div.drawer-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
    color: white;
    background-color: rgb(15, 15, 15);
}

div.theme-hand-drawn-heroics div.drawer-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary svg {
    filter: invert(0) !important;
}

div.theme-hand-drawn-heroics div:not(.drawer-container) .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary svg {
    filter: invert(1);
}

div.theme-hand-drawn-heroics div#skills-actions-container h6 {
   font-family: Permanent Marker !important;
    font-size: 10px !important;
}



div.theme-hand-drawn-heroics div#skills-container .MuiCollapse-wrapper.MuiCollapse-vertical > div:first-child > div {
    background: transparent;
}



div.theme-hand-drawn-heroics div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div {
    background: transparent;
}

div.theme-hand-drawn-heroics button.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeSmall.MuiButton-textSizeSmall.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeSmall.MuiButton-textSizeSmall {
    font-family: DeliciousHandrawn;
    color: black;
    font-weight: 700;
    font-size: 11px;
    
}

div.theme-hand-drawn-heroics button.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeSmall.MuiButton-textSizeSmall.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeSmall.MuiButton-textSizeSmall:after {
    content: "";
    display: block;
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-single-line.png);
    background-size: contain;
    height: 2px;
    width: 100%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 4px;
}

div.theme-hand-drawn-heroics div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    background: transparent;
    box-shadow: none;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 p {
  font-family: Mynerve;
  font-weight: 700;
}


div.theme-hand-drawn-heroics div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) > div > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-2.png);
    background-color: transparent !important;
    background-size: cover;
    color: black !important;
    font-family: Permanent Marker;
    border: 1.5px solid gray;
    font-weight: 400;
    font-size: 11px;
}

div.theme-hand-drawn-heroics div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) > div > div:first-child > div:first-child > div:nth-child(2) > div:first-child h6 {
    color: black;
}

div.theme-hand-drawn-heroics div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) button:not(.MuiIconButton-root) {
    background-color: transparent;
    color: black;
    border: none;
    box-shadow: none;
    font-family: GloriaHallelujah;
    font-weight: 700;

}

div.theme-hand-drawn-heroics div#skills-container button.MuiButton-outlined:hover {
    background-color: rgb(183 183 183);
    color: black;
}


div.theme-hand-drawn-heroics div#skills-container button.MuiButton-outlined {
	  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#skills-container button.MuiButton-outlined:hover {
    border-image-width: 6px 6px 6px 6px !important;
}


@media (min-width: 1024px) {

    div.theme-hand-drawn-heroics div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
        display: none;
    }
  
}


div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) {
    background: transparent;
}

div.theme-hand-drawn-heroics div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 .MuiCollapse-root.MuiCollapse-vertical.MuiCollapse-entered {
    background: transparent;
}

div.theme-hand-drawn-heroics div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div button:not(.MuiIconButton-root) {
    background: transparent;
	background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    box-shadow: none;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    color: black;
    font-family: DeliciousHandrawn;
    font-weight: 700;
    font-size: 14px;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#actions-container div {
    box-shadow: none !important;
}

div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:not(:last-of-type) button svg {
        -webkit-mask-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-pencil-hatch.png);
    -webkit-mask-size: 5px;
    mask-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-pencil-hatch.png);
    mask-size: 5px;
    stroke: gray;
}

div.theme-hand-drawn-heroics div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) h6 {
    text-decoration: none;
    color: gray;
}


div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:last-of-type button svg {
    fill: transparent !important;
    background-color: transparent;
}

div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:last-of-type button svg path {
    fill: transparent !important;
    background-color: transparent;
}

div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:last-of-type button {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-gear.png) !important;
    background-color: transparent !important;
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: top 6px center;
}

div.theme-hand-drawn-heroics div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div h3 {
    font-size: 14px;
}

div.theme-hand-drawn-heroics div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div p {
    font-family: ArchitectsDaughter;
    font-weight: 700;
}

div.theme-hand-drawn-heroics div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    background: transparent;
    box-shadow: none;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}


@media (min-width: 1024px) {

    div.theme-hand-drawn-heroics div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
        display: none;
    }
  
}

div.theme-hand-drawn-heroics div#grid-table-grouped-component div {
    font-family: Permanent Marker;
    line-height: 1.2;
}

/* Equipment */

div.theme-hand-drawn-heroics div#equipment-container {
    background: transparent;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 2px 2px 2px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#equipment-container div#box-content {
    border: none !important;
}

div.theme-hand-drawn-heroics div#equipment-container button.MuiButton-outlined {
	 background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
    color: black !important;
    font-size: 11px !important;
}

div.theme-hand-drawn-heroics div#equipment-container button.MuiButton-outlined:hover {
    background-color: white;
    color: black;
    box-shadow: none !important;
    border-image-width: 6px 6px 6px 6px !important;
  
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root):hover {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  box-shadow: none !important;
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained:hover, div.theme-hand-drawn-heroics div#equipment-container .MuiButton-containedPrimary:hover {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  box-shadow: none !important;
}


div.theme-hand-drawn-heroics div#tab-container div#character-currency-container > div:first-child > div > div:first-child > div:nth-child(2) span img {
    border: 1px solid gray !important;
    border-radius: 50%;
    filter: grayscale(1);
}

div.theme-hand-drawn-heroics div#tab-container div#character-currency-container > div:first-child > div > div:first-child > div:nth-child(1) > div:first-child {
  font-family: WalterTurncoat;
  font-size: 13px;
  font-weight: 700;
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div {
    background: transparent;
    background: white;
    color: black;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    font-family: DeliciousHandrawn;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component h5 {
  font-family: Permanent Marker;
  font-weight: 400;
  font-size: 13px;
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div p {
  font-family: DeliciousHandrawn;
  font-weight: 700;
}


@media (min-width: 1024px) {

    div.theme-hand-drawn-heroics div#equipment-container:after {
        display: none;
    }
  
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root) {
    background: transparent;
    box-shadow: none;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 14px;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained, div.theme-hand-drawn-heroics div#equipment-container .MuiButton-containedPrimary {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    box-shadow: none !important;
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
    color: black !important;
    font-size: 11px !important;
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div > div:first-child > div:first-child > div:first-child {
    border-radius: 0px;
    mix-blend-mode: difference;
    filter: grayscale(1);
}


div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root):hover {
    background-color: transparent;
    color: black;
}

div.theme-hand-drawn-heroics div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained:hover, div.theme-hand-drawn-heroics div#equipment-container .MuiButton-containedPrimary:hover {
    background-color: rgb(183 183 183);
    color: black;
}



/* Spells */


div.theme-hand-drawn-heroics div#spells-container {
    background: transparent;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 2px 2px 2px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#spells-container div#box-content {
    border: none !important;
}

div.theme-hand-drawn-heroics div#spells-container button.MuiButton-outlined {
	 background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
    color: black !important;
    font-size: 11px !important;
}

div.theme-hand-drawn-heroics div#spells-container button.MuiButton-contained {
	 background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
    color: black !important;
    font-size: 11px !important;
    box-shadow: none;
}

div.theme-hand-drawn-heroics div#spells-container button.MuiButton-outlined:hover, div.theme-hand-drawn-heroics div#spells-container button.MuiButton-contained:hover  {
    color: black;
    box-shadow: none !important;
    border-image-width: 6px 6px 6px 6px !important;
}

div.theme-hand-drawn-heroics div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 button:not(.MuiIconButton-root):not(.MuiButtonGroup-grouped):hover {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
 
}

div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child button.MuiButton-contained {
	 background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-2.png) !important;
  background-size: cover;
}

div.theme-hand-drawn-heroics div#spells-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root):hover {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  box-shadow: none !important;
}

div.theme-hand-drawn-heroics div#spells-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained:hover, div.theme-hand-drawn-heroics div#spells-container .MuiButton-containedPrimary:hover {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  box-shadow: none !important;
}



div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    background: transparent;
    background: white;
    color: black;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    font-family: DeliciousHandrawn;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#spells-container div#grid-table-grouped-component h5 {
  font-family: Permanent Marker;
  font-weight: 400;
  font-size: 13px;
}

div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 div p {
  font-family: DeliciousHandrawn;
  font-weight: 700;
}

div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 div {
  background: white;
  font-family: DeliciousHandrawn;
  font-weight: 700;
}

div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 h4 {
  background: white;
  font-family: DeliciousHandrawn;
  font-weight: 700;
  text-transform: capitalize;
}

@media (min-width: 1024px) {

    div.theme-hand-drawn-heroics div#spells-container:after {
        display: none;
    }
  
}

div.theme-hand-drawn-heroics div#spells-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root) {
    background: transparent;
    box-shadow: none;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    color: black;
    font-family: DeliciousHandrawn;
    font-weight: 700;
    font-size: 14px;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
 
}

div.theme-hand-drawn-heroics div#spells-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained, div.theme-hand-drawn-heroics div#spells-container .MuiButton-containedPrimary {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    box-shadow: none !important;
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
    color: black !important;
    font-size: 11px !important;
}

div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child > div:first-child {
    border-radius: 0px;
    mix-blend-mode: difference;
    filter: grayscale(1);
}

div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child div {
  font-family: Permanent Marker;
  font-weight: 400;
}

div.theme-hand-drawn-heroics div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child h6 {
  font-family: Permanent Marker;
  font-weight: 400;
}


div.theme-hand-drawn-heroics div#spells-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root):hover {
    background-color: transparent;
    color: black;
}

div.theme-hand-drawn-heroics div#spells-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained:hover, div.theme-hand-drawn-heroics div#spells-container .MuiButton-containedPrimary:hover {
    background-color: rgb(183 183 183);
    color: black;
}



/* Feats */

div.theme-hand-drawn-heroics div#feats-container {
    background: transparent;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 2px 2px 2px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 0;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#feats-container div#box-content {
    border: none !important;
}

div.theme-hand-drawn-heroics div#feats-container button.MuiButton-outlined {
	 background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
    color: black !important;
    font-size: 11px !important;
    box-shadow: none;
}

div.theme-hand-drawn-heroics div#feats-container button.MuiButton-contained {
	 background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
    color: black !important;
    font-size: 11px !important;
    box-shadow: none
}

div.theme-hand-drawn-heroics div#feats-container button.MuiButton-outlined:hover, div.theme-hand-drawn-heroics div#feats-container button.MuiButton-contained:hover  {
    color: black;
    box-shadow: none !important;
    border-image-width: 6px 6px 6px 6px !important;
  
}

div.theme-hand-drawn-heroics div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child button.MuiButton-contained {
	 background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-2.png) !important;
  background-size: cover;
}

div.theme-hand-drawn-heroics div#feats-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root):hover {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  box-shadow: none !important;
}

div.theme-hand-drawn-heroics div#feats-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained:hover, div.theme-hand-drawn-heroics div#feats-container .MuiButton-containedPrimary:hover {
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 6px 6px 6px 6px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
  box-shadow: none !important;
}



div.theme-hand-drawn-heroics div#feats-container div#grid-table-component > div:not(:first-child):not(:nth-child(2)) > div:first-child {
    background: transparent;
    background: white;
    color: black;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    font-family: DeliciousHandrawn;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#feats-container div#grid-table-grouped-component h5 {
  font-family: Permanent Marker;
  font-weight: 400;
  font-size: 13px;
}

div.theme-hand-drawn-heroics div#feats-container div#grid-table-component > div:not(:first-child):not(:nth-child(2)) > div:first-child div p {
  font-family: DeliciousHandrawn;
  font-weight: 700;
}


@media (min-width: 1024px) {

    div.theme-hand-drawn-heroics div#feats-container:after {
        display: none;
    }
  
}

div.theme-hand-drawn-heroics div#feats-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root) {
    background: transparent;
    box-shadow: none;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    color: black;
    font-family: DeliciousHandrawn;
    font-weight: 700;
    font-size: 14px;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#feats-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained, div.theme-hand-drawn-heroics div#feats-container .MuiButton-containedPrimary {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-shading-3.png);
    box-shadow: none !important;
    background-color: transparent !important;
    color: black;
    font-family: Permanent Marker;
    font-weight: 400;
    font-size: 11px;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 2px 4px 2px 4px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
    color: black !important;
    font-size: 11px !important;
}

div.theme-hand-drawn-heroics div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child > div:first-child {
    border-radius: 0px;
    mix-blend-mode: difference;
    filter: grayscale(1);
}

div.theme-hand-drawn-heroics div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child div {
  font-family: Permanent Marker;
  font-weight: 400;
}

div.theme-hand-drawn-heroics div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child h6 {
  font-family: Permanent Marker;
  font-weight: 400;
}


div.theme-hand-drawn-heroics div#feats-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root):hover {
    background-color: transparent;
    color: black;
}

div.theme-hand-drawn-heroics div#feats-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained:hover, div.theme-hand-drawn-heroics div#feats-container .MuiButton-containedPrimary:hover {
    background-color: rgb(183 183 183);
    color: black;
}


/* Details */


div.theme-hand-drawn-heroics div#details-container label {
  color: #393636;
  font-family: ArchitectsDaughter;
  font-weight: 700;
}

div.theme-hand-drawn-heroics div#details-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
    background-image: none !important;
    border: solid !important;
    border-image-slice: 14 14 14 14 !important;
    line-height: 1;
    border-image-width: 3px 3px 3px 3px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-button-border.png) !important;
}

div.theme-hand-drawn-heroics div#details-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary textarea {
  color: black !important;
  font-family: ArchitectsDaughter;
}

div.theme-hand-drawn-heroics div#spell-proficiencies-header {
  font-family: Permanent Marker;
  font-weight: 400;
  -webkit-text-fill-color: gray;
}

div.theme-hand-drawn-heroics div#spell-proficiencies-header:after {
  border: none;
  content: "";
    display: block;
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-single-line.png);
    background-size: contain;
    height: 4px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    top: -2px;
}

div.theme-hand-drawn-heroics div#box-content div#weapon-proficiencies-header {
  font-family: Permanent Marker;
  font-weight: 400;
  -webkit-text-fill-color: gray;
}

div.theme-hand-drawn-heroics div#weapon-proficiencies-header:after {
  border: none;
  content: "";
    display: block;
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/hh-single-line.png);
    background-size: contain;
    height: 4px;
    width: 100%;
    background-repeat: no-repeat;
    position: relative;
    top: -2px;
}

div.theme-hand-drawn-heroics div#details-container input {
  font-family: ArchitectsDaughter;
}

div.theme-hand-drawn-heroics div#details-container .Mui-disabled {
  -webkit-text-fill-color: black;
  font-family: ArchitectsDaughter;
}

div.theme-hand-drawn-heroics div#details-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl fieldset {
    background: transparent;
    border: none;
    box-shadow: none;
}


@media (min-width: 1024px) {

    div.theme-hand-drawn-heroics div#details-container:after {
    display: none;
    }
  
}




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







/* ========== PRIMAL LIFE THEME ========== */


/* GLOBAL */


/* Sharing Banner Offset */

.theme-primal-life .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 86px !important;
}

.theme-primal-life .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    .theme-primal-life .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */


.theme-primal-life.sheet-background {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-b-bg.jpg) !important;
    background-repeat: no-repeat !important;
    background-color: #0d140b !important;
    background-size: 2200px !important;
    background-position: top left calc(50%) !important;
}


/* Box Header Height */

div#skills-container div#box-header {
    margin-top: 8px;
}

div#actions-container div#box-header {
    margin-top: 8px;
}

div#details-container div#box-header {
    margin-top: 8px;
}

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



.theme-primal-life div#top-header-name-container {
    min-height: 110px;
}

.theme-primal-life div#box-component > div:first-child {
    border: none;
}

.theme-primal-life div#box-header {
    background-color: rgba(15, 15, 15, 0.5);
    padding-top: 4px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.theme-primal-life div#box-content {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}


.theme-primal-life div#top-header-components-container svg path {
    fill: #c59b8a6b;
}  

/* General Responsive */



@media (min-width: 982px) {
  
    .theme-primal-life div#top-header-name-container > div:first-child > div:first-child > div:first-child {
        bottom: 12px !important;
    }
  
}


@media (min-width: 1024px) and (max-width: 1100px) {
  
.theme-primal-life div#character-sheet {
      padding-left: 24px;
      padding-right: 24px;
  }
  
}


@media (max-width: 1023px) {
  
    .theme-primal-life div#top-header-name-container > div:nth-child(2) {
      position: relative;
      z-index: 999;
      padding-left: 16px !important;
      filter: drop-shadow(2px 4px 6px black);
    }

 }


@media (min-width: 743px) and (max-width: 1023px) {
  
  .theme-primal-life div#top-header-name-container > div:first-child {
      max-width: 24%;
      flex-basis: 24%;
  }

}


@media (max-width: 742px) {

  
  .theme-primal-life div#feats-container > div:first-child > div:first-child {
    padding-right: 0px;
  }
  
  .theme-primal-life div#spells-container > div:first-child > div:first-child {
    padding-right: 0px;
  }

  .theme-primal-life div#tab-container div#box-component {
      max-width: 100%;
      padding-left: 0px;
  }


  .theme-primal-life div#equipment-container, div#spells-container, div#feats-container {
    margin-left: 8px !important;
  }
  
  .theme-primal-life div#details-container > div:first-child {
      padding-left: 8px;
  }
  
  .theme-primal-life div#details-container div#box-component > div:first-child {
    padding-left: 0px !important;
  }
  
  .theme-primal-life div#top-header-name-container:before {
    left: -38px !important;
  }
  
  .theme-primal-life div#top-header-name-container > div:first-child {
      max-width: 24%;
      flex-basis: 24%;
  }
  
  .theme-primal-life div#top-header-container > div:first-child > div:first-child > div:first-child {
      justify-content: flex-start;
  }
    
  .theme-primal-life div#top-header-container {
      background-position: top -40px left -60px, top left, top left, top right, top 0px left -90px !important;
  }
  
  
  .theme-primal-life div#top-header-name-container {
      max-width: 70%;
      flex-basis: 70%;
  }
    
  
  .theme-primal-life div#top-header-container {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      margin-bottom: -16px !important;
      z-index: 9;
      border-radius: 50px;
      margin-left: 0px !important;
      margin-right: 0px !important;
  }
  
    .theme-primal-life div#scrollToggledDisplay + div {
        padding-left: 8px;
        margin-left: 8px;
        margin-right: 8px;
        margin-top: 16px;
    }
  
    .theme-primal-life div#top-header-name-container > div:first-child > div:first-child > div:first-child {
        left: 0px !important;
        border-radius: 50%;
        border: none;
        height: 52px;
        width: 52px;
    }
  
    
  .theme-primal-life div#tab-container {
    background-color: rgb(32 32 32);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: linear-gradient(0deg, rgba(15, 15, 15, .7) 0%, rgba(15, 15, 15, .7) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-spring-bg.jpg);
  }
  
    .theme-primal-life div#top-header-name-container h1 {
      font-size: 20px !important;
    }

    .theme-primal-life div#top-header-name-container h6 {
        font-size: 12px !important;
    }
    
    .theme-primal-life div#scrollToggledDisplay {
        border: solid !important;
        border-image-slice: 26 26 26 26 !important;
        border-image-width: 11px 0px 11px 0px !important;
        border-image-outset: 6px 6px 6px 6px !important;
        border-image-repeat: stretch stretch !important;
        position: relative;
        z-index: 9;
        border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-border.png) !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 0px;
        padding-right: 8px;
        margin-bottom: -12px;
        margin-left: 0px !important;
        margin-right: 0px !important;
        min-height: 116px;
        margin-top: 60px !important;
    }

    .theme-primal-life div#scrollToggledDisplay:before {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-top-c.png);
        background-size: 240px;
        height: 120px;
        width: calc(100%);
        position: absolute;
        top: -18px;
        left: 0px;
        display: block;
        z-index: 1;
        margin-left: 0px;
        margin-right: 0px;
        background-position: top 0px center;
        background-repeat: no-repeat;
        filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
        pointer-events: none;
    }

    .theme-primal-life div#scrollToggledDisplay:after {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-antlers-t.png);
        background-size: 248px;
        height: 90px;
        width: calc(100%);
        position: absolute;
        bottom: -12px;
        display: block;
        z-index: 1;
        margin-left: 0px;
        margin-right: 0px;
        background-position: top 50px center;
        background-repeat: no-repeat;
        filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
        pointer-events: none;
    }
    
    .theme-primal-life div#top-header-name-container + div > div:first-child > div:first-child {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-hp-b.png);
      background-size: 140px;
      background-position: top left -2px;
      background-repeat: no-repeat;
      border-radius: 0px !important;
      border: none !important;
      background-color: transparent !important;
      position: relative;
      top: 10px;
      height: 140px !important;
      width: 140px !important;
      margin-top: -34px;
    }

}
        

/* Top Header Block */

.theme-primal-life div#top-header-container {
    background: rgb(32 32 32);
    box-shadow: none;
    border: none;
    background-color: rgb(32, 32, 32);
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-teal-swirl.webp), linear-gradient(0deg, rgb(15, 15, 15) 5%, rgba(0, 0, 0, 0) 70%), linear-gradient(120deg, rgb(15, 15, 15) 0%, rgba(0, 0, 0, 0) 80%), linear-gradient(270deg, rgb(15, 15, 15) 0%, rgba(0, 0, 0, 0) 20%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-header.jpg);
    background-size: auto 150%, auto 120%, auto 200%, auto 140%, auto 100%;
    background-position: top -30px left -12px, top left, top left, top right, top 0px left 50%;
    background-repeat: no-repeat;
    margin-right: -8px;
    margin-left: -8px;
}

@media (min-width: 743px) {
  
    .theme-primal-life div#top-header-container {
        border-radius: 50px !important;
        margin-bottom: 46px !important;
    }

}



@media (min-width: 0px) {
  
  .theme-primal-life div#top-header-container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 8px;
    margin-bottom: -8px;
    z-index: 9;
    border-radius: 0px;
    margin-top: -48px;
    margin-bottom: 0px;
  }
  
  

  
 .theme-primal-life div#top-header-name-container:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-portrait-frame.png);
    background-size: auto 100%;
    height: 120px;
    width: 100%;
    position: absolute;
    top: 0px;
    left: -16px;
    display: block;
    z-index: 9;
    margin-left: 0px;
    margin-right: 0px;
    background-position: left 11px top -8px;
    background-repeat: no-repeat;
    filter: drop-shadow(0px, 0px, 6px, rgb(15, 15, 15));
    pointer-events: none;

  }
  

  
  .theme-primal-life div#top-header-name-container > div:first-child > div:first-child > div:first-child {
    border: 1px solid #b9826d !important;
    left: 22px;
    top: 4px;
    border-radius: 50%;
    border: none;
    height: 58px;
    width: 58px;
    align-self: start;
    z-index: 0;
    filter: drop-shadow(0px 0px 5px black);
  } 

}

.theme-primal-life div#top-header-name-container {
    padding-left: 8px;
    padding-bottom: 8px;
    align-items: center;
}


.theme-primal-life div#content-container {
    border: solid !important;
    border-image-slice: 26 26 26 26 !important;
    border-image-width: 11px 11px 11px 11px !important;
    border-image-outset: 6px 6px 6px 6px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-border.png) !important;
    position: relative;
    z-index: 9;
    padding-top: 0px !important;
    padding-bottom: 16px !important;
    padding-left: 0px;
    padding-right: 8px;
    margin-bottom: -12px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
    background-color: rgb(32 32 32);
    background-size: auto 100%;
    background-repeat: repeat;
    background-position: top center;
    background-image: unset;
    animation: primal-bg 180s infinite normal forwards;
    transition: all 5s ease-in-out;
}


@keyframes primal-bg {
  
	0% {
    background-image:  url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-butterflies.webp), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-spring-bg.jpg);
	}
  
	25% {
	  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-summer-bg.jpg);
	}

  	35% {
	  background-image:  url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-summer-leaves.webp),  url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-summer-bg.jpg);
	}
  
	50% {
    background-image:  url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-falling-leaves.webp), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-autumn.jpg);
	}
  
	75% {
    background-image:  url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-snow.webp), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-winter.jpg);
	}

	100% {
    background-image:  url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-butterflies.webp), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-spring.jpg);
	}
  
}






.theme-primal-life div#content-container:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-top-l.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-top-r.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-top-c.png);
    background-size: 64px, 64px, 240px;
    height: 120px;
    width: calc(100% + 28px);
    position: absolute;
    top: -18px;
    left: 0px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: top 2px left 0px, top 2px right 3px, top 0px center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
    pointer-events: none;
}

.theme-primal-life div#content-container:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-bottom-l-b.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-bottom-r-b.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-antlers-t.png);
    background-size: 64px, 64px, 248px;
    height: 90px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -12px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: bottom -6px left 0px, bottom -6px right 0px, top 50px center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
    pointer-events: none;
}


/* Ability Scores Section */


.theme-primal-life div#ability-scores-container div#box-content {
    background: rgba(15, 15, 15, 0.5) !important;
}




.theme-primal-life div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child {
    background-image: linear-gradient(270deg, rgb(32, 32, 32) 0%, transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-spell-circles-BG.jpg);
    background-size: auto 100%, 126% auto;
    background-position: top left, top -100px left -10px;
    background-repeat: no-repeat;
    border-radius: 2px;
}

.theme-primal-life div#ability-scores-container div#box-content {
    background: transparent;
}

.theme-primal-life div[data-id="strength-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-primal-life div[data-id="dexterity-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-primal-life div[data-id="constitution-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-primal-life div[data-id="intelligence-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-primal-life div[data-id="wisdom-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-primal-life div[data-id="charisma-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

/* Armor Class Section */

.theme-primal-life div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) {
    background-color: rgba(15, 15, 15, 0.5);
}

/* Hit Points Section */

.theme-primal-life div#hit-points-container {
    padding-right: 4px;
}

.theme-primal-life div#hit-points-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 100%);
    background-color: rgba(15, 15, 15, 0.5);
}

.theme-primal-life div#hp-box-grid > div:first-child > div:nth-child(2) button {
    background-color: #0f0f0f;
    font-size: 12px;
    padding: 0px;
    padding-bottom: 4px;
    display: flex;
    align-items: flex-end;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-heal.jpg);
    background-size: cover;
    background-position: top 0px center;
    background-repeat: no-repeat;
    border: 1px solid #3f693d;
}

/* Saving Throws Section */

.theme-primal-life div#saving-throws-component-style div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 100%);
    background-color: rgba(15, 15, 15, 0.5);
}


/* Speed Section */

.theme-primal-life div#speed-container div#box-content {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) 90%);
    background-color: rgba(15, 15, 15, 0.5);
}


/* Perception Section */

.theme-primal-life div#perception-container div#box-content {
   background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) 60%, rgba(0, 0, 0, 0) 90%);
    background-color: rgba(15, 15, 15, 0.5);
}


/* Tab Container */

.theme-primal-life div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
    margin-top: 24px;
    background-color: rgba(15, 15, 15, .9);
    border-radius: 2px;

}

/* THEME HEIGHT SETTINGS */

@media (min-width: 1024px) and (min-height: 1080px) {
  
  .theme-primal-life div#skills-actions-container {
      max-height: calc(100vh - 790px) !important;
      border-radius: 8px !important;
  }
  

  
   .theme-primal-life div#equipment-container {
      max-height: calc(100vh - 798px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 798px) !important;
      margin-right: auto;
      align-items: start;
  }
  
    .theme-primal-life div#spells-container {
      max-height: calc(100vh - 798px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 798px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    .theme-primal-life div#feats-container {
      max-height: calc(100vh - 798px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 798px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    .theme-primal-life div#details-container {
      max-height: calc(100vh - 798px) !important;
      border-radius: 4px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
  
}  


/* Bottom Pane */



.theme-primal-life div#content-container + div#tab-container > div:first-child > div:nth-child(2) {
    border: solid !important;
    border-image-slice: 26 26 26 26 !important;
    border-image-width: 11px 11px 11px 11px !important;
    border-image-outset: 0px 6px 6px 6px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-border.png) !important;
    padding-top: 0px !important;
    padding-bottom: 4px !important;
    padding-left: 2px;
    padding-right: 2px;
    margin-bottom: 32px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
    background-color: rgb(15, 15, 15);
}

.theme-primal-life div#content-container + div#tab-container > div:first-child > div:nth-child(2):before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-top-bottom-l.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-top-bottom-r.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-antlers-b.png);
    background-size: 64px, 64px, 248px;
    height: 100px;
    width: calc(100% + 36px);
    position: absolute;
    top: -20px;
    display: block;
    z-index: 1;
    margin-left: -22px;
    margin-right: -22px;
    background-position: top 8px left 6px, top 8px right 2px, top 12px center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
    pointer-events: none;
}

.theme-primal-life div#content-container + div#tab-container > div:first-child > div:nth-child(2):after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-bottom-l.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-bottom-r.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-bottom-c.png);
    background-size: 64px, 64px, 240px;
    height: 80px;
    width: calc(100% + 36px);
    position: absolute;
    bottom: -18px;
    display: block;
    z-index: 1;
    margin-left: -22px;
    margin-right: -22px;
    background-position: bottom 0px left 4px, bottom 0px right 4px, top 44px center;
    background-repeat: no-repeat;
    z-index: 9;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
    pointer-events: none;
}




/* Skills & Actions */

  .theme-primal-life div#skills-actions-container {
    border-radius: 2px !important;
    margin-left: 0px;
  }


/* Skills Section */

.theme-primal-life div#skills-container {
    padding-top: 0px;
    border-radius: 0px;
}

.theme-primal-life div#skills-container div#box-component > div:first-child {
    border: none;
}

.theme-primal-life div#skills-container div#box-content {
     background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-skills-actions.jpg);
    background-size: 1000px;
    background-position: top center, top -216px left 0px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  .theme-primal-life div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      width: calc(50% - 12px);
      bottom: 4px;
      left: 8px;
  }

}


/* Actions & Activites Section */

.theme-primal-life div#actions-container {
    padding-top: 0px;
    border-radius: 0px;
}

.theme-primal-life div#actions-container div#box-component > div:first-child {
    border: none;
}

.theme-primal-life div#actions-container div#box-content {
   background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-skills-actions.jpg);
    background-size: 1000px;
    background-position: top, top -216px right 0px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  .theme-primal-life div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      width: calc(50% - 12px);
      bottom: 4px;
      right: 8px;
  }

}


/* Equipment Section */

.theme-primal-life div#equipment-container {
    border-radius: 2px;
    margin-left: 0px;
}

.theme-primal-life div#equipment-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 140px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-equipment.jpg);
    background-size: 100% auto;
    background-position: top, top -64px left -100px;
    background-repeat: no-repeat;
    border-radius: 8px;
    padding-top: 16px;
}

@media (min-width: 1024px) {

  .theme-primal-life div#equipment-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      left: 8px;
      bottom: 5px;
      border-radius: 2px;
      pointer-events: none;
  }

}

@media (min-width: 1024px) and (min-height: 1080px) {

    .theme-primal-life div#equipment-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-equip-bottom.png);
      background-size: cover, calc(100% - 16px) auto;
      background-repeat: no-repeat;
      background-position: center, left 50% bottom -110px;
      background-color: rgb(32, 32, 32);
    
    }

}



/* Spells Section */


.theme-primal-life div#spells-container {
    border-radius: 2px;
    margin-left: 0px;
}


.theme-primal-life div#spells-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 150px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-spells.jpg);
  background-size: contain;
  background-position: top center, top -20px center;
  background-repeat: no-repeat;
  border-radius: 8px;
  padding-top: 16px;
}

@media (min-width: 1024px) {

  .theme-primal-life div#spells-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      bottom: 5px;
      border-radius: 2px;
      pointer-events: none;
  }

}

@media (min-width: 1024px) and (min-height: 1080px) {

    .theme-primal-life div#spells-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-spells-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Feats & Features Section */


.theme-primal-life div#feats-container {
    border-radius: 2px;
    margin-left: 0px;
}


.theme-primal-life div#feats-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 120px), rgba(0, 0, 0, 0) calc(100% + 80px)),url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-feats.jpg);
    background-size: cover, 100% auto;
    background-position: top, top -116px left 0px;
    background-repeat: no-repeat;
    border-radius: 8px;
    padding-top: 16px;
}


@media (min-width: 1024px) {
  

  .theme-primal-life div#feats-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      bottom: 5px;
      border-radius: 2px;
      pointer-events: none;
  }

}


@media (min-width: 1024px) and (min-height: 1080px) {

    .theme-primal-life div#feats-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-feats-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Details Section */

.theme-primal-life div#details-container {
    margin-left: 0px;
}

.theme-primal-life div#details-container > div {
    padding-left: 0px;
}

.theme-primal-life div#details-container > div:first-child {
    padding-left: 0px;
}

.theme-primal-life div#details-container > div:first-child div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 10%, rgba(0, 0, 0, 0) 200%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/pl-green-bg.jpg);
    background-size: cover;
    background-position: top, top -160px left 0px;
    background-repeat: no-repeat;
    border-radius: 2px;
}


@media (min-width: 1024px) {
  
  .theme-primal-life div#details-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 36px;
    z-index: 9;
    position: absolute;
    background-position: bottom;
    background-size: contain;
    box-sizing: border-box;
    width: calc(100% - 24px);
    bottom: 5px;
    left: 16px;
    border-radius: 12px;
    pointer-events: none;
  }
  
}




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






/* ========== DIVINE PORTENTS THEME ========== */



/* GLOBAL */




/* Sharing Banner Offset */

.theme-divine-portents .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 86px !important;
}

.theme-divine-portents .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    .theme-divine-portents .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */



div.theme-divine-portents.sheet-background {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-bbg.jpg) !important;
    background-repeat: no-repeat !important;
    background-color: rgb(32, 32, 32) !important;
    background-size: 1920px !important;
    background-position: top left calc(50%) !important;
}

.theme-divine-portents div#box-component > div:first-child {
    border: none;
}

.theme-divine-portents div#box-header {
    background: radial-gradient(#152238 40%, transparent 70%);
}

.theme-divine-portents div#BoxHeaderText {
    filter: drop-shadow(0px 0px 6px rgb(15, 15, 15));
}

.theme-divine-portents div#box-content {
    border-radius: 24px;
}


.theme-divine-portents div#top-header-components-container svg path {
     fill: rgb(63 63 63);
}  

/* General Responsive */


@media (min-width: 1024px) and (max-width: 1100px) {
  
.theme-divine-portents div#character-sheet {
      padding-left: 24px;
      padding-right: 24px;
  }
  
}


@media (max-width: 1023px) {
  
    .theme-divine-portents div#top-header-name-container > div:nth-child(2) {
      position: relative;
      z-index: 999;
      padding-left: 32px !important;
      filter: drop-shadow(2px 4px 6px black);
    }

  
}


@media (max-width: 742px) {
  
  .theme-divine-portents div#character-sheet {
    overflow-x: hidden;
  }

  .theme-divine-portents div#top-header-container {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      margin-top: 8px;
      margin-bottom: -8px;
      z-index: 9;
      border-radius: 50px;
      margin-left: -16px !important;
      margin-right: -16px !important;
  }
  
    .theme-divine-portents div#scrollToggledDisplay + div {
        padding-left: 8px;
        margin-left: 8px;
        margin-right: 8px;
        margin-top: 16px;
    }
  
    
  .theme-divine-portents div#tab-container {
    background-color: rgb(15 15 15 / 75%);
  }
  
    .theme-divine-portents div#top-header-name-container h1 {
      font-size: 20px !important;
    }

    .theme-divine-portents div#top-header-name-container h6 {
        font-size: 12px !important;
    }
    
    .theme-divine-portents div#scrollToggledDisplay {
        border: solid !important;
        border-image-slice: 26 26 26 26 !important;
        border-image-width: 11px 11px 11px 11px !important;
        border-image-outset: 2px 2px 2px 2px !important;
        border-image-repeat: stretch stretch !important;
        position: relative;
        z-index: 9;
        border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-frame-image.png) !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: -12px;
        margin-left: 8px !important;
        margin-right: 0px !important;
        min-height: 116px;
        margin-top: 50px !important;
        filter: drop-shadow(0px 0px 8px rgb(32, 32, 32));
        background: linear-gradient(100deg, #f4e2be 40%, rgb(15, 15, 15) 60%);
        background-size: 200%;
        background-position: top left 70%;
        animation: dp-bg 35s ease-in-out 5s infinite normal forwards;
    }

    .theme-divine-portents div#scrollToggledDisplay:before {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-swirling-orb.webp), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-middle-top.png);
        background-size: 22px, 270px;
        height: 42px;
        width: calc(100%);
        position: absolute;
        top: -20px;
        display: block;
        z-index: 1;
        margin-left: 0px;
        margin-right: 0px;
        background-position: top 8px center, top center;
        background-repeat: no-repeat;
    }

    .theme-divine-portents div#scrollToggledDisplay:after {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-bottom-center.png);
        background-size: 270px;
        height: 38px;
        width: calc(100%);
        position: absolute;
        bottom: -26px;
        display: block;
        z-index: 1;
        margin-left: 0px;
        margin-right: 0px;
        background-position: top -2px center;
        background-repeat: no-repeat;
    }
    
    .theme-divine-portents div#top-header-name-container + div > div:first-child > div:first-child {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-hp-button.png);
      background-size: 140px;
      background-position: top left -2px;
      background-repeat: no-repeat;
      border-radius: 0px !important;
      border: none !important;
      background-color: transparent !important;
      position: relative;
      top: 10px;
      height: 140px !important;
      width: 140px !important;
      margin-top: -24px;
    }
  
}
        

/* Top Header Block */

.theme-divine-portents div#top-header-container {
    background: rgb(32 32 32);
    box-shadow: none;
    border: none;
    background-color: rgb(32, 32, 32);
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-gold-energy.webp), linear-gradient(0deg, rgb(26, 24, 24) 5%, rgba(26, 24, 24, 0) 100%), linear-gradient(120deg, rgb(26, 24, 24) 30%, rgba(26, 24, 22, 0) 50%), linear-gradient(270deg, rgb(32, 32, 32) 0%, rgba(0, 0, 0, 0) 20%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-top-header.jpg);
    background-size: auto 130%, auto 120%, auto 200%, auto 150%, auto 100%;
    background-position: top -16px left -14px, top left, top left, top right, top left 28px;
    background-repeat: no-repeat;
    margin-right: -8px;
    margin-left: -8px;
}

@media (min-width: 743px) {
  
    .theme-divine-portents div#top-header-container {
        border-radius: 50px !important;
        margin-bottom: 46px !important;
    }

}


@media (min-width: 0px) {
  
  .theme-divine-portents div#top-header-container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 8px;
    margin-bottom: -8px;
    z-index: 9;
    border-radius: 0px;
    margin-top: -48px;
    margin-bottom: 0px;
  }
  
  .theme-divine-portents div#top-header-name-container {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-inner-circle.png);
    background-size: 76px;
    background-position: left 18px center;
    background-repeat: no-repeat;
    padding-top: 8px;
    padding-bottom: 12px;
    position: relative;
    z-index: 9;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));

  }
  
  .theme-divine-portents div#top-header-name-container:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-circle-spin.png);
    background-size: 96px;
    height: 96px;
    width: 96px;
    position: absolute;
    top: 7px;
    left: 8px;
    display: block;
    background-position: top left;
    z-index: 99;
    filter: drop-shadow(-2px 2px 8px #51bbff);
    background-repeat: no-repeat;
    animation: divine-frame 24s linear 0s infinite normal forwards;
    pointer-events: none;
  }
  

  
  .theme-divine-portents div#top-header-name-container > div:first-child > div:first-child > div:first-child {
    left: 22px !important;
    top: 2px;
    border-radius: 50%;
    border: none;
    height: 52px;
    width: 52px;
    align-self: start;
  }
 

}

@keyframes divine-frame {
	0% {
		transform: rotate(360deg);
	}

	100% {
		transform: rotate(0deg);
	}
}

.theme-divine-portents div#content-container {
    border: solid !important;
    border-image-slice: 26 26 26 26 !important;
    border-image-width: 11px 11px 11px 11px !important;
    border-image-outset: 2px 2px 2px 2px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-frame-image.png) !important;
    padding-top: 0px !important;
    padding-bottom: 16px !important;
    padding-left: 0px;
    padding-right: 8px;
    margin-bottom: -12px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
    filter: drop-shadow(0px 0px 8px rgb(32, 32, 32));
    background: linear-gradient(100deg, #f4e2be 40%, rgb(15, 15, 15) 60%);
    background-size: 200%;
    background-position: top left 70%;
    animation: dp-bg 35s ease-in-out 5s infinite normal forwards;
}

@keyframes dp-bg {
  
	0% {
		background-position: top left 70%;
	}

	33% {
		background-position: top left 100%;
	}
  
	40% {
		background-position: top left 100%;
	}
 
 	66% {
		background-position: top left 30%;
	}
  
 	75% {
		background-position: top left 30%;
	}
  
 	100% {
		background-position: top left 70%;
	}
  
}


.theme-divine-portents div#content-container:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-t-l-b.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-t-r-b.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-swirling-orb.webp), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-middle-top.png);
    background-size: 70px, 70px, 22px, 320px;
    height: 78px;
    width: calc(100% + 28px);
    position: absolute;
    top: -24px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: top 8px left 2.5px, top 8px right 0px, top 11px left calc(50% - 0px), top 0px center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 8px rgb(32, 32, 32));
    pointer-events: none;
}

.theme-divine-portents div#content-container:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-b-left.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-b-right.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-bottom-center.png);
    background-size: 70px, 70px, 240px;
    height: 78px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -18px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: bottom 4px left 2.5px, bottom 4px right, top 48px center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 8px rgb(32, 32, 32));
    pointer-events: none;
}


/* Ability Scores Section */


.theme-divine-portents div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child {
    background-image: linear-gradient(270deg, rgb(32, 32, 32) 0%, transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-spell-circles-BG.jpg);
    background-size: auto 100%, 126% auto;
    background-position: top left, top -100px left -10px;
    background-repeat: no-repeat;
    border-radius: 24px;
}


.theme-divine-portents div[data-id="strength-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-divine-portents div[data-id="dexterity-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-divine-portents div[data-id="constitution-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-divine-portents div[data-id="intelligence-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-divine-portents div[data-id="wisdom-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

.theme-divine-portents div[data-id="charisma-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

/* Armor Class Section */

.theme-divine-portents div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) 20%, rgba(0, 0, 0, 0) 140%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-ac.jpg);
    background-size: cover, 460px;
    background-position: left 0px, top -20px left -72px;
    background-repeat: no-repeat;    
}

/* Hit Points Section */

.theme-divine-portents div#hit-points-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 150%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-hp.jpg);
    background-size: cover, cover;
    background-position: top center, top -88px left 0px;
    background-repeat: no-repeat;
}

.theme-divine-portents div#hp-box-grid > div:first-child > div:nth-child(2) button {
  background-color: #0f0f0f;
  border: 1px solid #3f3f3f;
  font-size: 12px;
  padding: 0px;
  padding-bottom: 4px;
  display: flex;
  align-items: flex-end;
  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-healing.jpg);
  background-size: cover;
  background-position: top 0px center;
  background-repeat: no-repeat;
  border: 1px solid rgb(83, 83, 83);
}

/* Saving Throws Section */

.theme-divine-portents div#saving-throws-component-style div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 50%, rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-saves.jpg);
    background-size: cover;
    background-position: top 0px center, top -50px center;
    background-repeat: no-repeat;
}


/* Speed Section */

.theme-divine-portents div#speed-container div#box-content {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-speed.jpg);
    background-size: cover, 180px;
    background-repeat: no-repeat;
    background-position: left 0px, top -20px left 0px;
}


/* Perception Section */

.theme-divine-portents div#perception-container div#box-content {
   background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 100px), rgba(0, 0, 0, 0) 120%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-perception.jpg);
    background-size: cover, 100px;
    background-repeat: no-repeat;
    background-position: left 0px, top -14px left 0px;
}


/* Tab Container */

.theme-divine-portents div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
    margin-top: 24px;
    background-color: rgba(32, 32, 32, .9);
    border-radius: 24px;

}

/* THEME HEIGHT SETTINGS */

@media (min-width: 1024px) and (min-height: 1080px) {
  
  .theme-divine-portents div#skills-actions-container {
      max-height: calc(100vh - 800px) !important;
      border-radius: 8px !important;
  }
  

  
   .theme-divine-portents div#equipment-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
  }
  
    .theme-divine-portents div#spells-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    .theme-divine-portents div#feats-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    .theme-divine-portents div#details-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 4px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
  
}   

/* Bottom Pane */

.theme-divine-portents div#content-container + div#tab-container > div:first-child > div:nth-child(2) {
    border: solid !important;
    border-image-slice: 26 26 26 26 !important;
    border-image-width: 11px 11px 11px 11px !important;
    border-image-outset: 2px 2px 2px 2px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-frame-image.png) !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  padding-left: 8px;
  padding-right: 8px;
    margin-bottom: 32px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
    filter: drop-shadow(0px 0px 8px rgb(32, 32, 32));
    background: linear-gradient(100deg, #f4e2be 40%, rgb(15, 15, 15) 60%);
    background-size: 200%;
    background-position: top left 70%;
    animation: dp-bg 35s ease-in-out 5s infinite normal forwards;
}

.theme-divine-portents div#content-container + div#tab-container > div:first-child > div:nth-child(2):before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-t-left.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-t-right.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-bottom-center-b.png);
    background-size: 70px, 70px, 240px;
    height: 123px;
    width: calc(100% + 28px);
    position: absolute;
    top: -58px;
    display: block;
    z-index: 9;
    margin-left: -22px !important;
    margin-right: -22px !important;
    background-position: top 3px left 2.5px, top 0px right 1px, top 47px center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.theme-divine-portents div#content-container + div#tab-container > div:first-child > div:nth-child(2):after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-b-left.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-b-right.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-bottom-middle.png);
    background-size: 70px, 70px, 254px;
    height: 78px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -20px;
    display: block;
    z-index: 9;
    margin-left: -22px;
    margin-right: -22px;
    background-position: bottom 6px left 2.5px, bottom 6px right, top 48px center;
    background-repeat: no-repeat;
    pointer-events: none;
}


/* Skills & Actions */

  .theme-divine-portents div#skills-actions-container {
    border-radius: 24px !important;
  }


/* Skills Section */

.theme-divine-portents div#skills-container {
    padding-top: 0px;
    border-radius: 0px;
}

.theme-divine-portents div#skills-container div#box-component > div:first-child {
    border: none;
}

.theme-divine-portents div#skills-container div#box-content {
        background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-skills-actions.jpg);
    background-size: 1000px;
    background-position: top, top 0px left 0px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  .theme-divine-portents div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 12px;
      width: calc(50% - 12px);
      bottom: 11px;
      left: 8px;
  }

}


/* Actions & Activites Section */

.theme-divine-portents div#actions-container {
    padding-top: 0px;
    border-radius: 0px;
}

.theme-divine-portents div#actions-container div#box-component > div:first-child {
    border: none;
}

.theme-divine-portents div#actions-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-skills-actions.jpg);
    background-size: 1000px;
    background-position: top, top 0px right 0px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  .theme-divine-portents div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 24px;
      width: calc(50% - 12px);
      bottom: 11px;
      right: 8px;
  }

}


/* Equipment Section */

.theme-divine-portents div#equipment-container {
    border-radius: 24px;
}

.theme-divine-portents div#equipment-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-equip.jpg);
  background-size: cover, 140% auto;
  background-position: top, top 0px left 50%;
  background-repeat: no-repeat;
  border-radius: 8px;
}

@media (min-width: 1024px) {

  .theme-divine-portents div#equipment-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      left: 8px;
      bottom: 17px;
      border-radius: 24px;
      pointer-events: none;
  }

}

@media (min-width: 1024px) and (min-height: 1080px) {

    .theme-divine-portents div#equipment-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-equipment-bottom.png);
      background-size: cover, calc(100% - 16pxpx) auto;
      background-repeat: no-repeat;
      background-position: center, left 0px bottom -140px;
      background-color: rgb(32, 32, 32);
    
    }

}



/* Spells Section */


.theme-divine-portents div#spells-container {
    border-radius: 24px;
}


.theme-divine-portents div#spells-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 150px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-spells.jpg);
  background-size: contain;
  background-position: top center, top -64px center;
  background-repeat: no-repeat;
  border-radius: 8px;
}

@media (min-width: 1024px) {

  .theme-divine-portents div#spells-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      bottom: 17px;
      border-radius: 24px;
      pointer-events: none;
  }

}

@media (min-width: 1024px) and (min-height: 1080px) {

    .theme-divine-portents div#spells-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-spells-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Feats & Features Section */


.theme-divine-portents div#feats-container {
    border-radius: 24px;
}


.theme-divine-portents div#feats-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 125px), rgba(0, 0, 0, 0) calc(100% + 150px)),url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-feats.jpg);
    background-size: cover, 150% auto;
    background-position: top, top -40px left 20px;
    background-repeat: no-repeat;
    border-radius: 8px;
}


@media (min-width: 1024px) {
  

  .theme-divine-portents div#feats-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      bottom: 18px;
      border-radius: 24px;
      pointer-events: none;
  }

}


@media (min-width: 1024px) and (min-height: 1080px) {

    .theme-divine-portents div#feats-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-feats-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Details Section */

.theme-divine-portents div#details-container div#box-component > div:first-child {


}

.theme-divine-portents div#details-container > div:first-child div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 60%, rgba(0, 0, 0, 0) 120%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/dp-details.jpg);
    background-size: 1000px;
    background-position: top, top -160px left 0px;
    background-repeat: no-repeat;
    border-radius: 24px;
}


@media (min-width: 1024px) {
  
  .theme-divine-portents div#details-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 36px;
    z-index: 9;
    position: absolute;
    background-position: bottom;
    background-size: contain;
    box-sizing: border-box;
    width: calc(100% - 24px);
    bottom: 11px;
    left: 16px;
    border-radius: 12px;
    pointer-events: none;
  }
  
}




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







/* ========== OCCULT MYSTERIES THEME ========== */


/* GLOBAL */


/* Sharing Banner Offset */

div.theme-occult-mysteries .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 86px !important;
}

div.theme-occult-mysteries .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    div.theme-occult-mysteries .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */




.theme-occult-mysteries.sheet-background {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-bbg.jpg) !important;
    background-repeat: no-repeat !important;
    background-color: rgb(15, 15, 15) !important;
    background-size: 1920px !important;
    background-position: top left calc(50% - 8px) !important;
}

div.theme-occult-mysteries div#box-component > div:first-child {
    border: none;
}

div.theme-occult-mysteries div#box-header {
   background: radial-gradient(rgb(173 15 15 / 55%) 25%, transparent 70%);
   padding-top: 4px;
}

div.theme-occult-mysteries div#box-content {
    border-radius: 2px;
}


div.theme-occult-mysteries div#top-header-components-container svg path {
    fill: rgb(186 186 186 / 60%);
}  

/* General Responsive */



@media (min-width: 982px) {
  
    div.theme-occult-mysteries div#top-header-name-container > div:first-child > div:first-child > div:first-child {
        bottom: 12px !important;
    }
  
}


@media (min-width: 1024px) and (max-width: 1100px) {
  
div.theme-occult-mysteries div#character-sheet {
      padding-left: 24px;
      padding-right: 24px;
  }
  
}


@media (max-width: 1023px) {
  
    div.theme-occult-mysteries div#top-header-name-container > div:nth-child(2) {
      position: relative;
      z-index: 999;
      padding-left: 16px !important;
      filter: drop-shadow(2px 4px 6px black);
    }

 }


@media (min-width: 743px) and (max-width: 1023px) {
  
  div.theme-occult-mysteries div#top-header-name-container > div:first-child {
      max-width: 24%;
      flex-basis: 24%;
  }

}


@media (max-width: 742px) {


  div.theme-occult-mysteries div#tab-container div#box-component {
      max-width: 100%;
      padding-left: 0px;
  }


  div.theme-occult-mysteries div#equipment-container, div.theme-occult-mysteries div#spells-container, div.theme-occult-mysteries div#feats-container {
    margin-left: 8px !important;
  }
  
  div.theme-occult-mysteries div#details-container > div:first-child {
      padding-left: 8px;
  }
  
  div.theme-occult-mysteries div#details-container div#box-component > div:first-child {
    padding-left: 0px !important;
  }
  
  div.theme-occult-mysteries div#top-header-name-container:before {
    left: 0px !important;
  }
  
  div.theme-occult-mysteries div#top-header-name-container > div:first-child {
      max-width: 24%;
      flex-basis: 24%;
  }
  
  div.theme-occult-mysteries div#top-header-container > div:first-child > div:first-child > div:first-child {
      justify-content: flex-start;
  }
    
  div.theme-occult-mysteries div#top-header-container {
      background-position: top -40px left -60px, top left, top left, top right, top 0px left -90px !important;
  }
  
  
  div.theme-occult-mysteries div#top-header-name-container {
      max-width: 70%;
      flex-basis: 70%;
  }
    
  
  div.theme-occult-mysteries div#top-header-container {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      margin-bottom: -16px !important;
      z-index: 9;
      border-radius: 50px;
      margin-left: 0px !important;
      margin-right: 0px !important;
  }
  
    div.theme-occult-mysteries div#scrollToggledDisplay + div {
        padding-left: 8px;
        margin-left: 8px;
        margin-right: 8px;
        margin-top: 16px;
    }
  
    div.theme-occult-mysteries div#top-header-name-container > div:first-child > div:first-child > div:first-child {
        left: 18px !important;
        bottom: 8px !important;
        border-radius: 50%;
        border: none;
        height: 52px;
        width: 52px;
        align-self: start;
        z-index: 0;
        filter: drop-shadow(0px 0px 5px white);
    }
  
    
  div.theme-occult-mysteries div#tab-container {
    background-color: rgb(15 15 15 / 75%);
  }
  
    div.theme-occult-mysteries div#top-header-name-container h1 {
      font-size: 20px !important;
    }

    div.theme-occult-mysteries div#top-header-name-container h6 {
        font-size: 12px !important;
    }
    
    div.theme-occult-mysteries div#scrollToggledDisplay {
        border: solid !important;
        border-image-slice: 30 30 30 30 !important;
        border-image-width: 20px 20px 20px 20px !important;
        border-image-outset: 0px 0px 0px 0px !important;
        border-image-repeat: round round !important;
        position: relative;
        z-index: 9;
        border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-border-frame.png) !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: -12px;
        margin-left: 8px !important;
        margin-right: 0px !important;
        min-height: 116px;
        margin-top: 60px !important;
    }

    div.theme-occult-mysteries div#scrollToggledDisplay:before {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-left-silver-a.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-TL-flames.gif), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-right-silver-a.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-TR-flames.gif), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-silver-top.png);
        background-size: 58px, 58px, 58px, 58px, 240px;
        height: 120px;
        width: calc(100% + 28px);
        position: absolute;
        top: -62px;
        display: block;
        z-index: 1;
        margin-left: -14px;
        margin-right: -14px;
        background-position: top 0px left -3px, top 0px left -3px, top 0px right 12px, top 0px right 12px, top 53px center;
        background-repeat: no-repeat;
        filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
        pointer-events: none;
    }

    div.theme-occult-mysteries div#scrollToggledDisplay:after {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-bottom-left-silver.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-bottom-right-silver.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-circles.png);
        background-size: 46px, 46px, 228px;
        height: 76px;
        width: calc(100% + 28px);
        position: absolute;
        bottom: -13px;
        display: block;
        z-index: 1;
        margin-left: -14px;
        margin-right: -14px;
        background-position: bottom 10px left 4px, bottom 10px right 20px, top 50px center;
        background-repeat: no-repeat;
        filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
        pointer-events: none;
    }
    
    div.theme-occult-mysteries div#top-header-name-container + div > div:first-child > div:first-child {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-hp-button.png);
      background-size: 140px;
      background-position: top left -2px;
      background-repeat: no-repeat;
      border-radius: 0px !important;
      border: none !important;
      background-color: transparent !important;
      position: relative;
      top: 10px;
      height: 140px !important;
      width: 140px !important;
      margin-top: -34px;
    }

}
        

/* Top Header Block */

div.theme-occult-mysteries div#top-header-container {
    background: rgb(32 32 32);
    box-shadow: none;
    border: none;
    background-color: rgb(32, 32, 32);
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-c-b-bg.webp), linear-gradient(0deg, rgb(15, 15, 15) 5%, rgba(0, 0, 0, 0) 70%), linear-gradient(120deg, rgb(15, 15, 15) 0%, rgba(0, 0, 0, 0) 80%), linear-gradient(270deg, rgb(15, 15, 15) 0%, rgba(0, 0, 0, 0) 20%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-header.jpg);
    background-size: auto 138%, auto 120%, auto 200%, auto 150%, auto 130%;
    background-position: top -40px left -20px, top left, top left, top right, top 0px left 0px;
    background-repeat: no-repeat;
    margin-right: -8px;
    margin-left: -8px;
    border-radius: 0px !important;
}

@media (min-width: 743px) {
  
    div.theme-occult-mysteries div#top-header-container {
        border-radius: 50px !important;
        margin-bottom: 46px !important;
    }

}



@media (min-width: 0px) {
  
  div.theme-occult-mysteries div#top-header-container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 8px;
    margin-bottom: -8px;
    z-index: 9;
    border-radius: 0px;
    margin-top: -48px;
    margin-bottom: 0px;
  }
  
  

  
 div.theme-occult-mysteries div#top-header-name-container:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-p-frame.png);
    background-size: auto 110%;
    height: 100px;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 28px;
    display: block;
    z-index: 9;
    margin-left: 0px;
    margin-right: 0px;
    background-position: left 11px top -8px;
    background-repeat: no-repeat;
    pointer-events: none;

  }
  

  
  div.theme-occult-mysteries div#top-header-name-container > div:first-child > div:first-child > div:first-child {
    left: 44px;
    bottom: 12px;
    border-radius: 50%;
    border: none;
    height: 52px;
    width: 52px;
    align-self: start;
    z-index: 0;
    filter: drop-shadow(0px 0px 5px white);
  } 

}

div.theme-occult-mysteries div#top-header-name-container {
    padding-left: 8px;
    padding-bottom: 8px;
    align-items: center;
}


div.theme-occult-mysteries div#content-container {
    border: solid !important;
    border-image-slice: 30 30 30 30 !important;
    border-image-width: 20px 20px 20px 20px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-border-frame.png) !important;
    padding-top: 0px !important;
    padding-bottom: 16px !important;
    padding-left: 0px;
    padding-right: 8px;
    margin-bottom: -12px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
    background-color: rgb(32 32 32);
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-smoke-bg.webp);
}





div.theme-occult-mysteries div#content-container:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-left-silver-a.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-TL-flames.gif), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-right-silver-a.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-TR-flames.gif), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-silver-top.png);
    background-size: 64px, 64px, 64px, 64px, 260px;
    height: 120px;
    width: calc(100% + 28px);
    position: absolute;
    top: -69px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: top 0px left 3px, top 0px left 3px, top 0px right 3px, top 0px right 3px, top 58px center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
    pointer-events: none;
}

div.theme-occult-mysteries div#content-container:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-bottom-left-silver.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-bottom-right-silver.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-circles.png);
    background-size: 54px, 54px, 248px;
    height: 76px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -13px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: bottom 10px left 10px, bottom 10px right 10px, top 50px center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
    pointer-events: none;
}


/* Ability Scores Section */


div.theme-occult-mysteries div#ability-scores-container div#box-content {
    background: rgb(32, 32, 32);
}

/* Animation */

div.theme-occult-mysteries div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-planchette-as.png);
    background-size: 50px;
    height: 60px;
    width: 50px;
    position: absolute;
    top: 0px;
    left: 85px;
    display: block;
    z-index: 1;
    margin-left: 7px;
    margin-right: 0px;
    background-position: top 0px center;
    background-repeat: no-repeat;
    animation: planchette-move  90s ease-in-out 0.3s infinite normal forwards;
    filter: drop-shadow(0px 0px 2px rgb(15, 15, 15));
    pointer-events: none;
} 


@keyframes planchette-move {
	
  0% {
		top: 4px;
    left: 85px;
	}
  
  4% {
		top: 4px;
    left: 85px;
    transform: rotate(-3deg);
	}
  	
  8% {
		top: 53px;
    left: 35px;
    transform: rotate(2deg);
	}
  
 10% {
		top: 53px;
    left: 35px;
	}

  14% {
    top: 158px;
    left: 52px;
    transform: rotate(-2deg);
	}
  
  16% {
    top: 158px;
    left: 52px;
	}
  
  20% {
    top: 106px;
    left: 4px;
    transform: rotate(3deg);
	} 

  22% {
    top: 106px;
    left: 4px;
	} 
  
	26% {
		top: 4px;
    left: 85px;
    transform: rotate(0deg);
	}
  
  31% {
		top: 4px;
    left: 85px;
	}
  
  36% {
		top: 105px;
    left: 53px;
    transform: rotate(-2deg);
	}

  39% {
		top: 105px;
    left: 53px;
	}
  
  44% {
		top: 210px;
    left: 12px;
    transform: rotate(1deg);
	}
  
  46% {
		top: 210px;
    left: 12px;
	}
  
  52% {
		top: 4px;
    left: 85px;
    transform: rotate(0deg);
	}
  
  56% {
		top: 4px;
    left: 85px;
	}
  
  60% {
		top: 105px;
    left: 27px;
    transform: rotate(-3deg);
	}
  
  62% {
		top: 105px;
    left: 27px;
	}
  
  64% {
		top: 105px;
    left: 53px;
    transform: rotate(3deg);
	}
  
  66% {
		top: 105px;
    left: 53px;
	}
  
  70% {
		top: 158px;
    left: 44px;
    transform: rotate(-1deg);
	}

  72% {
		top: 158px;
    left: 44px;
	}

  74% {
		top: 159px;
    left: 12px;
    transform: rotate(2deg);
	}
  
  76% {
		top: 159px;
    left: 12px;
	}
  
  80% {
		top: 53px;
    left: 9px;
    transform: rotate(-2deg);
	}
  
  82% {
		top: 53px;
    left: 9px;
	}
  
  87% {
		top: 264px;
    left: 33px;
    transform: rotate(3deg);
	}
  
  89% {
		top: 264px;
    left: 33px;
	}
  
  95% {
		top: 54px;
    left: 17px;
    transform: rotate(-1deg);
	}
 
  97% {
		top: 54px;
    left: 17px;
	}
  
  100% {
		top: 4px;
    left: 85px;
    transform: rotate(0deg);
	}
  
}


/* End Animation */



div.theme-occult-mysteries div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child {
    background-image: linear-gradient(270deg, rgb(32, 32, 32) 0%, transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-spell-circles-BG.jpg);
    background-size: auto 100%, 126% auto;
    background-position: top left, top -100px left -10px;
    background-repeat: no-repeat;
    border-radius: 2px;
}

div.theme-occult-mysteries div#ability-scores-container div#box-content {
    background: transparent;
}

div.theme-occult-mysteries div[data-id="strength-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-occult-mysteries div[data-id="dexterity-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-occult-mysteries div[data-id="constitution-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-occult-mysteries div[data-id="intelligence-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-occult-mysteries div[data-id="wisdom-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-occult-mysteries div[data-id="charisma-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

/* Armor Class Section */

div.theme-occult-mysteries div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) 20%, rgba(0, 0, 0, 0) 150%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-armor.jpg);
    background-size: cover, 460px;
    background-position: left 0px, top -36px left -12px;
    background-repeat: no-repeat;    
}

/* Hit Points Section */

div.theme-occult-mysteries div#hit-points-container {
    padding-right: 4px;
}

div.theme-occult-mysteries div#hit-points-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 80%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-hp-bg.jpg);
    background-size: cover, auto;
    background-position: top center, top -16px left -90px;
    background-repeat: no-repeat;
}

div.theme-occult-mysteries div#hp-box-grid > div:first-child > div:nth-child(2) button {
    background-color: #0f0f0f;
    font-size: 12px;
    padding: 0px;
    padding-bottom: 4px;
    display: flex;
    align-items: flex-end;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-healing.jpg);
    background-size: cover;
    background-position: top 0px center;
    background-repeat: no-repeat;
    border: 1px solid #5c1c16;
}

/* Saving Throws Section */

div.theme-occult-mysteries div#saving-throws-component-style div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 90%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-saves.jpg);
    background-size: 480px;
    background-position: top 0px center, top -44px center;
    background-repeat: no-repeat;
}


/* Speed Section */

div.theme-occult-mysteries div#speed-container div#box-content {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-speed.jpg);
    background-size: cover, 100px;
    background-repeat: no-repeat;
    background-position: left 0px, top -20px left 0px;
}


/* Perception Section */

div.theme-occult-mysteries div#perception-container div#box-content {
   background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 140px), rgba(0, 0, 0, 0) 180%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-perception.jpg);
    background-size: cover, 180px;
    background-repeat: no-repeat;
    background-position: left 0px, top -56px left -42px;
}


/* Tab Container */

div.theme-occult-mysteries div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
    margin-top: 24px;
    background-color: rgba(15, 15, 15, .9);
    border-radius: 2px;

}

/* THEME HEIGHT SETTINGS */

@media (min-width: 1024px) and (min-height: 1080px) {
  
  div.theme-occult-mysteries div#skills-actions-container {
      max-height: calc(100vh - 770px) !important;
      border-radius: 8px !important;
  }
  

  
   div.theme-occult-mysteries div#equipment-container {
      max-height: calc(100vh - 778px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 778px) !important;
      margin-right: auto;
      align-items: start;
  }
  
    div.theme-occult-mysteries div#spells-container {
      max-height: calc(100vh - 778px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 778px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    div.theme-occult-mysteries div#feats-container {
      max-height: calc(100vh - 778px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 778px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    div.theme-occult-mysteries div#details-container {
      max-height: calc(100vh - 778px) !important;
      border-radius: 4px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
  
}  


/* Bottom Pane */



div.theme-occult-mysteries div#content-container + div#tab-container > div:first-child > div:nth-child(2) {
    border: solid !important;
    border-image-slice: 30 30 30 30 !important;
    border-image-width: 20px 20px 20px 20px !important;
    border-image-outset: 0px 0px 0px 0px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-border-frame.png) !important;
    padding-top: 8px !important;
    padding-bottom: 6px !important;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 32px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
    background-color: rgb(15, 15, 15);
}

div.theme-occult-mysteries div#content-container + div#tab-container > div:first-child > div:nth-child(2):before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-left-b.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-TL-flames.gif), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-top-right-b.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-TR-flames.gif), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-bottom-circles.png);
    background-size: 64px, 64px, 64px, 64px, 248px;
    height: 120px;
    width: calc(100% + 28px);
    position: absolute;
    top: -69px;
    display: block;
    z-index: 1;
    margin-left: -22px;
    margin-right: -22px;
    background-position: top 0px left 3px, top 0px left 3px, top 0px right 3px, top 0px right 3px, top 58px center;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
    pointer-events: none;
}

div.theme-occult-mysteries div#content-container + div#tab-container > div:first-child > div:nth-child(2):after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-bottom-left-silver.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-bottom-right-silver.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-silver-top.png);
    background-size: 54px, 54px, 260px;
    height: 72px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -10px;
    display: block;
    z-index: 1;
    margin-left: -22px;
    margin-right: -22px;
    background-position: bottom 7px left 10px, bottom 7px right 10px, top 46px center;
    background-repeat: no-repeat;
    z-index: 9;
    filter: drop-shadow(0px 0px 8px rgb(15, 15, 15));
    pointer-events: none;
}




/* Skills & Actions */

  div.theme-occult-mysteries div#skills-actions-container {
    border-radius: 2px !important;
    margin-left: 0px;
  }


/* Skills Section */

div.theme-occult-mysteries div#skills-container {
    padding-top: 0px;
    border-radius: 0px;
}

div.theme-occult-mysteries div#skills-container div#box-component > div:first-child {
    border: none;
}

div.theme-occult-mysteries div#skills-container div#box-content {
     background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-skills-actions.jpg);
    background-size: 1040px;
    background-position: top center, top -191px left -10px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  div.theme-occult-mysteries div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      width: calc(50% - 12px);
      bottom: 6px;
      left: 8px;
  }

}


/* Actions & Activites Section */

div.theme-occult-mysteries div#actions-container {
    padding-top: 0px;
    border-radius: 0px;
}

div.theme-occult-mysteries div#actions-container div#box-component > div:first-child {
    border: none;
}

div.theme-occult-mysteries div#actions-container div#box-content {
   background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-skills-actions.jpg);
    background-size: 1040px;
    background-position: top, top -191px right -30px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  div.theme-occult-mysteries div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      width: calc(50% - 12px);
      bottom: 6px;
      right: 8px;
  }

}


/* Equipment Section */

div.theme-occult-mysteries div#equipment-container {
    border-radius: 2px;
    margin-left: 0px;
}

div.theme-occult-mysteries div#equipment-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 140px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-equipment.jpg);
    background-size: 100% auto;
    background-position: top, top -64px left -100px;
    background-repeat: no-repeat;
    border-radius: 8px;
}

@media (min-width: 1024px) {

  div.theme-occult-mysteries div#equipment-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      left: 8px;
      bottom: 7px;
      border-radius: 2px;
      pointer-events: none;
  }

}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-occult-mysteries div#equipment-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-equipment-bottom.png);
      background-size: cover, calc(100% - 16pxpx) auto;
      background-repeat: no-repeat;
      background-position: center, left 0px bottom -100px;
      background-color: rgb(32, 32, 32);
    
    }

}



/* Spells Section */


div.theme-occult-mysteries div#spells-container {
    border-radius: 2px;
    margin-left: 0px;
}


div.theme-occult-mysteries div#spells-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 150px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-spells.jpg);
  background-size: contain;
  background-position: top center, top -12px center;
  background-repeat: no-repeat;
  border-radius: 8px;
}

@media (min-width: 1024px) {

  div.theme-occult-mysteries div#spells-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      bottom: 7px;
      border-radius: 2px;
      pointer-events: none;
  }

}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-occult-mysteries div#spells-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-spells-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Feats & Features Section */


div.theme-occult-mysteries div#feats-container {
    border-radius: 2px;
    margin-left: 0px;
}


div.theme-occult-mysteries div#feats-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 120px), rgba(0, 0, 0, 0) calc(100% + 80px)),url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-feats.jpg);
    background-size: cover, 100% auto;
    background-position: top, top -16px left 0px;
    background-repeat: no-repeat;
    border-radius: 8px;
}


@media (min-width: 1024px) {
  

  div.theme-occult-mysteries div#feats-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      bottom: 7px;
      border-radius: 2px;
      pointer-events: none;
  }

}


@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-occult-mysteries div#feats-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-feats-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Details Section */

div.theme-occult-mysteries div#details-container {
    margin-left: 0px;
}

div.theme-occult-mysteries div#details-container > div {
    padding-left: 0px;
}


div.theme-occult-mysteries div#details-container > div:first-child div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 200%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/om-details.jpg);
    background-size: cover;
    background-position: top, top -160px left 0px;
    background-repeat: no-repeat;
    border-radius: 2px;
}


@media (min-width: 1024px) {
  
  div.theme-occult-mysteries div#details-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 36px;
    z-index: 9;
    position: absolute;
    background-position: bottom;
    background-size: contain;
    box-sizing: border-box;
    width: calc(100% - 24px);
    bottom: 7px;
    left: 16px;
    border-radius: 12px;
    pointer-events: none;
  }
  
}




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






/* ========== CLEAN LIGHT THEME ========== */



/* Sharing Banner Offset */

div.theme-clean-light .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 98px !important;
}

div.theme-clean-light .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    div.theme-clean-light .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */


.theme-clean-light div#equipment-container div#other-items label {
    color: #393636;
}

.theme-clean-light div#equipment-container div#other-items .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl {
    background-color: transparent;
    color: #393636;
}


div.theme-clean-light.sheet-background {
    background: rgb(236, 233, 228) !important;
}

div.theme-clean-light div#dice-roller-container {
    filter: drop-shadow(0px 0px 24px #f3f3f3);
    z-index: 99;
}

div.theme-clean-light div#details-container input {
    z-index: 9;
    color: black !important;
    -webkit-text-fill-color: unset !important;
}

.theme-clean-light div#details-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl textarea {
    z-index: 99;
    -webkit-text-fill-color: black !important;
}



@media (max-width: 1024px) {

  div.theme-clean-light div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child {
        background: linear-gradient(360deg, #f3f3f3 0%, rgba(32, 32, 32, 0) 100%);
    }
    
  div.theme-clean-light div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child button {
    color: black;
  } 
  
  div.theme-clean-light div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child button {
    color: black;
  }
  
  div.theme-clean-light div#skills-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) + div + div button {
    color: black;
  }
  
  div.theme-clean-light div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child svg {
    color: black;
  }
  
  div.theme-clean-light div#skills-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) + div + div svg path {
    color: black;
  }
  
  
  
  div.theme-clean-light div#actions-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child {
        background: linear-gradient(360deg, #f3f3f3 0%, rgba(32, 32, 32, 0) 100%);
    }
    
  div.theme-clean-light div#actions-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child button {
    color: black;
  } 
  
  div.theme-clean-light div#actions-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child button {
    color: black;
  }
  
  div.theme-clean-light div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) + div button {
    color: black;
  }
  
  div.theme-clean-light div#actions-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child svg {
    color: black;
  }
  
  div.theme-clean-light div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) + div svg path {
    color: black;
  }
  
}

@media (max-width: 742px) {

    div.theme-clean-light div#top-header-name-container + div > div:first-child > div:first-child {
        background-color: rgb(42, 42, 42);
        padding: 12px;
        height: 75px;
        display: flex;
        width: 75px;
        border: 1px solid #3276b5;
        border-radius: 50%;
        align-items: center;
        margin-right: 8px;
    }
  
     div.theme-clean-light div#scrollToggledDisplay {
       background: rgb(42, 42, 42);
     }
  
  div.theme-clean-light div#scrollToggledDisplay div#box-content > div.MuiGrid-root.MuiGrid-item > div > div > div > div:nth-child(2) {
    background-color: rgb(88 0 6);
    color: white;
}
  
  div.theme-clean-light div#scrollToggledDisplay > div:first-child > div:nth-child(4) > div button {
    background-color: #f3f3f3;
    border: 1px solid rgb(35 70 101);
    color: #234665;
}
  
  div.theme-clean-light div#scrollToggledDisplay > div:first-child > div:nth-child(3) div#box-content > div:nth-child(2) > div:first-child > div:first-child > div:first-child {
    background-color: #f3f3f3;
    border: 1.5px solid #234665;
  }
  

      div.theme-clean-light div#character-sheet div#top-header-container {
        background-color: rgb(32, 32, 32) !important;
        background-image: linear-gradient(0deg, rgb(42, 42, 42) 0%, transparent 80%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/cl-top.jpg) !important;
        border-radius: 0px;
    }
  
  
  div.theme-clean-light div#scrollToggledDisplay > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    background-color: #f3f3f3;
  }
  
  div.theme-clean-light div#scrollToggledDisplay > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child div {
    color: #393636;
  }
  
  div.theme-clean-light div#scrollToggledDisplay div#box-content div#squareComponentContainer,  div.theme-clean-light div#scrollToggledDisplay div#box-content div#squareComponentContainer div#squareComponentContent {
    background-color: #f3f3f3 !important;
  }
  
  div.theme-clean-light div#scrollToggledDisplay div#box-content div#squareComponentContainer, div.theme-clean-light div#scrollToggledDisplay div#box-content div#squareComponentContainer {
    border: 1.5px solid #234665;
  }
  
  div.theme-clean-light div#scrollToggledDisplay div#box-content div#squareComponentContainer div#squareComponentFooter {
    background-color: rgb(63, 63, 63);
    color: white;
  }
  
  
}

div.theme-clean-light div#content-container svg {
  filter: invert(.5);
}

div.theme-clean-light div#content-container + div#tab-container > div:first-child > div:nth-child(2) svg {
  filter: invert(.5);
}

div.theme-clean-light div#top-header-container {
    box-shadow: none;
    border: none;
    background-color: rgb(32, 32, 32) !important;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/cl-top.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-radius: 4px;
}

div.theme-clean-light div#top-header-components-container > div:first-child > div:nth-child(2) > div:first-child {
    font-weight: 400;
    background-color: rgb(42 42 42);
    border: 1px solid #3276b5;
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dice-pointer-icon.svg) 0 20, auto;
}

div.theme-clean-light div#top-header-components-container > div:first-child > div:first-child >div:first-child, div#top-header-components-container > div:first-child > div:first-child > div:nth-child(2) {
    background-color: #2a2a2a;
}

div.theme-clean-light div#box-header {
    background: #234665;
}

div.theme-clean-light div#box-content {
    background: #F3F3F3;
}

div.theme-clean-light div#box-component > div:first-child {
    border-collapse: separate;
    border-radius: 12px;
}

div.theme-clean-light div#box-content div, div.theme-clean-light div#box-content p, div.theme-clean-light div#box-content h1, div.theme-clean-light div#box-content h2, div.theme-clean-light div#box-content h3, div.theme-clean-light div#box-content h4, div.theme-clean-light div#box-content h5, div.theme-clean-light div#box-content h6 {
    color: #393636;
}


div.theme-clean-light div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(1) > div:first-child > div:first-child > div:first-child {
    background-color: #fdfdfd;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

.theme-clean-light div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) > div:first-child div {
    background: #7f7f7f;
}

.theme-clean-light div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) > div:first-child > div > div:first-child > div:first-child {
    color: white;
}

div.theme-clean-light div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child {
    background-color: #f3f3f3;
}

div.theme-clean-light div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child {
    background-color: #580006;
}

div.theme-clean-light div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:first-child > div:first-child > div:first-child {
    color: white !important;
}

div.theme-clean-light div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#hp-box-grid input {
    color: black;
}

div.theme-clean-light div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:first-child {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) > div:first-child {
    background: #7f7f7f;
}

div.theme-clean-light div#hit-points-container svg + div {
    background: #7f7f7f;
}

div.theme-clean-light div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) > div:first-child h6 {
  color: white;
}

div.theme-clean-light div#ability-scores-container .mod-cell p:hover {
    color: black !important;
}

div.theme-clean-light div#ability-scores-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div {
    padding-top: 3.5px;
    padding-bottom: 3.5px;
    margin-bottom: 8px;
    padding-left: 16px;
    padding-right: 8px;
    background: #f3f3f3;
    border: 1px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light .mod-cell > div:first-child {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#squareComponentHeader {
    color: white !important;
    background-color: rgb(63 63 63) !important;
}

div.theme-clean-light div#saving-throws-component-style div#squareComponentContent {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#saving-throws-component-style div#squareComponentFooter {
    background-color: rgb(88 0 6);
    color: white;
}

div.theme-clean-light div#speed-container div#squareComponentContent {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#speed-container div#squareComponentFooter {
    background-color: rgb(63 63 63);
    color: white;
}

div.theme-clean-light div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    background-color: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
    background-color: rgb(88 0 6);
    color: white;
}

/* Sheet Bottom */

div.theme-clean-light div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
    box-shadow: none;
    border: none;
    background-color: rgb(32, 32, 32) !important;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/cl-top.jpg) !important;
    background-size: 120% auto !important;
    background-repeat: no-repeat !important;
    background-position: bottom right;
    border-radius: 4px;
}


div.theme-clean-light .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
    background: #f3f3f3;
    border: 1px solid rgb(42, 42, 42);
    color: black;
}

div.theme-clean-light div.drawer-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary {
    color: white;
    background-color: rgb(15, 15, 15);
}

div.theme-clean-light div.drawer-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary svg {
    filter: invert(0) !important;
}

div.theme-clean-light div:not(.drawer-container) .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary svg {
    filter: invert(1);
}



div.theme-clean-light div#skills-container .MuiCollapse-wrapper.MuiCollapse-vertical > div:first-child > div {
    background: #ece9e4;
}



div.theme-clean-light div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div {
    background: #f3f3f3;
}

div.theme-clean-light button.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeSmall.MuiButton-textSizeSmall.MuiButton-root.MuiButton-text.MuiButton-textPrimary.MuiButton-sizeSmall.MuiButton-textSizeSmall {
    color: #580006;
}

div.theme-clean-light div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    background: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) > div > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
    background-color: rgb(88 0 6);
}

div.theme-clean-light div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) > div > div:first-child > div:first-child > div:nth-child(2) > div:first-child h6 {
    color: white;
}

div.theme-clean-light div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) button:not(.MuiIconButton-root) {
    background-color: #f3f3f3;
    color: #393636;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;

}

div.theme-clean-light div#skills-container button.MuiButton-outlined:hover {
    background-color: rgb(183 183 183);
    color: black;
}


div.theme-clean-light div#skills-container button.MuiButton-outlined {
	background-color: #f3f3f3;
    border: 1.5px solid rgb(35 70 101);
    line-height: 1.6;
    font-size: 0.8125rem;
    height: 36px;
    color: rgb(35 70 101);
}


@media (min-width: 1024px) {

    div.theme-clean-light div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
        filter: invert(100%) sepia(98%) saturate(83%) hue-rotate(283deg) brightness(113%) contrast(91%);
        bottom: 11px;
    }
  
}


div.theme-clean-light div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) {
    background: #f3f3f3;
}

div.theme-clean-light div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 .MuiCollapse-root.MuiCollapse-vertical.MuiCollapse-entered {
    background: #ece9e4;
}

div.theme-clean-light div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div button:not(.MuiIconButton-root) {
    background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}


div.theme-clean-light div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) button {
    filter: invert(6%) sepia(89%) saturate(5074%) hue-rotate(349deg) brightness(76%) contrast(106%) invert(6%) sepia(89%) saturate(5074%) hue-rotate(349deg) brightness(76%) contrast(106%) invert(6%) sepia(89%) saturate(5074%) hue-rotate(349deg) brightness(40%) contrast(106%);
}

div.theme-clean-light div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    background-color: #f3f3f3;
    color: #393636;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}


@media (min-width: 1024px) {

    div.theme-clean-light div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
        filter: invert(100%) sepia(98%) saturate(83%) hue-rotate(283deg) brightness(113%) contrast(91%);
        bottom: 11px;
    }
  
}

/* Equipment */

div.theme-clean-light div#equipment-container {
  background: #f3f3f3;
  border: 1px solid rgb(83, 83, 83);
  border-radius: 12px;
}

div.theme-clean-light div#equipment-container button.MuiButton-outlined {
	background-color: #f3f3f3;
    border: 1.5px solid rgb(35 70 101);
    color: rgb(35 70 101);
}

div.theme-clean-light div#equipment-container button.MuiButton-outlined:hover {
    background-color: rgb(183 183 183);
    color: black;
}


div.theme-clean-light div#character-currency-container > div:first-child > div > div:first-child > div:nth-child(2) {
    filter: drop-shadow(0px 0px 2px black);
}

div.theme-clean-light div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div {
    background: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#equipment-container svg {
  filter: invert(1)
}

@media (min-width: 1024px) {

    div.theme-clean-light div#equipment-container:after {
        filter: invert(100%) sepia(98%) saturate(83%) hue-rotate(283deg) brightness(113%) contrast(91%);
        bottom: 11px;
    }
  
}

div.theme-clean-light div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root) {
    background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}

div.theme-clean-light div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained, div#equipment-container .MuiButton-containedPrimary {
    background-color: rgb(35 70 101);
}


div.theme-clean-light div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root):hover {
    background-color: rgb(183 183 183);
    color: black;
}

div.theme-clean-light div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained:hover, div#equipment-container .MuiButton-containedPrimary:hover {
    background-color: rgb(183 183 183);
    color: black;
}





/* Spells */

div.theme-clean-light div#spells-container {
  background: #f3f3f3;
  border: 1px solid rgb(83, 83, 83);
  border-radius: 12px;
}

div.theme-clean-light div#spells-container button.MuiButton-outlined {
    background-color: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}


div.theme-clean-light div#spells-container button.MuiButton-outlined:hover {
    background-color: rgb(183 183 183);
    color: black;
}

div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:nth-child(2) button{
	background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}

div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    background: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:nth-child(2) button:hover {
    background-color: rgb(183 183 183);
    color: black;
}


div.theme-clean-light div#spells-container svg {
  filter: invert(1)
}

@media (min-width: 1024px) {

    div.theme-clean-light div#spells-container:after {
        filter: invert(100%) sepia(98%) saturate(83%) hue-rotate(283deg) brightness(113%) contrast(91%);
        bottom: 11px;
    }
  
}


div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 div[role="group"] button {
  	background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}

div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 div[role="group"] button svg {
  filter: invert(1) brightness(.75);
}

div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 .MuiButton-contained {
    background-color: rgb(35 70 101);
}

div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 button:not(.MuiIconButton-root) {
    background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}


div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 .MuiButton-contained:hover {
    background-color: rgb(183 183 183);
    color: black;
}

div.theme-clean-light div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 button:not(.MuiIconButton-root):hover {
    background-color: rgb(183 183 183);
    color: black;
}



/* Feats */

div.theme-clean-light div#feats-container {
  background: #f3f3f3;
  border: 1px solid rgb(83, 83, 83);
  border-radius: 12px;
}

div.theme-clean-light div#feats-container button.MuiButton-outlined {
    background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}

div.theme-clean-light div#feats-container button.MuiButton-outlined:hover {
    background-color: rgb(183 183 183);
    color: black;
}


div.theme-clean-light div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:nth-child(2) button {
  	background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}

div.theme-clean-light div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:nth-child(2) button:hover {
    background-color: rgb(183 183 183);
    color: black;
}


div.theme-clean-light div#feats-container div#grid-table-component > div:not(:first-child):not(:nth-child(2)) > div:first-child {
    background: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}

div.theme-clean-light div#feats-container svg {
  filter: invert(1)
}

@media (min-width: 1024px) {

    div.theme-clean-light div#feats-container:after {
        filter: invert(100%) sepia(98%) saturate(83%) hue-rotate(283deg) brightness(113%) contrast(91%);
        bottom: 11px;
    }
  
}


div.theme-clean-light div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 div[role="group"] button {
  	background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}

div.theme-clean-light div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 div[role="group"] button svg {
  filter: invert(1) brightness(.75);
}

div.theme-clean-light div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 .MuiButton-contained {
    background-color: rgb(35 70 101);
}

div.theme-clean-light div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 .MuiButton-contained:hover {
    background-color: rgb(183 183 183);
    color: black;
}

div.theme-clean-light div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child button:not(.selectedFilterButton) {
    background: #f3f3f3;
    color: #234665;
    border: 1.5px solid #234665;
}

div.theme-clean-light div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child button:not(.selectedFilterButton):hover {
    background-color: rgb(183 183 183);
    color: black;
}


/* Details */


.theme-clean-light div#details-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl textarea {
    z-index: 9;
}

div.theme-clean-light div#details-container label {
    color: #393636 !important;
}

div.theme-clean-light div#details-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl fieldset {
    background: #f3f3f3;
    border: 2px solid #ECE7DF;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
}


@media (min-width: 1024px) {

    div.theme-clean-light div#details-container:after {
    filter: invert(100%) sepia(98%) saturate(83%) hue-rotate(283deg) brightness(113%) contrast(91%);
    bottom: 11px;
    width: calc(100% - 10px);
    left: 5px;
    border-radius: 11px;
    }
  
}




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






/* ========== MIGHT & STEEL THEME ========== */

/* GLOBAL */




/* Sharing Banner Offset */

div.theme-might-steel .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 86px !important;
}

div.theme-might-steel .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    div.theme-might-steel .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */


.theme-might-steel.sheet-background {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-bg-t3.jpg) !important;
    background-size: 1920px !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: rgb(15 15 15) !important;
}


div.theme-might-steel div#box-component > div:first-child {
    border: none;
}

div.theme-might-steel div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top center;
    background-repeat: repeat;
    border-radius: 0px;
    filter: drop-shadow(0px 0px 6px rgb(15, 15, 15));
    border-radius: 4px;
}


div.theme-might-steel div#box-content {
    border-radius: 6px;
}


div.theme-might-steel div#top-header-components-container svg path {
    fill: rgb(94 64 61);
} 


/* General Responsive */


@media (min-width: 1024px) and (max-width: 1100px) {
  
div.theme-might-steel div#character-sheet {
      padding-left: 24px;
      padding-right: 24px;
  }
  
}


/* General Responsive */



@media (max-width: 1023px) {
  
    div.theme-might-steel div#top-header-name-container > div:nth-child(2) {
      position: relative;
      z-index: 999;
      padding-left: 32px !important;
      filter: drop-shadow(2px 4px 6px black);
    }
  
}


@media (max-width: 742px) {
  
  div.theme-might-steel div#character-sheet {
    overflow-x: hidden;
  }

  div.theme-might-steel div#top-header-container {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      margin-top: 8px;
      margin-bottom: -8px;
      z-index: 9;
      border-radius: 50px;
      margin-left: -16px !important;
      margin-right: -16px !important;
  }
  
    
  div.theme-might-steel div#tab-container {
    background-color: rgb(15, 15, 15, .75);
  }
  
    div.theme-might-steel div#top-header-name-container h1 {
      font-size: 20px !important;
    }

    div.theme-might-steel div#top-header-name-container h6 {
        font-size: 12px !important;
    }
    
    div.theme-might-steel div#scrollToggledDisplay {
      border: solid !important;
      border-image-slice: 24 24 24 24 !important;
      border-image-width: 16px 0px 16px 0px !important;
      border-image-outset: 4px 3px 4px 3px !important;
      border-image-repeat: round round !important;
      position: relative;
      min-height: 104px;
      z-index: 9;
      border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-chain-frame.png) !important;
      margin-top: 32px;
      margin-bottom: 16px;
    }

    div.theme-might-steel div#scrollToggledDisplay:before {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-top-center.png);
        background-size: 260px;
        height: 82px;
        width: 100%;
        position: absolute;
        top: -22px;
        display: block;
        z-index: 1;
        background-position: top -2px center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

    div.theme-might-steel div#scrollToggledDisplay:after {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-blades.png);
        background-size: 320px;
        height: 74px;
        width: 100%;
        position: absolute;
        bottom: -21px;
        display: block;
        z-index: 1;
        background-position: top 27px center;
        background-repeat: no-repeat;
        pointer-events: none;
    }
    
    div.theme-might-steel div#top-header-name-container + div > div:first-child > div:first-child {
        background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-hp.png);
        background-size: 113px;
        background-position: top 14px left 13px;
        background-repeat: no-repeat;
        border-radius: 0px !important;
        border: none !important;
        background-color: transparent !important;
        position: relative;
        top: 10px;
        height: 140px !important;
        width: 140px !important;
        margin-top: -24px;
    }
  

}



/* Top Header Block */

div.theme-might-steel div#top-header-container {
    background: rgb(32 32 32);
    box-shadow: none;
    border: none;
    background-color: rgb(32, 32, 32);
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-banner-anime.gif), linear-gradient(0deg, rgb(32, 32, 32) 5%, rgba(0, 0, 0, 0) 70%), linear-gradient(120deg, rgb(32, 32, 32) 30%, rgba(0, 0, 0, 0) 100%), linear-gradient(270deg, rgb(32, 32, 32) 0%, rgba(0, 0, 0, 0) 20%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-top-crows.jpg);
    background-size: auto 100%, auto 120%, auto 200%, auto 150%, auto calc(100% + 8px);
    background-position: top 0px left 60px, top left, top left, top right, top -8px right 8px;
    background-repeat: no-repeat;
    margin-right: -8px;
    margin-left: -8px;
  
}

@media (min-width: 0px) {
  
  div.theme-might-steel div#top-header-container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-bottom: 50px;
    margin-top: -48px;
    z-index: 9;
    border-radius: 0px;
  }
  
  div.theme-might-steel div#top-header-name-container {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-portrait-frame.png);
    background-size: 85px;
    background-position: left -8px center;
    background-repeat: no-repeat;
    padding-top: 8px;
    padding-bottom: 12px;
    position: relative;
    z-index: 9;

  }
  

   div.theme-might-steel div#top-header-name-container > div:first-child > div:first-child > div:first-child {
    left: 8px !important;
    top: -1px;
    border-radius: 50%;
    border: none;
    height: 54px;
    width: 54px;
    align-self: start;
  }
 

}

@media (min-width: 743px) and (max-width: 1023px) {
  
   div.theme-might-steel div#top-header-name-container > div:first-child > div:first-child > div:first-child {
    left: 8px !important;
    top: 5px;
    border-radius: 50%;
    border: none;
    height: 54px;
    width: 54px;
    align-self: start;
  }
 

}


div.theme-might-steel div#content-container {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-leather-texture.jpg);
    border: solid !important;
    border-image-slice: 24 24 24 24 !important;
    border-image-width: 16px 16px 16px 16px !important;
    border-image-outset: 4px 3px 4px 3px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-chain-frame.png) !important;
    padding-top: 0px !important;
    padding-bottom: 8px !important;
    padding-left: 0px;
    padding-right: 8px;
    margin-bottom: -12px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
}


div.theme-might-steel div#content-container:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-top-center.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-corner-top-left.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-corner-top-right.png);
    background-size: 260px, 90px, 90px;
    height: 82px;
    width: calc(100% + 28px);
    position: absolute;
    top: -22px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: top -2px center, top 10px left -8px, top 10px right -8px;
    background-repeat: no-repeat;
    pointer-events: none;
}


div.theme-might-steel div#content-container:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-blades.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-corner-bottom-left.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-corner-bottom-right.png);
    background-size: 320px, 72px, 72px;
    height: 74px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -21px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: top 27px center, bottom 6px left -1px, bottom 6px right -1px;
    background-repeat: no-repeat;
    pointer-events: none;
}


/* Center Content Container */

div.theme-might-steel div#center-content-container {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-padded.jpg);
    background-size: auto 110%;
    background-position: left 16px top 24px;
    background-repeat: no-repeat;
    border-radius: 0px;
    pointer-events: none;
    filter: drop-shadow(0px 0px 6px rgb(32 32 32));
}


/* Ability Scores Section */

div.theme-might-steel div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-banded.png) !important;
    background-size: 100% auto !important;
    background-position: bottom -2px center;
    background-repeat: repeat-y;
    background-color: transparent;
    filter: drop-shadow(0px 0px 6px rgb(32 32 32));
}

div.theme-might-steel div#ability-scores-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-left-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-right-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}


div.theme-might-steel div#ability-scores-container div#box-content .MuiDataGrid-columnHeaders {
    background-color: rgb(32 32 32);
}

div.theme-might-steel div#ability-scores-container div#box-content {
    background-color: transparent;
}

div.theme-might-steel div[data-id="strength-row"] {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-black-leather-texture.png) !important;
    filter: drop-shadow(0px 0px 4px rgba(32, 32, 32, .5));
}

div.theme-might-steel div[data-id="dexterity-row"] {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-black-leather-texture.png) !important;
    background-size: 130% !important;
    filter: drop-shadow(0px 0px 4px rgba(32, 32, 32, .5));
}

div.theme-might-steel div[data-id="constitution-row"] {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-black-leather-texture.png) !important;
    background-size: 120% !important;
    filter: drop-shadow(0px 0px 4px rgba(32, 32, 32, .5));
}

div.theme-might-steel div[data-id="intelligence-row"] {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-black-leather-texture.png) !important;
    background-size: 110% !important;
    filter: drop-shadow(0px 0px 4px rgba(32, 32, 32, .5));
}

div.theme-might-steel div[data-id="wisdom-row"] {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-black-leather-texture.png) !important;
    background-size: 125% !important;
    filter: drop-shadow(0px 0px 4px rgba(32, 32, 32, .5));
}

div.theme-might-steel div[data-id="charisma-row"] {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-black-leather-texture.png) !important;
    background-size: 105% !important;
    filter: drop-shadow(0px 0px 4px rgba(32, 32, 32, .5));
}


/* Armor Class Section */

div.theme-might-steel div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-scale-bg.png) !important;
    background-size: 100% auto;
    background-position: bottom -10px center;
    background-repeat: no-repeat;
    background-color: transparent;    
}


div.theme-might-steel div#armor-class-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-rune-ac.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-rune-armor.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}

div.theme-might-steel div#armor-class-container div#box-header:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-armor-glow.png);
    background-size: contain;
    height: 38px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    z-index: 9;
    background-position: top left;
    background-repeat: no-repeat;
    filter: drop-shadow(-6px 0px 8px rgb(50, 118, 181));
    pointer-events: none;
    opacity: 1;
    animation: armor-fade 12s linear;
    animation-iteration-count: infinite;
}


/* Armor Class Section */

div.theme-might-steel div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-scale-bg.png) !important;
    background-size: 100% auto;
    background-position: bottom -10px center;
    background-repeat: no-repeat;
    background-color: transparent;    
}


div.theme-might-steel div#armor-class-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-rune-ac.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-rune-armor.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}

div.theme-might-steel div#armor-class-container div#box-header:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-armor-glow.png);
    background-size: contain;
    height: 38px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    z-index: 9;
    background-position: top left;
    background-repeat: no-repeat;
    filter: drop-shadow(-6px 0px 8px rgb(50, 118, 181));
    pointer-events: none;
    opacity: 1;
    animation: armor-fade 12s linear;
    animation-iteration-count: infinite;
}

div.theme-might-steel div#armor-class-container div#box-header:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-fort-glow.png);
    background-size: contain;
    height: 38px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    display: block;
    z-index: 9;
    background-position: top right;
    background-repeat: no-repeat;
    filter: drop-shadow(6px 0px 8px rgb(50, 118, 181));
    pointer-events: none;
    opacity: 1;
    animation: fortification-fade 10s linear;
    animation-iteration-count: infinite;
}


@keyframes armor-fade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  15% {
    opacity: .6;
  }
  20% {
    opacity: 1;
  }
  25% {
    opacity: .7;
  }
  30% {
    opacity:1;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fortification-fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  18% {
    opacity: .6;
  }
  25% {
    opacity: 1;
  }
  35% {
    opacity: .7;
  }
  40% {
    opacity:1;
  }
  50% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}



/* Hit Points Section */

div.theme-might-steel div#hit-points-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-left-hit-points.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-right-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}


div.theme-might-steel div#hit-points-container div#box-content {
  background-image:  url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-chain-dark.png);
  background-size: 104% auto;
  background-position: top 0px center;
  background-repeat: no-repeat;
  background-color: rgb(32 32 32);
  border-radius: 0px;
}

div.theme-might-steel div#hp-box-grid > div:first-child > div:nth-child(2) button {
    background-color: #0f0f0f;
    border: 1px solid #3f3f3f;
    font-size: 12px;
    padding: 0px;
    padding-bottom: 4px;
    display: flex;
    align-items: flex-end;
    background-image: linear-gradient(0deg, rgb(42 42 42) 0%, transparent 40%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-healing-potion.jpg);
    background-size: cover, cover;
    background-position: top 0px center;
    background-repeat: no-repeat;
}

/* Saving Throws Section */

div.theme-might-steel div#saving-throws-component-style div#box-content {
    background-image: none;
    background-color: transparent;
    background-size: 480px;
    background-position: top 0px center, top -70px center;
    background-repeat: no-repeat;
}

div.theme-might-steel div#saving-throws-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-rune-saves.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-right-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}

div.theme-might-steel div#saving-throws-container div#box-header:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-saving-throws-glow.png);
    background-size: contain;
    height: 38px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 1px;
    display: block;
    z-index: 9;
    background-position: top left;
    background-repeat: no-repeat;
    filter: drop-shadow(-6px 0px 8px rgb(50, 118, 181)) drop-shadow(6px 0px 8px rgb(50, 118, 181));
    pointer-events: none;
    opacity: 1;
    animation: saves-fade 14s linear;
    animation-iteration-count: infinite;
}


@keyframes saves-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  45% {
    opacity: .6;
  }
  50% {
    opacity: 1;
  }
  55% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/* Speed Section */

div.theme-might-steel div#speed-container div#box-content {
    background-image: none;
    background-color: transparent;
    background-size: cover, 185px;
    background-repeat: no-repeat;
    background-position: top left 0px, top -59px left -40px;
}

div.theme-might-steel div#speed-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-left-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-speed-right.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}

div.theme-might-steel div#speed-container div#box-header:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-speed-blue-glow.png);
    background-size: contain;
    height: 37px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 1px;
    display: block;
    z-index: 9;
    background-position: top right;
    background-repeat: no-repeat;
    filter: drop-shadow(-6px 0px 6px rgb(50, 118, 181));
    pointer-events: none;
    opacity: 1;
    animation: speed-fade 8s linear;
    animation-iteration-count: infinite;
}


@keyframes speed-fade {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  12% {
    opacity: .6;
  }
  15% {
    opacity: 1;
  }
  18% {
    opacity: .6;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/* Perception Section */

div.theme-might-steel div#perception-container div#box-content {
    background-image: none;
    background-color: transparent;
    background-size: cover, 100px;
    background-repeat: no-repeat;
    background-position: left 0px, top -24px left -22px;
}

div.theme-might-steel div#perception-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-perception.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-right.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}

div.theme-might-steel div#perception-container div#box-header:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-perception-glow.png);
    background-size: contain;
    height: 38px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 1px;
    display: block;
    z-index: 9;
    background-position: top left;
    background-repeat: no-repeat;
    filter: drop-shadow(-6px 0px 6px rgb(50, 118, 181));
    pointer-events: none;
    opacity: 1;
    animation: perception-fade 8s linear;
    animation-iteration-count: infinite;
}



@keyframes perception-fade {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  22% {
    opacity: .6;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: .7;
  }
  400% {
    opacity:1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


/* Tab Container */

div.theme-might-steel div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
    margin-top: 24px;
    background-color: rgba(32, 32, 32, .75);

}

/* THEME HEIGHT SETTINGS */

@media (min-width: 1024px) and (min-height: 1080px) {
  
  div.theme-might-steel div#skills-actions-container {
      max-height: calc(100vh - 800px) !important;
      border-radius: 8px !important;
  }
  

  
   div.theme-might-steel div#equipment-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
  }
  
    div.theme-might-steel div#spells-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    div.theme-might-steel div#feats-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    div.theme-might-steel div#details-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 4px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
  
}   


/* Bottom Pane */


div.theme-might-steel div#content-container + div#tab-container > div:first-child > div:nth-child(2) {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-leather-texture.jpg);
    border: solid !important;
    border-image-slice: 24 24 24 24 !important;
    border-image-width: 16px 16px 16px 16px !important;
    border-image-outset: 4px 3px 4px 3px !important;
    border-image-repeat: round round !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-chain-frame.png) !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 24px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
}

div.theme-might-steel div#content-container + div#tab-container > div:first-child > div:nth-child(2):before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-blades.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-corner-top-left-bottom.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-corner-top-right-bottom.png);
    background-size: 320px, 72px, 72px;
    height: 74px;
    width: calc(100% + 28px);
    position: absolute;
    top: -20px;
    left: 0px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: top -10px center, top 5px left -2px, top 5px right;
    background-repeat: no-repeat;
    pointer-events: none;
}

div.theme-might-steel div#content-container + div#tab-container > div:first-child > div:nth-child(2):after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-spear-tips.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-corner-bottom-left.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-corner-bottom-right.png);
    background-size: 340px, 72px, 72px;
    height: 74px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -21px;
    left: 0px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: top 25px center, bottom 6px left -1px, bottom 6px right -1px;
    background-repeat: no-repeat;
    pointer-events: none;
}


/* Skills & Actions */

  div.theme-might-steel div#skills-actions-container {
    border-radius: 4px !important;
  }


/* Skills Section */

div.theme-might-steel div#skills-container {
    padding-top: 0px;
    border-radius: 0px;
}

div.theme-might-steel div#skills-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-left-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-right-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}

div.theme-might-steel div#skills-container div#box-component > div:first-child {
    border: none;
}

div.theme-might-steel div#skills-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-arena.jpg);
    background-size: 1030px;
    background-position: top center, top -50px left -8px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  div.theme-might-steel div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 12px;
      width: calc(50% - 12px);
      bottom: 11px;
      left: 8px;
  }

}


/* Actions & Activites Section */

div.theme-might-steel div#actions-container {
    padding-top: 0px;
    border-radius: 0px;
}

div.theme-might-steel div#actions-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-left-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-right-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}

div.theme-might-steel div#actions-container div#box-component > div:first-child {
    border: none;
}

div.theme-might-steel div#actions-container div#box-content {
   background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-arena.jpg);
    background-size: 1030px;
    background-position: top center, top -50px left -506px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  div.theme-might-steel div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 24px;
      width: calc(50% - 12px);
      bottom: 11px;
      right: 8px;
  }

}


/* Equipment Section */

div.theme-might-steel div#equipment-container {
    border-radius: 4px;
}

div.theme-might-steel div#equipment-container div#box-content {
   background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-equipment.jpg);
    background-size: cover, 100% auto;
    background-position: top center, top -206px left;
    background-repeat: no-repeat;
    border-radius: 0px;
}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-might-steel div#equipment-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-equip-bottom.png);
      background-size: cover, calc(100% - 16pxpx) auto;
      background-repeat: no-repeat;
      background-position: center, left 0px bottom -140px;
      background-color: rgb(32, 32, 32);
    
    }

}



/* Spells Section */


div.theme-might-steel div#spells-container {
    border-radius: 4px;
}


div.theme-might-steel div#spells-container div#box-content {
   background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 150px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-spells.jpg);
    background-size: cover, auto 100%;
    background-position: top center, top -86px center;
    background-repeat: no-repeat;
    border-radius: 0px;
}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-might-steel div#spells-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/spells-section-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Feats & Features Section */


div.theme-might-steel div#feats-container {
    border-radius: 4px;
}


div.theme-might-steel div#feats-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 125px), rgba(0, 0, 0, 0) calc(100% + 150px)),url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-feats.jpg);
    background-size: cover, 100% auto;
    background-position: top, top -100px left 0px;
    background-repeat: no-repeat;
    border-radius: 0px;
}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-might-steel div#feats-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-feats-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Details Section */

div.theme-might-steel div#details-container > div:not(:first-child) {
  padding-left: 0px;
}

div.theme-might-steel div#details-container div#box-component {
  padding-left: 0px;
}

div.theme-might-steel div#details-container div#box-header {
    background-color: transparent;
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-left-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-right-header.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-header-long.jpg);
    background-size: auto 100%;
    background-position: top left, top right, top center;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0px;
    pointer-events: none;

}

div.theme-might-steel div#details-container > div:first-child div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 60%, rgba(0, 0, 0, 0) 120%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/mm-details.jpg);
    background-size: cover, 1020px;
    background-position: top center, top -80px center;
    background-repeat: no-repeat;
    border-radius: 4px;
}


@media (min-width: 1024px) {
  
  div.theme-might-steel div#details-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.75) 60%, rgba(32,32,32,0) 100%);
      height: 36px;
    z-index: 9;
    position: absolute;
    background-position: bottom;
    background-size: contain;
    box-sizing: border-box;
    width: calc(100% - 24px);
    bottom: 11px;
    left: 16px;
    border-radius: 12px;
    pointer-events: none;
  }
  
}

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




/* ========== HERO UNLEASHED THEME ========== */


/* GLOBAL */


/* Sharing Banner Offset */

div.theme-hero-unleashed .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 98px !important;
}

div.theme-hero-unleashed .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    div.theme-hero-unleashed .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */



.theme-hero-unleashed.sheet-background {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/character_sheet_bg.jpg) 50% 0% !important;
    background-color: #09090a !important;
}

div.theme-hero-unleashed div#box-component > div:first-child {
    border-collapse: separate;
    border-radius: 8px;
    border: 1px solid rgba(241, 206, 134, .5) !important;
}


div.theme-hero-unleashed div#top-header-components-container svg path {
    fill: rgba(241, 206, 134, .5);
}

/* Responsive */

@media (max-width: 742px) {

    div.theme-hero-unleashed div#top-header-name-container h1 {
      font-size: 20px !important;
    }

    div.theme-hero-unleashed div#top-header-name-container h6 {
        font-size: 12px !important;
    }
    
}
        


/* Top Header Block */

div.theme-hero-unleashed div#top-header-container {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 5%, rgba(0, 0, 0, 0) 70%), linear-gradient(270deg, rgb(13, 13, 13) 25%, rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/red-texture-BG.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  div.theme-hero-unleashed div#top-header-container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  
  div.theme-hero-unleashed div#top-header-name-container {
    background-image: linear-gradient(90deg, rgba(32, 32, 32, 0.5) 0%, rgba(32, 32, 32, 0.25) 70px, rgba(0, 0, 0, 0) 120px), url(https://content.demiplane.com/nexus/pathfinder-2e/theme-frame.png);
    background-size: cover, 112px;
    background-position: left center;
    background-repeat: no-repeat;
    position: relative;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  div.theme-hero-unleashed div#top-header-name-container > div:first-child > div:first-child > div:first-child {
      left: -18px;
  }

}


/* Ability Scores Section */

div.theme-hero-unleashed div[data-id="strength-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) 30%, rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/row-strength-mallet.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-hero-unleashed div[data-id="dexterity-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) 30%, rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/row-dexterity-key.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-hero-unleashed div[data-id="constitution-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) 30%, rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/row-constitution-shield.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-hero-unleashed div[data-id="intelligence-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) 30%, rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/row-intelligence-book.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-hero-unleashed div[data-id="wisdom-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) 30%, rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/row-wisdom-star.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 3px center;
}

div.theme-hero-unleashed div[data-id="charisma-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) 30%, rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/row-charisma-crown.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

/* Armor Class Section */

div.theme-hero-unleashed div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) 30%, rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/armor-gallery-BG.jpg);
    background-size: cover, 510px;
    background-position: left 0px, top -42px left -28px;
    background-repeat: no-repeat;    
}

/* Hit Points Section */

div.theme-hero-unleashed div#hit-points-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 90%), url(https://content.demiplane.com/nexus/pathfinder-2e/red-texture-BG.jpg);
  background-size: 800px;
  background-repeat: no-repeat;
}

div.theme-hero-unleashed div#hp-box-grid > div:first-child > div:nth-child(2) button {
  background-color: #0f0f0f;
  border: 1px solid #3f3f3f;
  font-size: 12px;
  padding: 0px;
  padding-bottom: 4px;
  display: flex;
  align-items: flex-end;
  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/healing-potion-button.jpg);
  background-size: cover;
  background-position: top -4px center;
  background-repeat: no-repeat;
}

/* Saving Throws Section */

div.theme-hero-unleashed div#saving-throws-component-style div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 35%, rgba(0, 0, 0, 0) 180%), url(https://content.demiplane.com/nexus/pathfinder-2e/saving-throws-BG.jpg);
    background-size: 470px;
    background-position: top 0px center, top -103px left -166px;
    background-repeat: no-repeat;
}


/* Speed Section */

div.theme-hero-unleashed div#speed-container div#box-content {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 90px), rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/speed-block-BG.jpg);
    background-size: cover, 145px;
    background-repeat: no-repeat;
    background-position: left 0px, top -56px left -39px;
}


/* Perception Section */

div.theme-hero-unleashed div#perception-container div#box-content {
  background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 100px), rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/perception-BG.jpg);
  background-size: cover, 200px;
  background-repeat: no-repeat;
  background-position: left 0px, top -9px left -6px;
}


/* Skills Section */

div.theme-hero-unleashed div#skills-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/skills-actions-BG.jpg);
    background-size: 1100px;
    background-position: top, top -206px left -60px;
    background-repeat: no-repeat;
}

/* Actions & Activites Section */

div.theme-hero-unleashed div#actions-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) 79%, rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/skills-actions-BG.jpg);
  background-size: 1100px;
  background-position: top, top -206px right -81px;
  background-repeat: no-repeat;
}


/* Equipment Section */


div.theme-hero-unleashed div#equipment-container {
    border: 1px solid rgba(241, 206, 134, .5) !important;
}


div.theme-hero-unleashed div#equipment-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/equipment-BG.jpg);
  background-size: 1200px;
  background-position: top, top -18px left -170px;
  background-repeat: no-repeat;
  border-radius: 8px;
}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-hero-unleashed div#equipment-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/equipment-section-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}



/* Spells Section */


div.theme-hero-unleashed div#spells-container {
    border: 1px solid rgba(241, 206, 134, .5) !important;
}


div.theme-hero-unleashed div#spells-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 150px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/spells-background.jpg);
  background-size: contain;
  background-position: top center, top -12px center;
  background-repeat: no-repeat;
  border-radius: 8px;
}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-hero-unleashed div#spells-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/spells-section-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}



/* Feats & Features Section */


div.theme-hero-unleashed div#feats-container {
    border: 1px solid rgba(241, 206, 134, .5) !important;
}


div.theme-hero-unleashed div#feats-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 125px), rgba(0, 0, 0, 0) calc(100% + 150px)),url(https://content.demiplane.com/nexus/pathfinder-2e/feats-features-BG.jpg);
    background-size: 1200px;
    background-position: top, top -18px left 0px;
    background-repeat: no-repeat;
    border-radius: 8px;
}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-hero-unleashed div#feats-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/feats-section-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Details Section */

div.theme-hero-unleashed div#details-container > div:first-child div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 60%, rgba(0, 0, 0, 0) 120%), url(https://content.demiplane.com/nexus/pathfinder-2e/appearance-BG.jpg);
    background-size: 1000px;
    background-position: top, top -64px left 0px;
    background-repeat: no-repeat;
    border-radius: 8px;
}



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



/* ========== HARROWED DESTINY THEME ========== */



/* GLOBAL */


/* Sharing Banner Offset */

div.theme-harrowed-destiny .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 104px !important;
}

div.theme-harrowed-destiny .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    div.theme-harrowed-destiny .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }
    
    div.theme-harrowed-destiny .viewingBannerSticky + div div#character-sheet div#top-header-container {
        margin-bottom: 86px !important;
    }

}

/* End Banner Offset */



.theme-harrowed-destiny.sheet-background {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrowed-destiny-background.jpg) !important;
    background-size: 1960px auto !important;
    background-position: top left calc(50% - 4px) !important;
    background-repeat: no-repeat !important;
    background-color: rgb(32 32 32) !important;
}


/* General Responsive */


@media (min-width: 1024px) and (max-width: 1100px) {
  
  div.theme-harrowed-destiny div#character-sheet {
      padding-left: 24px;
      padding-right: 24px;
  }
  
}


@media (max-width: 742px) {

  div.theme-harrowed-destiny div#character-sheet {
      padding-left: 16px;
      padding-right: 16px;
      margin-top: -16px;
  }

  
  div.theme-harrowed-destiny div#scrollToggledDisplay {
    padding-right: 8px !important;
    margin-left: 8px;
    margin-right: 0px !important;
    margin-top: -14px !important;
    border-radius: 2px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border: 1px solid #f1ce86;
    border-bottom-color: #f1ce86 !important;
    filter: drop-shadow(0px 0px 8px rgb(15 15 15));
  }
  
  div.theme-harrowed-destiny div#scrollToggledDisplay + div {
    margin-right: 0px !important;
  }
  
  div.theme-harrowed-destiny div#scrollToggledDisplay > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    border-color: #f1ce86;
  }
  
  div.theme-harrowed-destiny div#scrollToggledDisplay > div:first-child > div:nth-child(4) > div button {
    border-color: #f1ce86 !important;
  }
  
  div.theme-harrowed-destiny div#scrollToggledDisplay div#box-content div#squareComponentContainer, .theme-harrowed-destiny div#scrollToggledDisplay div#box-content div#squareComponentContainer div#squareComponentContent {
    border-color: #f1ce86 !important;
  }

  div.theme-harrowed-destiny div#scrollToggledDisplay div#box-content > div.MuiGrid-root.MuiGrid-item > div > div > div {
      border-color: #f1ce86 !important;
  }
  
  
  div.theme-harrowed-destiny div#top-header-name-container + div > div:first-child > div:first-child {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-circle-heal.png);
    background-size: contain;
    background-repeat: no-repeat;
    border: none !important;
    height: 90px !important;
    width: 90px !important;
    border-radius: 0px !important;
    position: relative;
    top: 10px;
    left: calc(100% - 84px);
    padding-top: 0px !important;
    padding-bottom: 16px !important;
    background-color: transparent !important;
  }
  
    div.theme-harrowed-destiny div#top-header-name-container + div > div:first-child > div:first-child p {
      color: #CFCFCF;
    }
    
    div.theme-harrowed-destiny div#top-header-name-container + div > div:first-child > div:first-child > div > div:first-child p {
      color: white;
    }
    
    div.theme-harrowed-destiny div#top-header-name-container h1 {
      font-size: 20px !important;
    }
    


  div.theme-harrowed-destiny div#scrollToggledDisplay + div {
    margin-left: 8px;
    margin-right: 0px;
    margin-top: 16px;
    margin-bottom: 16px;
    border: solid !important;
    border-image-slice: 37 37 37 37 !important;
    border-image-width: 15px 15px 15px 15px !important;
    border-image-outset: 0px 0px 8px 0px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    padding: 8px !important;
    padding-bottom: 0px !important;
    min-width: calc(100% + 8px);
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-border.png) !important;
  }
  
  div.theme-harrowed-destiny div#tab-container div#skills-actions-container {
    margin-top: 0px !important;
  }
  
  div.theme-harrowed-destiny div#spells-container > div:first-child > div:first-child {
    padding-right: 0px !important;
  }
  
  div.theme-harrowed-destiny div#feats-container > div:first-child > div:first-child {
    padding-right: 0px !important;
  }
  
  
  

}

div.theme-harrowed-destiny div#avatar-box {
    height: 62px;
    width: 62px;
}


div.theme-harrowed-destiny div#box-component > div:first-child {
    border-collapse: separate;
    border-radius: 8px;
    border: 1px solid rgba(241, 206, 134, .5) !important;
}


div.theme-harrowed-destiny div#top-header-components-container svg path {
    fill: rgba(241, 206, 134, .5);
} 


div.theme-harrowed-destiny div#content-container + div#tab-container > div:first-child > div:nth-child(2) {
    margin-top: 16px;
    margin-bottom: 16px;
    border: solid !important;
    border-image-slice: 37 37 37 37 !important;
    border-image-width: 15px 15px 15px 15px !important;
    border-image-outset: 0px 0px 8px 0px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    padding: 8px !important;
    padding-bottom: 0px !important;
    min-width: calc(100% + 8px);
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-border.png) !important;
}

div.theme-harrowed-destiny div#content-container {
    border: solid;
    border-image-slice: 37 37 37 37;
    border-image-width: 15px 15px 15px 15px;
    border-image-outset: 0px 8px 8px 0px;
    border-image-repeat: stretch stretch;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-border.png);
    margin-top: 4px;
    margin-bottom: 16px;
    padding-top: 0px;
    background-color: rgb(15, 15, 15);
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 5%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 72px), rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/sheet-harrow-top.jpg);
    background-size: contain, cover;
    background-position: left top;
    background-repeat: no-repeat;
}

div.theme-harrowed-destiny div#box-header {
    border-radius: 0px;
}

div.theme-harrowed-destiny div#BoxHeaderText {
    background-color: #1e2538;
}

div.theme-harrowed-destiny div#box-component > div:first-child {
    border: none !important;
}

div.theme-harrowed-destiny div#box-content {
    border-radius: 1px;
}


/* THEME HEIGHT SETTINGS */

@media (min-width: 1024px) and (min-height: 1080px) {
  
  div.theme-harrowed-destiny div#skills-actions-container {
      max-height: calc(100vh - 812px) !important;
      border-radius: 8px !important;
  }
  
   div.theme-harrowed-destiny div#equipment-container {
      max-height: calc(100vh - 812px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 812px) !important;
      margin-right: auto;
      align-items: start;
  }
  
    div.theme-harrowed-destiny div#spells-container {
      max-height: calc(100vh - 812px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 812px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    div.theme-harrowed-destiny div#feats-container {
      max-height: calc(100vh - 812px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 812px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    div.theme-harrowed-destiny div#details-container {
      max-height: calc(100vh - 812px) !important;
      border-radius: 4px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
  
}   
        


/* Top Header Block */


div.theme-harrowed-destiny div#top-header-name-container > div:nth-child(2) {
    max-width: 75%;
    flex-basis: 75%;
}

div.theme-harrowed-destiny div#top-header-container {
    border: solid;
    border-image-slice: 37 37 37 37;
    border-image-width: 15px 15px 15px 15px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-border.png);
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 64px;
    margin-left: -8px;
    margin-right: -8px;
    margin-top: -32px;
    min-width: calc(100% + 8px);
}

div.theme-harrowed-destiny div#top-header-container > div:first-child {
    background-color: rgb(32, 32, 32);
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 5%, rgba(0, 0, 0, 0) 70%), linear-gradient(0deg, rgb(32, 32, 32) 0%, rgba(0, 0, 0, 0) 110%), linear-gradient(270deg, rgb(32, 32, 32) 0%, rgba(0, 0, 0, 0) 50%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-top.jpg);
    background-size: auto 120%, auto 200%, auto 150%, auto 150%;
    background-position: top left, top left, top right, top left -100px;
    background-repeat: no-repeat;
    margin-right: 8px;
    margin-left: 8px;
    border-radius: 4px;
}


@media (min-width: 1024px) {

  div.theme-harrowed-destiny div#top-header-name-container:before {
      content: "";
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/gold-portrait.png);
      display: block;
      background-size: auto 100%;
      height: 134px;
      margin-left: -52px;
      margin-top: 4px;
      margin-bottom: -48px;
      width: 148px;
      background-position: left 0px top 0px;
      background-repeat: no-repeat;
      z-index: 9;
      position: relative;
      filter: drop-shadow(0px 0px 6px black);
      pointer-events: none;
  }
  
  div.theme-harrowed-destiny div#top-header-name-container > div:first-child {
    margin-left: -111px;
    margin-right: -24px;
    margin-top: -7px;
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/sheet-harrow-left-frame.png);
    background-size: contain;
    background-position: left -2px top;
    background-repeat: no-repeat;
  }

}

div.theme-harrowed-destiny div#top-header-name-container {
    background-image: none !important;
}



@media (min-width: 1024px) {
  
  
  div.theme-harrowed-destiny div#top-header-name-container {
    background-image: linear-gradient(90deg, rgba(32, 32, 32, 0.5) 0%, rgba(32, 32, 32, 0.25) 70px, rgba(0, 0, 0, 0) 120px), url(https://content.demiplane.com/nexus/pathfinder-2e/theme-frame.png);
    background-size: cover, 112px;
    background-position: left center;
    background-repeat: no-repeat;
    position: relative;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  
  div.theme-harrowed-destiny div#top-header-name-container > div:first-child > div:first-child > div:first-child {
    left: -14px;
    top: 4px;
    height: 72px;
    width: 72px;
    border-radius: 50%;
  }
 

}


/* Ability Scores Section */


div.theme-harrowed-destiny div[data-id="strength-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) calc(20px), rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-strength-mallet.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-harrowed-destiny div[data-id="dexterity-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) calc(20px), rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-dexterity-key.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-harrowed-destiny div[data-id="constitution-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) calc(20px), rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-constitution-shield.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-harrowed-destiny div[data-id="intelligence-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) calc(20px), rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-intelligence-book.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-harrowed-destiny div[data-id="wisdom-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) calc(20px), rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-wisdom-star.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}

div.theme-harrowed-destiny div[data-id="charisma-row"] {
    background-image: linear-gradient(84.25deg, #2a2a2a calc(60px), rgba(0, 0, 0, 0) calc(100px)), linear-gradient(-84.25deg, rgb(32, 32, 32) calc(20px), rgba(0, 0, 0, 0) 100%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-charisma-crown.jpg) !important;
    background-size: auto, auto, 485px;
    background-repeat: no-repeat;
    background-position: left center, right center, left 5px center;
}




/* Armor Class Section */

div.theme-harrowed-destiny div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) 20%, rgba(0, 0, 0, 0) 150%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-ac-bg.jpg);
    background-size: cover, 480px;
    background-position: left 0px, top -36px left -17px;
    background-repeat: no-repeat;
}



/* Hit Points Section */

div.theme-harrowed-destiny div#hit-points-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-survivor.jpg);
    background-size: cover, 100% auto;
    background-position: top center, top -65px left 0px;
    background-repeat: no-repeat;
}

div.theme-harrowed-destiny div#hp-box-grid > div:first-child > div:nth-child(2) button {
  background-color: #0f0f0f;
  border: 1px solid rgb(83 83 83);
  font-size: 12px;
  padding: 0px;
  padding-bottom: 4px;
  display: flex;
  align-items: flex-end;
  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-dice-heal.jpg);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}



/* Saving Throws Section */

div.theme-harrowed-destiny div#saving-throws-component-style div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(32, 32, 32, .5) 100%, rgba(0, 0, 0, 0) 180%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-saving-throws.jpg);
    background-size: 120% auto;
    background-position: top 0px center, top -14px left -25px;
    background-repeat: no-repeat;
}


/* Speed Section */

div.theme-harrowed-destiny div#speed-container div#box-content {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 90px), rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-speed.jpg);
    background-size: cover, auto 120%;
    background-repeat: no-repeat;
    background-position: left 0px, top -5px left -2px;
}


/* Perception Section */

div.theme-harrowed-destiny div#perception-container div#box-content {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 102px), rgba(0, 0, 0, 0) 150%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-senses.jpg);
    background-size: cover, 110px;
    background-repeat: no-repeat;
    background-position: left 0px, top -12px left -12px;
}



/* Lower Tab Container */


div.theme-harrowed-destiny div#tab-container {
    padding-left: 0px;
    padding-top: 8px;
}


div.theme-harrowed-destiny div#tab-container > div:first-child {
    padding-left: 0px;
}


div.theme-harrowed-destiny div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-tab-container.png);
    background-size: auto 100%;
    height: 68px;
    background-position: left;
    background-repeat: repeat-x;
    color: #010101;
    font-family: 'goodOtCondBold';
    text-transform: uppercase;
    padding-bottom: 14px;
    box-shadow: none;
    padding-left: 12px;
    padding-right: 12px;
    position: relative;
    max-width: calc(100% - 16px);
}

div.theme-harrowed-destiny div#content-container + div#tab-container > div:first-child > div:nth-child(1):before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/button-harrow-left.png);
    background-size: contain;
    height: 68px;
    position: absolute;
    left: -24px;
    top: 0px;
    display: block;
    z-index: 1;
    width: 68px;
    background-position: left;
    background-repeat: no-repeat;
}

div.theme-harrowed-destiny div#content-container + div#tab-container > div:first-child > div:nth-child(1):after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/button-harrow-right.png);
    background-size: contain;
    height: 68px;
    position: absolute;
    top: 0px;
    left: calc(100% - 42px);
    display: block;
    z-index: 1;
    width: 68px;
    background-position: left;
    background-repeat: no-repeat;
}


@media (min-width: 1024px) {

	div.theme-harrowed-destiny div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
		content: "";
		bottom: 0px !important;

	}
	  
	  div.theme-harrowed-destiny div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
		content: "";
		bottom: 0px !important;
	}

}


div.theme-harrowed-destiny div#skills-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 70%, rgba(0, 0, 0, 0) 180%), linear-gradient(90deg, rgb(32, 32, 32) calc(100% - 450px), rgba(0, 0, 0, 0) 60%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-skills-bg.jpg) !important;
    background-size: cover, cover, 720px !important;
    background-position: top left, top left, top -23px right 0px !important;
    background-repeat: no-repeat !important;
}

div.theme-harrowed-destiny div#actions-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 180%), linear-gradient(270deg, rgb(32, 32, 32) calc(100% - 450px), rgba(0, 0, 0, 0) 80%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-actions.jpg) !important;
    background-size: cover, cover, 720px !important;
    background-position: top right, top left, top -29px left -60px !important;
    background-repeat: no-repeat !important;
}




/* Skills Section */


div.theme-harrowed-destiny div#skills-container {
  padding-top: 0px;
  border-radius: 0px;
}


div.theme-harrowed-destiny div#skills-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/skills-actions-BG.jpg);
    background-size: 1100px;
    background-position: top, top -206px left -60px;
    background-repeat: no-repeat;
}

/* Actions & Activites Section */


div.theme-harrowed-destiny div#actions-container {
  padding-top: 0px;
  border-radius: 0px;
}

@media (max-width: 1023px) {
  
  div.theme-harrowed-destiny div#actions-container {
    padding-top: 16px;
  }
  
}


div.theme-harrowed-destiny div#actions-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) 79%, rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/skills-actions-BG.jpg);
  background-size: 1100px;
  background-position: top, top -206px right -81px;
  background-repeat: no-repeat;
}


/* Equipment Section */


div.theme-harrowed-destiny div#equipment-container {
  border: none !important;
  margin-top: 0px !important;
  border-radius: 0px !important;
}


div.theme-harrowed-destiny div#equipment-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-equipment.jpg);
    background-size: cover, 100% auto;
    background-position: top, top -54px center;
    background-repeat: no-repeat;
    border-radius: 8px;
}

@media (min-width: 1024px) {
  
	div.theme-harrowed-destiny div#equipment-container:after {
		content: "";
		bottom: 0px !important;
    width: calc(100% - 15px) !important;
    left: 6px !important;
	}

}

@media (min-width: 1024px) and (min-height: 1080px) {
  
	div.theme-harrowed-destiny div#equipment-container {
    background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgba(32, 32, 32, .5) calc(30%), rgba(32, 32, 32, 0) calc(50%)), linear-gradient(180deg, rgb(32, 32, 32) 65%, rgba(32, 32, 32, .5) 75%, rgba(32, 32, 32, 0) calc(80%)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-equipment-bottom.png) !important;
    background-size: cover, 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: center, left 0px bottom -40px !important;
    background-color: rgb(32, 32, 32) !important;
	}
  
}



/* Spells Section */


div.theme-harrowed-destiny div#spells-container {
	border: none !important;
  margin-top: 0px !important;
  border-radius: 0px !important;
}

@media (min-width: 1024px) {
  
	  div.theme-harrowed-destiny div#spells-container:after {
		content: "";
		bottom: 0px !important;
    width: calc(100% - 15px) !important;
    left: 6px !important;
	}

}


div.theme-harrowed-destiny div#spells-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-spells-section.jpg);
    background-size: cover, 100% auto;
    background-position: top, top -200px center;
    background-repeat: no-repeat;
    border-radius: 8px;
}

@media (min-width: 1024px) and (min-height: 1080px) {
  
	div.theme-harrowed-destiny div#spells-container {
    background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgba(32, 32, 32, .5) calc(30%), rgba(32, 32, 32, 0) calc(50%)), linear-gradient(180deg, rgb(32, 32, 32) 65%, rgba(32, 32, 32, .5) 85%, rgba(32, 32, 32, 0) calc(100%)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-spells-section-bottom.png) !important;
    background-size: cover, cover, 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: bottom center, top center, left 0px bottom 6px !important;
    background-color: rgb(32, 32, 32) !important;
	}
  
}



/* Feats & Features Section */


div.theme-harrowed-destiny div#feats-container {
	border: none !important;
  margin-top: 0px !important;
  border-radius: 0px !important;
}

@media (min-width: 1024px) {
  
	div.theme-harrowed-destiny div#feats-container:after {
		content: "";
		bottom: 0px !important;
    width: calc(100% - 15px) !important;
    left: 6px !important;
	}

}


div.theme-harrowed-destiny div#feats-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-feats.jpg);
    background-size: cover, 100% auto;
    background-position: top, top -94px center;
    background-repeat: no-repeat;
    border-radius: 8px;
}

@media (min-width: 1024px) and (min-height: 1080px) {
  
 div.theme-harrowed-destiny div#feats-container {
    background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgba(32, 32, 32, .5) calc(30%), rgba(32, 32, 32, 0) calc(50%)), linear-gradient(180deg, rgb(32, 32, 32) 65%, rgba(32, 32, 32, .5) 85%, rgba(32, 32, 32, 0) calc(100%)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-feats-bottom.png) !important;
    background-size: cover, cover, 100% auto !important;
    background-repeat: no-repeat !important;
    background-position: bottom center, top center, left 0px bottom -60px !important;
    background-color: rgb(32, 32, 32) !important;
}
  
}


/* Details Section */

div.theme-harrowed-destiny div#details-container {
    margin-top: 0px !important;
    margin-left: 0px !important;
    border-radius: 0px !important;
    background-color: rgb(32, 32, 32);
}

div.theme-harrowed-destiny div#details-container > div {
    padding-left: 0px;
}

div.theme-harrowed-destiny div#details-container > div > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 32px !important;
}

div.theme-harrowed-destiny div#details-container div#box-component {
    max-width: 100%;
    padding-top: 0px !important;
}

div.theme-harrowed-destiny div#details-container > div:first-child > div:first-child > div#box-component {
    margin-left: -8px;
    margin-right: -8px;
    max-width: calc(100% + 16px);
    padding-top: 16px !important;
}


div.theme-harrowed-destiny div#details-container > div:first-child div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 60%, rgba(0, 0, 0, 0) 120%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/harrow-details.jpg);
    background-size: cover;
    background-position: top, top -16px left 0px;
    background-repeat: no-repeat;
    border-radius: 0px;
    padding-left: 16px;
    padding-right: 24px !important;
}

@media (min-width: 1024px) {

  div.theme-harrowed-destiny div#details-container:after {
		content: "";
		bottom: 0px !important;
    width: calc(100% - 15px) !important;
    left: 6px !important;
  }

}



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



/* ========== ARCANE POWER THEME ========== */



/* GLOBAL */





/* Sharing Banner Offset */

div.theme-arcane-power .viewingBannerSticky + div div#character-sheet div#top-header-container {
    margin-bottom: 86px !important;
}

div.theme-arcane-power .viewingBannerSticky {
    margin-bottom: -40px !important;
    z-index: 99 !important;
}

@media (max-width: 742px) {
  
    div.theme-arcane-power .viewingBannerSticky + div div#character-sheet div#scrollToggledDisplay {
        margin-top: 8px !important;
    }

}

/* End Banner Offset */



div.theme-arcane-power.sheet-background {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-backdrop.jpg) !important;
    background-repeat: no-repeat !important;
    background-color: #09032c !important;
    background-size: 1920px !important;
    background-position: top left calc(50% - 8px) !important;
}

div.theme-arcane-power div#box-component > div:first-child {
    border: none;
}

div.theme-arcane-power div#box-header {
    background: radial-gradient(rgb(255 52 222 / 25%) 25%, transparent 70%);
}

div.theme-arcane-power div#box-content {
    border-radius: 24px;
}


div.theme-arcane-power div#top-header-components-container svg path {
    fill: rgb(77 196 255 / 60%);
}  

/* General Responsive */


@media (min-width: 1024px) and (max-width: 1100px) {
  
div.theme-arcane-power div#character-sheet {
      padding-left: 24px;
      padding-right: 24px;
  }
  
}


@media (max-width: 1023px) {
  
    div.theme-arcane-power div#top-header-name-container > div:nth-child(2) {
      position: relative;
      z-index: 999;
      padding-left: 32px !important;
      filter: drop-shadow(2px 4px 6px black);
    }

  
}


@media (max-width: 742px) {
  
  div.theme-arcane-power div#character-sheet {
    overflow-x: hidden;
  }

  div.theme-arcane-power div#top-header-container {
      padding-top: 0px !important;
      padding-bottom: 0px !important;
      margin-top: 8px;
      margin-bottom: -8px;
      z-index: 9;
      border-radius: 50px;
      margin-left: -16px !important;
      margin-right: -16px !important;
  }
  
    div.theme-arcane-power div#scrollToggledDisplay + div {
        padding-left: 8px;
        margin-left: 8px;
        margin-right: 8px;
        margin-top: 16px;
    }
  
    
  div.theme-arcane-power div#tab-container {
    background-color: rgb(15 15 15 / 75%);
  }
  
    div.theme-arcane-power div#top-header-name-container h1 {
      font-size: 20px !important;
    }

    div.theme-arcane-power div#top-header-name-container h6 {
        font-size: 12px !important;
    }
    
    div.theme-arcane-power div#scrollToggledDisplay {
        border: solid !important;
        border-image-slice: 10 16 10 16 !important;
        border-image-width: 8px 0px 8px 0px !important;
        border-image-outset: 4px 0px 4px 0px !important;
        border-image-repeat: stretch stretch !important;
        position: relative;
        z-index: 9;
        border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-border-t-2.gif) !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        padding-left: 8px;
        padding-right: 8px;
        margin-bottom: -12px;
        margin-left: 0px !important;
        margin-right: 0px !important;
        min-height: 116px;
        margin-top: 50px !important;
        outline: 0px double rgb(0 177 255 / 30%);
        outline-offset: 0px;
        filter: drop-shadow(-2px 2px 8px #d685f99e);
    }

    div.theme-arcane-power div#scrollToggledDisplay:before {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-top-top.png);
        background-size: 270px;
        height: 42px;
        width: calc(100%);
        position: absolute;
        top: -22px;
        display: block;
        z-index: 1;
        margin-left: 0px;
        margin-right: 0px;
        background-position: top center;
        background-repeat: no-repeat;
    }

    div.theme-arcane-power div#scrollToggledDisplay:after {
        content: "";
        background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-bottom.png);
        background-size: 270px;
        height: 38px;
        width: calc(100%);
        position: absolute;
        bottom: -18px;
        display: block;
        z-index: 1;
        margin-left: 0px;
        margin-right: 0px;
        background-position: top -2px center;
        background-repeat: no-repeat;
    }
    
    div.theme-arcane-power div#top-header-name-container + div > div:first-child > div:first-child {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-health.png);
      background-size: 140px;
      background-position: top left -2px;
      background-repeat: no-repeat;
      border-radius: 0px !important;
      border: none !important;
      background-color: transparent !important;
      position: relative;
      top: 10px;
      height: 140px !important;
      width: 140px !important;
      margin-top: -24px;
    }
  

}
        

/* Top Header Block */

div.theme-arcane-power div#top-header-container {
    background: rgb(32 32 32);
    box-shadow: none;
    border: none;
    background-color: rgb(32, 32, 32);
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-frame-bg-t1.gif), linear-gradient(0deg, rgb(32, 32, 32) 5%, rgba(0, 0, 0, 0) 70%), linear-gradient(120deg, rgb(32, 32, 32) 0%, rgba(0, 0, 0, 0) 110%), linear-gradient(270deg, rgb(32, 32, 32) 0%, rgba(0, 0, 0, 0) 20%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-top-bg.jpg);
    background-size: auto, auto 120%, auto 200%, auto 150%, auto 130%;
    background-position: top -10px left -10px, top left, top left, top right, top left -100px;
    background-repeat: no-repeat;
    margin-right: -8px;
    margin-left: -8px;
    border-radius: 4px;
}

@media (min-width: 743px) {
  
    div.theme-arcane-power div#top-header-container {
        border-radius: 50px !important;
        margin-bottom: 46px !important;
    }

}


@media (min-width: 0px) {
  
  div.theme-arcane-power div#top-header-container {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 8px;
    margin-bottom: -8px;
    z-index: 9;
    border-radius: 0px;
    margin-top: -48px;
    margin-bottom: 0px;
  }
  
  div.theme-arcane-power div#top-header-name-container {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-inner-circle.png);
    background-size: 76px;
    background-position: left 18px center;
    background-repeat: no-repeat;
    padding-top: 8px;
    padding-bottom: 12px;
    position: relative;
    z-index: 9;

  }
  
  div.theme-arcane-power div#top-header-name-container:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-outer-circle-jewels-small.png);
    background-size: 96px;
    height: 96px;
    width: 96px;
    position: absolute;
    top: 7px;
    left: 8px;
    display: block;
    background-position: top left;
    z-index: 99;
    filter: drop-shadow(-2px 2px 8px #51bbff);
    background-repeat: no-repeat;
    animation: arcane-frame 12s linear 0s infinite normal forwards;
    pointer-events: none;
  }
  

  
  div.theme-arcane-power div#top-header-name-container > div:first-child > div:first-child > div:first-child {
    left: 22px !important;
    top: 2px;
    border-radius: 50%;
    border: none;
    height: 52px;
    width: 52px;
    align-self: start;
  }
 

}

@keyframes arcane-frame {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

div.theme-arcane-power div#content-container {
    border: solid !important;
    border-image-slice: 10 16 10 16 !important;
    border-image-width: 8px 8px 8px 8px !important;
    border-image-outset: 4px 4px 4px 4px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-border-t-2.gif) !important;
    padding-top: 0px !important;
    padding-bottom: 16px !important;
    padding-left: 0px;
    padding-right: 8px;
    margin-bottom: -12px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
    outline: 4px double rgb(0 177 255 / 30%);
    outline-offset: -4px;
    filter: drop-shadow(-2px 2px 8px #d685f99e);
    background-color: rgb(15 15 15 / 75%);
}


div.theme-arcane-power div#content-container:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-top-left-corner.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-top-right-corner.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-top-top.png);
    background-size: 30px, 30px, 270px;
    height: 42px;
    width: calc(100% + 28px);
    position: absolute;
    top: -22px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: top 9px left 0px, top 9px right, top center;
    background-repeat: no-repeat;
}

div.theme-arcane-power div#content-container:after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-bottom-left-corner.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-bottom-right-corner.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-bottom.png);
    background-size: 30px, 30px, 270px;
    height: 38px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -18px;
    display: block;
    z-index: 1;
    margin-left: -14px;
    margin-right: -14px;
    background-position: bottom 6px left 0px, bottom 6px right, top -2px center;
    background-repeat: no-repeat;
}


/* Ability Scores Section */


div.theme-arcane-power div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child {
    background-image: linear-gradient(270deg, rgb(32, 32, 32) 0%, transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-spell-circles-BG.jpg);
    background-size: auto 100%, 126% auto;
    background-position: top left, top -100px left -10px;
    background-repeat: no-repeat;
    border-radius: 24px;
}

div.theme-arcane-power div#ability-scores-container div#box-content {
    background: transparent;
}

div.theme-arcane-power div[data-id="strength-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-arcane-power div[data-id="dexterity-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-arcane-power div[data-id="constitution-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-arcane-power div[data-id="intelligence-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-arcane-power div[data-id="wisdom-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

div.theme-arcane-power div[data-id="charisma-row"] {
    background: rgba(32, 32, 32, .5) !important;
}

/* Armor Class Section */

div.theme-arcane-power div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 70%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-armor.jpg);
    background-size: cover, 360px;
    background-position: left 0px, top -36px left -22px;
    background-repeat: no-repeat;    
}

/* Hit Points Section */

div.theme-arcane-power div#hit-points-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 80%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-spell-rune-BG.jpg);
    background-size: cover, auto;
    background-position: top center, top -16px left -90px;
    background-repeat: no-repeat;
}

div.theme-arcane-power div#hp-box-grid > div:first-child > div:nth-child(2) button {
  background-color: #0f0f0f;
  border: 1px solid #3f3f3f;
  font-size: 12px;
  padding: 0px;
  padding-bottom: 4px;
  display: flex;
  align-items: flex-end;
  background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-hat-heal.jpg);
  background-size: cover;
  background-position: top 0px center;
  background-repeat: no-repeat;
  border: 1px solid #3ba5bf;
}

/* Saving Throws Section */

div.theme-arcane-power div#saving-throws-component-style div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 40%, rgba(0, 0, 0, 0) 80%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-saving-throws.jpg);
    background-size: 480px;
    background-position: top 0px center, top -70px center;
    background-repeat: no-repeat;
}


/* Speed Section */

div.theme-arcane-power div#speed-container div#box-content {
    background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-speed.jpg);
    background-size: cover, 185px;
    background-repeat: no-repeat;
    background-position: left 0px, top -59px left -40px;
}


/* Perception Section */

div.theme-arcane-power div#perception-container div#box-content {
   background-image: linear-gradient(-84.25deg, rgb(32, 32, 32) calc(100% - 100px), rgba(0, 0, 0, 0) 110%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-box-rune.jpg);
    background-size: cover, 100px;
    background-repeat: no-repeat;
    background-position: left 0px, top -24px left -22px;
}


/* Tab Container */

div.theme-arcane-power div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
    margin-top: 24px;
    background-color: rgba(32, 32, 32, .9);
    border-radius: 24px;

}

/* THEME HEIGHT SETTINGS */

@media (min-width: 1024px) and (min-height: 1080px) {
  
  div.theme-arcane-power div#skills-actions-container {
      max-height: calc(100vh - 800px) !important;
      border-radius: 8px !important;
  }
  

  
   div.theme-arcane-power div#equipment-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
  }
  
    div.theme-arcane-power div#spells-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    div.theme-arcane-power div#feats-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 12px;
      margin-left: auto;
      min-height: calc(100vh - 808px) !important;
      margin-right: auto;
      align-items: start;
      background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
    div.theme-arcane-power div#details-container {
      max-height: calc(100vh - 808px) !important;
      border-radius: 4px !important;
      margin-left: auto !important;
      margin-right: auto !important;
  }
  
}   

/* Bottom Pane */

div.theme-arcane-power div#content-container + div#tab-container > div:first-child > div:nth-child(2) {
    border: solid !important;
    border-image-slice: 10 16 10 16 !important;
    border-image-width: 8px 8px 8px 8px !important;
    border-image-outset: 4px 4px 4px 4px !important;
    border-image-repeat: stretch stretch !important;
    position: relative;
    z-index: 9;
    border-image-source: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-border-t-2.gif) !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  padding-left: 8px;
  padding-right: 8px;
    margin-bottom: 32px;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 8px;
    outline: 4px double rgb(0 177 255 / 30%);
    outline-offset: -3px;
    filter: drop-shadow(-2px 2px 8px #d685f99e);
    background-color: rgb(15 15 15 / 75%);
}

div.theme-arcane-power div#content-container + div#tab-container > div:first-child > div:nth-child(2):before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-top-left-corner.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-top-right-corner.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-bottom.png);
    background-size: 30px, 30px, 270px;
    height: 38px;
    width: calc(100% + 28px);
    position: absolute;
    top: -22px;
    display: block;
    z-index: 9;
    margin-left: -22px !important;
    margin-right: -22px !important;
    background-position: top 9px left 0px, top 9px right, top -2px center;
    background-repeat: no-repeat;
}

div.theme-arcane-power div#content-container + div#tab-container > div:first-child > div:nth-child(2):after {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-bottom-left-corner.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-bottom-right-corner.png), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-bottom-center.png);
    background-size: 30px, 30px, 270px;
    height: 42px;
    width: calc(100% + 28px);
    position: absolute;
    bottom: -20px;
    display: block;
    z-index: 9;
    margin-left: -22px;
    margin-right: -22px;
    background-position: bottom 6px left 0px, bottom 6px right, top 0px center;
    background-repeat: no-repeat;
}


/* Skills & Actions */

  div.theme-arcane-power div#skills-actions-container {
    border-radius: 24px !important;
  }


/* Skills Section */

div.theme-arcane-power div#skills-container {
    padding-top: 0px;
    border-radius: 0px;
}

div.theme-arcane-power div#skills-container div#box-component > div:first-child {
    border: none;
}

div.theme-arcane-power div#skills-container div#box-content {
        background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-skills-actions.jpg);
    background-size: 1000px;
    background-position: top, top -16px left -20px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  div.theme-arcane-power div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 12px;
      width: calc(50% - 12px);
      bottom: 11px;
      left: 8px;
  }

}


/* Actions & Activites Section */

div.theme-arcane-power div#actions-container {
    padding-top: 0px;
    border-radius: 0px;
}

div.theme-arcane-power div#actions-container div#box-component > div:first-child {
    border: none;
}

div.theme-arcane-power div#actions-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) 75%, rgba(0, 0, 0, 0) 130%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-skills-actions.jpg);
    background-size: 1200px;
    background-position: top, top -146px left -614px;
    background-repeat: no-repeat;
}

@media (min-width: 1024px) {
  
  div.theme-arcane-power div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 24px;
      width: calc(50% - 12px);
      bottom: 11px;
      right: 8px;
  }

}


/* Equipment Section */

div.theme-arcane-power div#equipment-container {
    border-radius: 24px;
}

div.theme-arcane-power div#equipment-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 110px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-equipment.jpg);
  background-size: cover;
  background-position: top, top -16px left -46px;
  background-repeat: no-repeat;
  border-radius: 8px;
}

@media (min-width: 1024px) {

  div.theme-arcane-power div#equipment-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      left: 8px;
      bottom: 17px;
      border-radius: 24px;
      pointer-events: none;
  }

}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-arcane-power div#equipment-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-equip-bottom.png);
      background-size: cover, calc(100% - 16pxpx) auto;
      background-repeat: no-repeat;
      background-position: center, left 0px bottom -140px;
      background-color: rgb(32, 32, 32);
    
    }

}



/* Spells Section */


div.theme-arcane-power div#spells-container {
    border-radius: 24px;
}


div.theme-arcane-power div#spells-container div#box-content {
  background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 150px), rgba(0, 0, 0, 0) calc(100% + 150px)), url(https://content.demiplane.com/nexus/pathfinder-2e/spells-background.jpg);
  background-size: contain;
  background-position: top center, top -12px center;
  background-repeat: no-repeat;
  border-radius: 8px;
}

@media (min-width: 1024px) {

  div.theme-arcane-power div#spells-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      bottom: 17px;
      border-radius: 24px;
      pointer-events: none;
  }

}

@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-arcane-power div#spells-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/spells-section-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Feats & Features Section */


div.theme-arcane-power div#feats-container {
    border-radius: 24px;
}


div.theme-arcane-power div#feats-container div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 125px), rgba(0, 0, 0, 0) calc(100% + 150px)),url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-feats.jpg);
    background-size: cover, 100% auto;
    background-position: top, top -100px left 0px;
    background-repeat: no-repeat;
    border-radius: 8px;
}


@media (min-width: 1024px) {
  

  div.theme-arcane-power div#feats-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 18px);
      bottom: 18px;
      border-radius: 24px;
      pointer-events: none;
  }

}


@media (min-width: 1024px) and (min-height: 1080px) {

    div.theme-arcane-power div#feats-container {

      background: linear-gradient(0deg, rgb(32, 32, 32) 0%, rgb(32, 32, 32) calc(0% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-feats-bottom.png);
      background-size: cover, calc(100% - 32px) auto;
      background-repeat: no-repeat;
      background-position: center, left 16px bottom -20px;
      background-color: rgb(32, 32, 32);
    
    }

}


/* Details Section */

div.theme-arcane-power div#details-container div#box-component > div:first-child {

    filter: drop-shadow(-2px 2px 8px #d685f99e);
}

div.theme-arcane-power div#details-container > div:first-child div#box-content {
    background-image: linear-gradient(0deg, rgb(32, 32, 32) 60%, rgba(0, 0, 0, 0) 120%), url(https://content.demiplane.com/nexus/pathfinder-2e/character/arcane-spell-texture-BG.jpg);
    background-size: 1000px;
    background-position: top, top -160px left 0px;
    background-repeat: no-repeat;
    border-radius: 24px;
}


@media (min-width: 1024px) {
  
  div.theme-arcane-power div#details-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 36px;
    z-index: 9;
    position: absolute;
    background-position: bottom;
    background-size: contain;
    box-sizing: border-box;
    width: calc(100% - 24px);
    bottom: 11px;
    left: 16px;
    border-radius: 12px;
    pointer-events: none;
  }
  
}



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


@font-face {
    font-family: DeliciousHandrawn;
    src: url("https://content.demiplane.com/fonts/ArchitectsDaughter-Regular.ttf") format("truetype");
}

@font-face {
    font-family: ArchitectsDaughter;
    src: url("https://content.demiplane.com/fonts/ArchitectsDaughter-Regular.ttf") format("truetype");
}

@font-face {
    font-family: GloriaHallelujah;
    src: url("https://content.demiplane.com/fonts/GloriaHallelujah-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Mynerve;
    src: url("https://content.demiplane.com/fonts/Mynerve-Regular.ttf") format("truetype");
}

@font-face {
    font-family: NanumPen;
    src: url("https://content.demiplane.com/fonts/NanumPenScript-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Schoolbell;
    src: url("https://content.demiplane.com/fonts/Schoolbell-Regular.ttf") format("truetype");
}

@font-face {
    font-family: WalterTurncoat;
    src: url("https://content.demiplane.com/fonts/WalterTurncoat-Regular.ttf") format("truetype");
}

@font-face {
    font-family: Permanent Marker;
    src: url("https://content.demiplane.com/fonts/PermanentMarker-Regular.ttf") format("truetype");
}div#dice-roller-container {
  filter: drop-shadow(10px 0px 24px black);
  z-index: 99;
}

h6[data-cy="dice-roll-expanded-name"], h6[data-cy="dice-roll-expanded-result"] {
  font-family: 'Gin';
  text-transform: uppercase;
  font-weight: 400;
}

h5[data-cy="dice-roll-collapsed-name"] {
  text-transform: uppercase;
}

h2[data-cy="dice-roll-expanded-name-value"], h2[data-cy="dice-roll-expanded-result-value"] {
  font-family: 'GoodOTCondBold';
  text-transform: uppercase;
  font-weight: 400;
  font-size: 20px;
}

div[data-cy="dice-overlay-details-container"] p {
  font-family: 'GoodOTCondBold';
  text-transform: uppercase;
}


h2[data-cy="dice-roll-expanded-result-value"] {
  color: rgb(241, 206, 134);
}

button[data-cy="dice-overlay-open-overlay-btn"], button[data-cy="dice-overlay-roll-btn"] {
  background-color: rgb(50, 118, 181);
}

button[data-cy="dice-overlay-open-overlay-btn"] circle {
  fill: rgb(50, 118, 181);
}


button[data-cy="dice-overlay-d4-fab-btn"] + span, button[data-cy="dice-overlay-d6-fab-btn"] + span, button[data-cy="dice-overlay-d8-fab-btn"] + span, button[data-cy="dice-overlay-d10-fab-btn"] + span, button[data-cy="dice-overlay-d12-fab-btn"] + span, button[data-cy="dice-overlay-d20-fab-btn"] + span {
  background-color: rgb(50, 118, 181) !important;
}

div[data-cy="dice-roll-content-container"]:not(:first-child) {
    background: rgb(32, 32, 32);
}

div[data-cy="dice-roll-content-container"]:first-child {
    border: 1px solid rgba(241, 206, 134, .5);
}




.character-table-overflow-block {
    overflow-x: auto;
    max-width: 100%;
}

.character-table-overflow-block::-webkit-scrollbar {
    height: 4px;
    width: 4px;
    display: unset;
    background: rgb(15, 15, 15);
}

.character-table-overflow-block::-webkit-scrollbar-thumb {
    background: rgb(63, 63, 63);
}

.element-tooltip-header-element-name, .element-tooltip-header-details {
  color: white !important;
}

.reader-container {
  background-color: transparent;
}

.two-column-holder.dark-red-border {
  flex-direction: column;
}

.two-column-holder.dark-red-border >div:first-child {
  border: none;
}

.two-column-holder.dark-red-border >div:nth-child(2) {
  padding-top: 0px;
}

@media screen and (max-width: 600px) {
 
  .wip-notification-holder .book-image-left {
    display: none !important;
  }
 
} 

.wip-notification-holder {
  background-color: #010101 !important;
  border: 1px solid #5d0000;
  padding: 20px;
  padding-bottom: 10px;
  
}

.wip-notification-header {
  border: none;
  color: white;
  font-size: 22px !important;
}

.expanded-row .inner-holder {
    padding-bottom: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.expanded-row td:first-child {
  padding-left: 16px;
  padding-right: 16px;
}

.Tables_Table-Row-1, .Table-Row-1 {
    background-color: #252525;
    color: white;
    font-size: 16px;
}

.Tables_Table-Row-2, .Table-Row-2 {
    background-color: #454545;
    color: white;
    font-size: 16px;
}

.Tables_Table-Footer {
    background-color: #333333;
    text-align: left;
    color: white;
    font-size: 16px;
}

a.reader-link {
  filter: brightness(1.5);
}

.main-holder {
  background-color: transparent;
  color: #bfbfbf;
  padding-top: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 2rem;
  font-size: 16px;
}

.element-tooltip-header-element-name {
  color: white !important;
}

.main-holder p {
  color: #bfbfbf;
  font-size: 16px;
  margin-block-start: 8px;
  margin-block-end: 8px;
}

.main-holder strong {
  color: white !important;
  font-size: inherit !important;
}

.one-action-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/single_action_white.svg) !important;
}

.two-action-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/two_action_white.svg) !important;
}

.three-action-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/three_action_white.svg) !important;
}

.reaction-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/reaction_white.svg) !important;
}

.free-action-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/free_action_white.svg) !important;
}


.pfn-horizontal-divider::after {
    content: "";
    display: block;
    position: relative;
    top: -2px;
    height: 16px;
    background: url(https://content.demiplane.com/elements/pathfinder-2e/archetypes/PFN-Center-Flourish.png) center bottom no-repeat;
    background-size: contain;
}

.main-holder h1 {
  color: #f1ce86;
  font-size: 28px;
  margin-top: 20px;
}

.main-holder h5 {
  margin-bottom: 10px;
}

.main-holder h2, .main-holder h3, .main-holder h4, .main-holder h5 {
    color: white !important;
    margin-top: 36px;
    margin-bottom: 8px !important;
}

.main-holder h2 {
  font-family: Gin;
  font-size: 24px;
}

.main-holder h2:first-child {
  margin-top: 20px !important;
}

.main-holder .heading-block {
  background-color: #151515;
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}

.main-holder .trait-holder {
  background-color: #151515;
  color: #CFCFCF;
  margin-top: 16px;
}

.trait-holder .split-header, .class-feature {
    color: white;
    border-color: #333333 !important;
}


.main-holder .sidebar, .class-sidebar {
  background-color: #151515;
  color: #CFCFCF;
}

.sidebar h5, .sidebar h3 {
  color: white;
}

.pfn-horizontal-divider::after {
    top: -2px;
    height: 16px;
    background-size: contain !important;
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/PFN-Center-Flourish-D.png) center bottom no-repeat;
}/* TEMP FIX ATTEMPT */

.MuiCollapse-root.MuiCollapse-vertical.MuiCollapse-hidden.css-a0y2e3 {
    display: none;
}

div {
    scrollbar-width: none
}

/* Global Sheet */


div.MuiPopperUnstyled-root {
  z-index: 10;
}


div#character-sheet h3 {
  font-size: 16px;
}

div#box-content button {
    z-index: 9;
}

div#tab-container div#box-component {
  max-width: 100%;
}

div#box-component > div:first-child {
    border-collapse: separate;
    border-radius: 8px;
    border: 1px solid rgb(63, 63, 63);
}

div#content-container {
    padding-left: 0px;
}

div#tab-container {
    padding-left: 0px;
    padding-top: 12px;
}


.drawer-container div#box-component > div:first-child {
    border-collapse: separate;
    border-radius: 8px;
    border: 1px solid rgb(63, 63, 63) !important;
}


/* Reduce Level Modal */


.level-down-modal-header-container h1 {
    font-size: 22px;
}

.level-down-modal-header-container h5 {
    font-size: 14px;
    font-weight: 400;
    font-family: 'GoodOT';
    line-height: normal;
    margin-bottom: 8px;
}


.image-crop-message {
    color: #fff;
    font-size: 14px;
}

/* Responsive */

@media (max-width: 742px) {
  
  div#character-sheet ~ div:last-of-type button {
    background-color: rgb(50, 118, 181);
  }
  
    div#scrollToggledDisplay {
        margin-top: -8px !important;
    }
    
    div#top-header-name-container h1 {
      font-size: 20px !important;
    }
  
}




div#content-container + div#tab-container > div:first-child > div:nth-child(1) {
  border-radius: 4px;
}

    div#top-header-container {
        padding-left: 0px;
        position: relative;
        margin-top: -48px;
        margin-bottom: 58px;
    }
    


/* Proficiencies Block */

div#spell-proficiencies-header {
    font-size: 14px;
    width: 100%;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: -8px;
    margin-bottom: 16px;
    margin-left: 12px;
}

div#spell-proficiencies-header:after {
    content: "";
    border-bottom: 1px solid #3f3f3f;
    height: 1px;
    width: 100%;
    position: relative;
    top: 2px;
    margin-bottom: 4px;
    display: block;
}

div#armor-proficiencies-header {
    font-size: 14px;
    width: 100%;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: -8px;
    margin-bottom: 16px;
    margin-left: 12px;
}

div#armor-proficiencies-header:after {
    content: "";
    border-bottom: 1px solid #3f3f3f;
    height: 1px;
    width: 100%;
    position: relative;
    top: 2px;
    margin-bottom: 4px;
    display: block;
}

div#weapon-proficiencies-header {
    font-size: 14px;
    width: 100%;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: -8px;
    margin-bottom: 16px;
    margin-left: 12px;
}

div#weapon-proficiencies-header:after {
    content: "";
    border-bottom: 1px solid #3f3f3f;
    height: 1px;
    width: 100%;
    position: relative;
    top: 2px;
    margin-bottom: 4px;
    display: block;
}

div#detail-proficiencies-class-dc label {
    font-size: 14px !important;
    color: white !important;
    margin-top: -16px !important;
}

div#detail-proficiencies-class-dc label + div {
    margin-top: 24px !important;
}

div#detail-proficiencies-item label {
    font-size: 14px !important;
    color: white !important;
    margin-top: -16px !important;
}

div#detail-proficiencies-item label + div {
    margin-top: 24px !important;
}

div#spell-proficiencies-container-inner {
    flex-wrap: wrap;
    justify-content: stretch;
}

div#spell-proficiencies-container-inner > div {
    flex-basis: calc(20% + 7px);
    max-width: calc(20% + 7px);
}

div#armor-proficiencies-container-inner {
    flex-wrap: wrap;
    justify-content: stretch;
}

div#armor-proficiencies-container-inner > div {
    flex-basis: calc(25% + 7px);
    max-width: calc(25% + 7px);
}

div#weapon-proficiencies-container-inner {
    flex-wrap: wrap;
    justify-content: stretch;
}

div#weapon-proficiencies-container-inner > div {
    flex-basis: calc(33% + 10px);
    max-width: calc(33% + 10px);
}

div#weapon-proficiencies-container-inner > div:last-of-type {
    flex-basis: unset;
    max-width: unset;
    margin-top: 0px;
}


/* Responsive */

@media (max-width: 742px) {
  
  div#spell-proficiencies-container-inner > div {
    flex-basis: calc(50% + 4px);
    max-width: calc(50% + 4px);
  }

  div#armor-proficiencies-container-inner > div {
    flex-basis: calc(50% + 4px);
    max-width: calc(50% + 4px);
  }

  div#weapon-proficiencies-container-inner > div {
    flex-basis: calc(50% + 4px);
    max-width: calc(50% + 4px);
  }
  
  
  div#spell-proficiencies-container-inner label + div {
    margin-bottom: 16px !important;
  }
  
  div#armor-proficiencies-container-inner label + div {
    margin-bottom: 16px !important;
  }
  
  div#weapon-proficiencies-container-inner label + div {
    margin-bottom: 16px !important;
  }
  
}  



/* Character Name */


div#avatar-box:hover:before {
    content: "";
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/character/character-gear-overlay.png);
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    background-size: cover;
    z-index: 9;
    pointer-events: none;
    transition: background 0.3s ease 0s;
}


div#top-header-container {
  padding-left: 0px;
}

div#top-header-name-container {
    padding-left: 8px;
    padding-bottom: 8px;
}

div#top-header-name-container h1 {
    line-height: 1;
    margin-top: 12px;
    margin-bottom: 4px;
    font-family: Gin !important;
    font-size: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: white;
}

div[data-cy="dice-roll-content-container"] {
  color: white;
}

div#top-header-name-container h4 {
    font-family: GoodOTCondBold;
    font-weight: 400;
    color: #bfbfbf;
    margin-left: 2px;
}

div#top-header-name-container h1 + div:nth-child(2) {
  padding-left: 2px;
}

div#top-header-name-container h6 {
    padding-left: 2px;
    padding-right: 2px;
}

/* Responsive */

@media (max-width: 742px) {
  
    div#top-header-name-container h6 {
        font-size: 12px;
    }
  
}

div#top-header-name-container h6:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}



/* Mobile Key Stats Header */


/* Responsive */

@media (max-width: 742px) {
  
  div#top-header-name-container + div > div:first-child > div:first-child {
    background-color: rgb(15, 15, 15);
    padding: 12px;
    height: 75px;
    display: flex;
    width: 75px;
    border: 1px solid #3276b5;
    border-radius: 50%;
    align-items: center;
    margin-right: 8px;
  }

  div#top-header-name-container + div > div:first-child > div:first-child > div:first-of-type {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  div#top-header-name-container + div > div:first-child > div:first-child p {
    text-align: center;
  }

  div#scrollToggledDisplay {
    background: rgb(32, 32, 32);
    max-height: 100px;
    margin-bottom: 0px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
    margin-right: 0px;
    border-bottom: 1px solid #3f3f3f;
    }

  div#scrollToggledDisplay + div {
    padding-left: 8px;
    margin-left: 8px;
    margin-right: 8px;
}
  
  div#scrollToggledDisplay > div:first-child {
    margin-top: -6px;
    justify-content: center;
  }

  div#scrollToggledDisplay > div:first-child > div:first-child {
    max-width: 20%;
  }
  
  div#scrollToggledDisplay > div:first-child > div:nth-child(4) {
    row-gap: 8px;
  }
  
  div#scrollToggledDisplay > div:first-child > div:nth-child(3) div#box-content > div:nth-child(2) > div:first-child > div:first-child > div:first-child {
    background-color: rgb(15, 15, 15);
    height: 44px;
    width: 44px;
    max-height: 44px;
    max-width: 44px;
    margin-top: -17px;
    padding-top: 6px;
  }
  
  div#scrollToggledDisplay > div:first-child > div:nth-child(4) > div button {
    height: 36px;
    max-width: 120px;
    border-radius: 4px;
    background-color: rgb(15, 15, 15);
    border: 1px solid rgb(85, 85, 85);
  }
  
  div#scrollToggledDisplay > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    background-color: rgb(15, 15, 15);
  }
  
  div#scrollToggledDisplay div#box-content div#squareComponentContainer, div#scrollToggledDisplay div#box-content div#squareComponentContainer div#squareComponentContent {
    background-color: rgb(15, 15, 15);
  }
  
  div#scrollToggledDisplay div#box-content div#squareComponentContainer div#squareComponentFooter {
    background-color: rgb(63, 63, 63);
  }
  
  div#scrollToggledDisplay div#box-content > div.MuiGrid-root.MuiGrid-item > div > div > div {
    background-color: rgb(15, 15, 15);
  }
  
  div#scrollToggledDisplay div#box-content > div.MuiGrid-root.MuiGrid-item > div > div > div > div:nth-child(2) {
    background-color: rgb(63, 63, 63);
    padding-top: 4px;
  }

}


/* Top Header Right Side Buttons */


/* Responsive */

@media (min-width: 743px) {
  
  div#top-header-components-container {
      display: flex;
      justify-content: space-evenly;
  }
  
  div#top-header-components-container > div:first-child > div:first-child >div:first-child > div:first-child, div#top-header-components-container > div:first-child > div:first-child > div:nth-child(2) {
    font-size: 12px;
    padding: 6px;
  }

  div#top-header-components-container > div:first-child > div:nth-child(2) > div:first-child {
    min-width: 75px;
    font-size: 12px;
  }

}

div#top-header-components-container > div:first-child > div:first-child >div:first-child > div:first-child, div#top-header-components-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
  position: relative;
  top: 1px;
}

div#top-header-components-container > div:first-child > div:first-child >div:first-child, div#top-header-components-container > div:first-child > div:first-child > div:nth-child(2) {
  background-color: #0f0f0f;
}

div#top-header-components-container > div:first-child > div:nth-child(2) > div:first-child {
  font-weight: 400;
  background-color: #0f0f0f;
  border: 1px solid #3276b5;
  cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}

/* Top Header Hero Points Input */

div#hero-points-box {
    position: relative;
    top: 2px;
    left: 1px;
}


/* Ability Scores Block */




div#ability-scores-container .mod-cell p {
  font-size: 16px;
}

div#ability-scores-container .mod-cell p:hover {
  color: white !important;
}

div#ability-scores-container div#box-content > div:first-child {
  min-height: 336px;
}


div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child {
  height: 308px;
}

div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child {
  height: 308px !important;
  padding-bottom: 0px !important;
}

div#ability-scores-container div#box-content > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child {
  height: 308px !important;
}

.mod-cell > div:first-child {
  background-color: rgb(15, 15, 15);
  cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}

.MuiDataGrid-columnHeader.MuiDataGrid-columnHeader--alignRight.mod-header {
  left: -5px;
}

.MuiDataGrid-columnHeader.MuiDataGrid-columnHeader--alignRight.score-header {
  left: -5px;
}

div#ability-scores-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div {
  padding-top: 3.5px;
  padding-bottom: 3.5px;
  margin-bottom: 8px;
  padding-left: 0px;
  padding-right: 8px;
  justify-content: flex-start;
}

/* Responsive */

@media (max-width: 742px) {
  
  div#ability-scores-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div {
    padding-right: 0px;
  }
  
  div#ability-scores-container .score-header {
    position: relative;
    left: -20px;
  }
  
}


div[data-id="strength-row"], div[data-id="dexterity-row"], div[data-id="constitution-row"], div[data-id="intelligence-row"], div[data-id="wisdom-row"], div[data-id="charisma-row"] {
  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
}

div[data-id="strength-row"] > div:nth-child(3) > div:first-child > div:first-child, div[data-id="dexterity-row"] > div:nth-child(3) > div:first-child > div:first-child, div[data-id="constitution-row"] > div:nth-child(3) > div:first-child > div:first-child, div[data-id="intelligence-row"] > div:nth-child(3) > div:first-child > div:first-child, div[data-id="wisdom-row"] > div:nth-child(3) > div:first-child > div:first-child, div[data-id="charisma-row"] > div:nth-child(3) > div:first-child > div:first-child {
  min-height: 32px;
  max-height: 32px;
}


/* Armor Class Section */

div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(1) > div:first-child > div:first-child > div:first-child {
  background-color: rgb(15, 15, 15);
}  

/* Armor Class Shield Block */

div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) > div:first-child > div > div:first-child {
  font-size: 16px;
  top: 2px;
  position: relative;
}

/* Armor Class Armor Name Block */


div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child {
    background-color: rgb(15, 15, 15);
}

div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child {
  align-self: center;
}

div#armor-class-container div#box-content > div:first-child > div:nth-child(2) {
    right: calc(50% - 35px);
}


div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child {
  padding-left: 12px;
}

div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    border-radius: 0px;
    padding-right: 5px;
    font-size: 16px;
}

div#armor-class-container > div:first-child > div:first-child > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child {
    background-color: rgb(63, 63, 63);
}

/* Hit Points Block */

div#hit-points-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
  z-index: 9;
}

div#hp-box-grid > div:first-child > div:nth-child(2) button {
  background-color: rgb(50, 118, 181);
}

.full-heal-confirm-container > div:first-child > div:first-child h4 {
  font-size: 14px;
  font-weight: 400;
}

.full-heal-confirm-container > div:first-child > div:first-child h4:first-child {
  text-transform: uppercase;
  font-size: 16px;
  font-family: 'GoodOTCondBold';
  font-weight: 400;
  background-color: rgb(42, 42, 42);
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  margin-top: -16px;
  margin-bottom: 8px;
  padding: 14px;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

.full-heal-confirm-container > div:first-child > div:nth-child(2) {
  padding-bottom: 0px;
}

.full-heal-confirm-container > div:first-child > div:nth-child(2) > button:first-child {
  background-color: rgb(42, 172, 94);
}

.full-heal-confirm-container > div:first-child > div:nth-child(2) > button:last-child {
  background-color: rgb(138, 60, 55);
}


div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
  background-color: rgb(15, 15, 15);
}

div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:first-child {
  background-color: rgb(15, 15, 15);
}

div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(1) {
  padding-left: 16px;
}

div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(2) {
  padding-left: 16px;
}

div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) {
  padding-left: 16px;
}

div#hit-points-container div#box-content > div:not(:first-of-type) > div:not(:first-of-type) p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* Responsive */

@media (min-width: 743px) and (max-width: 1023px) {
  
  div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(1) {
    padding-left: 0px;
  }

  div#hit-points-container div#hp-box-grid > div:first-child > div:nth-child(3) {
    padding-left: 0px;
  }
  
}


div#hit-points-container > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:first-child > div:first-of-type > div:first-child {
  font-size: 20px;
}

div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) {
  font-size: 20px;
}

div#hit-points-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) > div:first-child > div:nth-child(2) {
  font-size: 20px;
}


/* Saving Throws Block */


div#saving-throws-component-style div#box-content {
    min-height: 180px;
}

div#saving-throws-component-style div#noteDisplayHideCard p {
  -webkit-line-clamp: 5;
}


div#saving-throws-component-style div#squareComponentContent {
    background-color: rgb(15, 15, 15);
}

div#saving-throws-component-style div#squareComponentFooter {
    background-color: rgb(63, 63, 63);
}

div#saving-throws-component-style > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
    font-size: 16px;
    margin-bottom: 8px;
    width: 100%;
    position: relative;
    text-align: center;
    left: 0px;
    padding-right: 4px;
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}

div#saving-throws-component-style > div:nth-child(2) > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
    font-size: 16px;
    margin-bottom: 8px;
    width: 100%;
    position: relative;
    text-align: center;
    left: 0px;
    padding-right: 4px;
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}

div#saving-throws-component-style > div:nth-child(2) > div:first-child > div:first-child > div:nth-child(3) > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
    font-size: 16px;
    margin-bottom: 8px;
    width: 100%;
    position: relative;
    text-align: center;
    left: 0px;
    padding-right: 4px;
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}


/* Responsive */

@media (min-width: 743px) and (max-width: 1023px) {
  
  div#saving-throws-component-style div#box-content {
    min-height: 120px;
  }
  
  div#saving-throws-component-style div#noteDisplayHideCard p {
    -webkit-line-clamp: 2;
  }
  
  
}


/* Speed Block */

div#speed-container div#squareComponentContent {
    background-color: rgb(15, 15, 15);
}

div#speed-container div#squareComponentFooter {
    background-color: rgb(63, 63, 63);
}


/* Perception Block */

div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    background-color: rgb(15, 15, 15);
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}

div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child div {
    pointer-events: none;
}

div#perception-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
    background-color: rgb(63, 63, 63);
}



/* ////////// Sheet Bottom ////////// */



/* Bottom Width */

div#content-container + div#tab-container > div:first-child > div:nth-child(2) {
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 0px;
}

  
/* Bottom Scroll Gradient */


@media (min-width: 1024px) {

    div#actions-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) {
      padding-bottom: 30px;
      background: linear-gradient(0deg, rgb(32, 32, 32) 97%, rgba(0, 0, 0, 0) 100%);
    }
    
    div#actions-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(50% - 18px);
      bottom: 11px;
      border-radius: 8px;
      pointer-events: none;
    }
    
    div#skills-container div#box-component > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(5) {
      padding-bottom: 30px;
      max-height: none;
    }
    
    div#skills-container div#box-component > div:first-child > div:nth-child(2):after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(50% - 18px);
      bottom: 11px;
      border-radius: 8px;
      pointer-events: none;
    }
    
    div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
      padding-bottom: 30px;
      max-height: none;
    }
    
    div#spells-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 10px);
      bottom: 11px;
      border-radius: 12px;
      pointer-events: none;
    }
    
    div#equipment-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
      padding-bottom: 30px;
      max-height: none;
    }
    
    div#equipment-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 10px);
      left: 5px;
      bottom: 11px;
      border-radius: 12px;
      pointer-events: none;
    }
    
    div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
      padding-bottom: 30px;
      max-height: none;
    }
    
    div#feats-container:after {
      content: "";
      background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
      height: 30px;
      z-index: 9;
      position: absolute;
      background-position: bottom;
      background-size: contain;
      box-sizing: border-box;
      width: calc(100% - 10px);
      bottom: 11px;
      border-radius: 12px;
      pointer-events: none;
    }
    
    div#details-container > div:last-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
      padding-bottom: 30px;
    }
    
    div#details-container:after {
        content: "";
        background-image: linear-gradient(0deg, rgba(32,32,32,1) 30%, rgba(32,32,32,0.7625175070028012) 60%, rgba(32,32,32,0) 100%);
        height: 30px;
        z-index: 9;
        position: absolute;
        background-position: bottom;
        background-size: contain;
        box-sizing: border-box;
        width: calc(100% - 20px);
        bottom: 11px;
        left: 10px;
        border-radius: 0px;
        pointer-events: none;
    }

}


/* Bottom Scrolling */


@media (min-width: 1024px) and (min-height: 1080px) {

  div#skills-actions-container {
    max-height: calc(100vh - 714px);
    border-radius: 8px;
  }
  
  div#actions-container div#box-component > div:first-child > div:nth-child(2) {
    height: calc(100vh - 772px);
  }
  
  div#skills-container div#box-component > div:first-child > div:nth-child(2) {
    height: calc(100vh - 772px);
  }
  
  div#equipment-container {
    max-height: calc(100vh - 722px);
    border-radius: 12px;
    margin-left: auto;
    min-height: calc(100vh - 722px);
    margin-right: auto;
    align-items: start;
  }
  
  div#spells-container {
    max-height: calc(100vh - 722px);
    border-radius: 12px;
    margin-left: auto;
    min-height: calc(100vh - 722px);
    margin-right: auto;
    align-items: start;
    background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
  div#feats-container {
    max-height: calc(100vh - 722px);
    border-radius: 12px;
    margin-left: auto;
    min-height: calc(100vh - 722px);
    margin-right: auto;
    align-items: start;
    background: linear-gradient(0deg, rgb(32, 32, 32) calc(100% - 24px), rgba(32, 32, 32, 0) calc(100% - 24px), transparent);
  }
  
  div#details-container {
    max-height: calc(100vh - 722px);
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
  }
  

}


/* Skills & Actions Section */

/* Two Column Bottom */

div#skills-actions-container {
    margin-top: 0px;
    overflow: hidden;
}

@media (min-width: 1024px) {

  div#skills-actions-container {
    justify-content: space-around;
  }

}


@media (max-width: 742px) {
  
  div#skills-actions-container {
      margin-top: -8px !important;
  }
  
}



/* Skills Section */

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) h3 {
  position: relative;
  top: 2px;
}

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) button:not(.MuiIconButton-root) {
    font-size: 16px;
    letter-spacing: 0px;
    height: 32px;
    background-color: rgb(15, 15, 15);
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}

div#skills-container button.MuiButton-outlined {
    background-color: rgb(15, 15, 15);
    border: 1px solid rgb(63, 63, 63);
    line-height: 1.6;
    font-size: 0.8125rem;
    height: 36px;
}

div#skills-container button.MuiButton-outlined:hover {
    background-color: rgb(42, 42, 42);
}

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) > div > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
  background-color: rgb(63, 63, 63);
}

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) {
  padding-top: 14px;
}

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) button:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div {
  background: linear-gradient(0deg, rgb(32, 32, 32) 97%, rgba(0, 0, 0, 0) 100%);
}

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1  {
  border: 1px solid rgb(63, 63, 63);
  background-image: none;
  padding-top: 6px;
  padding-bottom: 6px;
  min-height: 50px;
}

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiCollapse-wrapperInner.MuiCollapse-vertical h6  {
  color: #838383;
  font-size: 14px;
  display: flex;
}

div#skills-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiCollapse-wrapperInner.MuiCollapse-vertical h6:after {
    content: "";
    margin: 0px 0px 0px 8px;
    flex-shrink: 0;
    border-width: 0px 0px thin;
    border-style: solid;
    position: relative;
    top: -12px;
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    border-color: rgb(63, 63, 63);
}

/* Responsive */

@media (max-width: 1024px) {
  
  div#skills-container div#box-content > div:first-child > div:first-child > div:first-child > div:first-child {
    z-index: 9;
  }
  
  
}


/* Actions & Activites Section */


@media (max-width: 742px) {
  
  div#actions-container {
      margin-top: 8px !important;
  }
  
}

@media (max-width: 499px) {
  
  div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child > div:nth-child(2):not(:nth-last-of-type(2)) {
    display: none;
  }
  
  div#actions-container div#box-component > div > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {
    display: none;
  }
  
}


div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child {
    justify-content: space-between;
}

div#actions-container div#box-component > div > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) > div:nth-child(2) > div:nth-child(2) {
    justify-content: space-between;
}


div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child > div:first-child {
    flex-basis: 50%;
    max-width: 50%;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child > div:first-child:not(:nth-last-of-type(3)) {
    flex-basis: 40%;
    max-width: 40%;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child > div:first-child + div:not(:last-child) {
    flex-basis: 15%;
    max-width: 15%;
}

div#actions-container div#box-component > div > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(4) > div:first-child > div:nth-child(2) {
    justify-content: space-between;
}



div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) svg {
  height: 1.2em;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) button {
  border-radius: 4px;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) h6 {
  text-decoration: none;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div h3 {
  font-size: 16px;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div li h4 {
  font-size: 16px;
  text-transform: none;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div li h5 {
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-transform: uppercase;
}


div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div button:not(.MuiIconButton-root) {
  font-size: 16px;
  text-transform: none;
  height: 32px;
  background-color: rgb(15, 15, 15);
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div button:not(.MuiIconButton-root):not(button[aria-haspopup="menu"]) {
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}



div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
  border-radius: 4px;
  border: 1px solid rgb(63, 63, 63);
  min-height: 50px;
  background-image: none;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child > div:nth-child(2) p {
  text-align: start;
  line-height: 1.2;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 .MuiCollapse-root.MuiCollapse-vertical.MuiCollapse-entered {
    transition: background-color 300ms cubic-bezier(0.1, 0, 0.1, 1) 10ms;
    background-color: #1f1f1f;
    width: calc(100% + 16px);
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 16px;
}



div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div > div > div:first-child h3 {
  color: #838383;
  display: flex;
  font-size: 14px;
}

div#actions-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) + div > div > div:first-child h3:after {
    content: "";
    margin: 0px 0px 0px 8px;
    flex-shrink: 0;
    border-width: 0px 0px thin;
    border-style: solid;
    position: relative;
    top: -8px;
    display: flex;
    -webkit-box-flex: 1;
    flex-grow: 1;
    border-color: rgb(63, 63, 63);
}


/* Equipment Section */



/* Responsive */

@media (max-width: 742px) {
  
  div#equipment-container {
    margin-top: 0px !important;
  }
  
}


div#equipment-container div#other-items label {
    text-transform: uppercase;
    margin-top: 0px;
    font-family: 'GoodOTCondBold';
    font-size: 14px;
    font-weight: 400;
    color: rgb(191, 191, 191);
}

div#equipment-container div#other-items .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl {
    background-color: rgb(15, 15, 15);
    margin-bottom: 12px;
    margin-top: 32px;
}




div#equipment-container {
    margin-top: 8px;
    border-collapse: separate;
    border-radius: 8px;
    border: 1px solid rgb(63, 63, 63);
    background: rgb(32 32 32);
}

div#equipment-container > div:first-child {
    padding-top: 0px;
}

div#equipment-container div#box-component > div:first-child {
    border: none !important;
}

div#equipment-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
    margin: -4px -8px 8px -4px;
}

div#equipment-container button.MuiButton-outlined {
  background-color: rgb(15, 15, 15);
  height: 36px;
  border: 1px solid rgb(63, 63, 63);
  font-size: 0.8125rem;
}

div#equipment-container button.MuiButton-outlined:hover {
  background-color: rgb(42, 42, 42);
  transition: background-color 0.3s ease 0s;
}

div#equipment-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
  padding-left: 4px;
  padding-right: 4px;
}

div#equipment-container div#grid-table-grouped-component h5 {
  color: #838383;
  font-size: 14px;
}

div#equipment-container div#grid-table-grouped-component h5 + div {
  border-color: rgb(63, 63, 63);
}

div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div {
  padding: 8px;
  padding-left: 16px;
}

div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div > div:first-child > div:first-child > div:first-child {
    border-radius: 4px;
    background-color: rgb(42, 42, 42);
}

div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button {
  height: 32px;
  font-size: 0.8125rem;
}

div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained, div#equipment-container .MuiButton-containedPrimary {
  background-color: rgb(50, 118, 181);
  font-size: 0.8125rem;
}

div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div .MuiButton-contained:hover, div#equipment-container .MuiButton-containedPrimary:hover {
    border: 1px solid rgb(236 201 131) !important;
    transition: border 0.3s ease 0s;
    color: white;
}

div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root) {
  border: 1px solid rgb(50, 118, 181);
  font-size: 0.8125rem;
}

div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div button:not(.MuiButton-contained):not(.MuiIconButton-root):hover {
    border: 1px solid rgb(236 201 131) !important;
    transition: border 0.3s ease 0s;
}


/* Responsive */

@media (min-width: 1059px) {

  div#equipment-container > div:first-child > div:first-child > div:first-child {
    padding-left: 0px;
  }

}

@media (min-width: 743px) {
  
  div#equipment-container div#grid-table-grouped-component > div:not(:first-child) > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: normal;
  }
  
  div#equipment-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
      padding-left: 8px;
      padding-top: 8px;
  }
  
}

@media (max-width: 742px) {
  
  
  div#equipment-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child {
      padding-right: 8px;
  }
  
}


/* Spells Section */


@media (max-width: 742px) {
  
  div#spells-container {
    margin-top: 0px !important;
  }
  
}


div#manage-spell-slots-container > div:first-child > div:not(:first-child) h3 {
    font-size: 16px;
    text-transform: uppercase;
    font-family: GoodOTCondBold;
}


div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 p {
    line-height: normal;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    min-height: 52px;
    padding-top: 4px;
    padding-bottom: 4px;
}


div#spells-container {
    margin-top: 8px;
    border-collapse: separate;
    border-radius: 8px;
    border: 1px solid rgb(63, 63, 63);
}

div#spells-container > div:first-child {
    padding-top: 0px;
}

div#spells-container div#box-component > div:first-child {
    border: none !important;
}


div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:first-child  button {
  height: 32px;
  font-size: 0.8125rem;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child {
    margin: -4px -8px 8px -4px;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child {
  padding-left: 12px;
  padding-right: 4px;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > span:nth-child(4) {
  justify-content: start;
  padding-left: 6px;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > span:nth-child(5) {
  justify-content: start;
  padding-left: 24px;
}

div#spells-container .MuiDivider-root.MuiDivider-textAlignLeft span {
  color: #838383;
  font-size: 14px;
}

div#spells-container .MuiDivider-root.MuiDivider-textAlignLeft:after {
    border-color: rgb(63, 63, 63);
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    background-image: none;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child > div:first-child > div:first-child {
    border-radius: 4px;
    background-color: rgb(42, 42, 42);
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 h5 {
  font-size: 14px;
  padding-top: 8px;
  padding-bottom: 8px;
  text-transform: uppercase;
}

div#spells-container button.MuiButton-outlined {
  background-color: rgb(15, 15, 15);
  height: 36px;
  border: 1px solid rgb(63, 63, 63);
  font-size: 0.8125rem;
}

div#spells-container button.MuiButton-outlined:hover {
  background-color: rgb(42, 42, 42);
  transition: background-color 0.3s ease 0s;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 .MuiButton-contained {
  background-color: rgb(15, 15, 15);
  font-size: 0.8125rem;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 button:not(.MuiIconButton-root) {
  border: 1px solid rgb(50, 118, 181);
  font-size: 0.8125rem;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 button:not(.MuiIconButton-root):not(.MuiButtonGroup-grouped):hover {
    border: 1px solid rgb(236 201 131) !important;
    transition: border 0.3s ease 0s;
}

div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 div[role="group"] button {
    font-size: 16px;
    text-transform: none;
    background-color: rgb(15, 15, 15);
}


div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 div[role="group"] button:not(button[aria-haspopup="menu"]) {
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/pf-dice-pointer.svg) 0 20, auto;
}


div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 button {
    height: 32px;
}

div#spells-container div#box-content > div:first-child > div:first-child > div:nth-child(2) {
  padding-right: 8px;
}


/* Responsive */


@media (min-width: 1059px) {

  div#spells-container > div:first-child > div:first-child > div:first-child {
    padding-left: 0px;
  }

}

@media (min-width: 743px) {
  
  div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 {
    padding-left: 16px;
  }

  div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > span:first-child {
      grid-column: 1 / 2;
  }
  
  div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > span:nth-child(2) {
      grid-column: 2 / 6;
  }
  
  div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:first-child {
      grid-column: 1 / 2;
      grid-column-gap: 8px;
  }
  
  div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 > div:nth-child(2) {
      grid-column: 2 / 6;
  }
  
  div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child > div:nth-child(3) .MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1 p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: normal;
    white-space: break-spaces;
  }
  
  div#spells-container div#box-content > div:first-child > div:first-child > div:nth-child(2) {
    padding-right: 8px;
  } 

}

@media (max-width: 742px) {
  
  div#spells-container div#box-component {
    padding-left: 8px;
  }

}

@media (min-width: 743px) and (max-width: 899px) {

  div#spells-container > div:first-child > div:first-child > div:first-child {
      padding-left: 8px;
      padding-right: 8px;
  }

}


@media (min-width: 743px) and (max-width: 1023px) {


  div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child {
      padding-left: 12px;
      padding-right:8px;
  }

}


@media (max-width: 1023px) {
  
    div#spells-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:first-child {
      padding-right: 8px;
    } 
  
}


/* Feats Section */


@media (max-width: 742px) {
  
  div#feats-container {
    margin-top: 0px !important;
  }
  
}


div#feats-container {
    margin-top: 8px;
    border-collapse: separate;
    border-radius: 8px;
    border: 1px solid rgb(63, 63, 63);
}

div#feats-container > div:first-child {
    padding-top: 0px;
}

div#feats-container div#box-component > div:first-child {
    border: none !important;
}

div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
  padding: 4px;
  padding-top: 0px;
}

div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child > div:nth-child(2) {
    padding-right: 8px;
}

div#feats-container div#grid-table-component > div:first-child {
  gap: 4px;
}

div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) {
  padding: 0px;
}

div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div:first-child {
    margin: -4px -8px 8px -4px;
}

div#feats-container > div:first-child > div:first-child > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child button {
  height: 32px;
  font-size: 0.8125rem;
  padding: 10px 14px;
}

div#feats-container .MuiButton-containedSecondary.selectedFilterButton {
  background-color: rgb(241, 206, 134);
  font-size: 0.8125rem;
}

div#feats-container button.MuiButton-outlined, div#feats-container .MuiButton-containedSecondary:not(.css-l0lhem) {
  background-color: rgb(15, 15, 15);
  height: 36px;
  border: 1px solid rgb(63, 63, 63);
  font-size: 0.8125rem;
}

div#feats-container button.MuiButton-outlined:hover, div#feats-container .MuiButton-containedSecondary:not(.css-l0lhem):hover {
  background-color: rgb(42, 42, 42);
  transition: background-color 0.3s ease 0s;
}

div#feats-container div#grid-table-component > div:not(:first-child):not(:nth-child(2)) > div:first-child {
  padding: 8px 16px;
  border-radius: 4px;
}


/* Responsive */

@media (min-width: 1059px) {

  div#feats-container > div:first-child > div:first-child > div:first-child {
    padding-left: 0px;
  }

}


@media (min-width: 743px) {

  div#feats-container div#grid-table-component p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: normal;
    white-space: break-spaces;
  }

}


@media (max-width: 742px) {
  
  div#feats-container > div:first-child > div:first-child {
    padding-left: 0px;
    padding-right: 8px;
  }

}

@media (max-width: 1024px) {
  
  div#feats-container div#box-content > div:first-child > div:first-child > div:first-child {
    padding-right: 8px;
  }
  
}



/* Details Section */



@media (max-width: 742px) {
  
  div#details-container {
    margin-top: 0px !important;
  }
  
      div#granted-languages {
        flex-basis: calc(100% + 8px) !important;
        max-width: calc(100% + 8px) !important;
      }
    
      div#details-container div#other-languages {
          flex-basis: calc(100% + 8px) !important;
          max-width: calc(100% + 8px) !important;
          padding-left: 0px !important;
      }
  
  
  
}


div#granted-languages {
    flex-basis: calc(50% + 8px);
    max-width: calc(50% + 8px);
}

div#details-container div#other-languages {
    flex-basis: calc(50% + 8px);
    max-width: calc(50% + 8px);
    padding-left: 8px;
}


div#details-container {
    margin-top: 8px;
    border-collapse: separate;
    border-radius: 8px;
    margin-left: -8px;
}

div#details-container > div:first-child {
    padding-top: 0px;
}

div#details-container label {
    text-transform: uppercase;
    margin-top: -28px;
    font-family: 'GoodOTCondBold';
    font-size: 14px;
    font-weight: 400;
    color: rgb(191, 191, 191);
}

@media (min-width: 743px) {
  
  div#details-container > div:first-child {
    padding-left: 8px;
  }

}

div#details-container > div > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
  padding-left: 2px;
  padding-right: 0px;
}


div#details-container .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-formControl {
    background-color: rgb(15, 15, 15);
    margin-bottom: 12px;
}
  
div#details-container > div > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 12px;
}

/* Mobile Menu */

/* Responsive */

@media (max-width: 742px) {
  
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom {
      margin-bottom: 60px;
      background-image: none;
      background-color: rgb(32, 32, 32);
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom button {
      background-color: rgb(50, 118, 181);
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child {
      flex-direction: row;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:first-child > div:first-child {
      padding-right: 8px;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:first-child > div:first-child > div:nth-child(1) > div {
      background-color: rgb(15, 15, 15);
      border: 1px solid rgb(85, 85, 85);
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
      background-color: rgb(15, 15, 15);
      border: 1px solid rgb(15, 118, 181);
      padding-top: 6px;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:not(:first-child) {
      max-width: 30%;
      min-width: 30%;
      display: flex;
      justify-content: center;
      border: 1px solid rgb(85, 85, 85);
      background-color: rgb(15, 15, 15);
      border-radius: 4px;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:not(:first-child) > h1 {
      font-size: 15px;
      padding-top: 72px;
      padding-bottom: 8px;
      width: 100%;
      text-align: center;
      color: white;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:nth-child(2) {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/abilities-saves-button.jpg);
      background-size: cover;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:nth-child(3) {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/skills-actions-button.jpg);
      background-size: cover;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:nth-child(4) {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/equipment-gear-button.jpg);
      background-size: cover;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:nth-child(5) {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/spells-button.jpg);
      background-size: cover;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:nth-child(6) {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/feats-features-button.jpg);
      background-size: cover;
    }
    
    .mobile-menu-container .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorBottom > div:first-child > div:nth-child(7) {
      background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/details-button.jpg);
      background-size: cover;
    }

}
.reader-container {
  background-color: transparent;
}

@media screen and (max-width: 600px) {
 
  .wip-notification-holder .book-image-left {
    display: none !important;
  }
 
} 

.wip-notification-holder {
  background-color: #010101 !important;
  border: 1px solid #5d0000;
  padding: 20px;
  padding-bottom: 10px;
  
}

.rules-display .Stat-Body-divider, .html-display .Stat-Body-divider {
    border-color: #333333;
}

.wip-notification-header {
  border: none;
  color: white;
  font-size: 22px !important;
}

.main-holder .skill-block {
  background-color: #151515;
  color: white;
  padding-top: 10px;
  padding-bottom: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 0px;
  margin-right: 0px;
  width: auto;
}

.expanded-row .inner-holder {
    padding-bottom: 0px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.expanded-row td:first-child {
  padding-left: 16px;
  padding-right: 16px;
}

.rules-list-container table {
  table-layout: auto;
  word-break: break-word;
}

.main-holder table th {
    color: white;
    background-color: #5e0000;
    font-size: 14px;
    padding: 8px 2px;
}

.main-holder .standard-table {
  font-size: 1rem;
}

.Tables_Table-Row-1, .Table-Row-1 {
    background-color: #252525;
    color: white;
    font-size: 14px;
}

.Tables_Table-Row-2, .Table-Row-2 {
    background-color: #454545;
    color: white;
    font-size: 14px;
}

.Table-Header-Sub {
    background-color: #151515;
    font-weight: bold;
    color: white;
    text-align: left;
}

a.reader-link {
  filter: brightness(1.5);
}

.main-holder {
  background-color: transparent;
  color: #bfbfbf;
  padding-top: 0px;
  padding-bottom: 2rem;
  font-size: 16px;
  line-height: 1.2;
}

.element-tooltip-header-element-name, .element-tooltip-header-details {
  color: white !important;
}

.main-holder {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.main-holder p, .main-holder li {
  color: #bfbfbf;
  font-size: 1rem;
  line-height: 1.5;
  padding-top: 8px;
  padding-bottom: 8px;
}

.main-holder li {
  padding-top: 4px;
  padding-bottom: 4px;
}

.main-holder strong {
  color: white !important;
  font-size: inherit !important;
}

.Stat-Body-divider, .Stat-Block_Stat-Body-divider, .Stat-Block_Stat-Body-Secondary-divider, .Stat-Body-Secondary-divider, .Stat-Block_Stat-Body-Secondary-Body-Divider-Indent, .Stat-Body-divider-Justify, Stat-Block_Stat-Body-Indent-divider, .Stat-Body-Indent-divider, .Stat-Body-Secondary-Body-Divider, .Stat-Blocks_Stat-Body-divider, .Stat-Blocks_Stat-Hanging-divider, .Stat-Blocks_Stat-Body-indent-divider, .Stat-Block_Stat-Body-divider-Justify, .Stat-Blocks_Stat-Outcome-divider, .Stat-Blocks_Stat-Hanging-indent-divider, .Stat-Body-divider {
    border-bottom: 1.5px solid #424242;
    padding-bottom: 16px;
    overflow: hidden;
}

.list-divider {
    border-bottom: 1.5px solid #424242;
    padding-bottom: 16px;
    margin-bottom: -9px;
    overflow: hidden;
}

.one-action-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/single_action_white.svg) !important;
}

.two-action-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/two_action_white.svg) !important;
}

.three-action-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/three_action_white.svg) !important;
}

.reaction-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/reaction_white.svg) !important;
}

.free-action-icon {
    background-image: url(https://content.demiplane.com/compendium/pathfinder-2e/core-rulebook/zIzwJMUoBhjjNAy/free_action_white.svg) !important;
}

.Formula {
  background-color: #151515;
  border-color: #5e0000;
}

.Formula p {
  color: white;
}


.pfn-horizontal-divider::after {
    content: "";
    display: block;
    position: relative;
    top: -2px;
    height: 16px;
    background: url(https://content.demiplane.com/elements/pathfinder-2e/archetypes/PFN-Center-Flourish.png) center bottom no-repeat;
    background-size: contain;
}


.main-holder h5 {
  margin-bottom: 10px;
}

.main-holder h2, .main-holder h3, .main-holder h4, .main-holder h5 {
  color: white !important;
}

.main-holder h1 {
  color: #f1ce86;
  font-size: 22px !important;
  margin-top: 20px;
}

.main-holder h2 {
  font-family: Gin;
  font-size: 20px !important;
}

.main-holder h3 {
  font-family: Gin;
  font-size: 18px !important;
}

.main-holder h4 {
  font-size: 16px !important;
}

.main-holder h5 {
  font-size: 16px !important;
}

.main-holder > H1, .main-holder > H2, .main-holder > H3, .main-holder > H4, .main-holder > H5 {
    margin-top: 30px;
    margin-bottom: 10px;
}

.main-holder h2:first-child {
  margin-top: 20px !important;
}

.main-holder .heading-block {
  background-color: #151515;
  color: white;
  padding-top: 20px;
  padding-bottom: 20px;
}

.main-holder .trait-holder {
  background-color: #151515;
  color: #CFCFCF;
}

.trait-holder .split-header, .class-feature {
    color: white;
    border-color: #333333 !important;
}

.main-holder .brown-graphic-header {
  display: none;
}

.main-holder .brown-callout-block-holder {
    background: #151515;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0px 2px 12px rgb(0 0 0 / 20%);
    color: #CFCFCF;
    margin-bottom: 20px;
}


.main-holder .sidebar {
  background-color: #151515;
  color: #CFCFCF;
}



.sidebar h5, .sidebar h3 {
  color: white;
}

.pfn-horizontal-divider::after {
    top: -2px;
    height: 16px;
    background-size: contain !important;
    background: url(https://content.demiplane.com/nexus/pathfinder-2e/PFN-Center-Flourish-D.png) center bottom no-repeat;
}
/* General */

.drawer-container {
  padding: 0px !important;
  background-color: rgb(32, 32, 32);
}

h1.drawer-header__title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.drawer-container a {
  text-decoration: none;
}

.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiPaper-root.MuiMenu-paper.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper {
    max-height: 500px;
}

.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiPaper-root.MuiMenu-paper.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper::-webkit-scrollbar {
    display: block;
    width: 8px;
}

.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiPaper-root.MuiMenu-paper.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper::-webkit-scrollbar-track {
    background: #212121;
}

.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiPaper-root.MuiMenu-paper.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPopover-paper::-webkit-scrollbar-thumb {
    background: #3f3f3f !important;
}

.drawer-container button.MuiButtonBase-root.MuiButton-root.MuiButton-outlined.MuiButton-outlinedSecondary.MuiButton-sizeMedium.MuiButton-outlinedSizeMedium.MuiButton-fullWidth.MuiButton-root.MuiButton-outlined.MuiButton-outlinedSecondary.MuiButton-sizeMedium.MuiButton-outlinedSizeMedium.MuiButton-fullWidth {
    font-family: 'GoodOTCondBold';
    font-size: 0.8125rem;
    padding-top: 8px;
    margin-left: auto;
    margin-right: auto;
}


.drawer-container button.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeMedium.MuiButton-containedSizeMedium.MuiButton-fullWidth.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary.MuiButton-sizeMedium.MuiButton-containedSizeMedium.MuiButton-fullWidth.css-1eacly9 {
    font-family: 'GoodOTCondBold';
    letter-spacing: 0px;
    font-size: 0.8125rem;
    font-weight: 400;
    padding-top: 8px;
}

.drawer-container button.MuiButton-outlined {
  background-color: rgb(15, 15, 15);
}

div.character-sheet-drawer {
    height: unset;
}

div.character-sheet-drawer .MuiPaper-root.MuiPaper-elevation.MuiPaper-elevation16.MuiDrawer-paper.MuiDrawer-paperAnchorRight {
    background-image: none !important;
    background-color: rgb(32, 32, 32) !important;
}

div#drawer-class-feature-container {
    padding-right: 8px;
}


/* Animist Apparition Additions */


div#apparition-select-container {
    flex-direction: column;
    margin-bottom: 16px;
}

div#apparition-select-container .select-block__label {
    color: #838383;
    font-size: 14px;
    font-family: GoodOTCondBold;
    text-transform: uppercase;
}

div#apparition-select-container .select-block__select {
    background-color: rgb(15 15 15);
    padding: 12px;
    border-radius: 8px;
    font-family: Nunito;
    font-size: 14px;
    border: 1px solid rgb(83, 83, 83);
    margin-top: 4px;
    margin-bottom: 16px;
    padding: 8px;
}

div#apparition-select-container .select-block__select:before {
    border-bottom: none;
}

div#apparition-select-container .button-component__button {
    margin-top: -16px !important;
    color: #e8c682;
    font-size: 12px;
    min-width: unset;
}

span.attuned-apparition-text {
    font-size: 16px;
    display: flex;
    flex-direction: column;
    margin-bottom: 16px !important;
}

span.attuned-apparition-text--label {
    color: #838383;
    font-size: 14px;
    font-family: GoodOTCondBold;
    text-transform: uppercase;
}

span.attuned-apparition-text--value {
    font-family: 'Nunito';
    font-size: 16px;
}



/* Exemplar Immanence Additions */

div#immanence-select-container .select-block__label {
    color: #838383;
    font-size: 14px;
    font-family: GoodOTCondBold;
    text-transform: uppercase;
}

div#immanence-select-container .select-block__select {
    background-color: rgb(15 15 15);
    padding: 12px;
    border-radius: 8px;
    font-family: Nunito;
    font-size: 14px;
    border: 1px solid rgb(83, 83, 83);
    margin-top: 4px !important;
    margin-bottom: 16px;
    padding: 8px;
}

div#immanence-select-container .select-block__select:before {
    border-bottom: none;
}





/* Add Container Drawer */



div#drawer-add-container-container > div:nth-child(2) > div:first-child > div:nth-child(2) button.button-component__button--disabled {
  background-color: gray;
}

div#drawer-add-container-container > div:first-child {
    padding-right: 8px;
}

div#drawer-add-container-container label {
    font-weight: 400;
    font-family: GoodOTCondBold;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    font-size: 18px;
}

div#drawer-add-container-container label + div {
    background-color: rgb(15 15 15);
    padding: 12px;
    border-radius: 8px;
    font-family: Nunito;
    font-size: 14px;
    border: 1px solid rgb(83, 83, 83);
}

div#drawer-add-container-container > div:first-child > div:nth-child(3) {
    width: 100%;
}

div#drawer-add-container-container > div:first-child > div:nth-child(3) > div:first-child {
    align-items: center;
}

div#drawer-add-container-container > div:first-child > div:nth-child(3) > div:first-child > div:first-child > div:first-child > div:first-child {
    font-size: 16px;
}

div#drawer-add-container-container > div:first-child > div:nth-child(4) {
    width: 100%;
}

div#drawer-add-container-container > div:first-child > div:nth-child(4) > div:first-child {
    align-items: center;
}

div#drawer-add-container-container > div:first-child > div:nth-child(4) > div:first-child > div:first-child > div:first-child > div:first-child {
    font-size: 16px;
}

div#drawer-add-container-container > div:nth-child(2) > div:first-child {
    background: transparent;
}

div#drawer-add-container-container > div:nth-child(2) > div:first-child > div:first-child button {
    background-color: rgb(15, 15, 15);
    height: 36px;
    border: 1px solid rgb(63, 63, 63);
}

div#drawer-add-container-container > div:nth-child(2) > div:first-child > div:first-child button:hover {
    background-color: rgb(63, 63, 63);
}

div#drawer-add-container-container > div:nth-child(2) > div:first-child > div:nth-child(2) button {
    background-color: rgb(50 118 181);
    height: 36px;
    border: 1px solid rgb(63, 63, 63);
}

div#drawer-add-container-container > div:nth-child(2) > div:first-child > div:nth-child(2) button:hover {
    border: 1px solid rgb(241, 206, 134);
}




/* Drawer Scrollbars */


@media screen and (min-width: 1920px) {

    .character-sheet-drawer > div:first-child > div:nth-child(2) {
          padding-right: 8px;
          margin-right: -12px;
    }
    
    
    .character-sheet-drawer > div:first-child > div:nth-child(2)::-webkit-scrollbar {
        display: block !important;
        width: 8px;
    }
    
    .character-sheet-drawer > div:first-child > div:nth-child(2)::-webkit-scrollbar-track {
        background-color: transparent;
    }
    
    .character-sheet-drawer > div:first-child > div:nth-child(2)::-webkit-scrollbar-thumb {
        background-color: rgb(83 83 83) !important;
        pointer-events: all;
    }

}


@media screen and (max-width: 1919px) {
  
    div#drawer-title-container {
        max-width: 385px;
        padding-right: 16px !important;
    }
    

}

@media screen and (max-width: 742px) {
  
    div#drawer-title-container {
        max-width: 510px;
        padding-right: 24px !important;
    }
    

}



.character-sheet-drawer > div:nth-child(3)::-webkit-scrollbar {
    display: block !important;
    width: 8px;
}

.character-sheet-drawer > div:nth-child(3)::-webkit-scrollbar-track {
    background-color: transparent;
}

.character-sheet-drawer > div:nth-child(3)::-webkit-scrollbar-thumb {
    background-color: rgb(83 83 83) !important;
    pointer-events: all;
}





/* Close Button */

#drawer-title-container button.MuiIconButton-sizeMedium {
    position: relative;
    right: -8px;
    top: 8px;
}

svg[data-testid="CloseIcon"] {
    height: 32px;
    width: auto;
}

.html-display.main-holder p {
  line-height: 1.5;
  margin-block-start: 8px;
  margin-block-end: -16px;
}

div:not(.main-holder) ul p {
  text-transform: capitalize;
  color: #838383;
}

div#drawer-character-container {
    justify-content: flex-start;
    row-gap: 24px;
    padding-bottom: 0px;
}

div#drawer-title-container > div:last-child > div:first-child {
    display: flex;
    flex-wrap: wrap;
    max-height: unset;
}

div#drawer-title-container + div:after {
  content: "";
  display: block;
  height: 64px;
  background: linear-gradient(0deg, rgb(32, 32, 32) 30%, rgba(32, 32, 32, .5) 90%, transparent 100%);
  background-position: bottom center;
  position: relative;
  bottom: 16px;
  z-index: 9;
  margin-left: -16px;
  margin-right: -16px;
  pointer-events: none;
}

div#rules-list-container > div:first-child, div.rules-list-container > div:first-child {
    box-shadow: none;
}

div#drawer-character-container > div:first-child .MuiButton-containedPrimary {
    background-image: url(https://content.demiplane.com/nexus/pathfinder-2e/character/to-character-builder-bg.jpg);
    background-size: auto 114%;
    background-repeat: no-repeat;
    background-position: top center;
    height: 48px;
    font-size: 14px;
}



/* Add Custom Skill Block */

div#drawer-add-custom-skill-container label {
    margin: 0px;
    line-height: 1.167;
    letter-spacing: 0em;
    text-transform: uppercase;
    font-family: 'GoodOTCondBold';
    font-weight: 400;
    font-size: 14px;
    color: rgb(191, 191, 191);
}

div#drawer-add-custom-skill-container .input-block {
    margin-bottom: 16px;
}

div#drawer-add-custom-skill-container > div:nth-child(2) > div:first-child > div:nth-child(2) button {
    background-color: rgb(50 118 181);
    height: 36px;
    border: 1px solid rgb(63, 63, 63);
}

div#drawer-add-custom-skill-container > div:nth-child(2) > div:first-child > div:nth-child(2) button {
    background-color: rgb(50 118 181);
    height: 36px;
    border: 1px solid rgb(63, 63, 63);
}

div#drawer-add-custom-skill-container .button-component__button--disabled {
    background-color: gray !important;
}

div#drawer-add-custom-skill-container > div:nth-child(2) > div:first-child > div:nth-child(2) button:hover {
    border: 1px solid rgb(241, 206, 134);
}

div#drawer-add-custom-skill-container > div:nth-child(2) > div:first-child > div:first-child button {
    background-color: rgb(15, 15, 15);
    height: 36px;
    border: 1px solid rgb(63, 63, 63);
}

div#drawer-add-custom-skill-container > div:nth-child(2) > div:first-child > div:first-child button:hover {
    background-color: rgb(63, 63, 63);
}

div#drawer-skills-container > div.button-component {
    padding-top: 0px;
    padding-bottom: 16px;
}

div#drawer-skills-container > div.button-component button {
    margin: 0px;
    font-family: GoodOTCondBold;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: rgb(241, 206, 134);
    font-size: 12px;
    font-weight: 400;
    pointer-events: auto;
    cursor: pointer;
    text-transform: uppercase;
}

div#drawer-skills-container > div.button-component button:hover {
    background-color: rgba(255, 255, 255, 0.08);
}



/* Skill Input Block */


div#drawer-skill-input label {
    position: relative;
    top: -12px;
    text-transform: uppercase;
    font-family: 'GoodOTCondBold';
    font-weight: 400;
    font-size: 14px;
}

div#drawer-skill-input-container label + div {
    background-color: rgb(15, 15, 15);
    min-height: 36px;
}


div#skill-drawer-value-container > div:nth-child(2) > div:first-child {
    max-width: 220px;
}


/* Character Menu */

div#drawer-character-container .MuiButton-containedPrimary {
    border: 1px solid rgb(50, 118, 181);
    background-color: rgb(15, 15, 15);
    height: 32px;
    padding-left: 12px;
    padding-right: 12px;
}

div#drawer-character-container label {
    font-size: 18px;
    margin-bottom: 4px;
    font-family: GoodOTCondBold;
    letter-spacing: 0px;
    font-weight: 400;
}

div#drawer-character-container > div:nth-child(2) {
    align-items: flex-end;
}

div#drawer-character-container h3 {
    font-weight: 400;
    font-family: GoodOTCondBold;
    z-index: 90;
}

div#drawer-character-container .MuiInputBase-formControl {
    background-color: rgb(15 15 15);
    padding: 12px;
    border-radius: 8px;
    font-family: Nunito;
    font-size: 14px;
    border: 1px solid rgb(83, 83, 83);
}

div#drawer-character-container .MuiInputBase-formControl > input {
    padding-left: 0px;
}


div#drawer-character-container .MuiInputBase-formControl > div {
    padding: 0px;
}

div#drawer-character-container > div:first-child .MuiButton-containedPrimary:hover {
    border: 1px solid #f1ce86;
    filter: drop-shadow(0px 0px 12px #f1ce868c);
    box-shadow: none;
    transition: all 0.3s ease 0s;
}

div#drawer-character-theme-container > div:first-child > div > div {
    padding: 0px;
    margin-top: 4px;
    margin-bottom: 4px;
}

div#drawer-character-theme-container > div:first-child > div > div > div:first-child:hover {
    border: 1px solid #f1ce86;
    filter: drop-shadow(0px 0px 12px #f1ce868c);
    box-shadow: none;
    transition: all 0.3s ease 0s;
}


/* Share Banner */

h4.viewing-banner__title {
    font-family: 'goodOtCondBold';
    text-transform: uppercase;
    color: white;
}

h4.viewing-banner__title-readonly {
    font-family: 'Nunito';
    font-size: 14px;
    margin-left: 8px;
    color: gray;
}

.viewingBannerContainer.viewing-banner__content-block {
    background: black;
    border-bottom: 1px solid #5c1c16;
}

.viewingBannerButtonContainer button.viewingBannerAction {
    padding-top: 2px;
    background-color: black;
    color: white;
    border-color: #ebc983;
}


/* Character Sharing */

div#drawer-character-share-container {
    margin-top: 24px;
}

div#drawer-character-share-container > div:first-child > div:first-child h4 {
    font-weight: 400;
    font-family: GoodOTCondBold;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    font-size: 18px;
}

div#drawer-character-share-container label {
    font-size: 16px;
}

div#drawer-character-share-container + div {
    display: flex;
    justify-content: center;
    padding-bottom: 60px !important;
    align-items: center;
}



.viewingBannerButtonContainer button.viewingBannerAction {
    padding-top: 2px;
}



/* Currency */



div#drawer-currency-container {
    margin-top: 0px;
}


div#drawer-currency-container button {
    padding-top: 8px;
}


/* Drawer Damages */

div#drawer-damages-display-container {
    margin-top: 8px;
}

div#drawer-damages-display-container-title {
    color: #838383;
    font-size: 14px;
    font-family: GoodOTCondBold;
    text-transform: uppercase;
}

div#drawer-damage-display-row {
    background-color: rgb(63, 63, 63);
    margin-top: 8px;
    margin-left: -16px;
    margin-right: -20px;
    width: calc(100% + 36px);
    padding-left: 28px;
}

div#drawer-damage-display-row-value {
    font-size: 18px;
    letter-spacing: 0px;
    height: 32px;
    background-color: rgb(15, 15, 15);
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dice-pointer-icon.svg) 0 20, auto;
    border: 1px solid rgb(85, 85, 85);
    vertical-align: middle;
    text-decoration: none;
    padding: 6px 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;
    color: rgb(255, 255, 255);
    font-family: 'GoodOTCondBold';
    font-weight: 700;
    min-width: 64px;
    text-align: center;
    max-height: 36px;
    border-radius: 4px;
}

div#drawer-damage-display-row-label {
    padding-top: 6px;
    font-size: 16px;
    cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dice-pointer-icon.svg) 0 20, auto;
}

div#drawer-damage-display-row-breakdown-grid {
    background-color: rgb(32, 32, 32);
    margin-left: -20px;
    margin-top: 8px;
    width: calc(100% + 16px);
    padding-left: 24px;
}



/* Runes */


div#drawer-rune-container {
    padding-left: 16px;
    padding-right: 8px;
    margin-top: 16px;
    align-items: stretch !important;
}

div#drawer-rune-container > div:first-child button {
    font-size: 0.8125rem;
    color: white;
    background: rgb(15 15 15);
    border: 1px solid rgb(83 83 83);
    padding: 4px 10px;
    min-width: 64px;
    height: 32px;
}

div#drawer-rune-container button.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary {
    background-color: transparent;
    font-size: 0.8125rem;
    padding: 6px;
    height: 30px;
    border: 1px solid rgb(83 83 83);
}

div#drawer-rune-container div {
    font-family: 'GoodOTCondBold';
}



/* Add Runes Drawer */



/* Responsive */

@media (min-width: 1920px) {
    div#add-runes-drawer > div:nth-child(2) > div:nth-child(3) {
      height: calc(100vh - 24rem);
    }
}


div#add-runes-drawer > div:first-child {
  font-size: 18px;
  font-family: 'GoodOTCondBold';
}

  div#add-runes-drawer > div:nth-child(2) > div:nth-child(3) {
    height: 100vh;
  }

div#add-runes-drawer div#grid-table-component > div > div:first-child > div:nth-child(1) {
    background: #323232;
    border-radius: 4px;
    max-width: 36px;
    max-height: 36px;
}

div#add-runes-drawer > div:nth-child(2) > div:first-child {
  margin-bottom: 12px;
}

div#drawer-add-runes-drawer div#grid-table-component {
    padding-bottom: 40px;
}

div#add-runes-drawer div#grid-table-component > div > div:first-child > div:nth-child(1) > div:first-child {
    max-width: 36px;
    max-height: 36px;
}

div#add-runes-drawer div#grid-table-component > div > div:first-child > div:nth-child(1) img {
    border-radius: 4px;
    height: 36px !important;
    width: 36px !important;
}

div#add-runes-drawer div#grid-table-component > div {
  padding: 4px 8px 4px 8px;
  background: rgb(32 32 32);
  margin-top: 0px;
}

div#add-runes-drawer > div:nth-child(2) > div:nth-child(3) >div:first-child > div:nth-child(even) {
    background-color: rgb(15, 15, 15) !important;
}

div#add-runes-drawer div#grid-table-component > div > div:first-child {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    grid-template-columns: 36px 204px 62px;
}

div#add-runes-drawer div#grid-table-component > div > div:first-child > div:nth-child(2) {
  font-family: 'GoodOTCondBold';
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: break-spaces;
  text-transform: uppercase;
  font-size: 15px;
}

div#add-runes-drawer div#grid-table-component > div > div:first-child button {
  background-color: rgb(15, 15, 15);
  color: white;
  border: 1px solid rgb(50, 118, 181);
  padding-top: 1px;
  height: 32px;
  font-size: 0.8125rem;
}

div#add-runes-drawer div#grid-table-component > div > div:first-child > div:nth-child(3) > div:first-child > div:first-child {
  font-size: 12px;
}



/* Manage Runes */


div#manage-runes-container > div:first-child > div:first-child {
    font-family: 'GoodOT';
    font-size: 14px;
    line-height: 1.5;
}

div#manage-runes-container > div:not(:first-child) > div:first-child > div:first-child > div:first-child > div:first-child {
    font-size: 16px;
    text-transform: uppercase;
    font-family: GoodOTCondBold;
}

div#manage-runes-container > div:not(:first-child) > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:first-child > div:first-child {
    margin: 0px;
    font-family: GoodOTCondBold;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgb(245, 245, 245);
}

div#manage-runes-container > div:not(:first-child) > div:first-child > div:first-child > div:nth-child(2) > div:first-child > div:nth-child(2) > div:first-child {
    margin: 0px;
    font-family: goodOTCondBold;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.167;
    letter-spacing: 0em;
    color: rgb(241, 206, 134);
    padding-left: 4px;
}

div#manage-runes-container > div:not(:first-child) > div:first-child > div:last-child > div:first-child > div:first-child > div:first-child > div:first-child input {
    font: inherit;
    letter-spacing: inherit;
    border: 0px;
    -webkit-tap-highlight-color: transparent;
    animation-name: mui-auto-fill-cancel;
    animation-duration: 10ms;
}

div#manage-runes-container > div:not(:first-child) > div:first-child > div:last-child > div:first-child > div:nth-child(2) > div:first-child {
    margin: 0px;
    font-family: GoodOTCondBold;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.334;
    letter-spacing: 0em;
    text-transform: uppercase;
}




/* Title Container */

div#drawer-title-container > div:first-child {
    text-transform: uppercase;
    font-weight: 400;
    color: #777777;
}


div#drawer-title-container {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 8px;
  background-color: rgb(15, 15, 15);
  border-bottom: 1px solid rgb(85, 85, 85);
  position: sticky;
  top: 0px;
  z-index: 9;
}

div#drawer-title-container span.MuiTypography-caption {
  font-family: 'GoodOT';
  text-transform: uppercase;
  color: #838383;
}


/* Drawer Base Padding */

div#drawer-title-container + div {
  padding: 16px;
  background-color: rgb(32 32 32);
  height: unset;
}

@media (min-width: 1920px) {
  
    div#drawer-title-container + div {
      max-height: calc(100vh - 237px) !important;
    }

}

/* Notes & Compendium Containers */

.notes-list-container {
    margin-top: 16px !important;
    padding-top: 0px !important;
}

.rules-list-container > div:not(.main-holder) {
    padding-left: 0px;
    padding-right: 0px;
}

.notes-list-container div#noteDisplay > div:first-child {
  padding: 12px;
}

.notes-list-container div#noteDisplay div {
  font-size: 14px;
  background-image: none;
  text-align: justify;
}

.notes-list-container div#noteDisplay p {
  padding-bottom: 8px;
}

.notes-list-container > div:first-child h3 {
  color: #838383;
  font-size: 14px;
}

div#rules-list-container > div:first-child > div:first-child > h3, .rules-list-container > div:first-child > div:first-child > h3 {
  color: #838383;
  font-size: 14px;
  font-family: GoodOTCondBold;
}

div#rules-list-container h3, .rules-list-container h3 {
  font-family: Gin;
  font-size: 20px;
}

.rules-display.main-holder {
  font-family: Gin;
  font-size: 18px;
  padding-bottom: 64px;
}

div#rules-list-container, div.rules-list-container {
    margin-top: 24px !important;
    padding-top: 0px !important;
    padding-bottom: 36px;
}

div#rules-list-container > div:nth-child(2) > div:first-child, div.rules-list-container > div:nth-child(2) > div:first-child {
  padding-left: 8px;
  padding-right: 8px;
}

div#rules-list-container > div:nth-child(2) > div:first-child > div:first-child, div.rules-list-container > div:nth-child(2) > div:first-child > div:first-child {
  box-shadow: none;
}


/* Ability Score Drawers */


div#drawer-ability-score-strength-container > div:first-child, div#drawer-ability-score-dexterity-container > div:first-child, div#drawer-ability-score-constitution-container > div:first-child,
div#drawer-ability-score-intelligence-container > div:first-child, div#drawer-ability-score-wisdom-container > div:first-child, div#drawer-ability-score-charisma-container > div:first-child {
  background-color: rgb(63, 63, 63);
  padding-top: 4px;
  padding-bottom: 4px;
  width: calc(100% + 24px);
  align-items: center;
  border-bottom: 1px solid rgb(85, 85, 85);
}

div#drawer-ability-score-strength-container > div:first-child > div:first-child, div#drawer-ability-score-dexterity-container > div:first-child > div:first-child, div#drawer-ability-score-constitution-container > div:first-child > div:first-child,
div#drawer-ability-score-intelligence-container > div:first-child > div:first-child, div#drawer-ability-score-wisdom-container > div:first-child > div:first-child, div#drawer-ability-score-charisma-container > div:first-child > div:first-child {
  background-color: rgb(32, 32, 32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 3px 6px;
  margin-top: 8px;
  border-radius: 50%;
  height: 36px;
  width: 36px;
}

div#drawer-ability-score-strength-container > div:nth-child(2) > div:first-child, div#drawer-ability-score-dexterity-container > div:nth-child(2) > div:first-child, div#drawer-ability-score-constitution-container > div:nth-child(2) > div:first-child,
div#drawer-ability-score-intelligence-container > div:nth-child(2) > div:first-child, div#drawer-ability-score-wisdom-container > div:nth-child(2) > div:first-child, div#drawer-ability-score-charisma-container > div:nth-child(2) > div:first-child {
  margin-bottom: -32px;
  pointer-events: all;
}

button#ability-score-modify-button {
    position: relative;
    right: 0px;
    top: -55px;
    background-color: rgb(15, 15, 15);
    border: 1px solid rgb(85, 85, 85);
    box-shadow: none;
    padding-top: 5px;
    height: 32px;
}

div#ability-score-modify-container {
    justify-content: flex-start;
}

div#ability-score-modify-container > div:first-child {
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding-left: 16px;
}

div#ability-score-modify-container > div:nth-child(2) {
    margin-top: 24px;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: center;
}

div#ability-score-modify-container > div:nth-child(2) > div:first-child {
    flex-basis: 100%;
    max-width: 100%;
    margin-top: 16px;
}

div#ability-score-modify-container > div:nth-child(2) > div:nth-child(2) {
    display: flex;
    justify-content: center;
    gap: 8px;
}

div#ability-score-modify-container > div:nth-child(2) > div:nth-child(2) > div:first-child > button {
    padding-top: 4px;
    height: 32px;
    border-color: rgb(83, 83, 83);
}

div#ability-score-modify-container > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > button {
    padding-top: 4px;
    height: 32px;
    background-color: rgb(50, 118, 181);
}

div#ability-score-modify-container > div:first-child > div {
    flex-basis: 30%;
    max-width: 30%;
    padding: 0px;
}

div#ability-score-modify-container > div:first-child > div > div:first-child {
    padding-top: 8px;
}

div#ability-score-modify-container > div:first-child > div > div:first-child > label {
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'GoodOTCondBold';
    font-size: 14px;
    transform: none;
    position: relative;
    text-align: center;
}

div#ability-score-modify-container > div:first-child > div > div:first-child > div > input {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}


div#ability-score-modify-container legend > span {
  display: none;
}

  
  
/* Armor Drawer */


button#ac-drawer-modify-button {
    position: relative;
    background-color: rgb(15, 15, 15) !important;
    border: 1px solid rgb(83, 83, 83);
    box-shadow: none;
}

div#drawer-armor-container > div:first-child {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    position: relative;
    right: 0px;
    top: 41px;
    padding: 4px;
    margin-top: -40px;
}


div#drawer-armor-container > div:nth-child(2) {
  background-color: rgb(63, 63, 63);
  padding-top: 4px;
  padding-bottom: 4px;
  width: calc(100% + 24px);
  align-items: center;
  border-bottom: 1px solid rgb(85, 85, 85);
}

div#drawer-armor-container > div:nth-child(2) > div:nth-child(3) {
  background-color: rgb(32, 32, 32);
  margin-left: -8px;
  width: calc(100% + 16px);
  margin-bottom: -10px;
  padding: 16px;
}

div#drawer-armor-container > div:nth-child(2) > div:first-child {
  background-color: rgb(32, 32, 32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 3px 6px;
  margin-top: 8px;
  margin-bottom: 4px;
  border-radius: 50%;
  height: 36px;
  width: 36px;
}



/* Saving Throws Drawer */


button#saving-throws-modify-button {
    position: relative;
    background-color: rgb(15, 15, 15) !important;
    border: 1px solid rgb(83, 83, 83);
    box-shadow: none;
}



/* Fort */

div#drawer-saving-throws-container > div:nth-child(2) {
  background-color: rgb(63, 63, 63);
  padding-top: 4px;
  padding-bottom: 4px;
  width: calc(100% + 24px);
  align-items: center;
  border-bottom: 1px solid rgb(85, 85, 85);
}

div#drawer-saving-throws-container > div:nth-child(2) > div:first-child > div:first-child {
  background-color: rgb(32, 32, 32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 3px 4px;
  border-radius: 50%;
  height: 36px;
  width: 36px;
}  

div#drawer-saving-throws-container > div:nth-child(2) > div:first-child > div:nth-child(3) span {
  font-family: GoodOT;
  font-size: 14px;
}

div#drawer-saving-throws-container > div:nth-child(3) {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: -5px;
    right: 0px;
    width: 100%;
    margin-top: -50px;
}



/* Reflex */

div#drawer-saving-throws-container > div:nth-child(5) {
  background-color: rgb(63, 63, 63);
  padding-top: 4px;
  padding-bottom: 4px;
  width: calc(100% + 24px);
  align-items: center;
  border-bottom: 1px solid rgb(85, 85, 85);
  margin-top: 16px;
}

div#drawer-saving-throws-container > div:nth-child(5) > div:first-child > div:first-child {
  background-color: rgb(32, 32, 32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 3px 4px;
  border-radius: 50%;
  height: 36px;
  width: 36px;
}  

div#drawer-saving-throws-container > div:nth-child(5) > div:first-child > div:nth-child(3) span {
  font-family: GoodOT;
  font-size: 14px;
}

div#drawer-saving-throws-container > div:nth-child(6) {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: -5px;
    right: 0px;
    width: 100%;
    margin-top: -50px;
}





/* Will */

div#drawer-saving-throws-container > div:nth-child(8) {
  background-color: rgb(63, 63, 63);
  padding-top: 4px;
  padding-bottom: 4px;
  width: calc(100% + 24px);
  align-items: center;
  border-bottom: 1px solid rgb(85, 85, 85);
  margin-top: 16px;
}

div#drawer-saving-throws-container > div:nth-child(8) > div:first-child > div:first-child {
  background-color: rgb(32, 32, 32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 3px 4px;
  border-radius: 50%;
  height: 36px;
  width: 36px;
}  

div#drawer-saving-throws-container > div:nth-child(8) > div:first-child > div:nth-child(3) span {
  font-family: GoodOT;
  font-size: 14px;
}

div#drawer-saving-throws-container > div:nth-child(9) {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: -5px;
    right: 0px;
    width: 100%;
    margin-top: -50px;
}


/* Speed Drawer */


button#speed-drawer-modify-button {
    position: relative;
    background-color: rgb(15, 15, 15) !important;
    border: 1px solid rgb(83, 83, 83);
    box-shadow: none;
}

div#drawer-movement-container > div:nth-child(3) {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: -5px;
    right: 0px;
    width: 100%;
    margin-top: -50px;
}

div#drawer-movement-container > div:first-child {
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: auto;
    padding: 0px;
    margin-top: 16px;
}

div#drawer-movement-container > div:first-child > div {
    padding: 0px;
    max-width: 30%;
}

div#drawer-movement-container div#squareComponentContainer div#squareComponentHeader {
    font-family: 'GoodOTCondBold';
}

div#drawer-movement-container div#squareComponentContainer div#squareComponentContent > div:first-child > div:first-child > div:first-child {
    font-family: 'GoodOTCondBold';
    font-size: 20px;
    font-weight: 400;
}

div#drawer-movement-container div#squareComponentContainer div#squareComponentContent > div:first-child > div:nth-child(2) > div:first-child {
    font-family: 'GoodOTCondBold';
    font-weight: 400;
}

label[for="speed-select"] {
    font-family: 'GoodOTCondBold';
    font-size: 12px;
    text-align: center;
}

div#drawer-movement-container > div:nth-child(2) {
    background-color: rgb(63, 63, 63);
    padding-top: 4px;
    margin-top: 16px;
    padding-left: 32px;
    padding-bottom: 4px;
    width: calc(100% + 32px);
    align-items: center;
    border-bottom: 1px solid rgb(85, 85, 85);
}

div#drawer-movement-container > div:nth-child(2) > div:first-child {
    background-color: rgb(32, 32, 32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px 3px 6px;
    border-radius: 50%;
    height: 36px;
    width: 36px;
}

div#drawer-movement-container > div:nth-child(2) > div:nth-child(2) {
    padding-top: 0px;
}


/* Perception Drawer */


div#drawer-perception-container div#squareComponentContent div {
    font-size: 18px;
}

div#drawer-perception-container div#squareComponentHeader {
    text-transform: uppercase;
    font-family: 'GoodOTCondBold';
    font-weight: 400;
    font-size: 14px;
}

button#perception-modify-button {
    position: relative;
    background-color: rgb(15, 15, 15) !important;
    border: 1px solid rgb(83, 83, 83);
    box-shadow: none;
}

div#drawer-perception-container > div:nth-child(2) {
    display: flex;
    justify-content: flex-end;
    position: relative;
    top: -5px;
    right: 0px;
    width: 100%;
    margin-top: -50px;
}

div#perception-drawer-value-container {
    background-color: rgb(63, 63, 63);
    padding-top: 4px;
    margin-top: 0px;
    padding-left: 32px;
    padding-bottom: 4px;
    width: calc(100% + 24px);
    align-items: center;
    border-bottom: 1px solid rgb(85, 85, 85);
}

div#perception-drawer-value-container > div:first-child {
    background-color: rgb(32, 32, 32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px 3px 4px;
    border-radius: 50%;
    height: 36px;
    width: 36px;
}

div#perception-drawer-value-container > div:nth-child(2) {
    padding-top: 0px;
}


/* Skills Drawer */


div#drawer-skills-container label {
    color: #838383;
    font-size: 14px;
    font-family: GoodOTCondBold;
    text-transform: uppercase;
    left: -12px;
}

div#drawer-skills-container .MuiInputBase-root.MuiInputBase-colorPrimary.MuiInputBase-formControl input {
    padding: 0px;
}

div#drawer-skills-container .MuiTextField-root .MuiInputBase-root.MuiInputBase-colorPrimary.MuiInputBase-formControl {
    width: calc(100% - 16px);
}



div#drawer-skills-container .MuiInputBase-root.MuiInputBase-colorPrimary.MuiInputBase-formControl {
    background-color: rgb(15 15 15);
    padding: 12px;
    border-radius: 8px;
    font-family: Nunito;
    font-size: 14px;
    border: 1px solid rgb(83, 83, 83);
    margin-top: 4px;
    margin-bottom: 16px;
    width: calc(100% - 32px);
    padding: 8px;
}

div#drawer-skills-container .MuiInputBase-root.MuiInputBase-colorPrimary.MuiInputBase-formControl:before {
    border-bottom: none;
}

div#drawer-skills-container .MuiInputBase-root.MuiInputBase-colorPrimary.MuiInputBase-formControl:after {
    border-bottom: none;
}



/* Skill Selection Block */
div#drawer-select-skill-container label {
    font-size: 16px;
}

div#drawer-select-skill {
    background-color: rgb(15 15 15);
    padding: 12px;
    border-radius: 8px;
    font-family: Nunito;
    font-size: 14px;
}

div#drawer-select-skill-container label + div {
  margin-top: 8px;
}

div#drawer-select-skill-container label + div:before, div#drawer-select-skill-container label + div:after {
    border-bottom: none;
}

div#menu- li.MuiButtonBase-root.MuiMenuItem-root.MuiMenuItem-gutters {
    font-family: Nunito;
    font-size: 14px;
}

/* END */

div#skill-drawer-value-container {
    background-color: rgb(63, 63, 63);
    padding-top: 4px;
    margin-top: 0px;
    padding-left: 32px;
    padding-bottom: 4px;
    width: calc(100% + 24px);
    align-items: center;
    border-bottom: 1px solid rgb(85, 85, 85);
    margin-bottom: 0px;
}

div#skill-drawer-value-container > div:first-child {
    background-color: rgb(32, 32, 32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px 3px 4px;
    border-radius: 50%;
    height: 36px;
    width: 36px;
}

div#skill-drawer-value-container > div:nth-child(2) {
    padding-top: 2px;
}

button#skill-modify-button {
    position: relative;
    right: 0px;
    top: -12px;
    background-color: rgb(15, 15, 15);
    border: 1px solid rgb(85, 85, 85);
    box-shadow: none;
    padding-top: 5px;
    height: 32px;
}

div#skill-drawer-value-container + div {
  margin-top: -43px;
  pointer-events: all;
}




div#skill-modify-container {
    justify-content: flex-start;
    display: flex;
    margin-top: 0px;
}

div#skill-modify-container > div:first-child {
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  display: flex;
}

div#skill-modify-container > div:nth-child(2) {
    margin-top: 24px;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: center;
}

div#skill-modify-container > div:nth-child(2) > div:first-child {
    flex-basis: 100%;
    max-width: 100%;
    margin-top: 16px;
}

div#skill-modify-container > div:nth-child(2) > div:nth-child(2) {
    display: flex;
    justify-content: center;
    gap: 8px;
}

div#skill-modify-container > div:nth-child(2) > div:nth-child(2) > div:first-child > button {
    padding-top: 4px;
    height: 32px;
    border-color: rgb(83, 83, 83);
}

div#skill-modify-container > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > button {
    padding-top: 4px;
    height: 32px;
    background-color: rgb(50, 118, 181);
}

div#skill-modify-container > div:first-child > div {
    flex-basis: 30%;
    max-width: 30%;
    padding: 0px;
}

div#skill-modify-container > div:first-child > div {
    padding-top: 8px;
}

div#skill-modify-container > div:first-child > div > label {
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'GoodOTCondBold';
    font-size: 14px;
    transform: none;
    position: relative;
    text-align: center;
}

div#skill-modify-container > div:first-child > div > div > input {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}


div#skill-modify-container legend > span {
  display: none;
}




/* Items Drawer */



div#drawer-quantity-input > div:first-child > div:first-child div {
    display: flex;
    background: rgb(0, 0, 0);
    font-size: 0.625rem;
    font-weight: 700;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 4px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: default;
    pointer-events: auto;
    color: rgb(158, 158, 158);
    height: 60px;
    max-width: 30%;
    margin-left: 0px;
}

div#drawer-quantity-input > div:first-child > div:first-child {
    display: flex;
    align-items: center;
}

div#drawer-quantity-input > div:first-child {
    padding-top: 8px;
}


div#drawer-quantity-input label {
    font-family: 'GoodOTCondBold';
    text-transform: uppercase;
    font-weight: 400;
    font-size: 10px;
    color: rgb(158, 158, 158);
    position: relative;
    top: 14px;
    left: -14px;
}

div#drawer-quantity-input input {
    font-family: 'GoodOTCondBold';
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    padding-top: 24px;
}



div#drawer-quantity-container {
    margin-bottom: 16px;
}



div#drawer-attack-type-select-container label {
    color: #838383;
    font-size: 14px;
    font-family: GoodOTCondBold;
    text-transform: uppercase;
}

div#drawer-attack-type-select-container {
    margin-top: -24px !important;
}

div#drawer-attack-type-select-container .MuiInputBase-root.MuiInputBase-colorPrimary.MuiInputBase-formControl {
    background-color: rgb(15 15 15);
    padding: 12px;
    border-radius: 8px;
    font-family: Nunito;
    font-size: 14px;
    border: 1px solid rgb(83, 83, 83);
    margin-top: 4px;
    margin-bottom: 16px;
    padding: 8px;
}

div#drawer-attack-type-select-container .MuiInputBase-root.MuiInputBase-colorPrimary.MuiInputBase-formControl:before {
    border-bottom: none;
}

div#drawer-attack-type-select-container .MuiInputBase-root.MuiInputBase-colorPrimary.MuiInputBase-formControl:after {
    border-bottom: none;
}


div#drawer-items-container div#squareComponentContainer div#squareComponentHeader {
    font-family: 'GoodOTCondBold';
}

div#drawer-items-container div#squareComponentContainer div#squareComponentContent > div:first-child > div:first-child > div:first-child {
    font-family: 'GoodOTCondBold';
    font-size: 20px;
    font-weight: 400;
}

div#drawer-items-container div#squareComponentContainer div#squareComponentContent > div:first-child > div:nth-child(2) > div:first-child {
    font-family: 'GoodOTCondBold';
    font-weight: 400;
}

div#drawer-items-container > div:first-child:not(#item-attack-display-container):not(#rules-list-container):not(.notes-list-container) {
    gap: 10px;
    display: flex;
    justify-content: center;
    margin: auto;
    padding: 0px;
    margin-top: 24px;
    align-items: flex-start;
    margin-left: 0px;
    margin-bottom: 24px;
}

div#drawer-items-container > div:first-child:not(#item-attack-display-container):not(#rules-list-container):not(#drawer-rune-container):not(.notes-list-container):not(#drawer-quantity-container) > div {
    padding: 0px;
    max-width: 30%;
    box-shadow: none;
    border-radius: 8px;
    max-height: 60px;
}

div#drawer-items-container > div:first-child:not(#item-attack-display-container):not(#rules-list-container) > div > div:first-child {
    font-family: GoodOT;
}

div#drawer-items-container > div:first-child:not(#item-attack-display-container):not(#rules-list-container) > div > div:first-child {
    font-family: GoodOT;
}

div#drawer-items-container > div:first-child:not(#item-attack-display-container):not(#rules-list-container) > div > div:first-child > div:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}



div#item-attack-display-container {
    background-color: rgb(63, 63, 63);
    padding-top: 4px;
    padding-left: 32px;
    padding-bottom: 4px;
    width: calc(100% + 24px);
    align-items: center;
    margin-bottom: 0px;
    margin-top: -8px;
}

div#item-attack-display-container > div:first-child {
  background-color: rgb(32, 32, 32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 3px 10px;
  border-radius: 50%;
  height: 36px;
  width: 36px;
  margin-bottom: 4px;
  cursor: url(https://content.demiplane.com/nexus/pathfinder-2e/character/dice-pointer-icon.svg) 0 20, auto;
}

div#item-attack-display-container > div:nth-child(2) {
    padding-top: 0px;
}

div#item-attack-display-container > div:nth-child(3) {
    width: calc(100% + 36px);
    background-color: rgb(32, 32, 32);
    position: relative;
    margin-left: -32px;
    margin-bottom: -8px;
    padding-top: 16px;
    padding-left: 34px;
    border-top: 1px solid rgb(85, 85, 85);
}


/* Add Items Drawer */



/* Responsive */

@media (min-width: 1920px) {
    
    div#drawer-add-items-container > div:nth-child(2) > div:nth-child(3) {
      height: calc(100vh - 24rem);
    }
    
    
    div#drawer-items-container > div:first-child:not(#item-attack-display-container):not(#rules-list-container):not(.notes-list-container) {
        gap: 10px;
        display: flex;
        justify-content: center;
        margin: auto;
        padding: 0px;
        padding-right: 8px !important;
        margin-top: 8px !important;
        align-items: flex-start;
        margin-left: 0px;
        margin-bottom: 24px;
    }
}

div#drawer-add-items-container {
    height: unset;
}

  div#drawer-add-items-container > div:nth-child(2) > div:nth-child(3) {
    height: 100vh;
  }

div#drawer-add-items-container div#grid-table-component > div > div:first-child > div:nth-child(1) {
    background: #323232;
    border-radius: 4px;
    max-width: 36px;
    max-height: 36px;
}

div#drawer-add-items-container > div:nth-child(2) > div:first-child {
  margin-bottom: 12px;
}

div#drawer-add-items-container div#grid-table-component {
    padding-bottom: 40px;
}

div#drawer-add-items-container div#grid-table-component > div > div:first-child > div:nth-child(1) > div:first-child {
    max-width: 36px;
    max-height: 36px;
}

div#drawer-add-items-container div#grid-table-component > div > div:first-child > div:nth-child(1) img {
    border-radius: 4px;
    height: 36px !important;
    width: 36px !important;
}

div#drawer-add-items-container div#grid-table-component > div {
  padding: 4px 8px 4px 8px;
}

div#drawer-add-items-container > div:nth-child(2) > div:nth-child(3) >div:first-child > div:nth-child(even) {
    background-color: rgb(15, 15, 15);
}

div#drawer-add-items-container div#grid-table-component > div > div:first-child {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    grid-template-columns: 36px 132px 62px 72px;
}

div#drawer-add-items-container div#grid-table-component > div > div:first-child > div:nth-child(2) {
  font-family: 'GoodOTCondBold';
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: break-spaces;
  text-transform: uppercase;
  font-size: 15px;
}

div#drawer-add-items-container div#grid-table-component > div > div:first-child button {
    background-color: rgb(15, 15, 15);
    color: white;
    border: 1px solid rgb(50, 118, 181);
    padding-top: 1px;
    height: 32px;
    font-size: 0.8125rem;
    min-width: 70px;
}

button.unlock-button {
    max-width: 70px;
    border-color: #388e3c !important;
    background: #153817 !important;
    position: relative;
    font-size: 12px !important;
    padding-bottom: 0px;
}

button.unlock-button svg {
    width: 14px;
    height: 14px;
    position: relative;
    top: -2px;
    left: -2px;
}

div#drawer-add-items-container div#grid-table-component > div > div:first-child > div:nth-child(3) > div:first-child > div:first-child {
  font-size: 12px;
}

/* Spells Drawer */


div#attack-save-container {
    background-color: rgb(63, 63, 63);
    padding-top: 4px;
    padding-left: 32px;
    padding-bottom: 4px;
    width: calc(100% + 24px);
    align-items: center;
    margin-bottom: 0px;
    margin-top: 0px;
}

div#attack-save-container > div:first-child {
  background-color: rgb(32, 32, 32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 3px 10px;
  border-radius: 50%;
  height: 36px;
  width: 36px;
  margin-bottom: 4px;
}

div#attack-save-container > div:nth-child(2) {
    padding-top: 0px;
}

div#attack-save-container > div:nth-child(3) {
    width: calc(100% + 36px);
    background-color: rgb(32, 32, 32);
    position: relative;
    margin-left: -32px;
    margin-bottom: -8px;
    padding-top: 16px;
    padding-left: 34px;
    padding-bottom: 8px;
    border-top: 1px solid rgb(85, 85, 85);
}

div#heightened-container h4, div#heightened-container p {
  font-size: 14px;
  font-family: GoodOT;
}



/* Hit Points Drawer */


div#drawer-hp-container {
    margin-top: 0px;
}

div#drawer-hp-container > div:first-child > div:first-child {
    padding: 0px;
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
}

div#drawer-hp-container > div:first-child > div:first-child > div {
    padding: 0px;
    max-width: 40%;
}

button#hit-points-modify-button {
    position: relative;
    top: 56px;
    margin-top: -50px;
    background-color: rgb(15, 15, 15) !important;
    border: 1px solid rgb(83, 83, 83);
    box-shadow: none;
}


div#drawer-hp-container .MuiButton-containedPrimary {
  background-color: rgb(50, 118, 181);
}

div#drawer-hit-points-max-container {
    background-color: rgb(63, 63, 63);
    padding-top: 4px;
    margin-top: 0px;
    padding-left: 32px;
    padding-bottom: 4px;
    width: calc(100% + 16px);
    align-items: center;
    border-bottom: 1px solid rgb(85, 85, 85);
    margin-bottom: 0px;
}

div#drawer-hit-points-max-container > div:first-child {
    background-color: rgb(32, 32, 32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px 2px 8px;
    border-radius: 50%;
    height: 36px;
    width: 36px;
}

div#drawer-hit-points-max-container > div:nth-child(2) {
    padding-top: 2px;
}



div#drawer-hp-modify-container {
    justify-content: flex-start;
    display: flex;
}

div#drawer-hp-modify-container > div:first-child {
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  display: flex;
}

div#drawer-hp-modify-container > div:nth-child(2) {
    margin-top: 24px;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: center;
}

div#drawer-hp-modify-container > div:nth-child(2) > div:first-child {
    flex-basis: 100%;
    max-width: 100%;
    margin-top: 16px;
}

div#drawer-hp-modify-container > div:nth-child(2) > div:nth-child(2) {
    display: flex;
    justify-content: center;
    gap: 8px;
}

div#drawer-hp-modify-container > div:nth-child(2) > div:nth-child(2) > div:first-child > button {
    padding-top: 4px;
    height: 32px;
    border-color: rgb(83, 83, 83);
}

div#drawer-hp-modify-container > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > button {
    padding-top: 4px;
    height: 32px;
    background-color: rgb(50, 118, 181);
}

div#drawer-hp-modify-container > div:first-child > div {
    flex-basis: 30%;
    max-width: 30%;
    padding: 0px;
}

div#drawer-hp-modify-container > div:first-child > div {
    padding-top: 8px;
}

div#drawer-hp-modify-container > div:first-child > div > label {
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'GoodOTCondBold';
    font-size: 14px;
    transform: none;
    position: relative;
    text-align: center;
    left: 8px;
}

div#drawer-hp-modify-container > div:first-child > div > div > input {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}

div#drawer-hp-modify-container legend > span {
  display: none;
}




/* Resistances, Weaknesses, & Immunities Drawer */

div#drawer-rwi-container > div:first-child > div > div:first-child > div:first-child > h2 {
    font-family: 'GoodOTCondBold';
    text-transform: uppercase;
    font-weight: 400;
    font-size: 18px;
}

div#drawer-rwi-container .MuiButton-outlined {
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 32px;
}


/* Conditions / Effects Drawer */

div#drawer-effects-container > div:first-child {
  margin-top: 0px;
  padding-bottom: 64px;
}

div#drawer-effects-container > div:first-child > h6 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0px;
  color: white;
}

div#drawer-effects-container > div:first-child > div:first-of-type > h6 {
    margin: 0px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.00938em;
    color: rgb(131, 131, 131);
    font-family: GoodOT;
}

div#drawer-effects-container label > span:nth-child(2) {
  font-size: 14px;
  text-transform: uppercase;
  font-family: GoodOTCondBold;
  font-weight: 400;
}

div#drawer-effects-container .main-holder {
  padding-bottom: 16px;
}


/* Add Feats Drawer */


/* Responsive */

@media (min-width: 1920px) {
    div#drawer-add-feats-container > div:nth-child(2) > div:nth-child(3) {
      height: calc(100vh - 24rem);
    }
}

div#drawer-add-feats-container {
    height: unset;
}

div#drawer-add-feats-container > div:first-child > div:nth-child(3) {
  height: calc(100vh - 11rem);
}

div#drawer-add-feats-container > div:first-child > div:first-child {
  margin-bottom: 12px;
}

div#drawer-add-feats-container div#grid-table-component > div {
  padding: 4px 8px 4px 8px;
}

div#drawer-add-feats-container > div:first-child > div:nth-child(3) > div:first-child > div:nth-child(even) {
    background-color: rgb(15, 15, 15);
}

div#drawer-add-feats-container div#grid-table-component > div > div:first-child > div:first-child > div:first-child {
  font-family: 'GoodOTCondBold';
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: break-spaces;
  text-transform: uppercase;
  font-size: 15px;
}

div#drawer-add-feats-container div#grid-table-component > div > div:first-child {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 0px;
    padding-right: 0px;
    gap: 0;
    column-gap: 8px;
    grid-template-columns: 225px 20px 50px;
}


div#drawer-add-feats-container div#grid-table-component > div > div:first-child > div:nth-child(2) {
  font-size: 14px;
}

div#drawer-add-feats-container div#grid-table-component > div > div:first-child button:not(.MuiIconButton-root) {
  background-color: rgb(15, 15, 15);
  color: white;
  border: 1px solid rgb(50, 118, 181);
  padding-top: 1px;
  height: 32px;
  font-size: 0.8125rem;
}

div#drawer-add-feats-container div#grid-table-component > div > div:first-child button.MuiIconButton-root {
  display: none;
}


/* Manage Spell Slots */


div#manage-spell-slots-container > div:first-child > div:first-child > h2 {
  font-family: 'GoodOT';
  font-size: 14px;
  line-height: 1.5;
}


div#manage-spell-slots-container > div:first-child > div:not(:first-of-type) > div:first-child > div:first-child > h5 {
  color: #838383;
}


div#manage-spell-slots-container > div:first-child > div > div:first-child > div:first-child > h3 {
    font-size: 16px;
    text-transform: uppercase;
}

div#manage-spell-slots-container > div:first-child > div:last-of-type > div:first-child > div:first-child > h3:after {
  content: "s";
}

div#manage-spell-slots-container {
    padding-bottom: 60px;
}


/* Prepare Spells Drawer */


div#prepare-spells-container > div:first-child > button {
  background-color: rgb(15, 15, 15);
  color: white;
  height: 32px;
  border: 1px solid rgb(50, 118, 181);
  font-size: 0.8125rem;
}

div#prepare-spells-container .MuiButton-containedPrimary {
  background-color: rgb(50, 118, 181);
  color: white;
  height: 32px;
  border: 1px solid rgb(50, 118, 181);
  font-size: 0.8125rem;
}

div#prepare-spells-container h6 {
  text-transform: uppercase;
  text-align: center;
}



/* Prepare Spells Rows */


div#prepare-spells-container > div:first-child > button {
  border: 1px solid rgb(50, 118, 181);
  height: 32px;
  padding-top: 6px;
  font-size: 0.8125rem;
}

div#prepare-spells-container > div:nth-child(2) > div:first-child > div:first-child {
  margin-top: 12px;
  margin-bottom: 8px;
}

div#prepare-spells-container > div:nth-child(2) > div:nth-child(2) > div:first-child > div:nth-child(3) {
  height: calc(100vh - 24rem);
}

div#prepare-spells-container > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child {
  margin-bottom: 12px;
}

div#prepare-spells-container div#grid-table-component > div {
  padding: 4px 8px 4px 8px;
}

div#prepare-spells-container div#grid-table-component > div > div:first-child > div:nth-child(1) {
    background: #323232;
    border-radius: 4px;
    max-width: 36px;
    max-height: 36px;
}

div#prepare-spells-container div#grid-table-component > div > div:first-child > div:nth-child(1) > div:first-child {
    max-width: 36px;
    max-height: 36px;
}

div#prepare-spells-container div#grid-table-component > div > div:first-child > div:nth-child(1) img {
    border-radius: 4px;
    height: 36px !important;
    width: 36px !important;
}

div#prepare-spells-container div#grid-table-component > div:nth-child(even) {
    background-color: rgb(15, 15, 15);
}

div#prepare-spells-container div#grid-table-component > div > div:first-child > div:nth-child(2) > div:first-child {
  font-size: 15px;
}

div#prepare-spells-container div#grid-table-component > div > div:first-child > div:nth-child(3) > div:first-child {
  font-family: 'GoodOTCondBold';
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: break-spaces;
  text-transform: uppercase;
  font-size: 15px;
}


div#prepare-spells-container div#grid-table-component > div > div:first-child button:not(.MuiIconButton-root):not(.MuiButton-outlinedPrimary) {
    background-color: rgb(15, 15, 15);
    color: white;
    border: 1px solid rgb(50, 118, 181);
    padding-top: 4px;
    height: 32px;
    font-size: 0.8125rem;
}

div#prepare-spells-container div#grid-table-component > div > div:first-child button:not(.MuiIconButton-root):not(.MuiButton-containedPrimary) {
    border: 1px solid rgb(50, 118, 181);
    color: white;
    background-color: rgb(50, 118, 181);
    padding-top: 4px;
    height: 32px;
    font-size: 0.8125rem;
}





/* Manage Spellbook Drawer */


div#manage-spellbook-container > div:first-child > button {
  border: 1px solid rgb(50, 118, 181);
  height: 32px;
  padding-top: 6px;
  font-size: 0.8125rem;
}

div:#manage-spellbook-container > div:nth-child(2) > div:first-child > div:first-child {
  margin-top: 12px;
  margin-bottom: 8px;
}

div#manage-spellbook-container > div:nth-child(2) > div:nth-child(2) > div:first-child > div:nth-child(3) {
  height: calc(100vh - 24rem);
}

div#manage-spellbook-container > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child {
  margin-bottom: 12px;
}

div#manage-spellbook-container div#grid-table-component > div {
  padding: 4px 8px 4px 8px;
}

div#manage-spellbook-container div#grid-table-component > div > div:first-child > div:nth-child(1) {
    background: #323232;
    border-radius: 4px;
    max-width: 36px;
    max-height: 36px;
}

div#manage-spellbook-container div#grid-table-component > div > div:first-child > div:nth-child(1) > div:first-child {
    max-width: 36px;
    max-height: 36px;
}

div#manage-spellbook-container div#grid-table-component > div > div:first-child > div:nth-child(1) img {
    border-radius: 4px;
    height: 36px !important;
    width: 36px !important;
}

div#manage-spellbook-container div#grid-table-component > div:nth-child(even) {
    background-color: rgb(15, 15, 15);
}

div#manage-spellbook-container div#grid-table-component > div > div:first-child > div:nth-child(3) > div:first-child {
  font-family: 'GoodOTCondBold';
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: break-spaces;
  text-transform: uppercase;
  font-size: 15px;
}


div#manage-spellbook-container div#grid-table-component > div > div:first-child button:not(.MuiIconButton-root):not(.MuiButton-outlinedPrimary) {
    background-color: rgb(15, 15, 15);
    color: white;
    border: 1px solid rgb(50, 118, 181);
    padding-top: 4px;
    height: 32px;
    font-size: 0.8125rem;
}

div#manage-spellbook-container div#grid-table-component > div > div:first-child button:not(.MuiIconButton-root):not(.MuiButton-containedPrimary) {
    border: 1px solid rgb(50, 118, 181);
    color: white;
    background-color: rgb(50, 118, 181);
    padding-top: 4px;
    height: 32px;
    font-size: 0.8125rem;
}




/* Add Spell Drawer */


/* Responsive */

@media (min-width: 1920px) {
    div#drawer-add-spells-container > div:nth-child(2) > div:nth-child(3) {
      height: calc(100vh - 24rem);
    }
}


div#drawer-add-spells-container {
    height: unset;
}


div#drawer-add-spells-container > div:first-child > div:nth-child(3) {
  height: calc(100vh - 11rem);
}

div#drawer-add-spells-container > div:first-child > div:first-child {
  margin-bottom: 12px;
}

div#drawer-add-spells-container div#grid-table-component {
    padding-bottom: 40px;
}

div#drawer-add-spells-container div#grid-table-component > div {
  padding: 4px 8px 4px 8px;
}

div#drawer-add-spells-container div#grid-table-component > div > div:first-child {
  grid-template-columns: 38px 173px 20px 50px;
}

div#drawer-add-spells-container div#grid-table-component > div > div:first-child > div:nth-child(1) {
    background: #323232;
    border-radius: 4px;
    max-width: 36px;
    max-height: 36px;
}

div#drawer-add-spells-container div#grid-table-component > div > div:first-child > div:nth-child(1) > div:first-child {
    max-width: 36px;
    max-height: 36px;
}

div#drawer-add-spells-container div#grid-table-component > div > div:first-child > div:nth-child(1) img {
    border-radius: 4px;
    height: 36px !important;
    width: 36px !important;
}

div#drawer-add-spells-container div#grid-table-component > div:nth-child(even) {
    background-color: rgb(15, 15, 15);
}

div#drawer-add-spells-container div#grid-table-component > div > div:first-child > div:nth-child(2) {
  font-family: 'GoodOTCondBold';
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: break-spaces;
  text-transform: uppercase;
  font-size: 15px;
}

div#drawer-add-spells-container div#grid-table-component > div > div:first-child > div:nth-child(3) > div:first-child {

  font-size: 15px;
}


div#drawer-add-spells-container div#grid-table-component > div > div:first-child button:not(.MuiIconButton-root):not(.MuiButton-outlinedPrimary) {
    background-color: rgb(15, 15, 15);
    color: white;
    border: 1px solid rgb(50, 118, 181);
    padding-top: 1px;
    height: 32px;
    font-size: 0.8125rem;
}

div#drawer-add-spells-container div#grid-table-component > div > div:first-child button:not(.MuiIconButton-root):not(.MuiButton-containedPrimary) {
    border: 1px solid rgb(50, 118, 181);
    color: white;
    background-color: rgb(50, 118, 181);
    padding-top: 1px;
    height: 32px;
    font-size: 0.8125rem;
}



/* Manage XP Drawer */


div#drawer-level-container > div:first-child > div:first-child > div:first-child {
  background-color: rgb(15, 15, 15);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}


div#drawer-level-container > div:first-child > div:first-child > div:first-child > div:first-child {
  background-color: rgb(32, 32, 32);
  justify-content: center;
  padding-right: 16px;
}


div#drawer-level-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) {
  background-color: transparent;
}


div#drawer-level-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > button:first-child:not(.Mui-disabled) > svg {
  color: rgb(138, 60, 55);
}

div#drawer-level-container > div:first-child > div:first-child > div:first-child > div:nth-child(2) > button:nth-child(2):not(.Mui-disabled) > svg {
  color: rgb(42, 172, 94);
}


div#drawer-level-container > div:first-child > div:first-child > div:nth-child(2) {
  background-color: rgb(32, 32, 32);
}

div#drawer-level-container > div:first-child > div:first-child > div:nth-child(2) > div:first-child {
 text-transform: uppercase;
}

div#drawer-level-container > div:first-child > div:first-child > div:nth-child(2) > span > span {
 background-color: rgb(241, 206, 134);
}


div#drawer-level-container > div:first-child > div:first-child > div:nth-child(2) button:not(.Mui-disabled) {
  background-color: rgb(50, 118, 181);
}

/* QR CODE */

.qr-code {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    margin-top: 32px !important;
}

.qr-code svg {
    width: 256px !important;
    height: 256px !important;
    padding: 16px;
    border: 1px solid rgb(241, 206, 134);
}