.fancy-char-sheet, .fancy-spell-sheet {
    display: relative;
}

.fancy-sheet .row,
.fancy-sheet .col-3,
.fancy-sheet .col-4,
.fancy-sheet .col-6,
.fancy-sheet .col-8,
.fancy-sheet .col-12 {
    margin: 0px;
    padding: 0px;
}


.fancy-sheet div {
    min-width: 10px;
    min-height: 10px;
    position: relative;
    font-size: 100%;
}
.fancy-sheet .sneaky-input {
    width: auto;
    max-width: 100%;
    border: none;
    background:none;
}
.fancy-sheet .sneaky-input[type=number] {
    padding-left: 16px;
}

.fancy-sheet .bottom-label {
    position: absolute;
    bottom: 5px;
    width: 100%;
    text-align: center;
}
.fancy-sheet .bottom-label.bordered {
    bottom: -5px;
}

.fancy-sheet .header {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_17_header.svg");
    padding-top: 17%;
}
.fancy-spell-sheet .header {
    background-image: url("https://mapquest-public.s3.amazonaws.com/20_10_20_14_14_59_spell_header.svg");
}
.fancy-bio-sheet .header {
    background-image: url("https://mapquest-public.s3.amazonaws.com/20_10_20_15_24_49_bio_header.svg");
}

.fancy-sheet .header .player-name {
    position: absolute;
    top: 43%;
    left: 8%;
    font-size: 200%;
}

.fancy-sheet .top-block {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_10_14_top_box.svg");
    width: 52%;
    position: absolute;
    right: 2%;
    padding-top: 13%;
    top: 20%;
}
.fancy-spell-sheet .top-block {
    background-image: url("https://mapquest-public.s3.amazonaws.com/20_10_20_14_15_16_spell_top_box.svg");
}

.fancy-sheet .top-block .top-block-text {
    position: absolute;
    top: 20%;
    left: 4%
}
.fancy-sheet .top-block .top-block-text .inline-block {
    display: inline-block;
    margin-right: 15px;
}

.fancy-spell-sheet .top-block .top-level-block {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 90%;
    margin: 5%;
}

.fancy-spell-sheet .top-block .top-level-spell-block {
    background-image: url("https://mapquest-public.s3.amazonaws.com/20_10_20_14_15_08_top_level_spell_block.svg");
    padding-top: 41%;
    margin: 0px 5%;
}
.fancy-spell-sheet .top-block .top-level-spell-block .top-level-spell-block-text {
    position: absolute;
    top: 37%;
    left: 0%;
    font-size: 100%;
    text-align: center;
    width: 80%;
    margin: 0px 10%;
}
.fancy-spell-sheet .top-block .top-level-spell-block .top-level-spell-block-value {
    position: absolute;
    top: 22%;
    left: 0%;
    font-size: 160%;
    width: 100%;
    text-align: center;
    font-weight: bold;
}

.fancy-spell-sheet .under-title {
    text-align: center;
}

.fancy-char-sheet .stats {
}

.fancy-sheet .bordered-box {
    border: 10px solid black;
    border-image-source: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_13_border_2.svg");
    border-image-slice: 30 10;
    border-image-width: auto;
    padding: 0% 3% 25px 3%;
    min-height:300px;
    margin: 2% 0%;
}
.fancy-bio-sheet .bordered-box.large {
    border-image-width: 2.5%;
    border-image-slice: 25 25;
}


.fancy-char-sheet .stats .stat-values {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_05_57_background_1.svg");
    padding: 20% 0%;
    margin: 5%;
}
.fancy-char-sheet .stats .stat-values .stat-value {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_05_44_ability.svg");
    padding-top: 105%;
    margin: 11% 5%;
}
.fancy-char-sheet .stats .stat-values .stat-value .stat-name {
    position: absolute;
    top: 5px;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
}
.fancy-char-sheet .stats .stat-values .stat-value .stat-number {
    position: absolute;
    bottom: 5%;
    width: 100%;
    text-align: center;
    font-size: 120%;
}
.fancy-char-sheet .stats .stat-values .stat-value .stat-mod {
    position: absolute;
    width: 100%;
    top: 26%;
    text-align: center;
    font-size: 200%;
}

.fancy-char-sheet .stats .inspiration {
    background-image: url("https://mapquest-public.s3.amazonaws.com/20_10_13_12_42_04_inspiration.svg");
    text-align: center;
    padding: 7.2% 0%;
    margin: 5%;
}
.fancy-char-sheet .stats .proficiency-bonus {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_32_proficency-bonus.svg");
    text-align: center;
    padding: 10% 0% 10% 20%;
    margin: 5%;
}
.fancy-char-sheet .stats .proficiency-bonus .bonus-value {
    position: absolute;
    left: 12%;
    top: 26%;
    font-size: 150%;
}

.fancy-char-sheet .stats .saving-throws {
    border: 10px solid black;
    border-image-source: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_08_border_1.svg");
    border-image-slice: 30 10;
    border-image-width: auto;
    padding: 5% 2% 10%;
    margin: 5%;
}
.fancy-char-sheet .stats .saving-throws label {
    font-size: 100%;
}
.fancy-char-sheet .stats .saving-throws .saving-throw {
    padding-top: 2px;
}

.fancy-char-sheet .stats .skills {
    border: 10px solid black;
    border-image-source: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_08_border_1.svg");
    border-image-slice: 30 10;
    border-image-width: auto;
    padding: 5% 2% 10%;
    margin: 5%;
}
.fancy-char-sheet .stats .skills label {
    font-size: 100%;
}

.skills .custom-checkbox.expertise .custom-control-input:checked~.custom-control-label::before {
    background: #28a745;
}

.fancy-char-sheet .passive-perception {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_28_perception.svg");
    text-align: center;
    padding: 4.1% 0%;
    margin: 2% 5%;
}
.fancy-char-sheet .passive-perception .passive-value {
    position: absolute;
    left: 5%;
    top: 20%;
    font-size: 150%;
}

.fancy-char-sheet .proficiencies {
    border: 10px solid black;
    border-image-source: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_08_border_1.svg");
    border-image-slice: 30 10;
    border-image-width: auto;
    padding-left: 3%;
    padding-bottom: 25px;
    min-height: 300px;
    margin: 2% 5%;
}

.fancy-char-sheet .health {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_03_background_2.svg");
    background-size: cover;
    margin: 2% 0%;
    padding: 3% 4%;
}
.fancy-char-sheet .health .armor {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_05_52_armor.svg");
    padding-top: 115%;
}
.fancy-char-sheet .health .armor .armor-label {
    position: absolute;
    bottom: 15%;
    width: 100%;
    text-align: center;
}
.fancy-char-sheet .health .armor .armor-value {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 18%;
    font-size: 200%;
}

.fancy-char-sheet .health .initiative-mod {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_37_vital-box.svg");
    padding-top: 85%;
    margin: 5%;
}
.fancy-char-sheet .health .initiative-mod .initiative-value {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 18%;
    font-size: 200%;
}

.fancy-char-sheet .health .speed {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_37_vital-box.svg");
    padding-top: 85%;
    margin: 5%;
}
.fancy-char-sheet .health .speed .speed-value {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 18%;
    font-size: 200%;
}

.fancy-char-sheet .health .hp {
    background-image: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_23_hp.svg");
    padding-bottom: 26.8%;
    margin: 5% 5% 0%;
}

.fancy-char-sheet .health .hp .hp-max {
    position: absolute;
    top:5%;
    right: 15%;
    width:20%;
    font-size: 120%;
}
.fancy-char-sheet .health .hp .hp-current {
    position: absolute;
    top:110%;
    left: 0%;
    font-size: 250%;
    text-align: center;
    width: 100%;
}
.fancy-char-sheet .health .temp-hp .hp-temp {
    position: absolute;
    top: 20%;
    left: 0%;
    width: 100%;
    text-align: center;
    font-size: 160%;
}

.fancy-char-sheet .health .temp-hp {
    background-image: url("https://mapquest-public.s3.amazonaws.com/20_10_13_13_35_52_temp-hp.svg");
    padding-top: 27%;
    margin: 0% 5% 5%;
}
.fancy-char-sheet .health .hit-dice {
    background: white;
    border-radius: 50px;
    border: 5px solid black;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-image-source: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_37_vital-box.svg");
    border-image-slice: 15 15;
    border-image-width: auto;
    padding: 5% 0% 15%;
    margin: 5%;
}
.fancy-char-sheet .health .hit-dice .hit-dice-max {
    position: absolute;
    top:5%;
    right: 10%;
}
.fancy-char-sheet .health .hit-dice .hit-dice-current {
    font-size: 200%;
    text-align: center;
}

.fancy-char-sheet .health .death-saves {
    background: white;
    border-radius: 50px;
    border: 5px solid black;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-image-source: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_37_vital-box.svg");
    border-image-slice: 15 15;
    border-image-width: auto;
    padding: 5% 0% 15%;
    margin: 5%;
}
.fancy-char-sheet .health .death-saves .death-save-success,
.fancy-char-sheet .health .death-saves .death-save-failure {
    padding: 0% 10%;
}

.fancy-char-sheet .attacks {
}

.fancy-char-sheet .large-action {
    padding: 5px 0px;
    border-bottom: thin solid #eee;
}

.fancy-char-sheet .equipment {

}

.fancy-char-sheet .features {
    margin: 2.5%;
}

.fancy-char-sheet .resources {

}

.fancy-char-sheet .resources .resource, .fancy-spell-sheet .resources .resource {
    border: 5px solid black;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-image-source: url("https://componentmadness-images.s3.amazonaws.com/20_10_13_12_06_37_vital-box.svg");
    border-image-slice: 15 15;
    border-image-width: auto;
    margin: 5%;
    padding: 2% 2% 25px 2%;
}
.fancy-char-sheet .resources .resource .resource-max {
    width: 50%;
}
.fancy-char-sheet .resources .resource .resource-current {
    font-size: 200%;
    text-align: center;
}

.fancy-char-sheet .resources .resource.large, .fancy-spell-sheet .resources .resource.large {
    margin: 2.5%;
    padding: 4%;
}


.fancy-spell-sheet .large-action {
    padding: 5px 0px;
    border-bottom: thin solid #eee;
}

.fancy-spell-sheet .spell-level {

}
.fancy-spell-sheet .spell-level .total {
    position: absolute;
    top: -12px;
    left: 19%;
    text-transform: uppercase;
    color: #aaa;
}
.fancy-spell-sheet .spell-level .remaining {
    position: absolute;
    top: -12px;
    left: 52%;
    text-transform: uppercase;
    color: #aaa;
}

.fancy-spell-sheet .spell-level .spell-level-header {
    background-image: url("https://mapquest-public.s3.amazonaws.com/20_10_20_14_15_27_spell_level_header.svg");
    padding-top: 20.6%;
    margin: 0% 2%;
}

.fancy-spell-sheet .spell-level .spell-level-header.cantrip {
    background-image: url("https://mapquest-public.s3.amazonaws.com/20_10_20_14_15_23_cantrip_header.svg");
}

.fancy-spell-sheet .spell-level .spell-level-header .spell-level-label {
    position: absolute;
    left: 3.5%;
    top: 35%;
    font-size: 120%;
    font-weight: bolder;
}
.fancy-spell-sheet .spell-level .spell-level-header .spell-level-label-extra {
    position: absolute;
    top: 35%;
    width: 100%;
    text-align: center;
    font-size: 120%;
}
.fancy-spell-sheet .spell-level .spell-level-header .total-slots {
    position: absolute;
    top: 28%;
    font-size: 140%;
    left: 15%;
    width: 20%;
}
.fancy-spell-sheet .spell-level .spell-level-header .remaining-slots {
    position: absolute;
    top: 28%;
    left: 53%;
    width: 38%;
    font-size: 140%;
}

.fancy-spell-sheet .spell-level .spell-list {
    margin: 0% 5%;
}