html {
    --standard-font-size: 12pt;
    overflow-x: hidden;
}
@media screen and (max-width: 999px) {
    html {
        --standard-font-size: 15pt;
    }
}
@media print {
    html {
        --standard-font-size: 10pt;
    }
}
html, body{
    margin: 0;
    padding: 0;
}
body, body > .header{
    background-color: rgb(90, 76, 76);
}
html, body, input, select, select > *, textarea, button {
    font-size: var(--standard-font-size);
    font-family: "BIZ UDGothic", "Hiragino Sans", "Kosugi", "Meiryo", "Varela Round", "Raleway", 'メイリオ', Meiryo, sans-serif;
}
body {
    height: 100vh;
    box-sizing: border-box;
    --header-height: 2.8rem;
}
@media screen and (max-width: 1279px) {
    body {
        height: auto;
        --header-height: 5rem;
    }
}
@media print {
    body{
        background: none;
    }
}

:is(input, textarea, select)[readonly] {
    cursor: not-allowed;
}

body > .header {
    display: flex;
    box-sizing: border-box;
    height: var(--header-height);
    margin: 0;
    padding: 0.4rem;
    width: 100%;
    color: white;
    flex-flow: row;
    justify-content: stretch;
}
@media screen and (min-width: 1280px) and (max-height: 719px) {
    body > .header {
        position: fixed;
        width: auto;
        top: 0;
        left: 0;
        right: 0;
        z-index: 11;
    }
}
@media screen and (max-width: 1279px) {
    body > .header {
        position: fixed;
        width: initial;
        top: 0;
        left: 0;
        right: 0;
        z-index: 11;
        padding-left: 1rem;
    }
}
@media print {
    body > .header {
        display: none;
    }
}
body[data-operation="rendering"] > .header {
    display: none;
}
body > .header > .contents {
    display: flex;
    height: 100%;
    width: calc((100% - 2rem) * 0.6);
    justify-content: flex-start;
    align-items: center;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: white;
}
@media screen and (max-width: 1279px) {
    body > .header > .contents {
        width: calc(100% - 2rem);
    }
}
body > .header > .contents > .additional-items {
    display: flex;
    flex-flow: row;
    margin-left: 1.5em;
    box-sizing: border-box;
}
body > .header > .contents > .additional-items:empty {
    display: none;
}
body > .header .title {
    display: inline;
    font-weight: bolder;
}
body > .header a.title {
    text-decoration: none;
}
body > .header a.title[href]:hover {
    color: rgb(230, 228, 200);
}
body > .header > .header-menu{
    display: flex;
    height: 100%;
    width: calc((100% - 2rem) * 0.4);
    justify-content: flex-end;
    align-items: center;
    float: right;
    box-sizing: border-box;
    margin: 0 1rem;
}
@media screen and (max-width: 1279px) {
    body > .header > .header-menu{
        display: none;
    }
}
body > .header > .header-menu a.button{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.77rem;
    padding: 0.3em 0.5em;
    border: 1px dotted rgba(255,255,255,0.7);
    border-radius: 0.3rem;
    background-color: rgba(255,255,255,0.5);
    color: black;
    cursor: pointer;
    height: 1.5rem;
    width: auto;
    min-width: 5rem;
    box-sizing: border-box;
}
body > .header > .header-menu a.button#save{
    background-color: rgb(169, 196, 123);
}
body > .header > .header-menu a.button#save:hover{
    filter: brightness(120%);
}
body > .header > .header-menu a.button.to-login {
    width: calc(0.77rem * 11);
    margin-right: 1.5rem;
}
#login_with_google {
    background-color: darkseagreen;
    color: white;
}
#login_with_discord {
    background-color: #2F3136;
    color: white;
}
#login_with_discord:hover {
    background-color: #36393f;
}
#login_with_twitter {
    background-color: rgba(64, 160, 241, 1);
    color: white;
    margin-right: 0;
}
body[data-mode="mine"] > .header > .header-menu a.button#save::after, body[data-mode="blank"] > .header > .header-menu a.button#save::after{
    content: "(Ctrl+S)";
    opacity: 0.8;
    font-size: 70%;
    margin-left: 0.5em;
}
body[data-mode="others"] > .header > .header-menu a.button#save{
    display: none;
}
body > .header > .header-menu a.button.disabled{
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
body > .header > .header-menu a.button.hidden{
    display: none;
}
body > .header > .header-menu a:hover{
    border: 1px solid rgba(196, 92, 196, 0.822);
}
body > .header > .hamburger-button{
    height: 2rem;
    width: 2rem;
}
@media screen and (max-width: 1279px) {
    body > .header > .hamburger-button{
        height: 4.2rem;
        width: 4.2rem;
        padding: 1rem;
    }
}

body > .body {
    width: 100%;
    height: calc(100% - var(--header-height));
    background-color: rgb(71, 97, 133);
    color: black;
    box-sizing: border-box;
    padding: 1.7rem;
}
@media screen and (min-width: 1280px) and (max-height: 899px) {
    body > .body {
        height: auto;
        margin-top: var(--header-height);
    }
}
@media screen and (max-height: 899px) {
    body > .body {
        padding-top: 0;
        padding-bottom: 0;
    }
}
@media screen and (max-width: 1279px) {
    body > .body {
        height: auto;
        --body-padding: 2rem;
        padding: calc(var(--header-height) + var(--body-padding)) var(--body-padding) var(--body-padding) var(--body-padding);
    }
}
@media print {
    body > .body {
        height: 100%;
        background: none;
        padding: 0;
    }
}
body[data-operation="rendering"] > .body {
    padding: 0;
    margin-top: 0;
}
@media screen and (max-width: 1279px) {
    .body-inner{
        width: min(100%, 46rem);
    }
}
body > .body > .body-inner {
    box-sizing: border-box;
    height: 100%;
    padding: 0;
    margin: 0 auto;
    background-color: rgba(177, 180, 155, 0.8);
}
@media screen and (min-width: 1280px) and (max-height: 899px) {
    body > .body > .body-inner {
        height: auto;
    }
}
@media screen and (min-width: 1280px) {
    body > .body > .body-inner {
        width: min(calc(75rem + max(300px, calc(18.75rem))), 90vw);
    }
}
@media print {
    body > .body > .body-inner {
        background: none;
        width: 100%;
    }
}
body[data-operation="rendering"] > .body > .body-inner {
    width: 100%;
}

fieldset {
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 0;
    min-inline-size: min-content;
    border: none;

    > legend {
        display: flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        padding-inline: 0;
        border: none;
    }
}

.top-level-error-message {
    display: flex;
    position: fixed;
    z-index: 12;
    top: 2.8rem;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(60, 40, 40, 0.75);
    color: wheat;
    font-size: 150%;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.top-level-error-message.hidden {
    display: none;
}

.verification-error-message {
    display: flex;
    position: fixed;
    z-index: 2;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: auto;
    min-height: 1.5rem;
    box-sizing: border-box;
    background-color: rgb(214, 27, 27);
    color: yellow;
    font-size: 80%;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0.5em;
    margin: 0;
}
.verification-error-message:empty {
    display: none;
}

.popup.success{
    background-color: rgba(122, 209, 122, 0.8);
}
.popup.error{
    background-color: rgba(201, 104, 104, 0.8);
}

#json_preview{
    position: fixed;
    right: 2em;
    top: 2em;
    width: 35vw;
    height: 50vw;
    opacity: 0.5;
    display: none;
}

#character_sheet {
    height: 100%;
    box-sizing: border-box;
}
@media screen and (min-width: 1280px) and (max-height: 899px) {
    #character_sheet {
        height: 50rem;
    }
}
@media all and (max-width: 1279px) {
    #character_sheet::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        clear: both;
    }
}
#character_sheet.disabled {
    filter: brightness(80%);
    opacity: 0.4;
    pointer-events: none;
}

.dialog .command[data-label$="削除する"] {
    background-color: rgb(172, 92, 92);
    color: white;
}
.dialog .command[data-label$="削除する"]:hover {
    background-color: rgb(161, 26, 26);
}

.screen-overlay > .chat-palette-view {
    background-color: rgb(247, 255, 210);

    > .pane {
        @media screen and (max-width: 999px) {
            display: grid;
            grid-template-rows: 1fr max-content;
            grid-template-columns: 1fr repeat(2, max-content);

            > .text-area-wrapper {
                grid-row: 1 / 2;
                grid-column: 1 / -1;
            }

            > button {
                grid-row: 2 / 3;

                &.to-export {
                    grid-column: 3 / 4;
                }

                &.to-copy {
                    grid-column: 2 / 3;
                }
            }
        }
    }
}
.chat-palette-view .text-area-wrapper {
    border: 1px solid gray;
    border-radius: 0.7rem;
    padding: 0.7rem;

    @media screen and (min-width: 1000px) {
        float: right;
        clear: both;
        width: 50vw;
        height: 60vh;
    }
}
.chat-palette-view[data-content-length="0"] .text-area-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.chat-palette-view[data-content-length="0"] .text-area-wrapper::before {
    content: "チャットパレットに含める項目が存在しません";
    color: gray;
}
.chat-palette-view textarea {
    width: 100%;
    height: 100%;
    resize: none;
    padding: 0;
    line-height: 180%;
    white-space: pre;
    border-width: 0;
    font-size: 1rem;

    background-color: transparent;
}
.chat-palette-view textarea:focus {
    border-width: 0;
    outline: none;
}
.chat-palette-view[data-content-length="0"] textarea {
    display: none;
}
.chat-palette-view button {
    float: right;
    font-size: 110%;
    margin: 1em 0.5em 0 0.5em;
    border-radius: 0.6em;
    cursor: pointer;
    height: 3rem;
}
.chat-palette-view button:first-of-type {
    clear: right;
}
.chat-palette-view[data-content-length="0"] button {
    display: none;
}
.chat-palette-view button > .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 80%;
    opacity: 0.8;
    margin-right: 0.25em;
}
.chat-palette-view .to-copy {
    background-color: #b2e3ff;
    cursor: copy;
}
.chat-palette-view .to-copy:hover {
    background-color: #86ff79;
}

.character-sheet-item-list{
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 1.154rem;
    width: 15em;
}
.character-sheet-item-list > li{
    width: 100%;
    height: 1.5em;
    margin-bottom: 0.5em;
}
.character-sheet-item-list > li:last-child{
    margin-bottom: 0;
}
.character-sheet-item-list > li > label{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: center;
}
.character-sheet-item-list > li > label:hover{
    background-color: rgb(211, 226, 188);
}
.character-sheet-item-list > li > label > [type="checkbox"]{
    font-size: 15pt;
    width: 1.3em;
    height: 1.3em;
    box-sizing: border-box;
    margin: 0 0.3em 0 0;
    padding: 0;
    pointer-events: none;
}
.character-sheet-item-list > li > label:hover > [type="checkbox"]{
    filter: brightness(160%);
}
.character-sheet-item-list > li > label > .value{
    font-size: 80%;
    margin-left: 0.4em;
}
.character-sheet-item-list > li > label > .value:empty{
    display: none;
}
.character-sheet-item-list > li > label > .value:before{
    content: "(";
}
.character-sheet-item-list > li > label > .value:after{
    content: ")";
}
.character-sheet-item-list > li[data-status="disabled"] > label > *{
    opacity: 0.7;
}
[data-omitted-by-user="yes"]{
    display: none !important;
}

.value-on-print{
    word-break: break-all;
    overflow-y: auto;
    align-items: center;
}

label > .name[data-name-value]:empty::before {
    content: attr(data-name-value);
}

@media screen {
    [data-mode="blank"] .text-input > .value-on-print, [data-mode="blank"] .note > .value-on-print, [data-mode$="blank"] .selector > .value-on-print{
        display: none !important;
    }
    [data-mode="mine"] .text-input > .value-on-print, [data-mode="mine"] .note > .value-on-print, [data-mode$="mine"] .selector > .value-on-print{
        display: none !important;
    }
}
[data-mode="others"] .text-input > .value-on-edit, [data-mode="others"] .note > .value-on-edit, [data-mode="others"] .selector > .value-on-edit{
    display: none !important;
}
[data-mode="others"] .text-input > .name::after{
    content: ":";
}
[data-mode="others"] .text-input > .value-on-print, [data-mode="others"] .selector > .value-on-print{
    display: flex;
}
@media print {
    .text-input > .value-on-edit, .note > .value-on-edit, .selector > .value-on-edit{
        display: none !important;
    }
    .text-input > .value-on-print, .note > .value-on-print, .selector > .value-on-print{
        height: auto;
    }
    .text-input > .value-on-print, .selector > .value-on-print{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .text-input > .value-on-print, .note > .value-on-print{
        display: block;
        overflow-wrap: break-word;
        overflow-y: visible;
    }
}

label.note .value-on-print > p{
    margin: 0;
    padding: 0;
    word-break: normal;
    line-break: strict;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 170%;
}
label.note .value-on-print > p::before{
    content: "";
    display: inline-block;
    width: 1em;
}

@media screen and (min-width: 1000px) {
    label.text-input > .zoom-supported, label.note > .zoom-supported {
        cursor: zoom-in;
    }
    label.text-input > .zoom-supported:hover, label.note > .zoom-supported:hover {
        background-color: rgba(128, 128, 128, 0.08);
    }
    .screen-overlay .pane-wrapper.text-value-zoom-window {
        max-width: min(50vw, 40em);
    }
}
.text-value-zoom-window p {
    line-height: 175%;
}
.text-value-zoom-window p::before {
    content: "";
    display: inline-block;
    width: 1em;
}

.read-only > div.value > p{
    margin: 0;
    padding: 0;
}
.read-only > div.value > p::before{
    content: "";
    display: inline-block;
    width: 1em;
}

.character-sheet input[type='number']{
    direction: rtl;
}

.image-property{
    --image-width: auto;
    --image-height: auto;
    --image-node-width: var(--image-width);
    --image-node-height: calc(var(--image-height) + 2rem);
    width: var(--image-node-width);
    height: var(--image-node-height);
}
.image-property:hover{
    background-color: rgba(255,255,255,0.1);
}
[data-mode="others"] .image-property:hover{
    background-color: transparent;
}
[data-operation="rendering"] .image-property[data-state="empty"] > *{
    display: none !important;
}
.image-property > .name{
    display: none;
}
.character-sheet .image-property > label{
    display: block;
    width: 100%;
    height: 100%;
}
.character-sheet .image-property[data-state="working"] > label, .character-sheet .image-property[data-state="loaded"] > label {
    height: 1.8rem;
    width: calc(100% - 1.8rem);
    margin-top: 0.2rem;
}
[data-mode="others"] .image-property[data-state="loaded"] > label {
    width: 100%;
}
.character-sheet .image-property[data-state="working"] > label.file, .character-sheet .image-property[data-state="loaded"] > label.file{
    display: none;
}
[data-mode="others"] .image-property[data-state="empty"] label.file {
    pointer-events: none;
}
.image-property .image-display, .image-property .dummy{
    margin: 0 auto;
    width: var(--image-width);
    height: var(--image-height);
}
.character-sheet .image-display{
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-print-color-adjust: exact;
    cursor: zoom-in;
}
.character-sheet .image-display:hover{
    filter: brightness(115%);
}
.image-property .image-controls{
    display: block;
    width: var(--image-width);
    height: 1.8rem;
    margin: 0.2rem auto 0 auto;
}
[data-mode="others"] .image-property label input{
    display: none !important;
}
.image-property .copyright, .image-property .image-controls .file-selector{
    height: 100%;
    width: calc(100% - 1.8rem);
    float: left;
    box-sizing: border-box;
}
[data-mode="others"] .image-property .copyright{
    width: 100%;
}
@media screen {
    [data-mode="others"] .image-property .copyright{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
@media print {
    .image-property .copyright{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
}
.image-property .copyright::before{
    display: flex;
    width: 0;
    height: 100%;
    overflow: visible;
    justify-content: center;
    align-items: center;
    content: "©";
    float: left;
    position: relative;
    left: calc(0.5em + 3px + 2px);
    opacity: 0.5;
}
.image-property .copyright::before{
    opacity: 1;
}
@media screen {
    [data-mode="others"] .image-property .copyright::before{
        display: flex;
        position: static;
        width: auto;
        margin-right: 0.15em;
    }
}
@media print {
    .image-property .copyright::before{
        display: inline;
        position: static;
        width: auto;
        margin-right: 0.15em;
        opacity: 1;
        height: auto;
    }
}
[data-mode="others"] .image-property .copyright[data-copyright=""]::before{
    display: none;
}
.image-property .copyright::after{
    content: attr(data-copyright);
    display: none;
    width: 100%;
    height: 100%;
    padding-left: calc(1em + 3px + 2px);
    justify-content: flex-start;
    align-items: center;
    overflow-x: visible;
}
[data-mode="others"] .image-property .copyright::after{
    display: flex;
    width: auto;
    padding-left: 0;
}
@media screen and (max-width: 1279px){
    [data-mode="others"] .image-property .copyright::after{
        display: inline;
        width: auto;
        padding-left: 0;
    }
}
@media print {
    .image-property .copyright::after{
        display: inline;
        width: auto;
        padding-left: 0;
        height: auto;
    }
}
.image-property .copyright > input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-left: 1.5rem;
    float: left;
}
.image-property .copyright .character-limit {
    position: relative;
    z-index: 1;
}
.image-property[data-state="empty"] .copyright{
    display: none;
}
.character-sheet .image-property label .file-selector{
    display: flex;
}
.character-sheet .image-property[data-state="working"] label .file-selector{
    display: none !important;
}
[data-mode="others"] .character-sheet .image-property label .file-selector{
    display: none !important;
}
.image-property input[type="file"]{
    border-width: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    box-sizing: border-box;
}
.image-property[data-state="working"] .image-controls .file-selector input[type="file"], .image-property[data-state="loaded"] .image-controls .file-selector input[type="file"]{
    display: none;
}
.image-property .hamburger-button{
    width: 1.8rem;
    height: 1.8rem;
    float: left;
    margin-top: 0.2rem;
}
.image-property .dummy{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 3px dashed rgba(128, 128, 128, 0.5);
}
.image-property .dummy > p {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 180%;
    color: rgba(128, 128, 128, 0.5);
    margin: 0;
    pointer-events: none;
}
@media screen and (max-width: 1279px) {
    .image-property .dummy > p {
        font-size: 150%;
    }
}
@media screen and (max-width: 799px) {
    .image-property .dummy > p {
        font-size: 130%;
    }
}
@media screen and (max-width: 599px) {
    .image-property .dummy > p {
        font-size: 110%;
    }
}
@media screen and (max-width: 399px) {
    .image-property .dummy > p {
        font-size: 90%;
    }
}
[data-mode="others"] .image-property .dummy > p.headline::before{
    content: "no";
    margin-right: 0.25em;
}
[data-mode="others"] .image-property .dummy > p.annotation{
    display: none;
}
[data-mode="others"] .image-property .hamburger-button{
    display: none !important;
}
@media print {
    .image-property label input{
        display: none !important;
    }
    .image-property label .file-selector{
        display: none !important;
    }
    .image-property .hamburger-button{
        display: none !important;
    }
}

.icon-toggle {
    --off-color-rgb: rgb(128, 128, 128);
    --off-opacity: 0.25;
    --off-hover-opacity-modifier: 1.5;
    --on-color-rgb: rgb(0, 0, 0);
    --on-opacity: 1.0;
}
.icon-toggle input[type="checkbox"] {
    box-sizing: border-box;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    appearance: none;
}
.icon-toggle > .icon {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.icon-toggle[data-state="off"] > .icon {
    color: var(--off-color-rgb);
    opacity: var(--off-opacity);
}
.icon-toggle[data-state="off"]:hover > .icon {
    opacity: calc(var(--off-opacity) * var(--off-hover-opacity-modifier));
    --shadow-color: var(--on-color-rgb);
    --shadow-offset: 0.05em;
    --shadow-blur: 0.1em;
    text-shadow: var(--shadow-color) var(--shadow-offset) var(--shadow-offset) var(--shadow-blur),
    var(--shadow-color) calc(var(--shadow-offset) * -1) var(--shadow-offset) var(--shadow-blur),
    var(--shadow-color) var(--shadow-offset) calc(var(--shadow-offset) * -1) var(--shadow-blur),
    var(--shadow-color) calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur);
}
.icon-toggle[data-state="on"] > .icon {
    color: var(--on-color-rgb);
    opacity: var(--on-opacity);
}
.icon-toggle[data-state="on"]:hover > .icon {
    --shadow-color: var(--off-color-rgb);
    --shadow-offset: 0.05em;
    --shadow-blur: 0.2em;
    text-shadow: var(--shadow-color) var(--shadow-offset) var(--shadow-offset) var(--shadow-blur),
    var(--shadow-color) calc(var(--shadow-offset) * -1) var(--shadow-offset) var(--shadow-blur),
    var(--shadow-color) var(--shadow-offset) calc(var(--shadow-offset) * -1) var(--shadow-blur),
    var(--shadow-color) calc(var(--shadow-offset) * -1) calc(var(--shadow-offset) * -1) var(--shadow-blur);
    filter: brightness(120%);
}

.character-sheet {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 1279px){
    .character-sheet {
        height: auto;
    }
}
.character-sheet:after{
    display: block;
    content: "";
    width: 0;
    height: 0;
    clear: both;
}
.character-sheet label{
    display: flex;
}
.character-sheet > .name{
    display: none;
}

.character-sheet > .tab-group{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
.character-sheet > .tab-group > .tab-labels{
    display: none;
}
@media screen and (max-width: 1279px) {
    .character-sheet > .tab-group > .tab-labels{
        display: none;
    }
}
@media print {
    .character-sheet > .tab-group > .tab-labels{
        display: none;
    }
}
.character-sheet > .tab-group > .tab-labels > .tab-label{
    box-sizing: border-box;
    height: 100%;
    float: left;

    background:
    linear-gradient(0deg, transparent 20%, rgba(255,255,255,0.4) 2%);

    padding: 0 1em;
    font-size: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.7;

    cursor: pointer;

    width: calc((100% - (2em * 3)) / 4);
}
.character-sheet > .tab-group > .tab-labels > .tab-label:nth-child(n+2){
    margin-left: 2em;
}
.character-sheet > .tab-group > .tab-labels > .tab-label.selected{
    cursor: default;
    pointer-events: none;
    background:
    linear-gradient(0deg, transparent 0, rgb(247, 255, 210) 0);
    opacity: 1.0;
}
.character-sheet > .tab-group > .tab-labels > .tab-label:hover{
    opacity: 0.82;
    box-sizing: border-box;
    border-top: 2px solid transparent;
}
.character-sheet > .tab-group > .tab-labels > .tab-label.selected:hover{
    opacity: 1.0;
}
.character-sheet > .tab-group > .tab-panes{
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    background-color: rgb(48, 49, 83);
    color: white;

    padding: 2rem;
}
@media print {
    .character-sheet > .tab-group > .tab-panes{
        background: none;
        padding: 0;
        color: black;
    }
}
.character-sheet > .tab-group > .tab-panes > .tab-pane{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: none;
}
@media screen and (max-width: 1279px) {
    .character-sheet > .tab-group > .tab-panes > .tab-pane{
        display: block;
    }
}
@media print {
    .character-sheet > .tab-group > .tab-panes > .tab-pane{
        display: block;
        page-break-after: always;
    }
}
.character-sheet > .tab-group > .tab-panes > .tab-pane.selected{
    display: block;
}
.character-sheet > .tab-group > .tab-panes > .tab-pane > div{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}
@media print {
    .character-sheet > .tab-group > .tab-panes > .tab-pane > div{
        height: auto;
    }
}
.character-sheet > .tab-group > .tab-panes > .tab-pane > div:after{
    display: block;
    content: "";
    width: 0;
    height: 0;
    clear: both;
}
.character-sheet > .tab-group > .tab-panes input, .character-sheet > .tab-group > .tab-panes textarea, .character-sheet > .tab-group > .tab-panes select{
    background-color: rgba(255,255,255,0.2);
    color: white;
    border: 4px double rgb(144,144,144);
}
.character-sheet > .tab-group > .tab-panes input::placeholder, .character-sheet > .tab-group > .tab-panes textarea::placeholder{
    color: rgba(255,255,255,0.3);
}
.character-sheet > .tab-group > .tab-panes select[data-selected-id=""]{
    color: rgba(255,255,255,0.3);
}
.character-sheet > .tab-group > .tab-panes select option{
    background-color: black;
    color: white;
}
.character-sheet > .tab-group > .tab-panes select option.default{
    color: rgba(255,255,255,0.3);
}
@media screen and (max-width: 1279px) {
    body, .character-sheet .tab-pane, .character-sheet .tab-pane input, .character-sheet .tab-pane select, .character-sheet .tab-pane textarea{
        font-size: 1.3rem;
    }
    body[data-operation="rendering"], [data-operation="rendering"] .character-sheet .tab-pane, [data-operation="rendering"] .character-sheet .tab-pane input, [data-operation="rendering"] .character-sheet .tab-pane select, [data-operation="rendering"] .character-sheet .tab-pane textarea{
        font-size: 1rem;
    }

    .character-sheet > .tab-group > .tab-panes select{
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-left: 0.3em;
        padding-right: 0.3em;
        background-image: url("arrow.svg");
        background-clip: content-box;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right center;
    }
}

.character-sheet textarea{
    resize: none;
}

.character-limit {
    display: none;
    width: 0;
    height: 100%;
    overflow-y: visible;
    margin: 0;
    box-sizing: border-box;
    font-size: 0.69rem;
    text-align: right;
    opacity: 0.8;
    pointer-events: none;

    @media screen and (max-width: 999px) {
        position: relative;
        top: 0.2em;
    }
}
@media print {
    .character-limit {
        display: none;
    }
}
[data-focus="in"] .character-limit, .character-limit[data-state="invalid"] {
    display: block;
}
.character-limit:before {
    content: attr(data-current);
    margin-left: 0.25em;
}
.character-limit:after {
    content: "/" attr(data-max);
    margin-left: 0.5em;
}
.character-limit[data-state="invalid"] {
    color: red;
}
[data-mode="others"] .character-limit {
    display: none;
}

.character-sheet .container-menu{
    width: 100%;
    height: 1.2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
@media print {
    .character-sheet .container-menu{
        display: none;
    }
}
body[data-mode="others"] .character-sheet .container-menu{
    display: none;
}
.character-sheet .container-menu > button{
    height: 100%;
    padding: 0 0.8em;
    font-size: 70%;
    border-radius: 1em;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: none;
    border: 1px dashed gray;
}
.character-sheet .container-menu > button:hover{
    background-color: rgb(248, 197, 200);
}

.character-sheet .value.copyable{
    cursor: copy;
}

@media screen and (max-width: 999px) {
    .virtual-window {
        top: calc(2vh + var(--header-height)) !important;
    }
}

.virtual-window[data-title="ダイスボット"]{
    width: 22em;
    height: 16em;
}
.virtual-window[data-title="ダイスボット"] > .window-body{
    justify-content: start;
    align-items: center;
    flex-flow: column;
    overflow-y: auto;
}
.dicebot-result .command{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.dicebot-result.loading:after, .dicebot-result .result.loading:after{
    content: "loading...";
    color: gray;
}
.dicebot-result, .dicebot-result .result{
    display: flex;
    width: 100%;
    justify-content: start;
    align-items: center;
    flex-flow: column;
}
.dicebot-result .step{
    display: flex;
    width: 100%;
    justify-content: start;
    align-items: center;
    flex-flow: column;
    margin-top: 0.5em;
}
.dicebot-result .step:before{
    display: block;
    text-align: center;
    content: "▼";
    font-size: 7pt;
    opacity: 0.8;
}
.dicebot-result .step:last-child{
    font-size: 120%;
}

.header .hamburger-menu .menu-item[data-label="上書き保存"]::after, .header .hamburger-menu .menu-item[data-label="保存"]::after{
    content: "(Ctrl+S)";
    font-size: 70%;
    opacity: 0.8;
    margin-left: 0.5em;
}

.body-inner > .copyright{
    display: none;
    flex-flow: row;
    box-sizing: border-box;
    justify-content: flex-end;
    align-items: flex-end;
    margin: 0;
    padding: 0 0.5em;
    font-size: 9pt;
    position: relative;
    width: 100%;
    top: -2em;
    color: white;
    font-weight: lighter;
    opacity: 0.8;
}
[data-operation="rendering"] .body-inner > .copyright{
    display: flex;
}
[data-rendering-height="720"] .body-inner > .copyright{
    font-size: 8pt;
}
.body-inner > .copyright > li{
    list-style-type: none;
    margin: 0 0 0 1em;
    padding: 0;
}
.body-inner > .copyright > li::before{
    content: "©";
    font-family: 'M PLUS Rounded 1c', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.dynamic-list {
    display: block;
    padding: 1em;
    --headline-height: 1.5rem;
    --margin-after-headline: 0;
}
.dynamic-list > .name {
    display: flex;
    width: 100%;
    height: var(--headline-height);
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: var(--margin-after-headline);
}
.dynamic-list > .contents-area {
    display: block;
    box-sizing: border-box;
    height: calc(100% - var(--headline-height) - var(--margin-after-headline));
    width: 100%;
    overflow-y: auto;
}
.dynamic-list > .contents-area[data-current-item-count][data-max-item-count]::after {
    content: "（ " attr(data-current-item-count) " 件 / 最大 " attr(data-max-item-count) " 件）";
    display: block;
    font-size: 80%;
    text-align: right;
    margin-top: 0.25em;
}
[data-mode="others"] .dynamic-list > .contents-area[data-current-item-count][data-max-item-count]::after {
    display: none;
}
.dynamic-list > .contents-area > .dynamic-list-items {
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: column;
    width: 100%;
    height: auto;
}
.dynamic-list > .contents-area > .contents-controls {
    display: flex;
    box-sizing: border-box;
    margin-top: calc(var(--window-body-padding) / 2);
    justify-content: flex-end;
    align-items: center;
}
[data-mode="others"] .dynamic-list > .contents-area > .contents-controls {
    display: none;
}
.dynamic-list > .contents-area > .contents-controls > button {
    width: auto;
    min-width: 2em;
    box-sizing: border-box;
    margin: 0 0.5em;
    cursor: pointer;
}
.dynamic-list > .contents-area > .contents-controls > button[disabled] {
    cursor: none;
    pointer-events: none;
}

.editable-selector {
    display: grid;

    > .name {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
    }

    > .fields {
        width: 100%;
        height: 100%;
        box-sizing: border-box;

        > :is([data-name="_selector_"], [data-name="_text_field_"]) {
            width: 100%;
            height: 100%;
            box-sizing: border-box;

            > .name {
                display: none;
            }

            > .value {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
            }
        }
    }

    &:not([data-selected-value="_other_"]) > .fields {
        > [data-name="_text_field_"] {
            display: none;
        }
    }

    &[data-selected-value="_other_"] > .fields {
        > [data-name="_selector_"] {
            display: none;
        }
    }
}