body{
    --main-BG-color: white;
    --input-BG-color: aliceBlue;
    --input-color: black;
    --input-active-color: lightBlue;
    --input-hover-outline-color: black;
    --input-button-hover-color: cornflowerblue;
    margin: 0;
    text-align: center;
    max-width: 100vw;
    background-color:var(--main-BG-color);
    color: var(--input-color);
}

input,
select,
button,
input::file-selector-button,
pre[contenteditable='true'],
div[contenteditable='true']{
    background-color: var(--input-BG-color);
    color:var(--input-color);
}

input[type='checkbox']{
    position: relative;
    pointer-events: all;
}
input[type='checkbox']::before{
    content: "";
    position: absolute;
    inset: 0;

    border: solid var(--input-color) 1px;
    background-color: var(--input-BG-color);

}
input[type='checkbox']:hover::before,
input[type='checkbox']:focus::before{
    outline: solid var(--input-hover-outline-color) 1px;
}
input[type='checkbox']:checked::before{
    /*Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.*/
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
    background-size: 99% 99%;
    background-position: center;
    background-color: var(--input-active-color);
}

input[type='button']:hover,
button:hover{
    background-color: var(--input-button-hover-color);
}
input[type='button']:active,
button:active{
    background-color:var(--input-active-color);
}

select:hover, select:focus{
    outline: solid var(--input-hover-outline-color) 1px;
}


#main-header{
    margin: 20px 0 10px 0; 
    padding: 20px; 
    background-color: rgba(0, 0, 0, 0.1);
}
#main-header > *{
    margin: 10px 5px 0 5px;
}

.link-container{
    display: inline-block; 
    background-color: rgba(0, 0, 0, 0.1);
}
.link-container > a{
    display: inline-block;
    margin: 3px 0;
}


.blank-input {
    /*remove input default styling*/
    outline: none;
    border: none;
    background-image: none;
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
input[type='number'].shift-arrows::-webkit-inner-spin-button,
input[type='number'].shift-arrows::-webkit-outer-spin-button {
    margin-left: -15px;
    opacity: 1;
}

.flexbox{
    display: flex;
    width: fit-content;
    border: solid gray 1px;
}
.flexbox.column{
    flex-direction: column;
}

.flexbox.ability-score-flex{
    padding: 5px;
    gap: 5px;
}

.flexbox.ability-score-flex.row{
    flex-wrap: wrap;
    height: fit-content;
    width: calc((88px * 3) + 10px);/*stat-box width == 88*/
    padding: 0px;
    gap: 5px;
}
.flexbox.ability-score-flex.row > .stat-box{
    flex-basis: auto;
}

.capitalize {
    text-transform: capitalize;
}
.small-text{
    font-size: small;
}

.no-label-pointer-events label {
    pointer-events: none;
    cursor: default;
}


.stat-box {
    --length: 50px;
    --color: red;

    position: relative;

    width: 10ch;
    padding: 1px 2px var(--length) 2px;
    margin-bottom: calc(3px + 0.5em);

    background: linear-gradient(var(--input-BG-color), var(--input-BG-color)) padding-box,
                linear-gradient(0deg, var(--color, red) 20%, var(--input-color) 100%) border-box;
    border: solid transparent 2px;
    border-radius: 5px;

    font-family: "Fantasy", Copperplate;
    text-align: center;
}
.stat-box .ability-score {
    display: block;
    position: absolute;

    top: calc(var(--length) / 2);
    left: 0px;
    width: 100%;
    padding: 0;

    font-family: "Lucida Console", monospace;
    text-align: center;
    font-size: x-large;
}
.stat-box .stat-mod {
    box-sizing: border-box;
    position: absolute;

    top: calc(var(--length) + 0.5em);
    left: 50%;
    transform: translate(-50%, 0);
    width: fit-content;
    padding: 1px 2px 1px 2px;

    border: solid var(--color, red) 2px;
    border-radius: 5px;

    background-color: var(--input-BG-color);
}


#prof{
    width: 2em;
}

.prof-stats{
    position: relative;
    border: solid black 1px;
    width: 30ch;
    padding: 0 10px 30px 10px;
}
.prof-stats > span{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    white-space:nowrap;
    padding-top: 10px;
}

.allign_label label, .allign_label input.buble-check{
    vertical-align: middle;
    display: inline-block;
}
.allign_label label span{
    display: inline-block;
    vertical-align: middle;
    width: 3.5ch;
    padding-left: 5px;
}

input.buble-check {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    margin: 0;

    height: 10px;
    width: 10px;

    border: 1px solid var(--input-color);
    border-radius: 5px;
    outline: none;
    background-color: var(--input-BG-color);
    cursor: pointer;
}
input.buble-check::before{
    display: none;
}
input.buble-check:checked {
    border: 1px solid black;
    background-color: var(--input-active-color);
}
input.buble-check:active {
    border: 2px solid black;
}
input.buble-check:hover {
    outline: 2px solid var(--input-hover-outline-color);
    border: none;
}
input.buble-check.double:checked {
    border: 1px solid black;
    background-color:firebrick;
}

.skill-type{
    --color: grey;
    font-size: x-small;
    color:var(--color, grey);
    width: fit-content !important;
}



.dropdown-header, .dropdown-header > input[type="text"] {
    font-size: large;
    font-family: "Fantasy", Copperplate;
}

.dropdown-header > input, 
.dropdown-header > span{
    vertical-align: middle;
    display: inline-block;
}
.dropdown-header > span {
    font-family: "Lucida Console", monospace;
    width: 20px;
}

.dropdown-header > input{
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border: none;
    background: none;
    padding: 0;
}
.dropdown-header > input:focus{
    outline: none;
}

.dropdown-header > input[type="text"]{
    padding-left: calc(1rem - 20px);
    overflow: scroll;
}

.dropdown-header > input[type="button"]{
    height: 20px;
    width: 20px;
    float: right;
    vertical-align:middle;
    background-color:var(--input-BG-color);
    outline: solid black 1px;
}
.dropdown-header > input[type="button"]:hover{
    background-color:cornflowerblue;
}
.dropdown-header > input[type="button"]:active{
    outline: solid grey 1px;
    background-color:var(--input-active-color);
}


.dropdown-body {
    color: dimgray;
    padding-left: 20px;
    height: fit-content;
}

.dropdown-body > ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.dropdown-body > ul > li{
    padding-right: 5px;
}

.dropdown-body > input[name="remove-dropdown"]{
    position: relative;
    font-size: x-small;
    left: calc(-20px + -1ch);
    margin-top: 1rem;
}

.editable-text{
    --height: none;
    font-family:serif;
    box-sizing: border-box;
    white-space: pre-wrap;
    margin: 0;
    max-height: var(--height, 3lh);
}
.editable-text:focus{
    outline: solid black 1px;
}

.folded-body {
    height: 36px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
/*
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);*/

}
.folded-body-small{
    height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#abilities{
    position: relative;
    border: solid black 1px;
    width: 40ch;
}
#abilities > span{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}



.container-border {
    max-width: fit-content;
    border: solid black 1px;
    padding: 5px;
}


.input-container label {
    display: inline-block;
    max-width: var(--label-max-width, none);
    min-width: var(--label-max-width, auto);
    padding: var(--label-padding, none);
}

.input-container label:first-of-type {
    display: inline-block;
    max-width: var(--first-label-max-width, var(--label-max-width, none));
    min-width: var(--first-label-max-width, var(--label-max-width, auto));
    padding: var(--first-label-padding, var(--label-padding, none));
}

.input-container label span {
    display: inline-block;
    max-width: var(--label-text-max-width, none);
    min-width: var(--label-text-max-width, auto);
}

.input-container input[type="number"] {
    max-width: var(--num-input-max-width, none);
    min-width: var(--num-input-max-width, auto);
}

.editable-area{
    --height: 2lh;
    --width: 48ch;
    font-family:serif;
    border: solid black 1px;
    width: var(--width, 48ch);
    min-height: var(--height, 2lh);
    max-height: var(--height, 2lh);
    display: inline-block;
    text-align: left;
    padding: 0 2px;
    margin: 0;
    overflow:auto;
    white-space: pre-wrap;
}
.editable-area b, .editable-area i, .editable-area u{
    background-color: rgba(0, 0, 0, 0.07);
}

.spinner{
    display: inline-block; 
    vertical-align: text-bottom;
}
.arrow-button{
    display: block;
    box-sizing: border-box;
    position: relative;

    padding: 0;
    border: none;
    margin: 0;

    height: 10px; 
    width: 15px;
    
    text-decoration: none;
    text-align:center;
    font-size:x-large;
    line-height: 10px;
}
.arrow-button::before{
    content: '';
    display: inline-block;
    position: absolute;
    pointer-events: none;
    inset: 0;
}
/*<!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->*/
.arrow-button.up{
	inset: 0 0 50% 0;
}
.arrow-button.up::before{
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    inset: 0 0 0 0;
}
.arrow-button.down{
	inset: 50% 0 0 0;
}
.arrow-button.down::before{
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    inset: 0 0 0 0;
}