@font-face {
    font-family: 'Pathfinder-Icons';
    src: url('../fonts/pathfinder-icons.ttf');
}

@media screen and (orientation: landscape) {
   .mobile {
        display: none!important;
    }
}

@media screen and (orientation: portrait) {
    .desktop {
        display: none!important;
    }
}

body>*{
    max-width:100vw;
}

:root{
    overflow:hidden;
}
:root > body,
:root > body[theme="dark"] {
    --main-bg: #0f0f0f;
    --ui-bg: #A25392;
    --ui-fg: #FFF;
    --ui-accent: #000;
    --bg-1: #266969;
    --bg-2: #163c3c;
    --accent: #B9519E;
    --head-bg: #5c3a96;
    --head-fg: #ffffff;
    --mid-bg: #2F506A;
    --mid-fg: #C7E5ED;
    --mid-accent: var(--mid-fg);
    --sub-bg: #ad5e9f;
    --sub-fg: #0f0f0f;
    --selected-bg: #85448B; /* unchanged */
    --selected-fg: #ffffff; /* unchanged */
    --hovered-bg: #5B3A96; /* unchanged */
    --hovered-fg: #FFF; /* unchanged */
    --text-1: #ffffff;
    --text-2: #ffffff;
    --source-link: #00ffff;
    --ext-link: #00ffff; /* unchanged */
    --border-1: #333; /* unchanged */
    --border-2: #555; /* unchanged */
    --trait-bg: #2e4969;
    --trait-border: #a3e1e6;
    --trait-fg: #ffffff;
    --trait-rare-bg: #707a94;
    --trait-uncommon-bg: #954132;
    --trait-unique-bg: #800080;
    --trait-size-bg: #2a8179;
    --trait-aon-bg: linear-gradient(#000, #666); /* unchanged */
    --sidebar-bg: #2C4E69;
    --sidebar-fg: #fff;
    --sidebar-accent: #9DDAE5;
    background: var(--main-bg);

    --bg-main: var(--main-bg);
    --bg-0: var(--ui-bg);
}

    :root > body[theme="light"] {
        --main-bg: #fcfcfc;
        --ui-bg: #204456;
        --ui-fg: #FFF;
        --ui-accent: #9DDAE5;
        --bg-1: #fcfcf;
        --bg-2: #DBDBDB;
        --accent: #B9519E;
        --head-bg: #2F506A;
        --head-fg: #fff;
        --mid-bg: #C7E5ED;
        --mid-fg: #2F506A;
        --mid-accent: var(--mid-fg);
        --sub-bg: #ad5e9f;
        --sub-fg: #0f0f0f;
        --selected-bg: #233B4C;
        --selected-fg: #ffffff;
        --hovered-bg: #83C2D0;
        --hovered-fg: #000;
        --text-1: #000;
        --text-2: #000;
        --source-link: #009999;
        --ext-link: #009999; /* unchanged */
        --border-1: #ccc; /* unchanged */
        --border-2: #999; /* unchanged */
        --trait-bg: #2e4969;
        --trait-border: #a3e1e6;
        --trait-fg: #ffffff;
        --trait-rare-bg: #707a94;
        --trait-uncommon-bg: #954132;
        --trait-unique-bg: #800080;
        --trait-size-bg: #2a8179;
        --trait-aon-bg: linear-gradient(#000, #666); /* unchanged */
        --sidebar-bg: #2C4E69;
        --sidebar-fg: #fff;
        --sidebar-accent: #9DDAE5;
        background: var(--main-bg);
    }

:root > body {
    --font-1: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    --border-radius: 3px;
    --font-variant: small-caps;
    --title-padding: 4px 9px;
    --sub-padding: 0px 4px;
}

body {
    color: var(--text-1);
    font-size: 15px;
    font-family: var(--font-1);
    font-weight: normal;
    font-style: normal;
    position: relative;
}

#main {
    line-height: 24px;
}

a:link {
    color: inherit;
    text-decoration: none;
}

a:visited {
    color: inherit;
}

a.link:link,
a:hover {
    text-decoration: underline;
}

a.link.link-source:link {
    color: var(--source-link);
    text-decoration: none;
}

a.link.link-source:hover {
    text-decoration: underline;
}

a.link.link-source:visited {
    color: var(--source-link);
}

.link.link-spell {
    font-style: italic;
}

.title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-indent: 0;
    font-weight: bold;
    font-style: normal;
    font-variant: var(--font-variant);
}

.title * {
    line-height: 1.3em;
}
h1.title, .hd-1 {
    font-size: 2.3rem;
    margin: 1em 0 10px 0;
    color: var(--text-1);
    background: transparent;
    padding: var(--title-padding);
    min-height: 26px;
    line-height: 1em;
    font-weight: bold;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    border-top: 3px solid #9DDAE5;
    padding-left: 0;
}

    h1.title:before, .hd-1:before {
        content: ' ';
        background-image: url('../images/h1-fill.png');
        display: block;
        height: 2rem;
        flex-grow: 1;
        background-repeat: repeat-x;
        background-size: contain;
        order: 12;
    }

    h1.title:after, .hd-1:after {
        content: ' ';
        background-image: url('../images/h1-flourish.png');
        display: block;
        width: 2rem;
        height: 2rem;
        margin-right: 1rem;
        background-repeat: no-repeat;
        background-size: 100% auto;
        order: 11;
    }

    h1.title .sfs, .hd-1 .sfs {
        order: 10;
    }

    h1.title .feature-level, .hd-1 .feature-level {
        order: -1;
        flex-grow: 8;
        text-align: end;
    }

h2.title, .hd-2 {
    font-size: 1.9rem;
    margin: 1em 0 10px 0;
    color: var(--mid-fg);
    background-color: var(--mid-bg);
    padding: var(--title-padding);
    line-height: 1em;
    border-radius: 0 0.5rem 0.5rem 0;
    border-left: 0.5rem solid var(--mid-accent);
    font-weight: bold;
}

h3.title, .hd-3 {
    font-size: 1.6rem;
    margin: 10px 0 6px 0;
    background-color: transparent;
    color: var(--mid-fg);
    line-height: 1.5em;
    height: 1.5em;
    border-radius: var(--border-radius);
    font-weight: bold;
}

h4.title, .hd-4,
h5.title, .hd-5,
h6.title, .hd-6 {
    font-size: 1.4rem;
    margin: 10px 0 6px 0;
    background-color: transparent;
    color: var(--text-1);
    line-height: 1.5em;
    height: 1.5em;
    border-radius: var(--border-radius);
    font-weight: bold;
}

.sfs {
    height: 1.3em;
    box-sizing: border-box;
    padding: 0.1em;
}

.sfs img {
    height: 100%;
    padding-right: 0.3em;
}

.sfs-icon-large {
    float: left;
    margin: 0 2em 2em 0;
}

.sfs-note {
    margin: 0.3em 0;
    font-style: italic;
}

.sfs-note .sfs-note-header {
    font-weight: bold;
    text-decoration: underline;
}

.clear {
    clear: both;
}

.page-navigation-wrapper {
    text-align: center;
}

.page-navigation-wrapper .page-navigation-group {
    font-size: 1.75em;
    font-weight: bold;
    margin: 0.3em 0;
    font-variant: var(--font-variant);
}

.page-navigation-wrapper .page-navigation-group + .page-navigation-group {
    font-size: 1.3em;
}

.page-navigation-wrapper .page-navigation-group .page-navigation-item {
    display: inline-block;
    border-right: medium solid var(--accent);
    padding-right: 0.35em;
    margin: 0.2em 0;
}

.page-navigation-wrapper .page-navigation-group .page-navigation-item:last-child {
    border-right: none;
    padding-right: 0;
}

.dos {
    margin: 1em 0;
}

.dos .dos-entry {
    text-indent: 1.5em hanging;
}

.dos .dos-entry .dos-name {
    font-weight: bold;
    margin-right: 0.5em;
}

.page-header-full-rules {
    margin: 1em 0;
}

.traits {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.trait {
    background-color: var(--trait-bg);
    border-color: var(--trait-border);
    border-style: double;
    border-width: 2px;
    color: var(--trait-fg);
    font-size: 1.1em;
    font-style: normal;
    font-variant: var(--font-variant);
    font-weight: bold;
    padding: 0 5px;
    text-align: left;
    text-indent: 0;
    display: inline-block;
    margin: 0.1em 0;
}

.trait.trait-rare {
    background-color: var(--trait-rare-bg);
}

.trait.trait-uncommon {
    background-color: var(--trait-uncommon-bg);
}

.trait.trait-unique {
    background-color: var(--trait-unique-bg);
}

.trait.trait-size {
    background-color: var(--trait-size-bg);
}

.trait.trait-aon {
    background: var(--trait-aon-bg);
}

.trait-text-item {
    display: flex;
    justify-content: initial;
    margin: 0 2em 1em 1em;
}

.trait-text-item .trait-text-name {
    min-width: 10em;
    max-width: 10em;
}

.trait-text-item .trait-text-description {
    display: block;
    border-bottom: 1px solid;
    margin-top: 0;
    text-align: justify;
    padding-bottom: 1em;
    flex-grow: 1;
}

.feature.feature-condensed {
    margin: 1em 0 0 0;
    text-indent: -2em;
    padding-left: 2em;
}

.feature.feature-condensed + .feature.feature-condensed {
    margin-top: 0;
}

.feature.feature-condensed .feature-header {
    display: inline;
    margin: 0;
    color: inherit;
    background: none;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    border-radius: 0;
    font-variant: initial;
    vertical-align: baseline;
}


.feature.feature-condensed .feature-content {
    display: inline;
}

.feature-level {
    margin-left: auto;
    margin-right: 0;
    text-wrap: nowrap;
    padding-left: 1em;
}

.feature.feature-condensed .feature-level {
    padding: 0;
}

.feature.feature-condensed .feature-level::before {
    content: ' (';
}

.feature.feature-condensed .feature-level::after {
    content: ') ';
}

.header-action {
    padding-left: 0.5em;
}

.action {
    font-family: 'Pathfinder-Icons';
    font-variant: normal;
    font-weight: normal;
    white-space: nowrap;
    font-style: normal;
}

.action.menu-action {
    padding-right: 5px;
}

.semicolon-delimited-list > * {
    display: inline;
}

.semicolon-delimited-list > * + *::before {
    content: '; ';
}

.comma-delimited-list > * {
    display: inline;
}

.comma-delimited-list > * + *::before {
    content: ', ';
}

.background-boosts,
.background-skills-and-feats {
    margin: 1em 0;
}

.rule-related .sources {
    display: inline;
}

.rule-ancestors > .rule-ancestor + .rule-ancestor::before {
    content: ' / ';
}

.rules-source-outline summary {
    cursor: pointer;
}

.sibling-navigation {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 1em 0;
}

.sidebar.sidebar-floating,
.sidebar.sidebar-nonfloating {
    border: 2px solid var(--sidebar-accent);
    background-color: var(--sidebar-bg);
    padding: 1em;
    margin: 0.5em;
    color: var(--sidebar-fg);
    border-radius: 0em 1em 0 1em;
}

.sidebar.sidebar-floating {
    float: right;
    clear: both;
    width: 300px;
}

.sidebar .sidebar-name {
    font-size: 1.3em;
    font-weight: bold;
    font-variant: var(--font-variant);
}

.table-floating {
    float: left;
    clear: left;
    margin: 10px 10px 10px 0;
    overflow: hidden;
}

.table-striped {
    background: var(--bg-2);
    border: thin solid var(--text-2);
    color: var(--text-2);
    border-collapse: collapse;
}

.table-striped td,
.table-striped th {
    border: 1px solid var(--text-2);
    padding: 1px 5px;
    text-align: center;
}

.table-striped thead tr {
    background: var(--head-bg);
    color: var(--head-fg);
}

.table-striped tbody tr:nth-child(2n) {
    background: var(--bg-1);
}

.table-class-advancement {
    max-width: 50%;
}

.table-title {
    font-size: 1.3em;
    font-weight: bold;
    margin: 1em 0 0.5em 0;
}

.class-flavor-text {
    font-style: italic;
}

.image-mappings {
    float: right;
    clear: both;
    width: 150px;
    margin-left: 0.5em;
}

.image-mappings .image-mapping {
    display: block;
    margin-bottom: 0.5em;
}

.image-mappings .image-mapping .image-mapping-thumbnail {
    box-sizing: border-box;
    width: 100%;
    border: thin solid var(--text-1);
    border-radius: var(--border-radius);
    padding: 0.5em;
    display: block;
}

.nethys-search-quick-display-options {
    margin: 1em 0;
}

.nethys-search-quick-display-option {
    font-weight: bold;
}

.nethys-search-quick-display-option + .nethys-search-quick-display-option::before {
    content: ' | ';
}

.template-build-contents {
    display: none;
}