:root{
    --background-gradient1:#7E898C;
    --background-gradient2:#555A5F;

    --default-h:217.5;
    --default-s:8%;
    --default-l:80.39%;
    --default:hsl( var(--default-h) var(--default-s) var(--default-l) );
    --default-foreground-h:210;
    --default-foreground-s:10.81%;
    --default-foreground-l:14.51%;
    --default-foreground:hsl( var(--default-foreground-h) var(--default-foreground-s) var(--default-foreground-l) );

    --menu-h:213.64;
    --menu-s:39.29%;
    --menu-l:32.94%;
    --menu:hsl(var(--menu-h) var(--menu-s) var(--menu-l));
    --menu-foreground:#fff;

    --primary-h:145.24;
    --primary-s:76.83%;
    --primary-l:32.16%;
    --primary:hsl( var(--primary-h) var(--primary-s) var(--primary-l) );
    --primary-foreground:#fff;

    --secondary-h:214.38;
    --secondary-s:42.18%;
    --secondary-l:58.63%;
    --secondary:hsl( var(--secondary-h) var(--secondary-s) var(--secondary-l) );
    --secondary-foreground:#000;

    --success-h:120.74;
    --success-s:60%;
    --success-l:26.47%;
    --success:hsl( var(--success-h) var(--success-s) var(--success-l) );
    --success-foreground:#fff;

    --danger-h:0;
    --danger-s:67.92%;
    --danger-l:41.57%;
    --danger:hsl( var(--danger-h) var(--danger-s) var(--danger-l) );

    --danger-foreground-h:0;
    --danger-foreground-s:0%;
    --danger-foreground-l:100%;
    --danger-foreground:hsl( var(--danger-foreground-h) var(--danger-foreground-s) var(--danger-foreground-l) );

    --warning-h:25.98;
    --warning-s:73.41%;
    --warning-l:33.92%;
    --warning:hsl( var(--warning-h) var(--warning-s) var(--warning-l) );

    --warning-foreground-h:0;
    --warning-foreground-s:0%;
    --warning-foreground-l:100%;
    --warning-foreground:hsl( var(--warning-foreground-h) var(--warning-foreground-s) var(--warning-foreground-l) );

    --notice-h:185.78;
    --notice-s:77.59%;
    --notice-l:52.75%;
    --notice:hsl( var(--notice-h) var(--notice-s) var(--notice-l) );

    --notice-foreground-h:246.28;
    --notice-foreground-s:97.73%;
    --notice-foreground-l:17.25%;
    --notice-foreground:hsl( var(--notice-foreground-h) var(--notice-foreground-s) var(--notice-foreground-l) );

    --question-h:217.97;
    --question-s:34.2%;
    --question-l:45.29%;
    --question:hsl( var(--question-h) var(--question-s) var(--question-l) );

    --question-foreground-h:0;
    --question-foreground-s:0%;
    --question-foreground-l:100%;
    --question-foreground:hsl( var(--question-foreground-h) var(--question-foreground-s) var(--question-foreground-l) );

    --mustache-h:339.61;
    --mustache-s:82.19%;
    --mustache-l:51.57%;
    --mustache:hsl( var(--mustache-h) var(--mustache-s) var(--mustache-l) );

    --mustache-foreground-h:0;
    --mustache-foreground-s:0%;
    --mustache-foreground-l:100%;
    --mustache-foreground:hsl( var(--mustache-foreground-h) var(--mustache-foreground-s) var(--mustache-foreground-l) );

    --highlight-h:200;
    --highlight-s:24.71%;
    --highlight-l:66.67%;
    --highlight:hsl( var(--highlight-h) var(--highlight-s) var(--highlight-l) );

    --highlight-foreground-h:0;
    --highlight-foreground-s:0%;
    --highlight-foreground-l:0%;
    --highlight-foreground:hsl( var(--highlight-foreground-h) var(--highlight-foreground-s) var(--highlight-foreground-l) );


    --page:#fff;
    --page-foreground:#000;
    --page-line-color:color-mod(var(--page-foreground) l(44%));
    --page-main-weapon-weapons-range:color-mod(var(--page-foreground) l(90%));

    --dialog:#fff;
    --dialog-foreground:#000;
    --sideDialog-close-border:#000;

    --tree-control:transparent;
    --tree-control-foreground:#000;
    --tree-control-icon:transparent;
    --tree-control-icon-foreground:var(--menu);
    --tree-control-selected:color-mod(var(--menu) a(20%));
    --tree-control-highlight:#ffc;

    --character-card:color-mod(var(--menu) a(15%));
    --character-card-highlight:var(--tree-control-highlight);
    --character-card-foreground-name:var(--menu);
    --character-card-foreground:var(--dialog-foreground);

    --library:#fff;
    --library-foreground:#000;
    --library-link-color:#400;
    --library-link-hover:rgb(255, 245, 245);
    --library-link-no-ref:#585858;
    --library-details-categories:rgb(198, 198, 198);
    --library-details-requirement-foreground:#800;
    --library-details-requirement-link-color:var(--library-details-requirement-foreground);

    --effect-transfer-border:#222;

    --num-input-field-border:#ddd;

    --alert-success:var(--success);
    --alert-danger:var(--danger);
    --alert-warning:var(--warning);
    --alert-notice:var(--notice);
    --alert-question:var(--question);
    --alert-mustache:var(--mustache);

    --alert-success-border:color-mod(var(--alert-success) b(60%));
    --alert-danger-border:color-mod(var(--alert-danger) b(60%));
    --alert-warning-border:color-mod(var(--alert-warning) b(5%));
    --alert-notice-border:color-mod(var(--alert-notice) b(20%));
    --alert-question-border:color-mod(var(--alert-question) w(25%));
    --alert-mustache-border:color-mod(var(--alert-mustache) b(20%));

    --alert-danger-fg:#fff;
    --alert-success-fg:#fff;
    --alert-warning-fg:#fff;
    --alert-question-fg:#fff;
    --alert-mustache-fg:#fff;
    --alert-notice-fg:#fff;

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

    --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; }
@page{ margin:0.3in }
*{
    line-height:1.5em;
}
@font-face{
  font-family:'NotoSans';
  src:url('./NotoSans-Regular.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}
body{
    padding:0;
    margin:0;
    font-family:NotoSans;
    font-size:14pt;
}
.container{
    width:calc(100vw - 20px);
    padding:0;
}
.top-margin{
    margin-top:4em;
}
#world_section canvas{
    width:calc(99vw);
    height:calc(99vh);
    margin:0;
    padding:0;
    border:0;
}
.navbar{
    margin-bottom:0;
    border:0;
    background:-webkit-linear-gradient(top, rgba(0,0,0, 0.8) 0%,rgba(0,0,0, 0.7) 100%);
    background:linear-gradient(to bottom, rgba(0,0,0, 0.8) 0%,rgba(0,0,0, 0.7) 100%);
}
.navbar ul{
        display:flex;
        justify-content:flex-start;
        align-items:center;
        align-content:stretch;
    }
.navbar ul li{
            display:flex;
            justify-content:flex-start;
            align-items:center;
            border-left:1px solid #fff;
            padding:0px 20px;
        }
.navbar ul li:first-child{
                padding-left:0;
                padding-right:0;
                border:0;
            }
.navbar ul li:nth-child(2){
                padding-left:10px;
                border:0;
            }
.navbar ul li:last-child{
                padding-right:0;
            }
.navbar ul li a{
                display:flex;
                justify-content:flex-start;
                align-items:center;
                text-decoration:none;
                color:#fff;
            }
.navbar ul li a:hover{
                    text-decoration:underline;
                }
.navbar ul li img{
                background:#E14800;
                padding:3px;
            }
#content{
    padding:1% 10%;
}
#content form{
        margin-top:1em;
    }
#content form .columns{
            display:grid;
            grid-template-columns:50% 50%;
            column-gap:1em;
        }
#content form input{
            border-bottom:1px solid var(--default);
        }
#content form input.error{
                border-color:var(--danger);
            }
#content form input[type="number"]{
                width:3em;
            }
#content form input[type="number"][name="chance"]{
                    width:10em;
                }
#content form input#sheet{
                width:60%;
            }
.tabs > input[type="radio"]{
        display:none;
    }
.tabs > input[type="radio"]:checked + label{
            background:var(--success);
            color:var(--success-foreground);
        }
.tabs > label{
        margin:2px 2px 0 2px;
        padding:0.45em 0.5em 0.25em 0.5em;
        border:1px solid var(--default);
        border-bottom:0;
        border-radius:5px 5px 0 0;
    }
.tabs > label:first-of-type{
            margin-left:1em;
        }
.tabs ul{
        border:1px solid var(--default);
        border-radius:5px;
        padding:0.75em;
        margin-top:0.2em;
    }
.tabs ul li{
            display:none;
        }
.tabs #one_time_skills:checked ~ ul li[data-tab-id="one_time_skills"]{
            display:block;
        }
.tabs #one_time_chance:checked ~ ul li[data-tab-id="one_time_chance"]{
            display:block;
        }
.tabs #player_vs_house:checked ~ ul li[data-tab-id="player_vs_house"]{
            display:block;
        }
.tabs #player_vs_npc:checked ~ ul li[data-tab-id="player_vs_npc"]{
            display:block;
        }
.tabs [data-tab-id="one_time_skills"] label{
        display:block;
        margin-bottom:0.5em;
    }
@-webkit-keyframes clockwise{
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100%{
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
  }
}
@-webkit-keyframes counter-clockwise{
  0%{
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  100%{
    -webkit-transform:rotate(-360deg);
    transform:rotate(-360deg);
  }
}
.gear-loading-container{
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-100px;
  height:150px;
  width:200px;
  margin-top:-75px;
}
.gearbox{
  background:#111;
  height:150px;
  width:200px;
  position:relative;
  border:none;
  overflow:hidden;
  border-radius:6px;
  box-shadow:0px 0px 0px 1px rgba(255, 255, 255, 0.1);
}
.gearbox .overlay{
  border-radius:6px;
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:10;
  box-shadow:inset 0px 0px 20px black;
  -webkit-transition:background 0.2s;
  transition:background 0.2s;
}
.gearbox.turn .overlay{
  background:transparent;
}
.gear{
  position:absolute;
  height:60px;
  width:60px;
  box-shadow:0px -1px 0px 0px #888888, 0px 1px 0px 0px black;
  border-radius:30px;
}
.gear.large{
  height:120px;
  width:120px;
  border-radius:60px;
}
.gear.large:after{
  height:96px;
  width:96px;
  border-radius:48px;
  margin-left:-48px;
  margin-top:-48px;
}
.gear.one{
  top:12px;
  left:10px;
}
.gear.two{
  top:61px;
  left:60px;
}
.gear.three{
  top:110px;
  left:10px;
}
.gear.four{
  top:13px;
  left:128px;
}
.gear:after{
  content:"";
  position:absolute;
  height:36px;
  width:36px;
  border-radius:36px;
  background:#111;
  top:50%;
  left:50%;
  margin-left:-18px;
  margin-top:-18px;
  z-index:3;
  box-shadow:0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888;
}
.gear-inner{
  position:relative;
  height:100%;
  width:100%;
  background:#555;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  border-radius:30px;
  border:1px solid rgba(255, 255, 255, 0.1);
}
.large .gear-inner{
  border-radius:60px;
}
.gear.one .gear-inner{
  -webkit-animation:counter-clockwise 3s infinite linear;
  -moz-animation:counter-clockwise 3s infinite linear;
}
.gear.two .gear-inner{
  -webkit-animation:clockwise 3s infinite linear;
  -moz-animation:clockwise 3s infinite linear;
}
.gear.three .gear-inner{
  -webkit-animation:counter-clockwise 3s infinite linear;
  -moz-animation:counter-clockwise 3s infinite linear;
}
.gear.four .gear-inner{
  -webkit-animation:counter-clockwise 6s infinite linear;
  -moz-animation:counter-clockwise 6s infinite linear;
}
.gear-inner .bar{
  background:#555;
  height:16px;
  width:76px;
  position:absolute;
  left:50%;
  margin-left:-38px;
  top:50%;
  margin-top:-8px;
  border-radius:2px;
  border-left:1px solid rgba(255, 255, 255, 0.1);
  border-right:1px solid rgba(255, 255, 255, 0.1);
}
.large .gear-inner .bar{
  margin-left:-68px;
  width:136px;
}
.gear-inner .bar:nth-child(2){
  -webkit-transform:rotate(60deg);
  transform:rotate(60deg);
}
.gear-inner .bar:nth-child(3){
  -webkit-transform:rotate(120deg);
  transform:rotate(120deg);
}
.gear-inner .bar:nth-child(4){
  -webkit-transform:rotate(90deg);
  transform:rotate(90deg);
}
.gear-inner .bar:nth-child(5){
  -webkit-transform:rotate(30deg);
  transform:rotate(30deg);
}
.gear-inner .bar:nth-child(6){
  -webkit-transform:rotate(150deg);
  transform:rotate(150deg);
}
.alert{
    padding:15px;
    margin-bottom:20px;
    border:1px solid transparent;
    border-radius:4px;
    box-shadow:0 1px 2px rgba(0,0,0,0.11);

    background-image:linear-gradient(to bottom,#FFFFFF,#F9F9F9);
    border-top-color:#d8d8d8;
    border-bottom-color:#bdbdbd;
    border-left-color:#cacaca;
    border-right-color:#cacaca;
    color:#404040;
    padding-left:61px;
    position:relative;

}
.alert h4{
        margin-top:0;
        color:inherit;
    }
.alert .alert-link{
        font-weight:bold;
    }
.alert>p,.alert>ul{
        margin-bottom:0;
    }
.alert>p+p{
        margin-top:5px;
    }
.alert .sign{
        font-size:20px;
        vertical-align:middle;
        margin-right:5px;
        text-align:center;
        width:25px;
        display:inline-block;
    }
.alert .icon{
        text-align:center;
        width:45px;
        height:100%;
        position:absolute;
        top:-1px;
        left:-1px;
        border:1px solid #bdbdbd;
        border-radius:4px 0 0 4px;
    }
.alert .icon:after{
            transform:rotate(45deg);
            display:block;
            content:'';
            width:10px;
            height:10px;
            border:1px solid #bdbdbd;
            position:absolute;
            border-left:0;
            border-bottom:0;
            top:50%;
            right:-6px;
            margin-top:-5px;
            background:#fff;
        }
.alert .icon i{
            font-size:20px;
            color:#FFF;
            left:12px;
            margin-top:-10px;
            position:absolute;
            top:50%;
        }
.alert-success{
    background-color:#dff0d8;
    border-color:#d6e9c6;
    color:#3c763d;
}
.alert-success hr{
    border-top-color:#c9e2b3;
}
.alert-success .alert-link{
    color:#2b542c;
}
.alert-info{
    background-color:#d9edf7;
    border-color:#bce8f1;
    color:#31708f;
}
.alert-info hr{
    border-top-color:#a6e1ec;
}
.alert-info .alert-link{
    color:#245269;
}
.alert-warning{
    background-color:#fcf8e3;
    border-color:#faebcc;
    color:#8a6d3b;
}
.alert-warning hr{
    border-top-color:#f7e1b5;
}
.alert-warning .alert-link{
    color:#66512c;
}
.alert-danger{
    background-color:#f2dede;
    border-color:#ebccd1;
    color:#a94442;
}
.alert-danger hr{
    border-top-color:#e4b9c0;
}
.alert-danger .alert-link{
    color:#843534;
}
.alert-success{
    background-color:#dbf6d3;
    border-color:#aed4a5;
    color:#569745;
}
.alert-info{
    background-color:#d9edf7;
    border-color:#98cce6;
    color:#3a87ad;
}
.alert-warning{
    background-color:#fcf8e3;
    border-color:#f1daab;
    color:#c09853;
}
.alert-danger{
    background-color:#f2dede;
    border-color:#e0b1b8;
    color:#b94a48;
}
.alert-white.alert-danger .icon,.alert-white.alert-danger .icon:after{
    border-color:#ca452e;
    background:#da4932;
}
.alert-white.alert-info .icon,.alert-white.alert-info .icon:after{
    border-color:#3a8ace;
    background:#4d90fd;
}
.alert-white.alert-warning .icon,.alert-white.alert-warning .icon:after{
    border-color:#d68000;
    background:#fc9700;
}
.alert-white.alert-success .icon,.alert-white.alert-success .icon:after{
    border-color:#54a754;
    background:#60c060;
}
.toast{
    position:absolute;
    top:25px;
    right:30px;
    border-radius:12px;
    background:#fff;
    padding:20px 35px 20px 25px;
    box-shadow:0 6px 20px -5px rgba(0, 0, 0, 0.1);
    overflow:hidden;
    transform:translateX(calc(100% + 30px));
    transition:all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}
.toast.active{
        transform:translateX(0%);
    }
.toast .toast-content{
        display:flex;
        align-items:center;
    }
.toast .toast-content .check{
            display:flex;
            align-items:center;
            justify-content:center;
            height:35px;
            min-width:35px;
            background-color:#4070f4;
            color:#fff;
            font-size:20px;
            border-radius:50%;
        }
.toast .toast-content .message{
            display:flex;
            flex-direction:column;
            margin:0 20px;
        }
.toast .toast-content .message .text{
                font-size:16px;
                font-weight:400;
                color:#666666;
            }
.toast .toast-content .message .text.text-1{
                font-weight:600;
                color:#333;
            }
.toast .close{
        position:absolute;
        top:10px;
        right:15px;
        padding:5px;
        cursor:pointer;
        opacity:0.7;
    }
.toast .close:hover{
        opacity:1;
    }
.toast .progress{
        position:absolute;
        bottom:0;
        left:0;
        height:3px;
        width:100%;
    }
.toast .progress.active:before{
            animation:toast-progress 5s linear forwards;
        }
.toast .progress:before{
            content:"";
            position:absolute;
            bottom:0;
            right:0;
            height:100%;
            width:100%;
            background-color:#4070f4;
        }
@keyframes toast-progress{
    100%{
        right:100%;
    }
}