:root{
        --l-0:0%;
        --l-5:5%;
        --l-10:10%;
        --l-15:15%;
        --l-20:20%;
        --l-25:25%;
        --l-30:30%;
        --l-35:35%;
        --l-40:40%;
        --l-45:45%;
        --l-50:50%;
        --l-55:55%;
        --l-60:60%;
        --l-65:65%;
        --l-70:70%;
        --l-75:75%;
        --l-80:80%;
        --l-85:85%;
        --l-90:90%;
        --l-95:95%;
        --l-100:100%;

    --background-gradient1-hs:192.86 5.74%;
    --background-gradient1:hsl( var(--background-gradient1-hs) var(--l-50) );
    --background-gradient2-hs:210 5.56%;
    --background-gradient2:hsl( var(--background-gradient2-hs) var(--l-35) );

    --default-hs:217.5 8%;
    --default:hsl( var(--default-hs) var(--l-80) );
    --default-foreground-hs:210 10.81%;
    --default-foreground:hsl( var(--default-foreground-hs) var(--l-15) );
    --default-border:hsl( var(--default-hs) var(--l-60) );

    --menu-hs:213.64 39.29%;
    --menu-l:var(--l-30);
    --menu:hsl(var(--menu-hs) var(--menu-l) );
    --menu-foreground-hs:0 0%;
    --menu-foreground:hsl(var(--menu-foreground-hs) var(--l-90));
    --menu-border:hsl( var(--menu-hs) var(--l-10) );

    --primary-hs:145.24 76.83%;
    --primary-l:var(--l-30);
    --primary:hsl( var(--primary-hs) var(--primary-l) );
    --primary-foreground-hs:0 0%;
    --primary-foreground:hsl(var(--primary-foreground-hs) var(--l-100));
    --primary-border:hsl( var(--primary-hs) var(--l-10) );

    --secondary-hs:214.38 42.18%;
    --secondary-l:var(--l-60);
    --secondary:hsl( var(--secondary-hs) var(--secondary-l) );
    --secondary-foreground-hs:0 0%;
    --secondary-foreground:hsl(var(--secondary-foreground-hs) var(--l-0));
    --secondary-border:hsl( var(--secondary-hs) var(--l-40) );

    --success-hs:120.74 60%;
    --success-l:var(--l-25);
    --success:hsl( var(--success-hs) var(--success-l) );
    --success-foreground-hs:0 0%;
    --success-foreground:hsl(var(--success-foreground-hs) var(--l-100));
    --success-border:hsl( var(--success-hs) var(--l-5) );
    --success-icon-content:"\ea10";

    --danger-hs:0 67.92%;
    --danger-l:var(--l-40);
    --danger:hsl( var(--danger-hs) var(--danger-l) );
    --danger-foreground-hs:0 0%;
    --danger-foreground:hsl( var(--danger-foreground-hs) var(--l-100) );
    --danger-border:hsl( var(--danger-hs) var(--l-20) );
    --danger-icon-content:"\e02c";

    --warning-hs:25.52 73.41%;
    --warning-l:var(--l-50);
    --warning:hsl( var(--warning-hs) var(--warning-l) );
    --warning-foreground-h:0 0%;
    --warning-foreground:hsl( var(--warning-foreground-hs) var(--l-100) );
    --warning-border:hsl( var(--warning-hs) var(--l-15) );
    --warning-icon-content:"\e02d";

    --notice-hs:185.78 77.59%;
    --notice-l:var(--l-50);
    --notice-l2:var(--l-90);
    --notice:hsl( var(--notice-hs) var(--notice-l) );
    --notice-background2:hsl( var(--notice-hs) var(--notice-l2) );
    --notice-foreground-hs:246.28 97.73%;
    --notice-foreground:hsl( var(--notice-foreground-hs) var(--l-20) );
    --notice-border:hsl( var(--notice-hs) var(--l-30) );
    --notice-icon-content:"\e02d";

    --question-hs:217.97 34.2%;
    --question-l:var(--l-45);
    --question:hsl( var(--question-hs) var(--question-l) );
    --question-foreground-hs:0 0%;
    --question-foreground:hsl( var(--question-foreground-hs) var(--l-100) );
    --question-border:hsl( var(--question-hs) var(--l-25) );
    --question-icon-content:"\e02d";

    --mustache-hs:339.61 82.19%;
    --mustache-l:var(--l-50);
    --mustache:hsl( var(--mustache-hs) var(--mustache-l) );
    --mustache-foreground-hs:0 0%;
    --mustache-foreground:hsl( var(--mustache-foreground-hs) var(--l-100) );
    --mustache-border:hsl( var(--mustache-hs) var(--l-30) );
    --mustache-icon-content:"\e9f9";

    --highlight-hs:200 24.71%;
    --highlight-l:var(--l-65);
    --highlight:hsl( var(--highlight-hs) var(--highlight-l) );
    --highlight-foreground-hs:0 0%;
    --highlight-foreground:hsl( var(--highlight-foreground-hs) var(--l-0) );
    --highlight-border:hsl( var(--highlight-hs) var(--l-45) );

    --transparent-hs:0 0%;
    --transparent-l:var(--l-100);
    --transparent:hsl(var(--transparent-hs) var(--transparent-l) / 0%);
    --transparent-foreground:hsl(var(--default-foreground-hs) var(--l-15) );
    --transparent-border:hsl( var(--transparent-hs) var(--l-80) / 0% );

    --generator-hs:49 80%;
    --generator:hsl( var(--generator-hs) var(--l-55) );
    --generator-foreground-hs:246.28 97.73%;
    --generator-foreground:hsl(var(--generator-foreground-hs) var(--l-15));
    --generator-border:hsl( var(--generator-hs) var(--l-30) );

    --contextMenu-hs:0 0%;
    --contextMenu:hsl( var(--contextMenu-hs) var(--l-95) );
    --contextMenu-foreground-hs:0 0%;
    --contextMenu-foreground:hsl(var(--contextMenu-foreground-hs) var(--l-10));
    --contextMenu-border:hsl( var(--contextMenu-hs) var(--l-30) );
    --contextMenu-hover-hs:0 0%;
    --contextMenu-hover:hsl( var(--contextMenu-hs) var(--l-75) );
    --contextMenu-hover-foreground-hs:0 0%;
    --contextMenu-hover-foreground:hsl(var(--contextMenu-foreground-hs) var(--l-10));


    --theme-colors:(default, menu, primary, secondary, success, danger, warning, notice, question, mustache, generator, highlight, transparent);


    --page-hs:0 0%;
    --page-l:100%;
    --page:hsl( var(--page-hs) var(--l-100) );

    --page-foreground-hs:0 0%;
    --page-foreground:hsl( var(--page-foreground-hs) var(--l-0) );

    --page-line-color:hsl( var(--page-hs) var(--l-45) );
    --page-main-weapon-weapons-range:hsl( var(--page-hs) var(--l-90) );

    --dialog-hs:0 0%;
    --dialog:hsl( var(--dialog-hs) var(--l-100) );

    --dialog-foreground-hs:0 0%;
    --dialog-foreground:hsl( var(--dialog-foreground-hs) var(--l-0) );

    --sideDialog-close-border:hsl( var(--menu-hs) var(--l-40) );

    --tree-control:transparent;
    --tree-control-foreground-hs:189 20%;
    --tree-control-foreground:hsl(var(--tree-control-foreground-hs) var(--l-10));

    --tree-control-icon:transparent;
    --tree-control-icon-foreground-hs:var(--menu-hs);
    --tree-control-icon-foreground:hsl(var(--tree-control-icon-foreground-hs) var(--l-30));

    --tree-control-selected-hs:var(--success-hs);
    --tree-control-selected-l:var(--success-l) / 20%;
    --tree-control-selected:hsl( var(--success-hs) var(--success-l) / 20%);
    --tree-control-selected-foreground:var(--success-foreground);
    --tree-control-highlight-hs:60 100%;
    --tree-control-highlight:hsl(var(--tree-control-highlight-hs) var(--l-90));

    --character-card:hsl( var(--menu-hs) var(--menu-l) / 15%);
    --character-card-highlight:var(--tree-control-highlight);
    --character-card-foreground-name:var(--menu);
    --character-card-foreground:var(--dialog-foreground);

    --library-hs:0 0%;
    --library:hsl(var(--library-hs) var(--l-100));
    --library-foreground-hs:0 0%;
    --library-foreground:hsl(var(--library-foreground-hs) var(--l-10));

    --library-link-color-h:0;
    --library-link-color-s:100%;
    --library-link-color-hs:var(--library-link-color-h) var(--library-link-color-s);
    --library-link-color:hsl( var(--library-link-color-hs) var(--l-15) );

    --library-link-hover:hsl( calc( var(--library-link-color-h) - 80 ) calc( var(--library-link-color-s) * 0.3 ) var(--l-85) );

    --library-link-no-ref-hs:0 0%;
    --library-link-no-ref:hsl( var(--library-link-no-ref-hs) var(--l-35) );

    --library-details-categories-hs:50.13 75.25%;
    --library-details-categories:hsl( var(--library-details-categories-hs) var(--l-40) );

    --library-details-requirement-foreground-hs:0 100%;
    --library-details-requirement-foreground:hsl( var(--library-details-requirement-foreground-hs) var(--l-25) );

    --library-details-requirement-link-color-hs:var(--library-details-requirement-foreground-hs);
    --library-details-requirement-link-color:hsl( var(--library-details-requirement-link-color-hs) var(--l-25) );

    --library-header-hs:200 25.93%;
    --library-header:hsl(var(--library-header-hs) var(--l-85));
    --library-header-foreground-hs:246.28 97.73%;
    --library-header-foreground:hsl(var(--library-header-hs) var(--l-20));

    --effect-transfer-border-hs:0 0%;
    --effect-transfer-border:hsl( var(--effect-transfer-border-hs) var(--l-15) );

    --num-input-field-border-hs:0 0%;
    --num-input-field-border:hsl( var(--num-input-field-border-hs) var(--l-85) );


    --equipment-image:(
        female,
        female2,
        female-fat,
        female-fat2,
        male,
        male2,
        male-fat,
        male-fat2,
        dwarf-female,
        dwarf-male,
        female-robot,
        male-robot,
        robot,
        robot-funny,
        catwomen,
        catmen,
        satyr-female,
        satyr-male,
        dragon,
        thiefling-female,
        thiefling-male,
        lizardmen,
        skelleton,
        zombie,
        zombie2,
        zombie-female,
        alien
    );

    --padding-body-top:50px;
    --padding-body-left:0px;

}
    @media (min-width: 501px){:root{
        --padding-body-top:0px;
        --padding-body-left:70px

}
    }
html{ font-size:11pt;}
html, body, div, span, a,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, span, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	vertical-align:baseline;
	background:transparent;
	line-height:1px/1px;
	letter-spacing:0px;
	font-family:"times new roman";
    font-family:sans-serif;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
	display:block;
}
nav ul{
	list-style:none;
}
blockquote, q{
	quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after{
	content:'';
	content:none;
}
ins{
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}
mark{
	background-color:#ff9;
	color:#000;
	font-weight:bold;
}
del{
	text-decoration:line-through;
}
abbr[title], dfn[title]{
	border-bottom:1px dotted;
	cursor:help;
}
table{
	margin:0;
	padding:0;
	border-collapse:collapse;
	border-spacing:0;
}
input, select, textarea{
	line-height:initial;
	border:0 none;
	font-family:"times new roman";
    font-family:sans-serif;
}
input, select{
	vertical-align:middle;
}
[hidden]{
	display:none;
}
button,
input,
select,
textarea{
	font-size:100%;
	margin:0;
	vertical-align:baseline;
	*vertical-align:middle;
}
button,
input{
	line-height:normal;
}
strong{ font-weight:bold; }
summary{
    cursor:pointer;
}
dialog{
    margin:0;
    border-radius:7px;
}
@page{ margin:0.3in }
body{
    padding-top:var(--padding-body-top);
}
nav.menu{
    position:fixed;
    top:0;
    left:0;
    z-index:99;
    background:var(--menu);
    color:#fff;
    border-bottom:1px solid color-mod(var(--menu) b(70%));
    width:100vw;
    height:auto;
    transition:all 0.4s ease-in-out;
    max-height:100vh;
    overflow:hidden;
}
nav.menu ul{
        list-style:none;
        padding:0;
        margin:0;
        display:grid;
        grid-template-columns:repeat(4, 25%);
    }
nav.menu ul li{
            cursor:pointer;
            padding:5px;
            margin-bottom:10px;
            text-align:center;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:space-between;
        }
nav.menu ul li > div, nav.menu ul li > a{
                display:flex;
                flex-direction:column;
                align-items:center;
                justify-content:space-between;
            }
nav.menu ul li a, nav.menu ul li div{
                color:#fff;
                font-size:22pt;
                text-decoration:none;
                cursor:pointer;
            }
nav.menu ul li.burger-menu-icon{
                justify-content:center;
            }
nav.menu ul li .menu-name{
                opacity:0;
                transition:opacity 0.4s ease;
                font-size:12px;
                margin-top:7px;
                display:block;
                text-align:center;
                font-family:'NotoSans' !important;
                height:1em;
                transition:all 0.4s ease-in-out;
            }
nav.menu ul li#menu-user-settings{
                display:none;
            }
nav.menu.open{
        max-height:100vh;
        border-bottom-width:3px;
    }
nav.menu.open ul li .menu-name{
            opacity:1;
            height:1em;
        }
#burger-menu-icon{
    width:40px;
    height:30px;
    position:relative;
    margin:0 auto;
    transform:rotate(0deg);
    transition:.5s ease-in-out;
    cursor:pointer;
}
#burger-menu-icon span{
        display:block;
        position:fixed;
        height:6px;
        width:100%;
        background:#fff;
        border-radius:6px;
        opacity:1;
        left:0;
        transform:rotate(0deg);
        transition:.25s ease-in-out;
    }
#burger-menu-icon span:nth-child(1){
            top:0px;
        }
#burger-menu-icon span:nth-child(2){
            top:12px;
        }
#burger-menu-icon span:nth-child(3){
            top:24px;
        }
#burger-menu-icon.open span:nth-child(1){
            top:12px;
            transform:rotate(135deg);
        }
#burger-menu-icon.open span:nth-child(2){
            opacity:0;
            left:-60px;
            width:0;
        }
#burger-menu-icon.open span:nth-child(3){
            top:12px;
            transform:rotate(-135deg);
        }
@media (min-width: 501px){
    body{
        padding-top:var(--padding-body-top);
        padding-left:var(--padding-body-left);
    }

    nav.menu{
        height:100vh;
        max-height:100vh;
        width:auto;
        max-width:100vw;
        border:0;
        border-right:1px solid color-mod(var(--menu) b(70%));
    }

        nav.menu ul{
            display:flex;
            flex-direction:column;
            flex-wrap:wrap;
            max-height:100vh;
            max-width:100vw;
            width:70px;
            transition:left 0.4s cubic-bezier(.65,.05,.36,1);
            margin-top:10px;
        }

            nav.menu ul li{
                padding:5px;
                width:60px;
                margin-bottom:15px;
                justify-content:center;
                height:71px;
            }

                nav.menu ul li .menu-name{
                    opacity:1;
                }

        nav.menu.open{
            max-width:100vw;
            border-right-width:3px;
        }

    #burger-menu-icon{
        margin:0 auto;
    }

        #burger-menu-icon.open span:nth-child(2){
            left:60px;
        }
}
body.isLoggedIn nav li#menu-user-settings{
    display:block;
}
body.isLoggedIn nav li#menu-user-login-register{
    display:none;
}
body .not-logged-in-only{
        display:initial;
    }
body .logged-in-only{
        display:none !important;
    }
body.isLoggedIn .not-logged-in-only{
        display:none !important;
    }
body.isLoggedIn .logged-in-only{
        display:initial !important;
    }
#menu-character-save .icon-save{
    position:relative;
}
#menu-character-save .icon-save:after{
        font-family:'charactersheets' !important;
        speak:never;
        font-style:normal;
        font-weight:normal;
        font-variant:normal;
        text-transform:none;
        line-height:1;
        position:absolute;
        top:0;
        right:0;
        color:var(--menu-foreground);
        content:"\f069";

        transition:all 0.8s ease-in-out;
        transform:rotate(-1.5turn);
        font-size:0px;
    }
.has-changed #menu-character-save .icon-save:after{
        transform:rotate(0turn);
        font-size:1em;
        -webkit-text-stroke:2px var(--mustache);
        text-stroke:2px var(--mustache);
        top:-50%;
        right:-50%;
    }
body main .page{
        margin:1em auto 3em;
    }
[data-layout="facing"] body main{
        display:flex;
        column-gap:90px;
        flex-wrap:wrap;
        justify-content:center;
        padding-left:7em;
        padding-right:7em;
    }
[data-layout="facing"] body main .page{
            margin:1em 0 3em;
        }
body{
    background:radial-gradient(circle farthest-corner at center center , var(--background-gradient1) 0%, var(--background-gradient2) 100%) repeat fixed 0 0 #2B2B2B;
    box-sizing:border-box;
    font-family:'NotoSans', Sans-Serif;
}
body main.sideDialogOpened{
            overflow:hidden;
        }
@media (min-width: 501px){
body main.sideDialogOpened{
                overflow:auto
        }
            }
.ui-autocomplete.ui-menu{
    max-height:18em;
    overflow:auto;
}
.ui-autocomplete.ui-menu .ui-state-active{
        margin:0 !important;
        padding-left:calc(0.4em + 5px);
        border:0;
    }
.ui-menu-item > div{
    font-size:0.85em;
    max-height:20em;
    overflow:auto;
    margin-left:5px;
    padding-left:0.25em;
}
.ui-autocomplete-category{
    font-size:1em;
    font-weight:bold;
    padding:.2em .4em;
    margin:.8em 0 .2em;
    line-height:1.5;
}
.ui-autocomplete-category:first-child{
    margin-top:0;
}
#pageFooter{
    color:white;
    opacity:0.6;
    position:fixed;
    bottom:0;
    right:0;
    padding-bottom:2em;
    writing-mode:sideways-lr;
    transform-origin:bottom right;
    padding-left:2em;
}
#pageFooter p{
        writing-mode:sideways-lr;
        margin:0;
    }
#loadIcon{
    opacity:0;
    transition:opacity 1s ease;
    color:rgba(0, 0, 0, 0.2);
    font-size:200pt;
    left:50%;
    margin-left:-100pt;
    margin-top:-100pt;
    position:fixed;
    top:50%;
    z-index:-1;
}
#loadIcon.visible{
        opacity:1;
    }
.icon-spin{
    display:inline-block;
    animation:spin 2s infinite linear;
}
@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(359deg);}}
.icon-rotate-90::before{
    display:inline-block;
    transform:rotate(90deg);
}
.icon-rotate-270::before{
    display:inline-block;
    transform:rotate(270deg);
}
.hidden{
    display:none;
    visibility:hidden;
    transform:scale(0) translate (-999px, 0px);
    clip-path:circle(0);
    position:absolute;
    left:-999px;
}
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within){
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
input{box-sizing:border-box !important;}
input:focus{
    border-color:rgba(0, 75, 200, 0.6) !important;
}
textarea.lined{
    background:linear-gradient(var(--page-line-color) 1px, transparent 1px);
    font:11pt/20px "times new roman";
    background-position-y:18px;
    background-size:100% 20px;
    background-repeat:repeat-y;

    margin-top:0px;
    padding-top:1px;
    resize:none;
    border:0;
    padding-bottom:1px;
}
ul.no-style{
    list-style:none;
    margin:0;
    padding:0;
}
.btn{
    display:inline-block;
    font-weight:400;
    text-align:center;
    white-space:nowrap;
    vertical-align:middle;
    user-select:none;
    border:1px solid transparent;
    padding:.375rem .75rem;
    font-size:1rem;
    line-height:1.5;
    border-radius:.25rem;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    cursor:pointer;
}
.btn.btn-default{
        color:var(--default-foreground);
        background-color:var(--default);
        border-color:var(--default-border);
    }
.btn.btn-default:hover{
            background-color:hsl(from var(--default) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-default:disabled, .btn.btn-default.disabled{
            background-color:hsl( from var(--default) h 15% var(--l-90) );
            border-color:hsl( from var(--default) h 5% l );
            color:hsl( from var(--default-foreground) h 9% var(--l-40) );
        }
.btn.btn-menu{
        color:var(--menu-foreground);
        background-color:var(--menu);
        border-color:var(--menu-border);
    }
.btn.btn-menu:hover{
            background-color:hsl(from var(--menu) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-menu:disabled, .btn.btn-menu.disabled{
            background-color:hsl( from var(--menu) h 15% var(--l-90) );
            border-color:hsl( from var(--menu) h 5% l );
            color:hsl( from var(--menu-foreground) h 9% var(--l-40) );
        }
.btn.btn-primary{
        color:var(--primary-foreground);
        background-color:var(--primary);
        border-color:var(--primary-border);
    }
.btn.btn-primary:hover{
            background-color:hsl(from var(--primary) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-primary:disabled, .btn.btn-primary.disabled{
            background-color:hsl( from var(--primary) h 15% var(--l-90) );
            border-color:hsl( from var(--primary) h 5% l );
            color:hsl( from var(--primary-foreground) h 9% var(--l-40) );
        }
.btn.btn-secondary{
        color:var(--secondary-foreground);
        background-color:var(--secondary);
        border-color:var(--secondary-border);
    }
.btn.btn-secondary:hover{
            background-color:hsl(from var(--secondary) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-secondary:disabled, .btn.btn-secondary.disabled{
            background-color:hsl( from var(--secondary) h 15% var(--l-90) );
            border-color:hsl( from var(--secondary) h 5% l );
            color:hsl( from var(--secondary-foreground) h 9% var(--l-40) );
        }
.btn.btn-success{
        color:var(--success-foreground);
        background-color:var(--success);
        border-color:var(--success-border);
    }
.btn.btn-success:hover{
            background-color:hsl(from var(--success) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-success:disabled, .btn.btn-success.disabled{
            background-color:hsl( from var(--success) h 15% var(--l-90) );
            border-color:hsl( from var(--success) h 5% l );
            color:hsl( from var(--success-foreground) h 9% var(--l-40) );
        }
.btn.btn-danger{
        color:var(--danger-foreground);
        background-color:var(--danger);
        border-color:var(--danger-border);
    }
.btn.btn-danger:hover{
            background-color:hsl(from var(--danger) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-danger:disabled, .btn.btn-danger.disabled{
            background-color:hsl( from var(--danger) h 15% var(--l-90) );
            border-color:hsl( from var(--danger) h 5% l );
            color:hsl( from var(--danger-foreground) h 9% var(--l-40) );
        }
.btn.btn-warning{
        color:var(--warning-foreground);
        background-color:var(--warning);
        border-color:var(--warning-border);
    }
.btn.btn-warning:hover{
            background-color:hsl(from var(--warning) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-warning:disabled, .btn.btn-warning.disabled{
            background-color:hsl( from var(--warning) h 15% var(--l-90) );
            border-color:hsl( from var(--warning) h 5% l );
            color:hsl( from var(--warning-foreground) h 9% var(--l-40) );
        }
.btn.btn-notice{
        color:var(--notice-foreground);
        background-color:var(--notice);
        border-color:var(--notice-border);
    }
.btn.btn-notice:hover{
            background-color:hsl(from var(--notice) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-notice:disabled, .btn.btn-notice.disabled{
            background-color:hsl( from var(--notice) h 15% var(--l-90) );
            border-color:hsl( from var(--notice) h 5% l );
            color:hsl( from var(--notice-foreground) h 9% var(--l-40) );
        }
.btn.btn-question{
        color:var(--question-foreground);
        background-color:var(--question);
        border-color:var(--question-border);
    }
.btn.btn-question:hover{
            background-color:hsl(from var(--question) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-question:disabled, .btn.btn-question.disabled{
            background-color:hsl( from var(--question) h 15% var(--l-90) );
            border-color:hsl( from var(--question) h 5% l );
            color:hsl( from var(--question-foreground) h 9% var(--l-40) );
        }
.btn.btn-mustache{
        color:var(--mustache-foreground);
        background-color:var(--mustache);
        border-color:var(--mustache-border);
    }
.btn.btn-mustache:hover{
            background-color:hsl(from var(--mustache) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-mustache:disabled, .btn.btn-mustache.disabled{
            background-color:hsl( from var(--mustache) h 15% var(--l-90) );
            border-color:hsl( from var(--mustache) h 5% l );
            color:hsl( from var(--mustache-foreground) h 9% var(--l-40) );
        }
.btn.btn-generator{
        color:var(--generator-foreground);
        background-color:var(--generator);
        border-color:var(--generator-border);
    }
.btn.btn-generator:hover{
            background-color:hsl(from var(--generator) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-generator:disabled, .btn.btn-generator.disabled{
            background-color:hsl( from var(--generator) h 15% var(--l-90) );
            border-color:hsl( from var(--generator) h 5% l );
            color:hsl( from var(--generator-foreground) h 9% var(--l-40) );
        }
.btn.btn-highlight{
        color:var(--highlight-foreground);
        background-color:var(--highlight);
        border-color:var(--highlight-border);
    }
.btn.btn-highlight:hover{
            background-color:hsl(from var(--highlight) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-highlight:disabled, .btn.btn-highlight.disabled{
            background-color:hsl( from var(--highlight) h 15% var(--l-90) );
            border-color:hsl( from var(--highlight) h 5% l );
            color:hsl( from var(--highlight-foreground) h 9% var(--l-40) );
        }
.btn.btn-transparent{
        color:var(--transparent-foreground);
        background-color:var(--transparent);
        border-color:var(--transparent-border);
    }
.btn.btn-transparent:hover{
            background-color:hsl(from var(--transparent) h calc(s * 0.9) calc(l * 1.2) );
        }
.btn.btn-transparent:disabled, .btn.btn-transparent.disabled{
            background-color:hsl( from var(--transparent) h 15% var(--l-90) );
            border-color:hsl( from var(--transparent) h 5% l );
            color:hsl( from var(--transparent-foreground) h 9% var(--l-40) );
        }
.btn.btn-link{
    font-weight:400;
    color:#007bff;
    background-color:transparent;
}
.btn-xs{
    padding:1px 5px;
    font-size:12px;
    line-height:1.5;
    border-radius:3px;
}
.btn-group,
.btn-group-vertical{
  position:relative;
  display:inline-flex;
  vertical-align:middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn{
  position:relative;
  flex:1 1 auto;
}
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active{
  z-index:1;
}
.btn-toolbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.btn-toolbar .input-group{
  width:auto;
}
.btn-group{
  border-radius:0.375rem;
}
.btn-group > :not(.btn-check:first-child) + .btn,
.btn-group > .btn-group:not(:first-child){
  margin-left:-1px;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn-group:not(:last-child) > .btn{
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn{
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.isLoggedIn .logged-in-only{
    display:initial;
}
#libraryIndex ul{
        list-style:none;
        padding:0;
        margin:0;
        display:flex;
        flex-wrap:wrap;
        background:var(--menu);
        transition:color 0.4s ease-in-out, background 0.4s ease-in-out;
        border-radius:8px;
    }
#libraryIndex ul li{
            border-radius:0px;
            padding:5px 0;
        }
#libraryIndex ul li.active{
                background:linear-gradient(to bottom,
                        var(--menu) 0%,
                        var(--menu) 85%,
                        var(--secondary) 85%,
                        var(--secondary) 100%
                    );
            }
#libraryIndex ul li:first-child{
                border-radius:4px 0px 0px 4px;
            }
#libraryIndex ul li:first-child a{
                    border-left:0;
                }
#libraryIndex ul li:last-child{
                border-radius:0px 4px 4px 0px;
            }
#libraryIndex ul li:last-child a{
                    border-right:0;
                }
#libraryIndex ul li a{
                padding:0px 10px;
                display:inline-block;
                border-right:2px solid #ccc;
                color:#fff;
                text-decoration:none;
                font-weight:700;
            }
dialog.libraryDetails{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    padding:0;
    position:fixed;
    background:var(--dialog);
    color:var(--dialog-foreground);
    z-index:100;
    border:0;
}
dialog.libraryDetails[data-type="alignment"] .container ul.inBooks{
            display:none;
        }
dialog.libraryDetails[data-type="alignment"] .container .description ol{
            margin-left:2em;
        }
dialog.libraryDetails[data-type="alignment"] .container .description ol li{
                margin-bottom:0.3em;
            }
dialog.libraryDetails .pinDialog{
        display:none;
    }
dialog.libraryDetails[data-pinned="true"] .pinDialog{
        color:var(--success);
    }
dialog.libraryDetails>header{
        background:var(--library-header);
        color:var(--library-header-foreground);
        padding:0 0.5em;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
dialog.libraryDetails>header h1{
            padding:0.2em 0.25em 0.2em 0.1em;
            margin:0;
        }
dialog.libraryDetails p{
        margin-bottom:1em;
    }
dialog.libraryDetails .container{
        max-width:100vw;
        overflow:auto;
        color:var(--library-foreground);
        transition:color 0.4s ease-in-out, background 0.4s ease-in-out;
        padding:0;
    }
dialog.libraryDetails .container .categories{
            padding:0.5em 0.1em 0 1em;
            border-bottom:2px solid var(--library-header);
            list-style:none;
            margin:0;
            margin-bottom:0.1em;
            min-height:1.5em;
        }
dialog.libraryDetails .container .categories li{
                display:inline;
            }
dialog.libraryDetails .container .categories li:not(:last-child)::after{
                content:', ';
            }
dialog.libraryDetails .container .requirement{
            margin:0;
            margin-bottom:0.5em;
            color:var(--library-details-requirement-foreground);
            display:flex;
            flex-wrap:wrap;
        }
dialog.libraryDetails .container .requirement h2{
                font-size:1em;
                margin:0;
            }
dialog.libraryDetails .container .requirement .requirement-list{
                padding:0;
                padding-left:0.5em;
                list-style:none;
                margin:0;
                display:flex;
                flex-wrap:wrap;
            }
dialog.libraryDetails .container .requirement .requirement-list li{
                    margin-right:0.5em;
                    color:var(--library-details-requirement-link-color);
                    text-decoration:underline;
                    cursor:pointer;
                }
dialog.libraryDetails .container .requirement .requirement-list li:not(:last-child):after{
                        content:', ';
                    }
dialog.libraryDetails .container ul.inBooks{
            padding-left:1em;
            margin-top:0.7em;
            margin-bottom:1em;
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            justify-content:flex-start;
            align-items:flex-start;
        }
dialog.libraryDetails .container ul.inBooks li{
                list-style:none;
                margin:0 0.5em 0.4em 0;
                padding:0 0.4em 6px 0px;
                border-right:1px solid hsl( var(--menu-hs) var(--menu-l) / 0%);
                border-image:linear-gradient(
                          to bottom,
                          var(--menu),
                          rgba(255,255,255,0)
                    ) 1 100%;
                position:relative;
                cursor:pointer;
            }
dialog.libraryDetails .container ul.inBooks li:after{
                    content:"";
                    position:absolute;
                    left:6px;
                    bottom:-2px;
                    width:30px;
                    height:5px;
                    transition:all .25s ease-in;
                    background:var(--menu);
                }
dialog.libraryDetails .container ul.inBooks li:last-child{
                    border-right:0px;
                }
dialog.libraryDetails .container ul.inBooks li .lib-ref-books{
                    text-decoration:none;
                    color:var(--dialog-foreground);
                }
dialog.libraryDetails .container ul.inBooks li.active:after{
                    background:var(--library-details-categories);
                    width:50%;
                }
dialog.libraryDetails .container .content{
            padding:0 1em 0 1em;
            overflow:auto;
        }
dialog.libraryDetails .container .content .contentTop{
                margin-bottom:0.5em;
            }
dialog.libraryDetails .container .content ul.ammo{
                list-style:none;
                padding:0;
                margin:0;
                margin-top:0.7em;
            }
dialog.libraryDetails .container .content ul.ammo li{
                    padding:0.25em;
                    padding-left:0.6em;
                }
dialog.libraryDetails .container .content ul.ammo li:before{
                        font-family:'charactersheets' !important;
                        speak:never;
                        font-style:normal;
                        font-weight:normal;
                        font-variant:normal;
                        text-transform:none;
                        line-height:1;
                        -webkit-font-smoothing:antialiased;
                        -moz-osx-font-smoothing:grayscale;
                        content:"\f106";
                        margin-right:0.3em;
                    }
dialog.libraryDetails[data-type="spell"] .contentTop{
        display:flex;
        flex-direction:column;
    }
dialog.libraryDetails .perLevel h3{
            margin-bottom:0;
        }
dialog.libraryDetails .perLevel ul{
            list-display:none;
            margin:0;
            padding:0;
        }
dialog.libraryDetails .perLevel ul li{
                margin:0;
                padding:0;
                display:inline;
            }
dialog.libraryDetails .perLevel ul li:not(:last-child)::after{
                    content:', ';
                }
dialog.libraryDetails .addToCurrentCharacter{
        padding-left:1em;
        padding-bottom:5px;
        margin-top:5px;
        display:none;
    }
dialog.libraryDetails[data-type="skill"] .addToCurrentCharacter{
        display:initial;
    }
@media (min-width: 501px){
    dialog.libraryDetails{
        max-height:90vh;
        border-radius:7px;
        padding-bottom:0.5em;
        border:1px solid var(--library-header);
        box-shadow:4px 4px 9px rgba(0,0,0, 0.6);
        z-index:10;
    }
        dialog.libraryDetails .pinDialog{
            display:initial;
        }
}
@media (min-width: 661px){
    dialog.libraryDetails{
        top:25vh;
        left:25vw;
        width:50vw;
        height:auto;
        z-index:110;
    }

        dialog.libraryDetails .content{
            max-height:66vh;
        }
}
@media (max-width: 500px){
    body{
        margin:0;
    }
}
.library{
    text-align:left;
    background:var(--library);
    color:var(--library-foreground);
    transition:color 0.4s ease-in-out, background 0.4s ease-in-out;
    padding:10px;
    font-size:11pt;
}
.library header{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        margin-bottom:0.25em;
    }
.library header h1{
            font-size:2.5rem;
            margin:0.2em 0;
        }
.library header .filterLibrary{
            max-height:1.5em;
            font-size:1.3rem;
            width:100%;
            padding:0.2em 0 0.2em 0.3em;
            border-radius:5px;
            border:1px solid rgba(112, 112, 112, 0.53);
            box-shadow:inset 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
        }
.library #library-spell header{
        margin-bottom:1em;
    }
.library section{
        width:100%;
    }
.library .toc{
        columns:250px;
        margin-top:20px;
        margin-bottom:33px;
    }
.library .toc>div{
            margin-bottom:0.8em;
        }
.library .toc>div div[data-level]{

            }
.library .toc :first-child h2{
            margin-top:0;
        }
.library .toc h2{
            margin:0 0 0.2em 0;
            display:inline-block;
            padding-right:1em;
            margin-top:10px;
        }
.library .toc h3{
            margin-bottom:0;
        }
.library .toc ul{
            list-style:none;
            padding:0;
            margin:0;
        }
.library .toc a{
            color:var(--library-link-color);
            transition:color 0.4s ease-in-out;
            text-decoration:none;
            display:block;
        }
.library .toc a:hover{
                background:var(--library-link-hover);
                text-decoration:underline var(--library-link-color);
            }
.library .toc a.no-ref{
                font-style:initial;
                color:var(--library-link-no-ref);
            }
#library-spell .toc h2{
        display:block;
        background:linear-gradient(180deg, rgba(255,255,255,1) 51%, rgba(255,255,255,0) 52%, rgba(255,255,255,0) 64%, rgba(255,255,255,1) 65%), linear-gradient(90deg, rgba(255,255,255,0) 25%, var(--menu) 55%);
    }
#library-spell .toc h2 span{
            background:white;
            padding-right:0.5em;
        }
#library-alignment .toc{
    columns:1;
    display:flex;
    gap:30px;
}
#library-alignment .toc > div{
        width:250px;
    }
@media (min-width: 501px){
    .library header{
        margin-bottom:0em;
    }
    #library-spell header{
        margin-bottom:0.25em;
    }
}
@media (min-width: 661px){
    .library{
        margin:20px;
        background:var(--library);
        box-shadow:6px 6px 18px #000;
    }

        .library header{
            display:flex;
            flex-direction:row;
            align-items:baseline;
        }
            .library header h1{
                font-size:2.5rem;
                margin:0.2em 0;
                flex:1 1 1px;
                white-space:pre;
            }
            .library header .filterLibrary{
                flex:10 10 1px;
                max-height:1.5em;
                font-size:1.3rem;
                margin-left:20px;
                width:100%;
                padding:0.2em 0 0.2em 0.3em;
                border-radius:5px;
                border:1px solid rgba(112, 112, 112, 0.53);
                box-shadow:inset 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
            }
}
@media (min-width: 1025px){
    .library #library-alignment .toc > div{
        width:300px;
    }
        .library .toc{
            columns:300px;
        }
}
#randomSideDialog[data-last-random-setting="fantasy"] [data-setting="fantasy"]{
        background:var(--notice);
        color:var(--notice-foreground);
    }
#randomSideDialog .content{
        max-width:500px;
        font-size:1.25em;

    }
@media (min-width: 501px){
#randomSideDialog .content{
            font-size:1em

    }
        }
#randomSideDialog .content small{
            font-style:italic;
            color:hsl( var(--dialog-foreground-h) var(--dialog-foreground-s) 40% );
            padding:0.5em;
            display:block;
        }
#randomSideDialog .content section, #randomSideDialog .content form{
            display:none;
            transition:max-height 0.5s ease-in-out;
        }
#randomSideDialog .content section.opened, #randomSideDialog .content form.opened{
                display:block;
            }
#randomSideDialog .content .select-settings div ul{
                    display:flex;
                    flex-direction:row;
                    flex-wrap:wrap;
                    align-items:stretch;
                    justify-content:space-between;
                    list-style:none;
                    padding:0;
                    margin:0;
                    gap:10px 10px;
                }
#randomSideDialog .content .select-settings div ul li{
                        flex-grow:1;
                    }
#randomSideDialog .content .main-random{
            padding:5px;
        }
#randomSideDialog .content .main-random .settings button span:first-child(){
                    display:inline-block;
                }
#randomSideDialog .content .main-random details{
                margin-bottom:1em;
            }
#randomSideDialog .content .main-random details .icon-caret-right{
                    transition:transform 0.5s;
                }
#randomSideDialog .content .main-random details summary{
                    display:flex;
                    flex-direction:row;
                    justify-content:flex-start;
                    gap:10px;
                    border-bottom:1px solid hsl( var(--dialog-foreground-h) var(--dialog-foreground-s) 80% );

                    font-size:1.1em;
                    font-weight:bold;
                    margin-bottom:5px;
                    margin-top:0.3em;
                    cursor:pointer;
                }
#randomSideDialog .content .main-random details summary .button{
                        text-align:right;
                        flex-grow:99;
                    }
#randomSideDialog .content .main-random details summary .count{
                        padding-right:1em;
                        font-size:0.75em;
                        font-weight:400;
                        color:hsl( var(--dialog-foreground-h) var(--dialog-foreground-s) 40% );
                    }
#randomSideDialog .content .main-random details[open] .icon-caret-right{
                    transform:rotate(90deg);
                }
#randomSideDialog .content .main-random details .random-details{
                    column-count:2;
                }
#randomSideDialog .content .main-random details .random-details label{
                        display:block;
                        margin:0 0 0.5em 0;
                    }
#randomSideDialog .content .main-random details .random-details label input[type="text"]{
                            max-width:3em;
                            width:3em;
                            margin-left:0.15em;
                            border-bottom:1px solid hsl( var(--dialog-foreground-h) var(--dialog-foreground-s) calc( var(--dialog-foreground-l) * 0.8) );
                            padding-bottom:0;

                        }
#randomSideDialog .content .main-random details.rollDetails .random-details{
                        column-count:1;
                    }
#randomSideDialog .content .main-random details.alignment .random-details{
                        column-count:1;
                        display:grid;
                        grid-template-columns:1fr 1fr 1fr;
                        column-gap:0.15em;
                    }
#randomSideDialog .content .main-random details.alignment .random-details>div label:first-child{
                            border-bottom:1px dotted #bbb;
                        }
@keyframes details-show{
    from{
        opacity:0;
        transform:var(--details-translate, translateY(-0.5em));
    }
}
details[open] > *:not(summary){
    animation:details-show 400ms ease-in-out;
}
.external-login{
    width:460px;
    margin:auto;
}
.external-login .main-content{
        background:var(--dialog);
        color:var(--dialog-foreground);
        padding:1em;
        border-radius:5px;
    }
.external-login details{
        margin:1em;
        color:var(--warning);
    }
.external-login details summary{
            color:var(--dialog-foreground);
        }
.transfer{
    border:1px dashed var(--effect-transfer-border);
    position:fixed;
    z-index:110;
    transition:all 0.8s ease-in-out;
}
.blowupFade{
    filter:blur(0);
    opacity:1;
    transform:scale(1);
    transition:all 0.5s ease-out;
}
.blowupFade.activated{
        filter:blur(5rem);
        transform:scale(4);
        opacity:0;
    }
.tag{
    position:fixed;
    background:#777;
    color:#fff;
    padding:1em 2em;
    border-radius:5em;
    opacity:0;
    transform-origin:50% 50%;
    z-index:98;
    animation:showTag 2s 1 cubic-bezier(.18,.49,.24,.96);
}
.tag-default{
        background:var(--default);
        color:var(--default-foreground);
    }
.tag-menu{
        background:var(--menu);
        color:var(--menu-foreground);
    }
.tag-primary{
        background:var(--primary);
        color:var(--primary-foreground);
    }
.tag-secondary{
        background:var(--secondary);
        color:var(--secondary-foreground);
    }
.tag-success{
        background:var(--success);
        color:var(--success-foreground);
    }
.tag-danger{
        background:var(--danger);
        color:var(--danger-foreground);
    }
.tag-warning{
        background:var(--warning);
        color:var(--warning-foreground);
    }
.tag-notice{
        background:var(--notice);
        color:var(--notice-foreground);
    }
.tag-question{
        background:var(--question);
        color:var(--question-foreground);
    }
.tag-mustache{
        background:var(--mustache);
        color:var(--mustache-foreground);
    }
.tag-generator{
        background:var(--generator);
        color:var(--generator-foreground);
    }
.tag-highlight{
        background:var(--highlight);
        color:var(--highlight-foreground);
    }
.tag-transparent{
        background:var(--transparent);
        color:var(--transparent-foreground);
    }
.savedNotice{
    position:fixed;
    background:#800080;
    color:#fff;
    padding:1em 2em;
    border-radius:5em;
    opacity:0;
    transform-origin:50% 50%;
    z-index:98;
    animation:showTag 2s 1 cubic-bezier(.18,.49,.24,.96);
}
@property --angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
div.page input.not-found{
    border-color:#dc3545;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat:no-repeat;
    background-position:right -1rem center;
    background-size:calc(.75em + .375rem) calc(.75em + .375rem);
    border-image-source:linear-gradient(var(--angle), var(--background-gradient1), var(--danger));
    animation:move 2s 1;
}
div.page input.not-found:focus-visible{
        border-color:var(--danger);
    }
@keyframes move{
    0%{
        --angle:0deg;
        background-position:right -1rem center;
        padding-right:0rem;
    }
    50%{
        background-position:right .1875rem center;
        padding-right:1.5rem;
    }
    0%{
        --angle:360deg;
        background-position:right -1rem center;
        padding-right:0rem;
    }
}
@keyframes showTag{
    0%{
        top:-1px;
    }
    25%{
        opacity:1;
    }
    75%{
        opacity:1;
        filter:blur(0);
        transform:scale(1, 1);
    }
    100%{
        transform-origin:50% 50%;
        transform:scale(2, 2);
        filter:blur(20px);
        opacity:0;
        top:150px;
    }
}
@keyframes pulse-animation-text-danger{
  0%{
    text-shadow:0 0 3px color-mod(var(--dialog)), 0 0 0px color-mod(var(--alert-danger) a(0%));
  }
  30%{
    text-shadow:0 0 3px color-mod(var(--dialog)), 0 0 10px color-mod(var(--alert-danger) a(90%));
  }
  100%{
    text-shadow:0 0 3px color-mod(var(--dialog)), 0 0 20px color-mod(var(--alert-danger) a(0%));
  }
}
@keyframes pulse-animation-text-danger-b{
  0%{
    background:var(--dialog);
  }
  30%{
    background:var(--alert-danger);
  }
  100%{
    background:var(--dialog);
  }
}
@media (min-width: 501px){

    @keyframes showTag{
        0%{
            left:-1px;
        }
        25%{
            opacity:1;
        }
        75%{
            opacity:1;
            filter:blur(0);
            transform:scale(1, 1);
        }
        100%{
            transform-origin:50% 50%;
            transform:scale(2, 2);
            filter:blur(20px);
            opacity:0;
            left:150px;
        }
    }
}
.with-floating-label label{
        margin:0 0 20px 0;
        position:relative;
        display:inline-block;
        display:block;
    }
.with-floating-label span.floating-label{
        padding:10px;
        pointer-events:none;
        position:absolute;
        left:0;
        top:0;
        transition:0.2s;
        transition-timing-function:ease;
        transition-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1);
        opacity:1;
    }
.with-floating-label input[type="email"], .with-floating-label input[name="password"], .with-floating-label input[name="confirmPassword"], .with-floating-label input[name="newPassword"], .with-floating-label input[name="currentPassword"]{
        padding:15px 10px 5px;
    }
.with-floating-label input:focus+span.floating-label, .with-floating-label input:not(:placeholder-shown)+span.floating-label{
        opacity:0.8;
        transform:scale(0.75) translateY(-50%) translateX(-20%);
    }
.with-floating-label input:focus+span.floating-label, .with-floating-label input:not(:-ms-input-placeholder)+span.floating-label{
        opacity:0.8;
        transform:scale(0.75) translateY(-100%) translateX(-30px);
    }
.dialog{
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    width:100vw;
    height:100vh;
    background:var(--dialog);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow:auto;
    padding:0;
}
.dialog .loader{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:100;
    }
.dialog span.closeDialog{
        position:absolute;
        top:0px;
        right:0px;
        font-size:22px;
        padding:1px 6px;
        margin:5px 5px;
        border-radius:8px;
        background:#666;
        color:#fff;
        font-weight:bold;
        cursor:pointer;
    }
.dialog input[type="email"], .dialog input[type="password"]{
        border-top:0;
        border-left:0;
        border-right:0;
        border-color:rgb(40, 40, 40);
    }
@media (min-width: 501px){
.dialog{
        position:fixed;
        left:50%;
        top:50%;
        transform:translateX(-50%) translateY(-50%);
        width:auto;
        height:auto;
        max-width:85vw;
        max-height:85vh;
        border:2px solid;
        border-left-color:color-mod(var(--menu) b(60%));
        border-top-color:color-mod(var(--menu) b(60%));
        border-right-color:color-mod(var(--menu) b(40%));
        border-bottom-color:color-mod(var(--menu) b(40%));
        box-shadow:3px 3px 20px color-mod(var(--menu) b(60%))
}

        .dialog .signup{
            margin-top:2em;
        }
    }
@media (min-width: 661px){
    }
dialog.dialog.generator{
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:space-between;
    min-height:100vh;

}
dialog.dialog.generator[open]{
        display:flex;
    }
dialog.dialog.generator header{
        background:var(--generator);
        color:var(--generator-foreground);
        padding:0.35em;
    }
dialog.dialog.generator > .body{
        flex-grow:99;
        padding:0;
        overflow-y:auto;
        position:relative;

    }
dialog.dialog.generator > .body [data-step="0"]{
            flex-direction:row;
            flex-wrap:wrap;
            align-items:stretch;
            justify-content:space-between;
            list-style:none;
            margin:0;
            gap:10px 10px;
        }
dialog.dialog.generator > .body [data-step="1"]{
            flex-wrap:wrap;
        }
dialog.dialog.generator > .body [data-step="1"] .card{
                padding:0.25em;
                cursor:pointer;
            }
dialog.dialog.generator > .body [data-step="1"] .card h3{
                    color:var(--menu);
                }
dialog.dialog.generator > .body [data-step="1"] .card div.stats{
                    columns:2;
                }
dialog.dialog.generator > .body [data-step="1"] .card div.stats > span{
                        display:block;
                    }
dialog.dialog.generator > .body [data-step="1"] .card div.stats span span{
                        font-weight:bold;
                    }
dialog.dialog.generator > .body [data-step="2"] fieldset, dialog.dialog.generator > .body [data-step="3"] fieldset{
                display:flex;
                flex-direction:column;
                gap:0.25em;
            }
dialog.dialog.generator > .body [data-step="2"] fieldset legend, dialog.dialog.generator > .body [data-step="3"] fieldset legend{
                    font-weight:bold;
                    margin-top:0.25em;
                }
dialog.dialog.generator > .body [data-step="2"] fieldset input[type="radio"], dialog.dialog.generator > .body [data-step="3"] fieldset input[type="radio"]{
                    margin-right:5px;
                }
dialog.dialog.generator[data-current-step] [data-step]{
        display:none;
        transition:left 0.3s;
        position:relative;
        padding:1em;
    }
dialog.dialog.generator[data-current-step="1"] [data-step="1"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="2"] [data-step="2"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="3"] [data-step="3"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="4"] [data-step="4"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="5"] [data-step="5"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="6"] [data-step="6"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="7"] [data-step="7"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="8"] [data-step="8"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="9"] [data-step="9"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="10"] [data-step="10"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="11"] [data-step="11"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="12"] [data-step="12"]{
            display:block;
        }
dialog.dialog.generator[data-current-step="0"] [data-step="0"], dialog.dialog.generator[data-current-step="1"] [data-step="1"]{
        display:flex;
        gap:0.5em;
    }
dialog.dialog.generator footer{
        padding:0.5em 1em;
        border-top:1px solid var(--generator);
        display:flex;
        justify-content:flex-start;
        gap:10px;

    }
@media (min-height: 500px){
dialog.dialog.generator{
        min-height:500px

}
    }
@keyframes bring-attention-animated-border-menu-color{
  0%{
    box-shadow:0 0 0 0 color-mod(var(--menu) a(40%));
  }
  100%{
     box-shadow:0 0 0 20px color-mod(var(--menu) a(0%));
  }
}
.bring-attention-menu-color{
  animation:bring-attention-animated-border-menu-color 1.5s infinite;
  border:2px var(--menu) solid;
  border-radius:10px;
}
@keyframes bring-attention-animated-border-black{
  0%{
    box-shadow:0 0 0 0 color-mod(black a(40%));
  }
  100%{
     box-shadow:0 0 0 20px color-mod(black a(0%));
  }
}
.bring-attention-black{
  animation:bring-attention-animated-border-black 1.5s infinite;
  border:2px black solid;
  border-radius:10px;
}
@keyframes bring-attention-animated-border-white{
  0%{
    box-shadow:0 0 0 0 color-mod(white a(40%));
  }
  100%{
     box-shadow:0 0 0 20px color-mod(white a(0%));
  }
}
.bring-attention-white{
  animation:bring-attention-animated-border-white 1.5s infinite;
  border:2px white solid;
  border-radius:10px;
}
@keyframes bring-attention-animated-border-default{
        0%{
            box-shadow:0 0 0 0 hsl( var(--default-h) var(--default-s) var(--default-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--default-h) var(--default-s) var(--default-l) / 0%));
        }
    }
.bring-attention-default{
      animation:bring-attention-animated-border-default 1.5s infinite;
      border:2px var(--default) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-menu{
        0%{
            box-shadow:0 0 0 0 hsl( var(--menu-h) var(--menu-s) var(--menu-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--menu-h) var(--menu-s) var(--menu-l) / 0%));
        }
    }
.bring-attention-menu{
      animation:bring-attention-animated-border-menu 1.5s infinite;
      border:2px var(--menu) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-primary{
        0%{
            box-shadow:0 0 0 0 hsl( var(--primary-h) var(--primary-s) var(--primary-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--primary-h) var(--primary-s) var(--primary-l) / 0%));
        }
    }
.bring-attention-primary{
      animation:bring-attention-animated-border-primary 1.5s infinite;
      border:2px var(--primary) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-secondary{
        0%{
            box-shadow:0 0 0 0 hsl( var(--secondary-h) var(--secondary-s) var(--secondary-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--secondary-h) var(--secondary-s) var(--secondary-l) / 0%));
        }
    }
.bring-attention-secondary{
      animation:bring-attention-animated-border-secondary 1.5s infinite;
      border:2px var(--secondary) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-success{
        0%{
            box-shadow:0 0 0 0 hsl( var(--success-h) var(--success-s) var(--success-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--success-h) var(--success-s) var(--success-l) / 0%));
        }
    }
.bring-attention-success{
      animation:bring-attention-animated-border-success 1.5s infinite;
      border:2px var(--success) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-danger{
        0%{
            box-shadow:0 0 0 0 hsl( var(--danger-h) var(--danger-s) var(--danger-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--danger-h) var(--danger-s) var(--danger-l) / 0%));
        }
    }
.bring-attention-danger{
      animation:bring-attention-animated-border-danger 1.5s infinite;
      border:2px var(--danger) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-warning{
        0%{
            box-shadow:0 0 0 0 hsl( var(--warning-h) var(--warning-s) var(--warning-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--warning-h) var(--warning-s) var(--warning-l) / 0%));
        }
    }
.bring-attention-warning{
      animation:bring-attention-animated-border-warning 1.5s infinite;
      border:2px var(--warning) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-notice{
        0%{
            box-shadow:0 0 0 0 hsl( var(--notice-h) var(--notice-s) var(--notice-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--notice-h) var(--notice-s) var(--notice-l) / 0%));
        }
    }
.bring-attention-notice{
      animation:bring-attention-animated-border-notice 1.5s infinite;
      border:2px var(--notice) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-question{
        0%{
            box-shadow:0 0 0 0 hsl( var(--question-h) var(--question-s) var(--question-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--question-h) var(--question-s) var(--question-l) / 0%));
        }
    }
.bring-attention-question{
      animation:bring-attention-animated-border-question 1.5s infinite;
      border:2px var(--question) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-mustache{
        0%{
            box-shadow:0 0 0 0 hsl( var(--mustache-h) var(--mustache-s) var(--mustache-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--mustache-h) var(--mustache-s) var(--mustache-l) / 0%));
        }
    }
.bring-attention-mustache{
      animation:bring-attention-animated-border-mustache 1.5s infinite;
      border:2px var(--mustache) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-generator{
        0%{
            box-shadow:0 0 0 0 hsl( var(--generator-h) var(--generator-s) var(--generator-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--generator-h) var(--generator-s) var(--generator-l) / 0%));
        }
    }
.bring-attention-generator{
      animation:bring-attention-animated-border-generator 1.5s infinite;
      border:2px var(--generator) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-highlight{
        0%{
            box-shadow:0 0 0 0 hsl( var(--highlight-h) var(--highlight-s) var(--highlight-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--highlight-h) var(--highlight-s) var(--highlight-l) / 0%));
        }
    }
.bring-attention-highlight{
      animation:bring-attention-animated-border-highlight 1.5s infinite;
      border:2px var(--highlight) solid;
      border-radius:10px;
    }
@keyframes bring-attention-animated-border-transparent{
        0%{
            box-shadow:0 0 0 0 hsl( var(--transparent-h) var(--transparent-s) var(--transparent-l) / 40%));
        }
        100%{
            box-shadow:0 0 0 20px hsl( var(--transparent-h) var(--transparent-s) var(--transparent-l) / 0%));
        }
    }
.bring-attention-transparent{
      animation:bring-attention-animated-border-transparent 1.5s infinite;
      border:2px var(--transparent) solid;
      border-radius:10px;
    }
.page:hover nav.pageTool{
}
@keyframes showPageTools{
    0%{transform:scale(0.6,0.6) translate(10px);z-index:-1;}
    40%{transform:scale(0.75,0.75) translate(-30px);z-index:-1;}
    50%{transform:scale(0.8,0.8) translate(-40px);z-index:-1;}
    60%{transform:scale(0.85,0.85) translate(-30px);z-index:-1;}
    100%{}
}
@keyframes hidePageTools{
    0%{transform:translate(-100px);z-index:20;}
    40%{transform:scale(0.85,0.85) translate(-140px);z-index:20;}
    50%{transform:scale(0.8,0.8) translate(-150px);z-index:20;}
    60%{transform:scale(0.75,0.75) translate(-140px);z-index:-1;}
    100%{transform:scale(0.75,0.75) translate(-100px);z-index:-1;}
}
nav.pageTool{
    position:absolute;
    margin-left:-136px;
    text-shadow:0 0 1px #fff;
    padding:3em 0.2em 3em 30px;

}
nav.pageTool span{
        font-size:40px;
        text-align:center;
        width:55px;
        height:45px;
        display:block;
        margin-bottom:10px;
        cursor:pointer;
        transition:all 0.2s ease-out;
    }
nav.pageTool span:hover{
            color:#00e;
            text-shadow:0 0 1px #fff, 2px 2px 3px rgba(0,0,0, 0.3);
        }
nav.pageTool span.delete:hover{
            color:#d00;
            text-shadow:0 0 1px #000, 2px 2px 3px rgba(255,255,255, 0.3);
        }
@media (max-width: 1024px){
    nav.pageTool{
        margin-left:-82px;
        text-shadow:0 0 2px #fff, 0 0 2px #000;
    }
    nav.pageTool span:hover{
        color:#00c;
        text-shadow:0 0 2px #fff, 1px 1px 2px #008;
    }
    nav.pageTool span.delete:hover{
        color:#a00;
        text-shadow:0 0 2px #fff, 1px 1px 2px #a00;
    }
}
nav.pageTool .config{ display:none; }
.page:nth-of-type(1) .pageTool .up, .page:nth-of-type(1) .pageTool .down, .page:nth-of-type(1) .pageTool .delete{ display:none; }
.page:nth-of-type(2) .pageTool .up{ display:none; }
.page:last-of-type .pageTool .down{ display:none; }
.page .pageTool .random{ display:none; }
.page.main .pageTool .config, .page.equipment .pageTool .config, .page.spell .pageTool .config, .page.note .pageTool .config, .page.psionic .pageTool .config{ display:inherit; }
.page.random .pageTool .random{ display:inherit; }
.contextMenu{
    position:absolute;
    background:var(--contextMenu);
    color:var(--contextMenu-foreground);
    z-index:200;
    border:1px solid var(--contextMenu-border);
}
.contextMenu ul{
        padding:0;
        margin:0;
    }
.contextMenu ul>li{
            padding:6px 10px;
            cursor:pointer;
        }
.contextMenu ul>li a{
                text-decoration:none;
                color:var(--contextMenu-foreground);
                font-size:1.1em;
            }
.contextMenu ul>li a span{
                    margin-right:0.4em;
                }
.contextMenu ul>li:first-child{
                padding-top:10px;
            }
.contextMenu ul>li:last-child{
                padding-bottom:10px;
            }
.contextMenu ul>li:hover{
                background:var(--contextMenu-hover);
            }
.contextMenu ul>li:hover a{
                    color:var(--contextMenu-hover-foreground);
                }
.contextMenu ul>li:hover[data-hover-state="danger"]{
                    background:var(--danger);
                }
.contextMenu ul>li:hover[data-hover-state="danger"] a{
                        color:var(--danger-foreground);
                    }
@media(max-width: 500px){
.contextMenu{
        top:0 !important;
        left:0 !important;
        width:100vw;
        height:100vh
}
    }
.characterLoadSaveWindow{
    justify-content:flex-start;
    height:100vh;
}
.characterLoadSaveWindow [data-server-btn="true"]{
        display:none;
    }
.characterLoadSaveWindow[data-on-server="true"] [data-server-btn="true"]{
        display:initial;
    }
.characterLoadSaveWindow .content{
        overflow-y:scroll;
        width:100vw;
    }
@media (min-width: 501px){
.characterLoadSaveWindow .content{
            max-width:450px
    }
        }
.characterLoadSaveWindow .content .characterCard .card > div.loading-preview{
            text-align:center;
            margin-top:30px;
            font-size:1.2em;
        }
.characterLoadSaveWindow .content .characterCard .card > div.loading-preview>div{
                margin-top:25px;
                font-size:4em;
                opacity:0.4;
            }
.characterLoadSaveWindow .content section{
            width:100%;
            padding:1%;
        }
.characterLoadSaveWindow .content section h2{
                background:var(--menu);
                color:var(--menu-foreground);
                padding:2px 5px;
                margin-top:3px;
                margin-bottom:3px;
            }
.characterLoadSaveWindow .content section ul{
                padding:0;
                margin:0;
                list-style:none;
                display:flex;
                flex-flow:row wrap;
                width:100%;
            }
.characterLoadSaveWindow .content #loadFromFileButton{
            color:transparent;
            width:0;
            height:0;
            overflow:hidden;
            position:absolute;
            z-index:-1;
        }
.characterCard{
    margin:0;
    text-align:center;
    cursor:pointer !important;
    position:relative;
    padding:5px;
    border-radius:10px;
    transition:background 0.6s ease;
    width:200px;
    overflow:hidden;
    padding:5px;
    padding-bottom:1em;
    background:var(--character-card);
    color:var(--character-card-foreground);

}
.characterCard .characterName{
        font-size:1.4em;
        color:var(--character-card-foreground-name);
        text-decoration:none;
        font-weight:bold;
        display:block;
        text-align:center;
    }
.characterCard .info{
        font-weight:bold;
        margin-bottom:0.5em;
    }
.characterCard .info .level{
            font-weight:normal;
        }
.characterCard:hover{
        background:var(--character-card-highlight);
    }
#userLoginRegisterWindow .content, html body .sideDialog .userLoginRegisterBox, dialog#forgotPassword > div, dialog#resetPassword > div{
    display:flex;
    flex-flow:column;
    justify-content:flex-start;
    align-items:center;
    overflow-y:auto;

}
@media (min-height: 450px){
#userLoginRegisterWindow .content:not(.userLoginRegisterBox), html body .sideDialog .userLoginRegisterBox:not(.userLoginRegisterBox), dialog#forgotPassword > div:not(.userLoginRegisterBox), dialog#resetPassword > div:not(.userLoginRegisterBox){
            margin-top:5px
    }
        }
@media (min-height: 550px){
#userLoginRegisterWindow .content:not(.userLoginRegisterBox), html body .sideDialog .userLoginRegisterBox:not(.userLoginRegisterBox), dialog#forgotPassword > div:not(.userLoginRegisterBox), dialog#resetPassword > div:not(.userLoginRegisterBox){
            margin-top:50px
    }
        }
@media (min-height: 650px){
#userLoginRegisterWindow .content:not(.userLoginRegisterBox), html body .sideDialog .userLoginRegisterBox:not(.userLoginRegisterBox), dialog#forgotPassword > div:not(.userLoginRegisterBox), dialog#resetPassword > div:not(.userLoginRegisterBox){
            margin-top:100px
    }
        }
@media (min-height: 750px){
#userLoginRegisterWindow .content:not(.userLoginRegisterBox), html body .sideDialog .userLoginRegisterBox:not(.userLoginRegisterBox), dialog#forgotPassword > div:not(.userLoginRegisterBox), dialog#resetPassword > div:not(.userLoginRegisterBox){
            margin-top:150px
    }
        }
#userLoginRegisterWindow .content form h2, #userLoginRegisterWindow .content form h2, #userLoginRegisterWindow .content .tagline h2, html body .sideDialog .userLoginRegisterBox form h2, html body .sideDialog .userLoginRegisterBox form h2, html body .sideDialog .userLoginRegisterBox .tagline h2, dialog#forgotPassword > div form h2, dialog#forgotPassword > div form h2, dialog#forgotPassword > div .tagline h2, dialog#resetPassword > div form h2, dialog#resetPassword > div form h2, dialog#resetPassword > div .tagline h2{
        background:transparent;
        color:initial;
    }
#userLoginRegisterWindow .content .loginDialog h2, html body .sideDialog .userLoginRegisterBox .loginDialog h2, dialog#forgotPassword > div .loginDialog h2, dialog#resetPassword > div .loginDialog h2{
        margin-top:0.75em;
    }
#userLoginRegisterWindow .content .tagline, html body .sideDialog .userLoginRegisterBox .tagline, dialog#forgotPassword > div .tagline, dialog#resetPassword > div .tagline{
        max-height:93px;
        transition:max-height 0.4s;
        overflow:hidden;
        text-align:center;
        cursor:pointer;
    }
#userLoginRegisterWindow .content .tagline h2, html body .sideDialog .userLoginRegisterBox .tagline h2, dialog#forgotPassword > div .tagline h2, dialog#resetPassword > div .tagline h2{
            font-size:1.5em;
            margin:0.5em 0;
        }
#userLoginRegisterWindow .content .tagline h2 small, html body .sideDialog .userLoginRegisterBox .tagline h2 small, dialog#forgotPassword > div .tagline h2 small, dialog#resetPassword > div .tagline h2 small{
                font-size:0.65em;
                display:block;
            }
#userLoginRegisterWindow .content .tagline:hover h2 span, html body .sideDialog .userLoginRegisterBox .tagline:hover h2 span, dialog#forgotPassword > div .tagline:hover h2 span, dialog#resetPassword > div .tagline:hover h2 span{
            text-decoration:underline;
            text-decoration-color:var(--generator);
        }
#userLoginRegisterWindow .content form, html body .sideDialog .userLoginRegisterBox form, dialog#forgotPassword > div form, dialog#resetPassword > div form{
        max-height:0;
        transition:max-height 0.4s;
        overflow:hidden;
        padding:4px;
        display:flex;
        flex-direction:column;
        align-items:center;
    }
#userLoginRegisterWindow .content form h2, html body .sideDialog .userLoginRegisterBox form h2, dialog#forgotPassword > div form h2, dialog#resetPassword > div form h2{
            margin-bottom:0.5em;
        }
#userLoginRegisterWindow .content form .alert-face, html body .sideDialog .userLoginRegisterBox form .alert-face, dialog#forgotPassword > div form .alert-face, dialog#resetPassword > div form .alert-face{
            display:none;
        }
#userLoginRegisterWindow .content form .alert-face p, html body .sideDialog .userLoginRegisterBox form .alert-face p, dialog#forgotPassword > div form .alert-face p, dialog#resetPassword > div form .alert-face p{
                max-width:22em;
            }
#userLoginRegisterWindow .content .with-error form .alert-face, html body .sideDialog .userLoginRegisterBox .with-error form .alert-face, dialog#forgotPassword > div .with-error form .alert-face, dialog#resetPassword > div .with-error form .alert-face{
            display:flex;
        }
#userLoginRegisterWindow .content .showing.with-error form, html body .sideDialog .userLoginRegisterBox .showing.with-error form, dialog#forgotPassword > div .showing.with-error form, dialog#resetPassword > div .showing.with-error form{
            max-height:350px;
        }
#userLoginRegisterWindow .content .showing form, html body .sideDialog .userLoginRegisterBox .showing form, dialog#forgotPassword > div .showing form, dialog#resetPassword > div .showing form{
            max-height:270px;
            overflow:hidden;
        }
#userLoginRegisterWindow .content .showing .tagline, html body .sideDialog .userLoginRegisterBox .showing .tagline, dialog#forgotPassword > div .showing .tagline, dialog#resetPassword > div .showing .tagline{
            max-height:0px;
        }
#userLoginRegisterWindow .content input[type="email"], #userLoginRegisterWindow .content input[name="password"], #userLoginRegisterWindow .content input[name="confirmPassword"], #userLoginRegisterWindow .content input[name="newPassword"], #userLoginRegisterWindow .content input[name="currentPassword"], html body .sideDialog .userLoginRegisterBox input[type="email"], html body .sideDialog .userLoginRegisterBox input[name="password"], html body .sideDialog .userLoginRegisterBox input[name="confirmPassword"], html body .sideDialog .userLoginRegisterBox input[name="newPassword"], html body .sideDialog .userLoginRegisterBox input[name="currentPassword"], dialog#forgotPassword > div input[type="email"], dialog#forgotPassword > div input[name="password"], dialog#forgotPassword > div input[name="confirmPassword"], dialog#forgotPassword > div input[name="newPassword"], dialog#forgotPassword > div input[name="currentPassword"], dialog#resetPassword > div input[type="email"], dialog#resetPassword > div input[name="password"], dialog#resetPassword > div input[name="confirmPassword"], dialog#resetPassword > div input[name="newPassword"], dialog#resetPassword > div input[name="currentPassword"]{
        width:17em;
        max-width:calc(100% - 40px);
        border:1px solid var(--generator);
        border-radius:3px;
    }
#userLoginRegisterWindow .content span.show-password, #userLoginRegisterWindow .content span.show-register-password, html body .sideDialog .userLoginRegisterBox span.show-password, html body .sideDialog .userLoginRegisterBox span.show-register-password, dialog#forgotPassword > div span.show-password, dialog#forgotPassword > div span.show-register-password, dialog#resetPassword > div span.show-password, dialog#resetPassword > div span.show-register-password{
        color:var(--menu);
        font-size:130%;
        margin-left:-1.3em;
        cursor:pointer;
        position:absolute;
        position:absolute;
        top:0.45em;
    }
#userLoginRegisterWindow .content [data-type="forgotPassword"], html body .sideDialog .userLoginRegisterBox [data-type="forgotPassword"], dialog#forgotPassword > div [data-type="forgotPassword"], dialog#resetPassword > div [data-type="forgotPassword"]{
        display:none;
    }
#userLoginRegisterWindow .content[data-invalid|='---'] [data-type="forgotPassword"], html body .sideDialog .userLoginRegisterBox[data-invalid|='---'] [data-type="forgotPassword"], dialog#forgotPassword > div[data-invalid|='---'] [data-type="forgotPassword"], dialog#resetPassword > div[data-invalid|='---'] [data-type="forgotPassword"]{
        display:initial;
    }
#userLoginRegisterWindow .content .signup:not(form), html body .sideDialog .userLoginRegisterBox .signup:not(form), dialog#forgotPassword > div .signup:not(form), dialog#resetPassword > div .signup:not(form){
        border-top:1px solid #666;
        display:inline-block;
        padding:0 2em;
        margin-top:1em;
        margin-bottom:0.75em;
    }
#userLoginRegisterWindow .content .signup:not(form).showing form, html body .sideDialog .userLoginRegisterBox .signup:not(form).showing form, dialog#forgotPassword > div .signup:not(form).showing form, dialog#resetPassword > div .signup:not(form).showing form{
            max-height:400px;
        }
@media (min-width: 661px){
        #userLoginRegisterWindow .content .dialog.login, html body .sideDialog .userLoginRegisterBox .dialog.login, dialog#forgotPassword > div .dialog.login, dialog#resetPassword > div .dialog.login{
            padding:30px;
        }

            #userLoginRegisterWindow .content .dialog.login .siteName, html body .sideDialog .userLoginRegisterBox .dialog.login .siteName, dialog#forgotPassword > div .dialog.login .siteName, dialog#resetPassword > div .dialog.login .siteName{
                display:none;
            }
    }
#userLoginRegisterWindow .content{
    justify-content:center;
}
dialog#forgotPassword, dialog#resetPassword{
    max-width:100vw;
    width:100vw;
    max-height:100vh;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
}
dialog#forgotPassword div.inner,dialog#resetPassword div.inner{
        width:100%;
        height:100%;
        max-width:490px;
        margin:auto;

        display:flex;
        align-items:center;
        justify-content:center;
    }
dialog#forgotPassword div.inner h3, dialog#resetPassword div.inner h3{
            margin-bottom:0.25em;
        }
dialog#forgotPassword div.inner p, dialog#resetPassword div.inner p{
            margin-bottom:0.75em;
        }
@media (min-width: 501px){
dialog#forgotPassword, dialog#resetPassword{
        width:80vw;
        height:30vh;
        min-height:14em;
        position:fixed;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%)
}
    }
@media (min-width: 661px){
dialog#forgotPassword, dialog#resetPassword{
        width:33vw;
        height:20vh;
        min-height:14em
}
    }
.alert-modal{
    position:fixed;
    z-index:101;
    width:100vw;
    top:0;
    left:0;
    max-height:100vh;
    transition:max-height .8s cubic-bezier(.04,.9,.51,.98);
    overflow:hidden;
}
.alert-modal.closed{
        max-height:0;
    }
.alert-modal .alert-face{
        width:auto;
    }
@media (min-width: 1025px){
    .alert-modal{
        width:46vw;
        left:calc( 50% - 23vw );
    }
}
.alert-face{
    border-width:3px;
    border-style:solid;
    border-radius:3px;
    min-height:4rem;
    margin:0;
    display:flex;
    flex-direction:row;
    overflow:hidden;
}
.alert-face .icon{
        color:var(--alert-danger-foreground);
        font-size:4rem;
        padding:0.5rem;
    }
.alert-face div{
        padding:0.75rem 0.5em 0.5em 0.75rem;
    }
.alert-face .alert-content{
        padding-bottom:0.4em;
        background:rgba(255,255,255,1);
        border-radius:6px;
        flex-grow:10;
        margin-right:1.5em;
    }
.alert-face .alert-content button{
            margin:0.5em 0 0.25em 0;
        }
.message{
  width:calc(100% - 3em);
  padding:1em 1em 1em 1.5em;
  border-width:1px;
  border-left-width:6px;
  border-style:solid;
  border-radius:3px;
  position:relative;
  line-height:1.5;
  margin-top:0.5em;
  margin-bottom:0.5em;
}
.message + .message{
  margin-top:2em;
}
.message:before{
  color:white;
  width:1.5em;
  height:1.5em;
  position:absolute;
  top:1em;
  left:-3px;
  border-radius:50%;
  transform:translateX(-50%);
  text-align:center;

  font-family:'charactersheets' !important;
  speak:never;
  font-style:normal;
  font-weight:normal;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

}
.message p{
  margin:0 0 1em;
}
.message p:last-child{
  margin-bottom:0;
}
.new-message{
    display:flex;
    align-items:center;
    border-bottom:1px solid transparent;
    margin-bottom:-1px;
    margin-top:0.5em;
    margin-bottom:0.75em;
}
.new-message .icon{
        float:left;
        width:50px;
        height:50px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
.new-message .icon::before{
            font-family:'charactersheets' !important;
            speak:never;
            font-style:normal;
            font-weight:normal;
            font-variant:normal;
            text-transform:none;
            line-height:1;
            font-smooth:always;
            font-size:1.5em;
        }
.new-message .inner::before{
        border:0.75em solid transparent;
        border-top-color:transparent !important;
        border-bottom-color:transparent !important;
        border-right-color:transparent !important;
        width:0;
        height:0;
        content:'';
        display:inline-block;
        vertical-align:middle;
    }
.new-message-success .icon::before{
    content:"\ea10";
}
.new-message-danger .icon::before{
    content:"\e02c";
}
.new-message-warning .icon::before{
    content:"\e02d";
}
.new-message-notice .icon::before{
    content:"\ea08";
}
.alert-default{
        border-color:var(--default-border);
        background-color:var(--default);
    }
.alert-default .icon{
            color:var(--default-foreground);
        }
.message-default{
        border-color:var(--default-border);
        background-color:var(--dialog);
    }
.new-message-default{
        background-color:var(--default-background2);
        border-color:var(--default-border);
    }
.new-message-default .icon{
            background-color:var(--default);
            color:var(--default-foreground);
        }
.new-message-default .inner::before, .new-message-default .inner::after{
                border-color:var(--default);
            }
.alert-menu{
        border-color:var(--menu-border);
        background-color:var(--menu);
    }
.alert-menu .icon{
            color:var(--menu-foreground);
        }
.message-menu{
        border-color:var(--menu-border);
        background-color:var(--dialog);
    }
.new-message-menu{
        background-color:var(--menu-background2);
        border-color:var(--menu-border);
    }
.new-message-menu .icon{
            background-color:var(--menu);
            color:var(--menu-foreground);
        }
.new-message-menu .inner::before, .new-message-menu .inner::after{
                border-color:var(--menu);
            }
.alert-primary{
        border-color:var(--primary-border);
        background-color:var(--primary);
    }
.alert-primary .icon{
            color:var(--primary-foreground);
        }
.message-primary{
        border-color:var(--primary-border);
        background-color:var(--dialog);
    }
.new-message-primary{
        background-color:var(--primary-background2);
        border-color:var(--primary-border);
    }
.new-message-primary .icon{
            background-color:var(--primary);
            color:var(--primary-foreground);
        }
.new-message-primary .inner::before, .new-message-primary .inner::after{
                border-color:var(--primary);
            }
.alert-secondary{
        border-color:var(--secondary-border);
        background-color:var(--secondary);
    }
.alert-secondary .icon{
            color:var(--secondary-foreground);
        }
.message-secondary{
        border-color:var(--secondary-border);
        background-color:var(--dialog);
    }
.new-message-secondary{
        background-color:var(--secondary-background2);
        border-color:var(--secondary-border);
    }
.new-message-secondary .icon{
            background-color:var(--secondary);
            color:var(--secondary-foreground);
        }
.new-message-secondary .inner::before, .new-message-secondary .inner::after{
                border-color:var(--secondary);
            }
.alert-success{
        border-color:var(--success-border);
        background-color:var(--success);
    }
.alert-success .icon{
            color:var(--success-foreground);
        }
.message-success{
        border-color:var(--success-border);
        background-color:var(--dialog);
    }
.new-message-success{
        background-color:var(--success-background2);
        border-color:var(--success-border);
    }
.new-message-success .icon{
            background-color:var(--success);
            color:var(--success-foreground);
        }
.new-message-success .inner::before, .new-message-success .inner::after{
                border-color:var(--success);
            }
.alert-danger{
        border-color:var(--danger-border);
        background-color:var(--danger);
    }
.alert-danger .icon{
            color:var(--danger-foreground);
        }
.message-danger{
        border-color:var(--danger-border);
        background-color:var(--dialog);
    }
.new-message-danger{
        background-color:var(--danger-background2);
        border-color:var(--danger-border);
    }
.new-message-danger .icon{
            background-color:var(--danger);
            color:var(--danger-foreground);
        }
.new-message-danger .inner::before, .new-message-danger .inner::after{
                border-color:var(--danger);
            }
.alert-warning{
        border-color:var(--warning-border);
        background-color:var(--warning);
    }
.alert-warning .icon{
            color:var(--warning-foreground);
        }
.message-warning{
        border-color:var(--warning-border);
        background-color:var(--dialog);
    }
.new-message-warning{
        background-color:var(--warning-background2);
        border-color:var(--warning-border);
    }
.new-message-warning .icon{
            background-color:var(--warning);
            color:var(--warning-foreground);
        }
.new-message-warning .inner::before, .new-message-warning .inner::after{
                border-color:var(--warning);
            }
.alert-notice{
        border-color:var(--notice-border);
        background-color:var(--notice);
    }
.alert-notice .icon{
            color:var(--notice-foreground);
        }
.message-notice{
        border-color:var(--notice-border);
        background-color:var(--dialog);
    }
.new-message-notice{
        background-color:var(--notice-background2);
        border-color:var(--notice-border);
    }
.new-message-notice .icon{
            background-color:var(--notice);
            color:var(--notice-foreground);
        }
.new-message-notice .inner::before, .new-message-notice .inner::after{
                border-color:var(--notice);
            }
.alert-question{
        border-color:var(--question-border);
        background-color:var(--question);
    }
.alert-question .icon{
            color:var(--question-foreground);
        }
.message-question{
        border-color:var(--question-border);
        background-color:var(--dialog);
    }
.new-message-question{
        background-color:var(--question-background2);
        border-color:var(--question-border);
    }
.new-message-question .icon{
            background-color:var(--question);
            color:var(--question-foreground);
        }
.new-message-question .inner::before, .new-message-question .inner::after{
                border-color:var(--question);
            }
.alert-mustache{
        border-color:var(--mustache-border);
        background-color:var(--mustache);
    }
.alert-mustache .icon{
            color:var(--mustache-foreground);
        }
.message-mustache{
        border-color:var(--mustache-border);
        background-color:var(--dialog);
    }
.new-message-mustache{
        background-color:var(--mustache-background2);
        border-color:var(--mustache-border);
    }
.new-message-mustache .icon{
            background-color:var(--mustache);
            color:var(--mustache-foreground);
        }
.new-message-mustache .inner::before, .new-message-mustache .inner::after{
                border-color:var(--mustache);
            }
.alert-generator{
        border-color:var(--generator-border);
        background-color:var(--generator);
    }
.alert-generator .icon{
            color:var(--generator-foreground);
        }
.message-generator{
        border-color:var(--generator-border);
        background-color:var(--dialog);
    }
.new-message-generator{
        background-color:var(--generator-background2);
        border-color:var(--generator-border);
    }
.new-message-generator .icon{
            background-color:var(--generator);
            color:var(--generator-foreground);
        }
.new-message-generator .inner::before, .new-message-generator .inner::after{
                border-color:var(--generator);
            }
.alert-highlight{
        border-color:var(--highlight-border);
        background-color:var(--highlight);
    }
.alert-highlight .icon{
            color:var(--highlight-foreground);
        }
.message-highlight{
        border-color:var(--highlight-border);
        background-color:var(--dialog);
    }
.new-message-highlight{
        background-color:var(--highlight-background2);
        border-color:var(--highlight-border);
    }
.new-message-highlight .icon{
            background-color:var(--highlight);
            color:var(--highlight-foreground);
        }
.new-message-highlight .inner::before, .new-message-highlight .inner::after{
                border-color:var(--highlight);
            }
.alert-transparent{
        border-color:var(--transparent-border);
        background-color:var(--transparent);
    }
.alert-transparent .icon{
            color:var(--transparent-foreground);
        }
.message-transparent{
        border-color:var(--transparent-border);
        background-color:var(--dialog);
    }
.new-message-transparent{
        background-color:var(--transparent-background2);
        border-color:var(--transparent-border);
    }
.new-message-transparent .icon{
            background-color:var(--transparent);
            color:var(--transparent-foreground);
        }
.new-message-transparent .inner::before, .new-message-transparent .inner::after{
                border-color:var(--transparent);
            }
.message-error::before, .message-danger::before{
  background-color:var(--alert-danger-border);
  content:"\e02c";
}
.message-warning::before{
  background-color:var(--alert-warning-border);
  content:"\e02d";
}
.message-success::before{
  background-color:var(--success-border);
  content:"\ea10";
}
.sideDialog{
    position:fixed;
    top:0;
    left:0;
    z-index:80;
    width:100vw;
    height:100vh;
    background:var(--dialog);
    color:var(--dialog-foreground);
    display:grid;
    grid-template-rows:auto auto;
    overflow:hidden;
}
.sideDialog .content{
        overflow-y:auto;
        overflow-x:hidden;
    }
.sideDialog h2{
        background:var(--menu);
        color:var(--menu-foreground);
        padding:2px 5px;
        margin-top:3px;
        margin-bottom:3px;
    }
.sideDialog .closeSideDialogSection{
        border-top:1px solid var(--sideDialog-close-border);
        background:linear-gradient(to bottom,
            color-mod(var(--sideDialog-close-border) a(25%)) 0%,
            color-mod(var(--sideDialog-close-border) a(0%)) 20%
        );
        align-self:flex-end;
        padding:1em;
        text-align:right;
    }
.sideDialog .closeSideDialogSection button[data-icon]{
            margin-left:1em;
        }
.sideDialog .closeSideDialogSection button[data-icon] span[data-icon]:not([class=""]){
                    margin-right:0.75em;
                }
@media (min-width: 501px){
.sideDialog{
        left:70px;
        width:calc( 100vw - 70px);
        transition:left 0.4s cubic-bezier(.65,.05,.36,1)
}

        .sideDialog.menuOpened{
            left:140px;
            width:calc( 100vw - 140px);
        }
    }
@media (min-width: 661px){
.sideDialog{
        overflow:hidden;
        width:auto;
        max-width:0;
        border-right:1px solid hsl( var(--menu-h) var(--menu-s) calc( var(--menu-l) * 0.6) );
        transition:left 0.4s cubic-bezier(.65,.05,.36,1), max-width 0.4s cubic-bezier(.65,.05,.36,1)
}

        .sideDialog.opened{
            max-width:100vw;
            border-right:3px solid hsl( var(--menu-hs) calc( var(--menu-l) * 0.7) )
        }
        .sideDialog.menuOpened{
            width:auto;
            left:140px;
        }
        .sideDialog .content{
            min-width:450px;
            width:auto;
            padding:1em 10px 2em 10px;
        }
    }
.treeControl::backdrop{
        background-color:#448;
    }
.treeControl ul{
        border-left:1px dotted var(--tree-control-foreground);
        flex-flow:column !important;
        color:var(--tree-control-foreground);
        background:var(--tree-control);
        overflow:hidden;
    }
.treeControl ul li > div.branch:hover> button{
            opacity:1;
        }
.treeControl ul li{
            display:flex;
            flex-flow:column;
            padding-left:1em;
            margin-top:4px;
            cursor:pointer;
        }
.treeControl ul li label input[type="radio"]{
                display:none;
            }
.treeControl ul li > div.branch{
                display:flex;
                justify-content:space-between;
                background:transparent;
                transition:background-color 0.25s ease-in-out;
            }
.treeControl ul li > div.branch a, .treeControl ul li > div.branch label{
                    padding-top:4px;
                    padding-bottom:4px;
                    flex-grow:100;
                    cursor:pointer;
                }
.treeControl ul li > div.branch button{
                    transition:opacity 0.25s ease-in-out, background-color 0.25s ease-in-out;
                    opacity:0.5;
                    flex-grow:1;
                }
.treeControl ul li > div.branch:has([type="radio"]:checked){
                    background:var(--tree-control-selected);
                    color:var(--tree-control-selected-foreground);
                }
.treeControl ul li > div.branch:hover{
                    background:var(--tree-control-highlight);
                }
.treeControl ul li > div.branch:has([type="radio"]:checked):hover{
                    background:hsl( var(--tree-control-selected-hs) -l-80);
                }
.treeControl ul li a, .treeControl ul li label{
                color:var(--tree-control-foreground);
                font-weight:bold;
                text-decoration:none;
                display:block;
                background:transparent;
                transition:background-color 0.25s ease-in-out;
            }
.treeControl ul li a:hover, .treeControl ul li label:hover{
                    background:var(--tree-control-highlight);
                }
.treeControl ul li a::before, .treeControl ul li label::before{
                content:"\f07b";
            }
.treeControl ul li a::before, .treeControl ul li a::after, .treeControl ul li span::before, .treeControl ul li label::before, .treeControl ul li label::after{
                font-family:'charactersheets' !important;
                speak:none;
                font-style:normal;
                font-weight:normal;
                font-variant:normal;
                text-transform:none;
                line-height:1;
                font-size:1.2em;
                background:var(--tree-control-icon);
                color:var(--tree-control-icon-foreground);
                padding:4px;
                margin-right:0.25em;
            }
.treeControl ul li.open > a:before, .treeControl ul li.open > div.branch > a:before, .treeControl ul li.open > label:before, .treeControl ul li.open > div.branch > label:before{
                content:"\e906";
                font-size:1.3em;
            }
.treeControl ul li[data-branch-id="saving"] label:before{
                content:"\f022";
                display:inline-block;
                animation:spin 2s infinite linear;
            }
.treeControl ul li[data-add-new-folder] a:before{
                content:"\e933";
            }
.treeControl ul li > ul{
                max-height:0;
                transition:max-height 0.5s cubic-bezier(.65,.77,.23,.99);
            }
.treeControl ul li.open > ul{
                max-height:110vh;
            }
.treeControl ul li.sheet small{
                    margin-left:0.5em;
                    font-style:italic;
                    margin-left:0.75em;
                }
.treeControl ul li.sheet a::before{
                    content:"\f007";
                }
.treeControl ul li.sheet[data-is-private="1"] span.icons::before{
                    content:"\e01e";
                    color:var(--danger);
                }
.treeControl ul li.sheet[data-is-owner="0"] a:before{
                    content:"\e02a";
                    margin-right:0.1em;
                }
.treeControl ul li.selected > a{
                background:#8aa;
            }
.treeControl ul li .dragging{
                opacity:0.5;
            }
.card{
    border-left:1px solid #000;
    border-top:1px solid #000;
    height:210px;
    width:185px;
    margin-left:7px;
    box-shadow:2px 2px 6px 1px rgba(0,0,0,0.5);
    position:relative;
}
.card .overlay{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        cursor:pointer;
        z-index:10;
    }
.card .preview{
        text-align:left;
        cursor:pointer !important;
        overflow:hidden;
        height:210px;
        width:185px;
    }
.card .preview>div{
            transform:scale(0.7);
            transform-origin:0% 0 0;
            margin-top:-2em;
            margin-left:-2em;
            border:1px solid var(--menu);
            cursor:pointer !important;
        }
.card .preview>div.equipment{
                margin-top:-23em;
                margin-left:-14em;
            }
.card .preview>div.note{
                margin-left:-15em;
            }
.card .preview>div.psionic, .card .preview>div.spell{
                margin-left:-11em;
            }
.card .preview>div input, .card .preview>div label{
                cursor:pointer !important;
            }
.card .preview .pageTool{
            display:none;
        }
#addPageSideDialog h2{
        background:var(--menu);
        color:var(--menu-foreground);
        padding:2px 5px;
        margin-top:3px;
        margin-bottom:3px;
        font-size:1.25em;
    }
#addPageSideDialog ul{
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:1em;
        row-gap:1.5em;
    }
@media (min-width: 501px){
#deletedPages{
        position:fixed;
        top:1em;
        left:100px;
        border:2px solid var(--danger);
        border-radius:1em;
        width:140px;
        height:auto;
        background:linear-gradient(to bottom, var(--danger) 2em, transparent 2em);
        padding-top:0.2em;
        opacity:100;
        transition:opacity 0.5s ease-in-out
}

        #deletedPages.empty{
            opacity:0;
        }

        #deletedPages h3{
            text-align:center;
            color:var(--danger-foreground);
        }

        #deletedPages ul{
            list-style:none;
            padding:0;
            margin:1em 0 0 0;
        }

            #deletedPages ul li.new{
                height:0px;
            }
            #deletedPages ul li{
                height:145px;
                overflow:hidden;
                transition:height 0.5s ease-in-out;
            }

                #deletedPages ul li .card{
                    overflow:hidden;
                    transform:scale(0.6);
                    transform-origin:12% 0% 0;
                }
    }
#gmResponse{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    position:fixed;
    z-index:10;
    top:calc( var(--padding-body-top) - 0.5em );
    left:max( 0px, 50vw - 200px );
    width:min(96vw, 400px);
    background:hsl(var(--menu-hs) var(--l-50));
    box-shadow:0px 0px 7px var(--menu-border);
    padding:1em 4em 0.5em;
    border-radius:0 0 0.5em 0.5em;
    transition:top 0.5s ease-in-out;
    padding:1em 0.5em 0.5em;
    max-width:100vw;
    column-gap:15px;
}
#gmResponse span{
        color:#fff;
    }
#gmResponse .closed{
        top:-5em;
    }
@media (min-width: 501px){
#gmResponse{
        top:calc( var(--padding-body-top) - 0.5em );
        min-width:400px;
        padding:1em 4em 0.5em
}
    }
#userSettings{
    width:470px;
}
#userSettings small{
        font-style:italic;
        color:color-mod(var(--dialog-foreground) l(40%));
        padding:0.5em;
        display:block;
    }
#userSettings ul.theme, #userSettings ul.layout{
        list-style:none;
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        gap:0.5em;

    }
#userSettings #userBooks details{
            margin-bottom:0.5em;
        }
#userSettings #userBooks details[open] summary{
                border-bottom:1px dotted var(--menu);
                margin-bottom:0.25em;
            }
#userSettings #userBooks details summary{
                cursor:pointer;
                padding:0.25em 0;

            }
#userSettings #userBooks details ul{
                display:grid;
                grid-template-columns:repeat(2, 1fr);
                column-gap:1em;
                row-gap:0.45em;
                list-style:none;
                padding:0;
                margin:0;
            }
#userSettings #userBooks details ul li{
                    padding:0;
                    margin:0;
                }
#userSettings #userBooks details ul li label{
                    }
.toggleSwitch{
    display:inline-block;
    height:18px;
    position:relative;
    overflow:visible;
    padding:0;
    cursor:pointer;
    width:200px;
    border-radius:5px;
    height:34px;
    user-select:none;
}
.toggleSwitch span span{
        display:none;
    }
.toggleSwitch label,
    .toggleSwitch> span{
        line-height:20px;
        height:20px;
        vertical-align:middle;
    }
.toggleSwitch label{
        position:relative;
        z-index:3;
        display:block;
        width:100%;
    }
.toggleSwitch> span{
        position:absolute;
        left:0;
        width:calc(100% - 6px);
        margin:0;
        text-align:left;
        white-space:nowrap;
        margin:0 3px;
    }
.toggleSwitch> span:before{
            content:'';
            display:block;
            width:100%;
            height:100%;
            position:absolute;
            left:0;
            top:-2px;
            border-radius:30px;
            transition:all 0.2s ease-out;
        }
.toggleSwitch input:focus ~ a,
    .toggleSwitch input:focus + label{
        outline:none;
    }
.toggleSwitch input{
        position:absolute;
        opacity:0;
        z-index:5;
    }
.toggleSwitch > span span{
        position:absolute;
        top:0;
        left:0;
        z-index:5;
        display:block;
        width:50%;
        margin-left:50px;
        text-align:left;
        font-size:0.9em;
        width:auto;
        left:0;
        top:-1px;
        opacity:1;
        width:40%;
        text-align:center;
        line-height:34px;
    }
.toggleSwitch > span span:first-of-type{
            opacity:1;
            left:0;
            margin:0;
            width:50%;
        }
.toggleSwitch > span span:last-of-type{
            left:auto;
            right:0;
            margin:0;
            width:50%;
        }
.toggleSwitch a{
        position:absolute;
        right:50%;
        z-index:4;
        display:block;
        top:3px;
        bottom:3px;
        padding:0;
        left:3px;
        width:50%;
        border-radius:4px;
        transition:all 0.2s ease-out;
        box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
    }
.toggleSwitch input:checked ~ a{
            left:calc(50% - 3px);
        }
.toggleSwitch input:checked ~ span span:first-of-type{
            left:0;
        }
.toggleSwitch.large{
        width:60px;
        height:27px;
    }
.toggleSwitch.large a{
            width:27px;
        }
.toggleSwitch.large > span{
            height:29px;
            line-height:28px;
        }
.toggleSwitch.large input:checked ~ a{
            left:41px;
        }
.toggleSwitch.large > span span{
            font-size:1.1em;
        }
.toggleSwitch.large > span span:first-of-type{
                left:50%;
            }
.toggleSwitch.xlarge{
        width:80px;
        height:36px;
    }
.toggleSwitch.xlarge a{
            width:36px;
        }
.toggleSwitch.xlarge > span{
            height:38px;
            line-height:37px;
        }
.toggleSwitch.xlarge input:checked ~ a{
            left:52px;
        }
.toggleSwitch.xlarge > span span{
            font-size:1.4em;
        }
.toggleSwitch.xlarge > span span:first-of-type{
                left:50%;
            }
.toggleSwitch-default{
        background-color:var(--default);
        border:1px solid hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.6) );
    }
.toggleSwitch-default a{
            background-color:var(--default);
        }
.toggleSwitch-default > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-default input:not(:checked) ~ span span:first-of-type{
                color:var(--default-foreground);
            }
.toggleSwitch-default input:checked ~ span span:last-of-type{
            color:var(--default-foreground);
        }
.toggleSwitch-menu{
        background-color:var(--default);
        border:1px solid hsl( var(--menu-h) var(--menu-s) calc( var(--menu-l) * 0.6) );
    }
.toggleSwitch-menu a{
            background-color:var(--menu);
        }
.toggleSwitch-menu > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-menu input:not(:checked) ~ span span:first-of-type{
                color:var(--menu-foreground);
            }
.toggleSwitch-menu input:checked ~ span span:last-of-type{
            color:var(--menu-foreground);
        }
.toggleSwitch-primary{
        background-color:var(--default);
        border:1px solid hsl( var(--primary-h) var(--primary-s) calc( var(--primary-l) * 0.6) );
    }
.toggleSwitch-primary a{
            background-color:var(--primary);
        }
.toggleSwitch-primary > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-primary input:not(:checked) ~ span span:first-of-type{
                color:var(--primary-foreground);
            }
.toggleSwitch-primary input:checked ~ span span:last-of-type{
            color:var(--primary-foreground);
        }
.toggleSwitch-secondary{
        background-color:var(--default);
        border:1px solid hsl( var(--secondary-h) var(--secondary-s) calc( var(--secondary-l) * 0.6) );
    }
.toggleSwitch-secondary a{
            background-color:var(--secondary);
        }
.toggleSwitch-secondary > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-secondary input:not(:checked) ~ span span:first-of-type{
                color:var(--secondary-foreground);
            }
.toggleSwitch-secondary input:checked ~ span span:last-of-type{
            color:var(--secondary-foreground);
        }
.toggleSwitch-success{
        background-color:var(--default);
        border:1px solid hsl( var(--success-h) var(--success-s) calc( var(--success-l) * 0.6) );
    }
.toggleSwitch-success a{
            background-color:var(--success);
        }
.toggleSwitch-success > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-success input:not(:checked) ~ span span:first-of-type{
                color:var(--success-foreground);
            }
.toggleSwitch-success input:checked ~ span span:last-of-type{
            color:var(--success-foreground);
        }
.toggleSwitch-danger{
        background-color:var(--default);
        border:1px solid hsl( var(--danger-h) var(--danger-s) calc( var(--danger-l) * 0.6) );
    }
.toggleSwitch-danger a{
            background-color:var(--danger);
        }
.toggleSwitch-danger > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-danger input:not(:checked) ~ span span:first-of-type{
                color:var(--danger-foreground);
            }
.toggleSwitch-danger input:checked ~ span span:last-of-type{
            color:var(--danger-foreground);
        }
.toggleSwitch-warning{
        background-color:var(--default);
        border:1px solid hsl( var(--warning-h) var(--warning-s) calc( var(--warning-l) * 0.6) );
    }
.toggleSwitch-warning a{
            background-color:var(--warning);
        }
.toggleSwitch-warning > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-warning input:not(:checked) ~ span span:first-of-type{
                color:var(--warning-foreground);
            }
.toggleSwitch-warning input:checked ~ span span:last-of-type{
            color:var(--warning-foreground);
        }
.toggleSwitch-notice{
        background-color:var(--default);
        border:1px solid hsl( var(--notice-h) var(--notice-s) calc( var(--notice-l) * 0.6) );
    }
.toggleSwitch-notice a{
            background-color:var(--notice);
        }
.toggleSwitch-notice > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-notice input:not(:checked) ~ span span:first-of-type{
                color:var(--notice-foreground);
            }
.toggleSwitch-notice input:checked ~ span span:last-of-type{
            color:var(--notice-foreground);
        }
.toggleSwitch-question{
        background-color:var(--default);
        border:1px solid hsl( var(--question-h) var(--question-s) calc( var(--question-l) * 0.6) );
    }
.toggleSwitch-question a{
            background-color:var(--question);
        }
.toggleSwitch-question > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-question input:not(:checked) ~ span span:first-of-type{
                color:var(--question-foreground);
            }
.toggleSwitch-question input:checked ~ span span:last-of-type{
            color:var(--question-foreground);
        }
.toggleSwitch-mustache{
        background-color:var(--default);
        border:1px solid hsl( var(--mustache-h) var(--mustache-s) calc( var(--mustache-l) * 0.6) );
    }
.toggleSwitch-mustache a{
            background-color:var(--mustache);
        }
.toggleSwitch-mustache > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-mustache input:not(:checked) ~ span span:first-of-type{
                color:var(--mustache-foreground);
            }
.toggleSwitch-mustache input:checked ~ span span:last-of-type{
            color:var(--mustache-foreground);
        }
.toggleSwitch-generator{
        background-color:var(--default);
        border:1px solid hsl( var(--generator-h) var(--generator-s) calc( var(--generator-l) * 0.6) );
    }
.toggleSwitch-generator a{
            background-color:var(--generator);
        }
.toggleSwitch-generator > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-generator input:not(:checked) ~ span span:first-of-type{
                color:var(--generator-foreground);
            }
.toggleSwitch-generator input:checked ~ span span:last-of-type{
            color:var(--generator-foreground);
        }
.toggleSwitch-highlight{
        background-color:var(--default);
        border:1px solid hsl( var(--highlight-h) var(--highlight-s) calc( var(--highlight-l) * 0.6) );
    }
.toggleSwitch-highlight a{
            background-color:var(--highlight);
        }
.toggleSwitch-highlight > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-highlight input:not(:checked) ~ span span:first-of-type{
                color:var(--highlight-foreground);
            }
.toggleSwitch-highlight input:checked ~ span span:last-of-type{
            color:var(--highlight-foreground);
        }
.toggleSwitch-transparent{
        background-color:var(--default);
        border:1px solid hsl( var(--transparent-h) var(--transparent-s) calc( var(--transparent-l) * 0.6) );
    }
.toggleSwitch-transparent a{
            background-color:var(--transparent);
        }
.toggleSwitch-transparent > span span{
            color:hsl( var(--default-h) var(--default-s) calc( var(--default-l) * 0.4) );
        }
.toggleSwitch-transparent input:not(:checked) ~ span span:first-of-type{
                color:var(--transparent-foreground);
            }
.toggleSwitch-transparent input:checked ~ span span:last-of-type{
            color:var(--transparent-foreground);
        }
.page, td, th{
    font-size:10pt;
}
.page{
    width:189.5mm;
    height:252.5mm;
    padding:12.7mm;
    background:var(--page);
    color:var(--page-foreground);
    box-shadow:6px 6px 18px #000;
    overflow:hidden;
    transition:background 0.4s ease-in-out, color 0.4s ease-in-out;
}
.page .loader{
        z-index:20;
        background:rgba(255,255,255,0.8);
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
.page.landscape{
        height:189.5mm;
        width:252.5mm;
    }
.page input{
        text-align:center;
        border:0;
        border-bottom:1px solid;
        border-color:var(--page-line-color);
        background:transparent;
        color:var(--page-foreground);
        font-size:10pt;
        font-weight:normal;
        font-family:sans-serif;
        padding:0;
        margin:0;
    }
.page h1{
        text-align:center; font-size:1.5em; font-weight:bold;
    }
.page .single-reroll{
        display:inline-block;
        position:absolute;
        left:-1.5em;
        opacity:0;
        transition:opacity 0.5s;
        width:1.5em;
    }
.page .single-reroll > .icon-dice{
            font-weight:normal !important;
        }
.page .single-reroll.visible, .page .show-reroll .single-reroll{
        opacity:1;
    }
.page.main .headers{
        display:grid;
        grid-template-columns:150px 150px auto 200px;
        align-items:stretch;
        grid-column-gap:9px;
        grid-row-gap:2px;
    }
.page.main .headers .name:hover .single-reroll{
            opacity:1;
        }
.page.main .headers label{
            position:relative;
            display:flex;
            justify-self:stretch;
            flex-wrap:nowrap;
            justify-content:space-between;
            align-content:stretch;
        }
.page.main .headers label.name input{
                text-align:left;
                padding-left:5px;
            }
.page.main .headers label input{
                width:1px;
                flex:1 1 auto;
            }
.page.main .headers label span{
                font-weight:bold;
                flex:0 0 auto;
            }
.page.main .headers label span .single-reroll{
                    flex:0 0 0;
                }
.page.main .headers .name{
            grid-column:1/3;
        }
.page.main .headers .level .level-up{
                display:none;
                background-color:var(--success);
                border-radius:4px;
                color:var(--success-foreground);
                padding:0 2px;
                z-index:2;
                position:absolute;
                right:0;
                height:1.25em;
                cursor:pointer;
            }
.page.main .headers .level:hover .level-up[data-can-level-up="1"]{
                display:inherit;
            }
.page.main.with-long-money .savings{
            display:none;
        }
.page.main.with-long-money .money{
            grid-column-end:span 2;
        }
.page.main .bottom{
    display:grid;
    grid-template-columns:2.2fr auto;
    justify-items:stretch;
    align-items:stretch;
    margin-top:0.7em;
}
.page.main .combat{
    display:grid;
    grid-template-columns:250px auto;
    grid-column-gap:10px;
}
.page.main .combat .melee{
        display:grid;
        grid-template-columns:repeat(12, auto);
        grid-column-gap:2px;
        grid-row-gap:3.5px;
        padding-bottom:3px;
    }
.page.main .combat .melee > label, .page.main .combat .melee > div{
            display:flex;
        }
.page.main .combat .melee > div{
            grid-column:span 6;
            display:grid;
            grid-template-columns:repeat(2, auto);
        }
.page.main .combat .melee > div span:first-child{
                display:inline-block;
                width:38px;
            }
.page.main .combat .melee > div label{
                display:flex;
            }
.page.main .combat .melee input{
            width:1px;
            flex:1 1 auto;
        }
.page.main .combat .melee .combatType{
            grid-column:span 7;
        }
.page.main .combat .melee .combatType span{
                font-weight:bold;
            }
.page.main .combat .melee .altCombatType{
            grid-column:span 5;
        }
.page.main .combat .melee .punch{
            grid-column:span 4;
        }
.page.main .combat .melee .powerPunch{
            grid-column:span 4;
        }
.page.main .combat .melee .kick{
            grid-column:span 4;
        }
.page.main .combat .combatSpecial{
        display:grid;
        align-content:stretch;
        margin-top:-4px;
    }
.page.main .combat .combatSpecial textarea{
            text-indent:100px;
            grid-column:1;
            grid-row:1;
        }
.page.main .combat .combatSpecial strong{
            margin-top:3px;
            grid-column:1;
            grid-row:1;
        }
.page.main.with-sdc:not(.with-mdc) .top .mysticArmorHP .vital{
    justify-content:space-between;
}
.page.main.with-sdc .top .mysticArmorHP .vital label.sdc-world{
    display:flex;
}
.page.main.with-mdc .top .mysticArmorHP .vital{
    justify-content:space-around;
}
.page.main.with-mdc .top .mysticArmorHP .vital label.mdc-world{
    display:flex;
}
.page.main.with-spell-str .top .mysticArmorHP .mysticStrenghts input{
            width:33px;
        }
.page.main.with-spell-str .top .mysticArmorHP .mysticStrenghts{
        grid-template-columns:repeat(5, 1fr);

}
.page.main.with-spell-str .top .mysticArmorHP .mysticStrenghts .spellStr{
            display:block;
        }
.page.main.with-natural-armor .top .mysticArmorHP .armor{
        grid-template-columns:auto repeat(3, 72px);
    }
.page.main.with-natural-armor .top .mysticArmorHP .armor .naturalArmor{
            display:block;
        }
.page.main .top .mysticArmorHP{
    display:grid;
    grid-template-columns:auto 85px;
    align-items:stretch;
    grid-column-gap:4px;
    grid-row-gap:3px;
}
.page.main .top .mysticArmorHP input{
        width:3em;
    }
.page.main .top .mysticArmorHP span span{
        display:inline-block;
        font-size:0.8em;
        margin-top:-11px;
        text-align:center;
        width:22px;
    }
.page.main .top .mysticArmorHP .vital{
        grid-column:2;
        grid-row:1 / 3;
        justify-self:end;

        display:flex;
        flex-direction:column;
        justify-content:space-between;
    }
.page.main .top .mysticArmorHP .vital > strong{
            max-height:0.8em;
        }
.page.main .top .mysticArmorHP .vital input{
            width:3.4em;
        }
.page.main .top .mysticArmorHP .vital label{
            display:flex;
            justify-content:space-between;
            margin-top:0.5em;
        }
.page.main .top .mysticArmorHP .vital label.sdc-world{
            display:none;
        }
.page.main .top .mysticArmorHP .vital label.mdc-world{
            display:none;
        }
.page.main .top .mysticArmorHP .mysticStrenghts{
        grid-column:1;
        grid-row:1;

        display:grid;
        grid-template-columns:repeat(4, 1fr);
        align-items:stretch;
        grid-column-gap:2px;
    }
.page.main .top .mysticArmorHP .mysticStrenghts input{
            width:50px;
            margin-left:2px;
        }
.page.main .top .mysticArmorHP .mysticStrenghts > div{
            grid-column:span 4;
        }
.page.main .top .mysticArmorHP .mysticStrenghts .hf{
            grid-column:1;
        }
.page.main .top .mysticArmorHP .mysticStrenghts .spellStr{
            display:none;
        }
.page.main .top .mysticArmorHP .armor{
        grid-column:1;

        display:grid;
        grid-template-columns:auto repeat(2, 72px);
        align-items:stretch;
        grid-column-gap:2px;
    }
.page.main .top .mysticArmorHP .armor .type{
            grid-column:1;
            display:flex;
        }
.page.main .top .mysticArmorHP .armor .type input{
                width:1px;
                flex:1 1 auto;
            }
.page.main .top .mysticArmorHP .armor .naturalArmor{
            display:none;
        }
.page.main .bottom .notesAndPower{
    display:grid;
    grid-template-columns:auto;
    justify-items:stretch;
    align-items:stretch;
    position:relative;
    margin-right:7px;
}
.page.main .bottom .notesAndPower textarea{
        text-indent:235px;
    }
.page.main .bottom .notesAndPower strong{
        position:absolute;
        top:0;
    }
.page.main .top .savingThrows{
    position:relative;
}
.page.main .top .savingThrows > strong{
        position:absolute;
    }
.page.main .top .savingThrows ul{
        display:grid;
        grid-template-columns:repeat(3, auto);
        align-items:stretch;
        grid-column-gap:14px;
        grid-row-gap:3px;
        margin-bottom:2px;
        list-style:none;
        padding:0;
        margin:0;
    }
.page.main .top .savingThrows ul li{
            padding:0;
            margin:0;
        }
.page.main .top .savingThrows ul li:first-child{
                grid-column:2;
            }
.page.main .top .savingThrows ul li label{
                display:flex;
                justify-content:space-between;
                align-content:flex-end;
                gap:0px;
            }
.page.main .top .savingThrows ul li label > *{
                    flex-basis:0;
                }
.page.main .top .savingThrows ul li label span:first-child{
                    flex-grow:999;
                }
.page.main .top .savingThrows ul li label input{
                    width:3em;
                }
.page.main .top .savingThrows ul li label input.vs-name{
                        width:5em;
                        text-align:left;
                        font-family:"Times New Roman", serif;
                        font-size:10pt;
                        border-bottom:1px dotted rgb(60,60,60);
                    }
.page.main .skills{
    overflow:hidden;
    margin-top:15px;
    display:flex;
    justify-content:space-between;
}
.page.main .skills input{
        margin-top:2px;
    }
.page.main .skills table{
        border-spacing:0;
        border-collapse:collapse;
        margin-left:2px;
        float:left;
    }
.page.main .skills table th{
            margin:0;
            padding:0;
            border-bottom:1px solid rgba(0, 0, 0, 0.6);
            font-size:1em;
        }
.page.main .skills table td.skill input{
            width:170px;
            text-align:left;
        }
.page.main .skills table td.percent input{
            text-align:center;
            width:61px;
        }
.page.main .skills .requirementDescription{
        display:hidden;
    }
.page.main .skills .requirementDescription ul{
            margin-left:2em;
        }
.page.main .skills .showRequirement .requirementDescription{
        display:block;
        margin-left:-20px;
        margin-top:-46px;
        position:absolute;
        z-index:20;
    }
.page.main .skills .showRequirement .requirementDescription .content{
            background:rgba(245, 40, 40, 0.79);
            border-radius:5px;
            color:#000;
            font-weight:bold;
            padding:10px;
        }
.page.main .skills td .requirementDescription>ul{
        margin-left:1.4em;
        text-align:left;
    }
.page.main.with-fly-spd .top .stats{
    margin:0;
}
.page.main.with-fly-spd .top .stats .flySpd{
        display:grid;
    }
.page.main.with-mph-kmh-spd .top .stats .mph, .page.main.with-mph-kmh-spd .top .stats .kmh{
        display:inline;
    }
.page.main.with-yrdmelee-spd .top .stats .yrdMelee{
        display:inline;
    }
.page.main.with-ftmelee-spd .top .stats .ftMelee{
        display:inline;
    }
.page.main .top .stats{
    margin-top:10px;
}
.page.main .top .stats > div{
        display:grid;
        grid-template-columns:88px 148px;
        align-items:stretch;
        grid-column-gap:3px;
        grid-row-gap:3px;
        margin-bottom:2px;
    }
.page.main .top .stats > div label{
            display:grid;
            grid-template-columns:33px 42px 2px;
            align-items:stretch;
            grid-column-gap:2px;
        }
.page.main .top .stats > div label span{
                font-weight:bold;
            }
.page.main .top .stats > div>span input{
            width:2.5em;
        }
.page.main .top .stats > div>span input.bonusIqVsIllusion{
                width:2.3em;
            }
.page.main .top .stats .flySpd, .page.main .top .stats .mph, .page.main .top .stats .kmh, .page.main .top .stats .yrdMelee, .page.main .top .stats .ftMelee{
        display:none;
    }
.page.main .top{
    margin:0.75em 0 1.2em 0.5em;;
    display:grid;
    grid-template-columns:250px auto;
    grid-column-gap:4px;
    grid-row-gap:8px;
}
.page.main .top .stats{
        grid-row:span 2;
    }
.page.main .top .mysticArmorHP{
        grid-column:2;
    }
.page.main .bottom > .weaponProficiencies{
    padding-top:1px;
}
.page.main .bottom > .weaponProficiencies input{
        height:15.1pt;
        text-align:left;
    }
.page.main .bottom > .weaponProficiencies td.weaponProficiencies input{
        width:172px;
        margin:0;
        margin-right:3px;
    }
.page.main .bottom > .weaponProficiencies td.bonuses input{
        width:90px;
        margin:0;
    }
.page.main .bottom > .weaponProficiencies th{
        border-bottom:1px solid #585858;
        padding:0;
    }
.page.main .weapons table{
        border-spacing:0;
        border-collapse:collapse;
        width:100%;
    }
.page.main .weapons table th, .page.main .weapons table td{
            margin:0;
            padding:0;
            border-bottom:1px solid var(--page-line-color);
        }
.page.main .weapons table th{
            font-size:0.6em;
        }
.page.main .weapons table th.title{
                font-size:1em;
                font-weight:bold;
                vertical-align:middle;
            }
.page.main .weapons table tr.range th{
            border-top:1px solid var(--page-line-color);
            background:var(--page-main-weapon-weapons-range);
        }
.page.main .weapons table td{
            width:16%;
        }
.page.main .weapons table td.weapon{
                width:35%;
            }
.page.main .weapons table input{
            margin-top:2px;
        }
.page.main .weapons input{
        width:100%;
        text-align:center;
        border:0;
    }
.page.main .weapons .weapon input{
        text-align:left;
    }
.page.main .stats{
    position:relative;
}
.page.main .stats:hover .statsStats{
        opacity:1;
    }
.page.main .stats div.statsStats{
        display:flex;
        flex-direction:column;
        justify-content:center;
        column-gap:0.5em;
        left:-57px;
        position:absolute;
        top:20%;
        width:55px;
        text-align:center;
        color:#585858;
        opacity:0;
        transition:opacity 0.8s;
        font-size:0.9em;
    }
.page.main .stats div.statsStats > div{
            width:55px;
        }
.page.main .stats div.statsStats > div span{
                display:block;
            }
.page.main .stats div.statsStats > div label{
                display:block !important;
                font-weight:bold;
            }
.page.equipment input{
        text-align:left;
    }
.page.equipment .title{
        display:block;
        text-align:center;
        font-size:1.2em;
        font-weight:bold;
    }
.page.equipment div.list{
        display:flex;
    }
.page.equipment div.list{ line-height:15pt; }
.page.equipment table.list .qty{ width:60px; text-align:center; padding-right:5px; }
.page.equipment table.list .qty input{ width:50px; text-align:center; }
.page.equipment table.list .item{ width:300px; text-align:center; }
.page.equipment table.list .item input{ width:295px; }
.page.equipment .placementContainer{
    position:relative;
    height:625px;
    width:100%;
}
.page.equipment .placement{
    bottom:12.7mm;
    overflow:hidden;
    position:absolute;
    width:inherit;
}
.page.equipment .placement .image{ position:relative; z-index:1; width:739px; height:563px; text-align:center; background:-2px top no-repeat #fff;}
.page.equipment .extended{
    display:none;
}
.page.equipment[data-sex="extended"] .extended{
        display:table-row;
    }
.page.equipment[data-sex="extended"] .placement{
        display:none;
    }
.page.equipment[data-sex="female"] .image{ background-image:url(/img/equipment-female.png); }
.page.equipment[data-sex="female2"] .image{ background-image:url(/img/equipment-female2.png); }
.page.equipment[data-sex="female-fat"] .image{ background-image:url(/img/equipment-female-fat.png); }
.page.equipment[data-sex="female-fat2"] .image{ background-image:url(/img/equipment-female-fat2.png); }
.page.equipment[data-sex="male"] .image{ background-image:url(/img/equipment-male.png); }
.page.equipment[data-sex="male2"] .image{ background-image:url(/img/equipment-male2.png); }
.page.equipment[data-sex="male-fat"] .image{ background-image:url(/img/equipment-male-fat.png); }
.page.equipment[data-sex="male-fat2"] .image{ background-image:url(/img/equipment-male-fat2.png); }
.page.equipment[data-sex="dwarf-female"] .image{ background-image:url(/img/equipment-dwarf-female.png); }
.page.equipment[data-sex="dwarf-male"] .image{ background-image:url(/img/equipment-dwarf-male.png); }
.page.equipment[data-sex="female-robot"] .image{ background-image:url(/img/equipment-female-robot.png); }
.page.equipment[data-sex="male-robot"] .image{ background-image:url(/img/equipment-male-robot.png); }
.page.equipment[data-sex="robot"] .image{ background-image:url(/img/equipment-robot.png); }
.page.equipment[data-sex="robot-funny"] .image{ background-image:url(/img/equipment-robot-funny.png); }
.page.equipment[data-sex="catwomen"] .image{ background-image:url(/img/equipment-catwomen.png); }
.page.equipment[data-sex="catmen"] .image{ background-image:url(/img/equipment-catmen.png); }
.page.equipment[data-sex="satyr-female"] .image{ background-image:url(/img/equipment-satyr-female.png); }
.page.equipment[data-sex="satyr-male"] .image{ background-image:url(/img/equipment-satyr-male.png); }
.page.equipment[data-sex="dragon"] .image{ background-image:url(/img/equipment-dragon.png); }
.page.equipment[data-sex="thiefling-female"] .image{ background-image:url(/img/equipment-thiefling-female.png); }
.page.equipment[data-sex="thiefling-male"] .image{ background-image:url(/img/equipment-thiefling-male.png); }
.page.equipment[data-sex="lizardmen"] .image{ background-image:url(/img/equipment-lizardmen.png); }
.page.equipment[data-sex="skelleton"] .image{ background-image:url(/img/equipment-skelleton.png); }
.page.equipment[data-sex="zombie"] .image{ background-image:url(/img/equipment-zombie.png); }
.page.equipment[data-sex="zombie2"] .image{ background-image:url(/img/equipment-zombie2.png); }
.page.equipment[data-sex="zombie-female"] .image{ background-image:url(/img/equipment-zombie-female.png); }
.page.equipment[data-sex="alien"] .image{ background-image:url(/img/equipment-alien.png); }
.page.equipment .placement .left, .page.equipment .placement .right{ position:relative; z-index:2; }
.page.equipment .placement input{ border:0; background:transparent; }
.page.equipment .placement label{ display:block; }
.page.equipment .placement .right label, .page.equipment .placement .left label{ position:absolute; }
.page.equipment .placement .right span{ float:left; width:59px; display:block; }
.page.equipment .placement .right input{ width:176px; }
.page.equipment .placement .right label{ left:0; }
.page.equipment .placement .right .Head{ top:23px; }
.page.equipment .placement .right .Ear{ top:64px; }
.page.equipment .placement .right .Neck{ top:102px; }
.page.equipment .placement .right .Shoulder{ top:141px; }
.page.equipment .placement .right .Arm{ top:180px; }
.page.equipment .placement .right .Forearm{ top:219px; }
.page.equipment .placement .right .Hand{ top:257px; }
.page.equipment .placement .right .Fingers{ top:296px; }
.page.equipment .placement .right .Leg{ top:354px; }
.page.equipment .placement .right .Ankle{ top:426px; }
.page.equipment .placement .right .Foot{ top:499px; }
.page.equipment .placement .left input{ text-align:right; width:157px; }
.page.equipment .placement .left span{ float:right; text-align:right; width:63px; }
.page.equipment .placement .left label{ right:0px; }
.page.equipment .placement .left .Forehead{ top:25px; }
.page.equipment .placement .left .Ear{ top:64px; }
.page.equipment .placement .left .Shoulder{ top:102px; }
.page.equipment .placement .left .Arm{ top:141px; }
.page.equipment .placement .left .Forearm{ top:180px; }
.page.equipment .placement .left .Hand{ top:219px; }
.page.equipment .placement .left .Fingers{ top:257px; }
.page.equipment .placement .left .Body{ top:296px; }
.page.equipment .placement .left .Leg{ top:355px; }
.page.equipment .placement .left .Ankle{ top:426px; }
.page.equipment .placement .left .Foot{ top:499px; }
.page.equipment[data-sex="male"] .placement .left .Forearm,
.page.equipment[data-sex="female-fat"] .placement .left .Forearm,
.page.equipment[data-sex="male-fat"] .placement .left .Forearm,
.page.equipment[data-sex="male-robot"] .placement .left .Forearm,
.page.equipment[data-sex="female-robot"] .placement .left .Forearm,
.page.equipment[data-sex="zombie"] .placement .left .Forearm{ top:257px; }
.page.equipment[data-sex="male"] .placement .left .Fingers,
.page.equipment[data-sex="female-fat"] .placement .left .Fingers,
.page.equipment[data-sex="male-fat"] .placement .left .Fingers,
.page.equipment[data-sex="male-robot"] .placement .left .Fingers,
.page.equipment[data-sex="female-robot"] .placement .left .Fingers,
.page.equipment[data-sex="zombie"] .placement .left .Fingers{ top:180px; }
.page.equipment[data-sex="catmen"] .placement .left .Ear,
.page.equipment[data-sex="catwomen"] .placement .left .Ear{ top:23px; }
.page.equipment[data-sex="catmen"] .placement .right .Ear,
.page.equipment[data-sex="catwomen"] .placement .right .Ear{ top:25px; }
.page.equipment[data-sex="catmen"] .placement .right .Head,
.page.equipment[data-sex="catwomen"] .placement .right .Head{ top:64px; }
.page.equipment[data-sex="catmen"] .placement .left .Forehead,
.page.equipment[data-sex="catwomen"] .placement .left .Forehead{ top:64px; }
.page.note textarea, .page.note div{
        width:100%;
        height:calc(100% - 18px);
        border:0;
        resize:none;
    }
.page.note div{
        font-family:monospace;
    }
.page.linedPowers table th{
            cursor:ns-resize;
        }
.page.linedPowers table th.name{
            width:20%;
        }
.page.linedPowers table th.cost{
            width:5%;
        }
.page.linedPowers table th.category{
            width:11%;
        }
.page.linedPowers table th.description{
            width:52%;
        }
.page.linedPowers table th.ref{
            width:12%;
        }
.page.linedPowers table td{
            padding:1px 2px 0 2px;
        }
.page.linedPowers table td:first-child{
                padding-left:0;
            }
.page.linedPowers table td:last-child{
                padding-right:0;
            }
.page.linedPowers table input{
            width:100%;
            line-height:15pt;
        }
.page.spell table th.name{
            width:20%;
        }
.page.spell table th.cost{
            width:5%;
        }
.page.spell table th.level{
            width:5%;
        }
.page.spell table th.description{
            width:58%;
        }
.page.spell table th.ref{
            width:12%;
        }
.page.main.morphus .headers{
        display:grid;
        grid-template-columns:50% 25% 25%;
        position:initial;
        height:initial;
    }
.page.main.morphus .headers .name{
            grid-column:1/2;
        }
.page.main.morphus .headers label{
            position:relative;
            top:0;
            left:0;
            display:table;
        }
.page.main.morphus .headers label span{
                display:table-cell;
                width:1px;
            }
.page.main.morphus .headers label input{
                display:table-cell;
                width:calc(100% - 3px);
                padding:0;
            }
.page.main.morphus .headers label.name input{
                width:calc(100% - 9px);
            }
.page.main.morphus .top .savingThrowsGrid{
            display:grid;
            grid-template-columns:35% 33% 32%;
            margin:0.3em;
        }
.page.main.morphus .top .savingThrowsGrid label{
                display:table;
            }
.page.main.morphus .top .savingThrowsGrid label span{
                    display:table-cell;
                    width:1px;
                    white-space:pre;
                }
.page.main.morphus .top .savingThrowsGrid label .fromStats{
                    padding-right:3px;
                }
.page.main.morphus .top .savingThrowsGrid label .vsName{
                    text-align:right;
                    padding-right:6px;
                }
.page.main.morphus .top .savingThrowsGrid label.col1 .vsName{
                    width:87px;
                }
.page.main.morphus .top .savingThrowsGrid label.col2 .vsName{
                    width:82px;
                }
.page.main.morphus .top .savingThrowsGrid label.col3 .vsName{
                    width:67px;
                }
.page.main.morphus .top .savingThrowsGrid label input{
                    display:table-cell;
                    width:100%;
                }
.page.main.morphus .top .vital{
            position:relative;
        }
.page.main.morphus .nightbaneTalents, .page.main.morphus .nightbaneAppearance{
        position:relative;
        padding-top:3px;
        margin-top:0.85em;
    }
.page.main.morphus .nightbaneTalents::before, .page.main.morphus .nightbaneAppearance::before{
            content:"Nightbane Talents";
            color:#000;
            font-weight:bold;
        }
.page.main.morphus .nightbaneTalents textarea, .page.main.morphus .nightbaneAppearance textarea{
            width:100%;
            height:100%;
            text-indent:112px;
            position:absolute;
            top:0;left:0;
        }
.page.main.morphus .nightbaneTalents[data-num-lines="1"], .page.main.morphus .nightbaneAppearance[data-num-lines="1"]{
                height:calc(21px * 1);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="2"], .page.main.morphus .nightbaneAppearance[data-num-lines="2"]{
                height:calc(21px * 2);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="3"], .page.main.morphus .nightbaneAppearance[data-num-lines="3"]{
                height:calc(21px * 3);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="4"], .page.main.morphus .nightbaneAppearance[data-num-lines="4"]{
                height:calc(21px * 4);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="5"], .page.main.morphus .nightbaneAppearance[data-num-lines="5"]{
                height:calc(21px * 5);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="6"], .page.main.morphus .nightbaneAppearance[data-num-lines="6"]{
                height:calc(21px * 6);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="7"], .page.main.morphus .nightbaneAppearance[data-num-lines="7"]{
                height:calc(21px * 7);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="8"], .page.main.morphus .nightbaneAppearance[data-num-lines="8"]{
                height:calc(21px * 8);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="9"], .page.main.morphus .nightbaneAppearance[data-num-lines="9"]{
                height:calc(21px * 9);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="10"], .page.main.morphus .nightbaneAppearance[data-num-lines="10"]{
                height:calc(21px * 10);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="11"], .page.main.morphus .nightbaneAppearance[data-num-lines="11"]{
                height:calc(21px * 11);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="12"], .page.main.morphus .nightbaneAppearance[data-num-lines="12"]{
                height:calc(21px * 12);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="13"], .page.main.morphus .nightbaneAppearance[data-num-lines="13"]{
                height:calc(21px * 13);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="14"], .page.main.morphus .nightbaneAppearance[data-num-lines="14"]{
                height:calc(21px * 14);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="15"], .page.main.morphus .nightbaneAppearance[data-num-lines="15"]{
                height:calc(21px * 15);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="16"], .page.main.morphus .nightbaneAppearance[data-num-lines="16"]{
                height:calc(21px * 16);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="17"], .page.main.morphus .nightbaneAppearance[data-num-lines="17"]{
                height:calc(21px * 17);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="18"], .page.main.morphus .nightbaneAppearance[data-num-lines="18"]{
                height:calc(21px * 18);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="19"], .page.main.morphus .nightbaneAppearance[data-num-lines="19"]{
                height:calc(21px * 19);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="20"], .page.main.morphus .nightbaneAppearance[data-num-lines="20"]{
                height:calc(21px * 20);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="21"], .page.main.morphus .nightbaneAppearance[data-num-lines="21"]{
                height:calc(21px * 21);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="22"], .page.main.morphus .nightbaneAppearance[data-num-lines="22"]{
                height:calc(21px * 22);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="23"], .page.main.morphus .nightbaneAppearance[data-num-lines="23"]{
                height:calc(21px * 23);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="24"], .page.main.morphus .nightbaneAppearance[data-num-lines="24"]{
                height:calc(21px * 24);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="25"], .page.main.morphus .nightbaneAppearance[data-num-lines="25"]{
                height:calc(21px * 25);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="26"], .page.main.morphus .nightbaneAppearance[data-num-lines="26"]{
                height:calc(21px * 26);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="27"], .page.main.morphus .nightbaneAppearance[data-num-lines="27"]{
                height:calc(21px * 27);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="28"], .page.main.morphus .nightbaneAppearance[data-num-lines="28"]{
                height:calc(21px * 28);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="29"], .page.main.morphus .nightbaneAppearance[data-num-lines="29"]{
                height:calc(21px * 29);
            }
.page.main.morphus .nightbaneTalents[data-num-lines="30"], .page.main.morphus .nightbaneAppearance[data-num-lines="30"]{
                height:calc(21px * 30);
            }
.page.main.morphus .nightbaneAppearance::before{
            content:"Nightbane Appearance";
        }
.page.main.morphus .nightbaneAppearance textarea{
            text-indent:140px;
        }
.page.nightbane-resume .content textarea, .page.nightbane-resume .content table{
    background:none repeat scroll 0 0 transparent;
    font:10pt/20px "times new roman",arial,sans-serif;
    position:absolute;
    width:190.5mm;
    z-index:3;
}
.page.nightbane-resume .content textarea{
    height:46mm;
    font:11pt/21px "times new roman";
}
.page.nightbane-resume .content table{
    margin-top:-2px;
    padding-top:0;
    z-index:1;
}
.page.nightbane-resume .content table th, .page.nightbane-resume .content table td{
    margin:0;
    padding:0;
    border-bottom:1px solid rgba(0,0,0, 0.6);
}
.page.nightbane-resume .content{
    position:relative;
}
.page.nightbane-resume .middle{
    overflow:auto;
}
.pageConfig .content h2{
        margin:0 0 0.5em;
    }
.pageConfig .content[data-type="main"] div.checkbox{
            margin:0.5em 0;
        }
.pageConfig .content[data-type="main"] label{
            font-weight:bold;
        }
.pageConfig .content[data-type="main"] .radio-inline{
            display:inline;
            margin-right:1em;
        }
.pageConfig .content[data-type="main"] .gm-setup label{
                display:block;
                margin-bottom:5px;
            }
.pageConfig .content[data-type="main"] .gm-setup input{
                padding:.5rem;
                text-align:center;
                outline:none;
                border-color:var(--num-input-field-border);
                border-style:solid;
                border-bottom-width:2px;
                margin:0.5rem 0 0.75rem;
                width:100%;
            }
.pageConfig .content[data-type="main"] section{
            padding-bottom:1em;
        }
.pageConfig .content[data-type="main"] .numLines .form-control{
                margin-bottom:0.5em;
            }
.pageConfig .content[data-type="main"] .numLines label{
                display:block;
            }
.pageConfig .content[data-type="main"] .numLines .totalLines{
                font-weight:bold;
            }
.pageConfig .content[data-type="main"] .numLines .totalLines.over{
                    color:var(--alert-danger);
                    animation:pulse-animation-text-danger 2s infinite;
                }
.pageConfig .content[data-type="main"] .numLines input[type="number"]{
                appearance:textfield;
            }
.pageConfig .content[data-type="main"] .numLines input[type=number]::-webkit-inner-spin-button,
            .pageConfig .content[data-type="main"] .numLines input[type=number]::-webkit-outer-spin-button{
                -webkit-appearance:none;
            }
.pageConfig .content[data-type="main"] .numLines .number-input{
                border:2px solid var(--num-input-field-border);
                display:inline-flex;
            }
.pageConfig .content[data-type="main"] .numLines .number-input,
            .pageConfig .content[data-type="main"] .numLines .number-input *{
                box-sizing:border-box;
            }
.pageConfig .content[data-type="main"] .numLines .number-input button{
                outline:none;
                background-color:#eeeeee;
                border:none;
                align-items:center;
                justify-content:center;
                width:2.5rem;
                cursor:pointer;
                margin:0;
                position:relative;
                padding:0;
            }
.pageConfig .content[data-type="main"] .numLines .number-input button:before,
            .pageConfig .content[data-type="main"] .numLines .number-input button:after{
                display:inline-block;
                position:absolute;
                content:'';
                width:0.5rem;
                height:2px;
                background-color:#212121;
                transform:translate(-50%, -50%);
            }
.pageConfig .content[data-type="main"] .numLines .number-input button.plus:after{
                transform:translate(-50%, -50%) rotate(90deg);
            }
.pageConfig .content[data-type="main"] .numLines .number-input input[type=number]{
                font-family:sans-serif;
                max-width:4.5rem;
                padding:.5rem;
                border:0;
                text-align:center;
                outline:none;
            }
.pageConfig .content[data-type="main"] .numLines .number-input{
                border:solid #c2c4c6;
                border-width:2px;
            }
.pageConfig .content[data-type="note"] label{
            display:block;
            margin-top:2em;
            font-weight:bold;
            font-size:1.1em;
        }
.pageConfig .content[data-type="note"] input{
            padding:.5rem;
            text-align:left;
            outline:none;
            border-color:var(--num-input-field-border);
            border-style:solid;
            border-bottom-width:2px;
            margin-bottom:0.75rem;
            width:100%;
        }
.pageConfig .content[data-type="equipment"][data-in-use="female"] [data-type="female"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="female2"] [data-type="female2"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="female-fat"] [data-type="female-fat"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="female-fat2"] [data-type="female-fat2"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="male"] [data-type="male"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="male2"] [data-type="male2"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="male-fat"] [data-type="male-fat"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="male-fat2"] [data-type="male-fat2"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="dwarf-female"] [data-type="dwarf-female"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="dwarf-male"] [data-type="dwarf-male"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="female-robot"] [data-type="female-robot"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="male-robot"] [data-type="male-robot"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="robot"] [data-type="robot"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="robot-funny"] [data-type="robot-funny"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="catwomen"] [data-type="catwomen"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="catmen"] [data-type="catmen"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="satyr-female"] [data-type="satyr-female"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="satyr-male"] [data-type="satyr-male"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="dragon"] [data-type="dragon"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="thiefling-female"] [data-type="thiefling-female"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="thiefling-male"] [data-type="thiefling-male"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="lizardmen"] [data-type="lizardmen"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="skelleton"] [data-type="skelleton"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="zombie"] [data-type="zombie"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="zombie2"] [data-type="zombie2"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="zombie-female"] [data-type="zombie-female"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"][data-in-use="alien"] [data-type="alien"]{
                color:var(--highlight-foreground);
                background:var(--highlight);
            }
.pageConfig .content[data-type="equipment"] div{
            display:flex;
            flex-direction:row;
            flex-wrap:wrap;
            gap:0.5em;
        }
.pageConfig .content[data-type="equipment"] div button span{
                    display:block;
                    font-weight:bold;
                }
.pageConfig .content[data-type="equipment"] div button img{
                    transform:scale(75%);
                }
@media (min-width: 501px){
.pageConfig .content[data-type="equipment"] div{
                max-width:450px
        }
            }
html body form main#mainContent .page .not-empty{
    animation:pulse-animation-text-danger-b 1s 3;
}
:root[data-theme="dark"]{
        --l-0:calc(100% - 0%);
        --l-5:calc(100% - 5%);
        --l-10:calc(100% - 10%);
        --l-15:calc(100% - 15%);
        --l-20:calc(100% - 20%);
        --l-25:calc(100% - 25%);
        --l-30:calc(100% - 30%);
        --l-35:calc(100% - 35%);
        --l-40:calc(100% - 40%);
        --l-45:calc(100% - 45%);
        --l-50:calc(100% - 50%);
        --l-55:calc(100% - 55%);
        --l-60:calc(100% - 60%);
        --l-65:calc(100% - 65%);
        --l-70:calc(100% - 70%);
        --l-75:calc(100% - 75%);
        --l-80:calc(100% - 80%);
        --l-85:calc(100% - 85%);
        --l-90:calc(100% - 90%);
        --l-95:calc(100% - 95%);
        --l-100:calc(100% - 100%);

    --background-gradient1:hsl( var(--background-gradient1-hs) var(--l-80) );
    --background-gradient2:hsl( var(--background-gradient2-hs) var(--l-65) );
    --menu-l:var(--l-80);
    --menu-foreground:hsl(var(--menu-foreground-hs) var(--l-20));
    --menu-border:hsl( var(--menu-hs) var(--l-70) );


    --page:hsl( var(--page-hs) var(--l-0) );
    --page-foreground:hsl( var(--page-foreground-hs) var(--l-100) );
    --page-line-color:hsl( var(--page-hs) var(--l-55) );
    --page-main-weapon-weapons-range:hsl( var(--page-hs) var(--l-10) );

    --library:hsl(var(--library-hs) var(--l-90));
    --library-link-color-h:212;

}
:root[data-theme="dev"]{
    --background-gradient1:hsl(353 100% 30%);
    --background-gradient2:hsl(21 100% 15%);
}
@media print{
    div#flashMessengerGroup, nav#sidemenu, nav#sidemenu *,
    aside, div#loadIcon, footer, div.ui-helper-hidden-accessible,
    nav.pageTool{
        display:none !important;
    }
    div.page{
        border:0 !important;
        box-shadow:none !important;
        padding-top:10mm !important;
    }
    body{
        background:transparent !important;
        padding:0!important;
        margin:0!important;
    }
}