Commit initial app files.

README.md

@@ -1,8 +1,8 @@
 ---
 title: MonsterGenV2
-emoji: 🦀
-colorFrom: purple
-colorTo: gray
+emoji: 👹
+colorFrom: black
+colorTo: red
 sdk: gradio
 sdk_version: 4.7.1
 app_file: app.py
@@ -10,4 +10,6 @@ pinned: false
 license: apache-2.0
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 👹 MonsterGenV2
+
+## Generate and Edit D&D Monsters with a Chat Assistant

app.py

@@ -0,0 +1,479 @@
+# pip install imgkit
+# pip install html2image
+import base64
+import random
+import uuid
+from io import BytesIO
+
+import imgkit
+import os
+import pathlib
+import re
+import gradio as gr
+import requests
+from PIL import Image, ImageChops, ImageDraw
+from gradio_client import Client
+import torch
+from transformers import AutoModelForSpeechSeq2Seq, AutoProcessor, pipeline, Pipeline
+
+
+
+HF_TOKEN = os.getenv("HF_TOKEN")
+
+if not HF_TOKEN:
+    raise Exception("HF_TOKEN environment variable is required to call remote API.")
+
+API_URL = "https://api-inference.huggingface.co/models/HuggingFaceH4/zephyr-7b-beta"
+headers = {"Authorization": f"Bearer {HF_TOKEN}"}
+
+client = Client("https://latent-consistency-super-fast-lcm-lora-sd1-5.hf.space/")
+
+
+def init_speech_to_text_model() -> Pipeline:
+    device = "cuda:0" if torch.cuda.is_available() else "cpu"
+    torch_dtype = torch.float16 if torch.cuda.is_available() else torch.float32
+
+    model_id = "distil-whisper/distil-medium.en"
+    model = AutoModelForSpeechSeq2Seq.from_pretrained(
+        model_id, torch_dtype=torch_dtype, low_cpu_mem_usage=True, use_safetensors=True
+    )
+    model.to(device)
+    processor = AutoProcessor.from_pretrained(model_id)
+    return pipeline(
+        "automatic-speech-recognition",
+        model=model,
+        tokenizer=processor.tokenizer,
+        feature_extractor=processor.feature_extractor,
+        max_new_tokens=128,
+        torch_dtype=torch_dtype,
+        device=device,
+    )
+
+
+whisper_pipe = init_speech_to_text_model()
+
+
+def query(payload: dict):
+    response = requests.post(API_URL, headers=headers, json=payload)
+    return response.json()
+
+
+def generate_text(card_text: str, user_request: str) -> (str, str, str):
+    # Prompt must apply the correct chat template for the model see:
+    # https://huggingface.co/docs/transformers/main/en/chat_templating
+    prompt = f"""<|system|>
+You create Dungeons & Dragons monsters based on the user's request.
+# RULES
+- In your response always generate a new monster.
+- Only generate one monster, no other dialogue.
+- Surround monster info in triple backticks (```).
+- Format the monster text using headers like in the example below:
+```
+Name: Jabberwock
+Type: Medium humanoid (human), neutral evil
+Description: A Jabberwock is a creature of the Deep Sea.
+
+Stats:
+Armor Class: 15 (breastplate)
+Hit Points: 22 (5d8 + 5)
+Speed: 30 ft
+STR: 8 (-1)
+DEX: 14 (+2)
+CON: 12 (+1)
+INT: 2 (-4)
+WIS: 10 (+0)
+CHA: 4 (-3)
+Skills: Perception +3
+Senses: darkvision 60 ft., passive Perception 14
+Languages: —
+Challenge: 1/4 (50 XP)
+
+Passives:
+Legendary Resistance (3/Day): If the Jabberwock fails a saving throw, it can choose to succeed instead
+
+Actions:
+Bite: Melee Weapon Attack: +5 to hit, reach 5 ft., one target. Hit: 6 (1d8 + 3) piercing damage.
+Claws (Recharge 5-6): Melee Weapon Attack: +5 to hit, reach 5 ft., one target. Hit: 6 (1d10 + 3) slashing damage.
+```</s>
+<|user|>
+{user_request}</s>
+<|assistant|>
+"""
+    if card_text and card_text != starting_text:
+        prompt = f"""<|system|>
+You edit Dungeons & Dragons monsters based on the user's request.
+# RULES
+- In your response always generate a new monster.
+- Only generate one monster, no other dialogue.
+- Surround monster info in triple backticks (```).
+- Format the monster text using headers like in the example below:
+```
+Name: Jabberwock
+Type: Medium humanoid (human), neutral evil
+Description: A Jabberwock is a creature of the Deep Sea.
+
+Stats:
+Armor Class: 15 (breastplate)
+Hit Points: 22 (5d8 + 5)
+Speed: 30 ft
+STR: 8 (-1)
+DEX: 14 (+2)
+CON: 12 (+1)
+INT: 2 (-4)
+WIS: 10 (+0)
+CHA: 4 (-3)
+Skills: Perception +3
+Senses: darkvision 60 ft., passive Perception 14
+Languages: —
+Challenge: 1/4 (50 XP)
+
+Passives:
+Legendary Resistance (3/Day): If the Jabberwock fails a saving throw, it can choose to succeed instead
+
+Actions:
+Bite: Melee Weapon Attack: +5 to hit, reach 5 ft., one target. Hit: 6 (1d8 + 3) piercing damage.
+Claws (Recharge 5-6): Melee Weapon Attack: +5 to hit, reach 5 ft., one target. Hit: 6 (1d10 + 3) slashing damage.
+```</s>
+<|user|>
+# CARD TO EDIT
+```
+{card_text}
+```
+# EDIT REQUEST
+{user_request}</s>
+<|assistant|>
+"""
+    print(f"Calling API with prompt:\n{prompt}")
+    params = {"max_new_tokens": 512}
+    output = query({"inputs": prompt, "parameters": params})
+    if 'error' in output:
+        print(f'Language model call failed: {output["error"]}')
+        raise gr.Warning(f'Language model call failed: {output["error"]}')
+    print(f'API RESPONSE SIZE: {len(output[0]["generated_text"])}')
+    assistant_reply = output[0]["generated_text"].split('<|assistant|>')[1]
+    print(f'ASSISTANT REPLY:\n{assistant_reply}')
+    new_card_text = assistant_reply.split('```')
+    if len(new_card_text) > 1:
+        new_card_text = new_card_text[1].strip() + '\n'
+    else:
+        return assistant_reply, assistant_reply, None
+    return assistant_reply, new_card_text, None
+
+
+def extract_text_for_header(text, header):
+    match = re.search(fr"{header}: (.*)", text)
+    if match is None:
+        return ''
+    return match.group(1)
+
+
+def remove_section(html, html_class):
+    match = re.search(f'<li class="{html_class}"([\w\W])*?li>', html)
+    if match is not None:
+        html = html.replace(match.group(0), '')
+        return html
+
+
+def format_html(monster_text, image_data):
+    print('FORMATTING MONSTER TEXT')
+    # see giffyglyph's monster maker https://giffyglyph.com/monstermaker/app/
+    # Different Formatting style examples and some json export formats
+    card = pathlib.Path('monsterMakerTemplate.html').read_text()
+    if not isinstance(image_data, (bytes, bytearray)):
+        card = card.replace('{image_data}', f'{image_data}')
+    else:
+        card = card.replace('{image_data}', f'data:image/png;base64,{image_data.decode("utf-8")}')
+    name = extract_text_for_header(monster_text, 'Name')
+    card = card.replace('{name}', name)
+    monster_type = extract_text_for_header(monster_text, 'Type')
+    card = card.replace('{monster_type}', monster_type)
+    armor_class = extract_text_for_header(monster_text, 'Armor Class')
+    card = card.replace('{armor_class}', armor_class)
+    hit_points = extract_text_for_header(monster_text, 'Hit Points')
+    card = card.replace('{hit_points}', hit_points)
+    speed = extract_text_for_header(monster_text, 'Speed')
+    card = card.replace('{speed}', speed)
+    str_stat = extract_text_for_header(monster_text, 'STR')
+    card = card.replace('{str_stat}', str_stat)
+    dex_stat = extract_text_for_header(monster_text, 'DEX')
+    card = card.replace('{dex_stat}', dex_stat)
+    con_stat = extract_text_for_header(monster_text, 'CON')
+    card = card.replace('{con_stat}', con_stat)
+    int_stat = extract_text_for_header(monster_text, 'INT')
+    card = card.replace('{int_stat}', int_stat)
+    wis_stat = extract_text_for_header(monster_text, 'WIS')
+    card = card.replace('{wis_stat}', wis_stat)
+    cha_stat = extract_text_for_header(monster_text, 'CHA')
+    card = card.replace('{cha_stat}', cha_stat)
+    saving_throws = extract_text_for_header(monster_text, 'Saving Throws')
+    card = card.replace('{saving_throws}', saving_throws)
+    if not saving_throws:
+        card = remove_section(card, 'monster-saves')
+    skills = extract_text_for_header(monster_text, 'Skills')
+    card = card.replace('{skills}', skills)
+    if not skills:
+        card = remove_section(card, 'monster-skills')
+    damage_vulnerabilities = extract_text_for_header(monster_text, 'Damage Vulnerabilities')
+    card = card.replace('{damage_vulnerabilities}', damage_vulnerabilities)
+    if not damage_vulnerabilities:
+        card = remove_section(card, 'monster-vulnerabilities')
+    damage_resistances = extract_text_for_header(monster_text, 'Damage Resistances')
+    card = card.replace('{damage_resistances}', damage_resistances)
+    if not damage_resistances:
+        card = remove_section(card, 'monster-resistances')
+    damage_immunities = extract_text_for_header(monster_text, 'Damage Immunities')
+    card = card.replace('{damage_immunities}', damage_immunities)
+    if not damage_immunities:
+        card = remove_section(card, 'monster-immunities')
+    condition_immunities = extract_text_for_header(monster_text, 'Condition Immunities')
+    card = card.replace('{condition_immunities}', condition_immunities)
+    if not condition_immunities:
+        card = remove_section(card, 'monster-conditions')
+    senses = extract_text_for_header(monster_text, 'Senses')
+    card = card.replace('{senses}', senses)
+    if not senses:
+        card = remove_section(card, 'monster-senses')
+    languages = extract_text_for_header(monster_text, 'Languages')
+    card = card.replace('{languages}', languages)
+    if not languages:
+        card = remove_section(card, 'monster-languages')
+    challenge = extract_text_for_header(monster_text, 'Challenge')
+    card = card.replace('{challenge}', challenge)
+    if not challenge:
+        card = remove_section(card, 'monster-challenge')
+
+    description = extract_text_for_header(monster_text, 'Description')
+    card = card.replace('{description}', description)
+
+    match = re.search(r"Passives:\n([\w\W]*)", monster_text)
+    if match is None:
+        passives = ''
+    else:
+        passives = match.group(1)
+    p = passives.split(':')
+    if len(p) > 1:
+        p = ":".join(p)
+        p = p.split('\n')
+        passives_data = ''
+        for x in p:
+            x = x.split(':')
+            if len(x) > 1:
+                trait = x[0]
+                if trait == "Passives":
+                    continue
+                if 'Action' in trait:
+                    break
+                detail = ":".join(x[1:])
+                passives_data += f'<div class="monster-trait"><p><span class="name">{trait}</span> <span class="detail">{detail}</span></p></div>'
+        card = card.replace('{passives}', passives_data)
+    else:
+        card = card.replace('{passives}', f'<div class="monster-trait"><p>{passives}</p></div>')
+
+    match = re.search(r"Actions:\n([\w\W]*)", monster_text)
+    if match is None:
+        actions = ''
+    else:
+        actions = match.group(1)
+    a = actions.split(':')
+    if len(a) > 1:
+        a = ":".join(a)
+        a = a.split('\n')
+        actions_data = ''
+        for x in a:
+            x = x.split(':')
+            if len(x) > 1:
+                action = x[0]
+                if action == "Actions":
+                    continue
+                if 'Passive' in action:
+                    break
+                detail = ":".join(x[1:])
+                actions_data += f'<div class="monster-action"><p><span class="name">{action}</span> <span class="detail">{detail}</span></p></div>'
+        card = card.replace('{actions}', actions_data)
+    else:
+        card = card.replace('{actions}', f'<div class="monster-action"><p>{actions}</p></div>')
+
+    # TODO: Legendary actions, reactions, make column count for format an option (1 or 2 column layout)
+
+    card = card.replace('Melee or Ranged Weapon Attack:', '<i>Melee or Ranged Weapon Attack:</i>')
+    card = card.replace('Melee Weapon Attack:', '<i>Melee Weapon Attack:</i>')
+    card = card.replace('Ranged Weapon Attack:', '<i>Ranged Weapon Attack:</i>')
+    card = card.replace('Hit:', '<i>Hit:</i>')
+
+    print('FORMATTING MONSTER TEXT COMPLETE')
+    return card
+
+
+def get_savename(directory, name, extension):
+    save_name = f"{name}.{extension}"
+    i = 1
+    while os.path.exists(os.path.join(directory, save_name)):
+        save_name = save_name.replace(f'.{extension}', '').split('-')[0] + f"-{i}.{extension}"
+        i += 1
+    return save_name
+
+
+def trim(im, border):
+    bg = Image.new(im.mode, im.size, border)
+    diff = ImageChops.difference(im, bg)
+    bbox = diff.getbbox()
+    if bbox:
+        return im.crop(bbox)
+
+
+def crop_background(image):
+    white = (255, 255, 255)
+    ImageDraw.floodfill(image, (image.size[0] - 1, 0), white, thresh=50)
+    image = trim(image, white)
+    return image
+
+
+def html_to_png(card_name, html):
+    save_name = get_savename('rendered_cards', card_name, 'png')
+    print('CONVERTING HTML CARD TO PNG IMAGE')
+
+    path = os.path.join('rendered_cards', save_name)
+    try:
+        css = ['./css/mana.css', './css/keyrune.css',
+               './css/mtg_custom.css']
+        imgkit.from_string(html, path, {"xvfb": "", "enable-local-file-access": ""}, css=css)
+    except Exception as e:
+        try:
+            # For Windows local, requires 'html2image' package from pip.
+            from html2image import Html2Image
+            rendered_card_dir = 'rendered_cards'
+            hti = Html2Image(output_path=rendered_card_dir)
+            paths = hti.screenshot(html_str=html,
+                                   css_file='monstermaker.css',
+                                   save_as=save_name, size=(800, 1440))
+            print(paths)
+            path = paths[0]
+        except:
+            pass
+    print('OPENING IMAGE FROM FILE')
+    img = Image.open(path).convert("RGB")
+    print('CROPPING BACKGROUND')
+    img = crop_background(img)
+    print('CONVERTING HTML CARD TO PNG IMAGE COMPLETE')
+    return img
+
+
+def get_initial_card():
+    return Image.open('SampleCard.png')
+
+
+def pil_to_base64(image):
+    print('CONVERTING PIL IMAGE TO BASE64 STRING')
+    buffered = BytesIO()
+    image.save(buffered, format="PNG")
+    img_str = base64.b64encode(buffered.getvalue())
+    print('CONVERTING PIL IMAGE TO BASE64 STRING COMPLETE')
+    return img_str
+
+
+def generate_card(image: str, card_text: str):
+    image_data = pil_to_base64(Image.open(image))
+    html = format_html(card_text, image_data)
+    pattern = re.compile('Name: (.*)')
+    name = pattern.findall(card_text)[0]
+    card = html_to_png(name, html)
+    return card
+
+
+def transcribe(audio: str) -> (str, str):
+    result = whisper_pipe(audio)
+    return result["text"], None
+
+
+starting_text = """Name: Jabberwock
+Type: Medium humanoid (human), neutral evil
+Description: A Jabberwock is a creature of the Deep Sea.
+
+Stats:
+Armor Class: 15 (breastplate)
+Hit Points: 22 (5d8 + 5)
+Speed: 30 ft
+STR: 8 (-1)
+DEX: 14 (+2)
+CON: 12 (+1)
+INT: 2 (-4)
+WIS: 10 (+0)
+CHA: 4 (-3)
+Skills: Perception +3
+Senses: darkvision 60 ft., passive Perception 14
+Languages: —
+Challenge: 1/4 (50 XP)
+
+Passives:
+Legendary Resistance (3/Day): If the Jabberwock fails a saving throw, it can choose to succeed instead
+
+Actions:
+Bite: Melee Weapon Attack: +5 to hit, reach 5 ft., one target. Hit: 6 (1d8 + 3) piercing damage.
+Claws (Recharge 5-6): Melee Weapon Attack: +5 to hit, reach 5 ft., one target. Hit: 6 (1d10 + 3) slashing damage."""
+
+
+def generate_image(card_text: str):
+    pattern = re.compile('Name: (.*)')
+    name = pattern.findall(card_text)[0]
+    pattern = re.compile('Type: (.*)')
+    card_type = pattern.findall(card_text)[0]
+    prompt = f"fantasy illustration of a {card_type} {name}, by Greg Rutkowski"
+    print(f'Calling image generation with prompt: {prompt}')
+    try:
+        result = client.predict(
+            prompt,  # str  in 'parameter_5' Textbox component
+            0.3,  # float (numeric value between 0.0 and 5) in 'Guidance' Slider component
+            4,  # float (numeric value between 2 and 10) in 'Steps' Slider component
+            random.randint(0, 12013012031030),
+            # float (numeric value between 0 and 12013012031030) in 'Seed' Slider component
+            api_name="/predict"
+        )
+        print(result)
+        return result
+    except Exception as e:
+        print(f'Failed to generate image from client: {e}')
+        return 'placeholder.png'
+
+
+def add_hotkeys() -> str:
+    return pathlib.Path("hotkeys.js").read_text()
+
+
+with gr.Blocks(title='MonsterGen') as demo:
+    gr.Markdown("# 👹 MonsterGenV2")
+    gr.Markdown("## Generate and Edit D&D Monsters with a Chat Assistant")
+    with gr.Row():
+        with gr.Column():
+            with gr.Group():
+                audio_in = gr.Microphone(label="Record a voice request (click or press ctrl + ` to start/stop)",
+                                         type='filepath', elem_classes=["record-btn"])
+                prompt_in = gr.Textbox(label="Or type a text request and press Enter", interactive=True,
+                                       placeholder="Need an idea? Try one of these:\n- Create a creature card named 'WiFi Elemental'\n- Make it an instant\n- Change the color")
+            with gr.Accordion(label='🤖 Chat Assistant Response', open=False):
+                bot_text = gr.TextArea(label='Response', interactive=False)
+    with gr.Row():
+        with gr.Column():
+            in_text = gr.TextArea(label="Card Text (Shift+Enter to submit)", value=starting_text)
+            gen_image_button = gr.Button('🖼️ Generate Card Image')
+            in_image = gr.Image(label="Card Image (256px x 256px)", type='filepath', value='placeholder.png')
+            render_button = gr.Button('🎴 Render Card', variant="primary")
+            gr.ClearButton([audio_in, prompt_in, in_text, in_image])
+        with gr.Column():
+            out_image = gr.Image(label="Rendered Card", value=get_initial_card())
+
+    transcribe_params = {'fn': transcribe, 'inputs': [audio_in], 'outputs': [prompt_in, audio_in]}
+    generate_text_params = {'fn': generate_text, 'inputs': [in_text, prompt_in],
+                            'outputs': [bot_text, in_text, audio_in]}
+    generate_image_params = {'fn': generate_image, 'inputs': [in_text], 'outputs': [in_image]}
+    generate_card_params = {'fn': generate_card, 'inputs': [in_image, in_text], 'outputs': [out_image]}
+    # Shift + Enter to submit text in TextAreas
+    audio_in.stop_recording(**transcribe_params).then(**generate_text_params).then(**generate_image_params).then(
+        **generate_card_params)
+    prompt_in.submit(**generate_text_params).then(**generate_image_params).then(**generate_card_params)
+    in_text.submit(**generate_card_params)
+    render_button.click(**generate_card_params)
+    gen_image_button.click(**generate_image_params).then(**generate_card_params)
+    demo.load(None, None, None, js=add_hotkeys())
+
+if __name__ == "__main__":
+    demo.queue().launch(favicon_path="favicon-96x96.png")

hotkeys.js

@@ -0,0 +1,22 @@
+() => {
+    function gradioApp() {
+        const elems = document.getElementsByTagName('gradio-app');
+        const elem = elems.length == 0 ? document : elems[0];
+
+        if (elem !== document) {
+            elem.getElementById = function(id) {
+                return document.getElementById(id);
+            };
+        }
+        return elem.shadowRoot ? elem.shadowRoot : elem;
+    }
+    window.addEventListener('keydown', (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key == "`") { // CTRL + ` key
+            const recordButtons = [...gradioApp().querySelectorAll('button.record.record-button')].filter(x => x.checkVisibility());
+            const stopButtons = [...gradioApp().querySelectorAll('button.stop-button')].filter(x => x.checkVisibility());
+            for (let button of recordButtons.concat(stopButtons)) {
+                button.click();
+            }
+        }
+    });
+}

monsterMakerTemplate.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"
+          crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css"
+          href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/b-1.5.6/b-colvis-1.5.6/datatables.min.css">
+    <link rel="stylesheet" type="text/css"
+          href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Alegreya+Sans+SC:700">
+    <link rel="stylesheet" type="text/css" href="monstermaker.css">
+</head>
+
+<body>
+<div class="monster theme-5e columns-2">
+    <div class="monster-contents">
+        <div class="monster-contents-header"></div>
+        <div class="monster-contents-body">
+            <div class="monster-image inline">
+					<img src="{image_data}" alt="Picture of {name}" />
+            </div>
+            <div class="monster-header">
+                <div>
+                    <h4>{name}</h4>
+                    <p class="monster-description">{monster_type}</p>
+                </div>
+            </div>
+            <hr>
+            <ul>
+                <li class="monster-ac">
+                    <p>
+                        <span class="label">Armor Class</span>
+                        <span>{armor_class}</span>
+                    </p>
+                </li>
+                <li class="monster-hp">
+                    <p>
+                        <span class="label">Hit Points</span>
+                        <span>{hit_points}</span>
+                    </p>
+                </li>
+                <li class="monster-speed">
+                    <p>
+                        <span class="label">Speed</span>
+                        <span>{speed}</span>
+                    </p>
+                </li>
+            </ul>
+            <hr>
+            <div class="monster-abilities">
+                <div class="monster-ability">
+                    <span class="label">Str</span>
+                    <span>{str_stat}</span>
+                </div>
+                <div class="monster-ability">
+                    <span class="label">Dex</span>
+                    <span>{dex_stat}</span>
+                </div>
+                <div class="monster-ability">
+                    <span class="label">Con</span>
+                    <span>{con_stat}</span>
+                </div>
+                <div class="monster-ability">
+                    <span class="label">Int</span>
+                    <span>{int_stat}</span>
+                </div>
+                <div class="monster-ability">
+                    <span class="label">Wis</span>
+                    <span>{wis_stat}</span>
+                </div>
+                <div class="monster-ability">
+                    <span class="label">Cha</span>
+                    <span>{cha_stat}</span>
+                </div>
+            </div>
+            <hr>
+            <ul class="monster-stats">
+                <li class="monster-saves">
+                    <p>
+                        <span class="label">Saving Throws</span>
+                        <span>{saving_throws}</span>
+                    </p>
+                </li>
+                <li class="monster-skills">
+                    <p>
+                        <span class="label">Skills</span>
+                        <span>{skills}</span>
+                    </p>
+                </li>
+                <li class="monster-vulnerabilities">
+                    <p>
+                        <span class="label">Damage Vulnerabilities</span>
+                        <span>{damage_vulnerabilities}</span>
+                    </p>
+                </li>
+                <li class="monster-resistances">
+                    <p>
+                        <span class="label">Damage Resistances</span>
+                        <span>{damage_resistances}</span>
+                    </p>
+                </li>
+                <li class="monster-immunities">
+                    <p>
+                        <span class="label">Damage Immunities</span>
+                        <span>{damage_immunities}</span>
+                    </p>
+                </li>
+                <li class="monster-conditions">
+                    <p>
+                        <span class="label">Condition Immunities</span>
+                        <span>{condition_immunities}</span>
+                    </p>
+                </li>
+                <li class="monster-senses">
+                    <p>
+                        <span class="label">Senses</span>
+                        <span>{senses}</span>
+                    </p>
+                </li>
+                <li class="monster-languages">
+                    <p>
+                        <span class="label">Languages</span>
+                        <span>{languages}</span>
+                    </p>
+                </li>
+                <li class="monster-challenge">
+                    <p>
+                        <span class="label">Challenge</span>
+                        <span>{challenge}</span>
+                    </p>
+                </li>
+            </ul>
+            <hr>
+            <h5 class="h5-traits">Traits</h5>
+            <div class="h5-border"></div>
+            {passives}
+            <h5>Actions</h5>
+            <div class="h5-border"></div>
+            {actions}
+            <h5 class="h5-notes">Notes</h5>
+            <div class="h5-border"></div>
+            <div class="monster-notes">
+                <p class="note">{description}</p>
+            </div>
+            <p class="monster-footer">Made by MonsterGen</p>
+        </div>
+        <div class="monster-contents-footer"></div>
+    </div>
+</div>
+</body>
+
+</html>

monstermaker.css

@@ -0,0 +1,1493 @@
+.alert > :last-child {
+  margin-bottom: 0; }
+
+.alert-default {
+  border: 4px solid #dee2e6;
+  border-radius: 1em; }
+
+.app {
+  display: grid;
+  min-height: 100vh;
+  min-width: 300px;
+  grid-template-rows: 1fr auto;
+  grid-template-columns: 100%; }
+  .app .app-container {
+    max-width: 1200px;
+    margin: 0 auto; }
+
+.app .app-body {
+  background: #666f7f;
+  margin-top: 6.25rem;
+  display: flex;
+  flex-direction: column; }
+  .app .app-body .app-container {
+    padding: 0.5rem 10px;
+    width: 100%;
+    flex-grow: 1; }
+
+.app .app-header {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+  box-shadow: 0 0.25rem 0.75rem 0 #505762; }
+  @media screen and (min-width: 801px) {
+    .app .app-header .app-header-navbar {
+      display: none; } }
+  .app .app-header .app-header-heading {
+    background: #22252a; }
+    .app .app-header .app-header-heading .app-container {
+      padding: 0.625rem 10px;
+      display: grid;
+      grid-template-columns: auto repeat(8, 2rem);
+      grid-column-gap: 0.25rem;
+      align-items: end; }
+      @media screen and (max-width: 800px) {
+        .app .app-header .app-header-heading .app-container {
+          grid-template-columns: auto repeat(2, 2rem); }
+          .app .app-header .app-header-heading .app-container .btn:not(.btn-patreon):not(.btn-menu) {
+            display: none; } }
+      @media screen and (min-width: 801px) {
+        .app .app-header .app-header-heading .app-container .btn-menu {
+          display: none; } }
+    .app .app-header .app-header-heading h1 {
+      text-transform: uppercase;
+      font-weight: bold;
+      display: flex;
+      flex-direction: row;
+      line-height: 1;
+      margin: 0; }
+      .app .app-header .app-header-heading h1 img {
+        height: 2.5rem;
+        width: 2.5rem;
+        border: 2px solid #666f7f;
+        padding: 2px;
+        box-sizing: border-box;
+        border-radius: 100%;
+        margin-right: 0.325rem; }
+      .app .app-header .app-header-heading h1 a {
+        display: flex;
+        flex-direction: column; }
+        .app .app-header .app-header-heading h1 a span:first-of-type {
+          font-size: 0.95rem;
+          color: #da3737;
+          letter-spacing: 1px; }
+        .app .app-header .app-header-heading h1 a span:last-of-type {
+          color: #FFFFFF;
+          font-size: 1.9rem;
+          margin-bottom: -0.35rem; }
+        .app .app-header .app-header-heading h1 a:hover {
+          text-decoration: none; }
+          .app .app-header .app-header-heading h1 a:hover span:last-of-type {
+            text-decoration: underline;
+            text-decoration-color: #da3737; }
+    .app .app-header .app-header-heading .btn {
+      height: 2rem;
+      border-radius: 100%;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1rem;
+      background-color: #666f7f;
+      border-color: #666f7f;
+      line-height: 1;
+      padding: 0; }
+      .app .app-header .app-header-heading .btn .fas,
+      .app .app-header .app-header-heading .btn .fab {
+        background: none;
+        padding: 0;
+        margin: 0; }
+      .app .app-header .app-header-heading .btn:hover {
+        background: #da3737;
+        border-color: #da3737; }
+      .app .app-header .app-header-heading .btn.btn-patreon {
+        background-color: #e85b46;
+        border-color: #e85b46; }
+        .app .app-header .app-header-heading .btn.btn-patreon:hover {
+          color: #e85b46;
+          background-color: #FFFFFF;
+          border-color: #FFFFFF; }
+  .app .app-header .app-header-navbar {
+    background: #22252a; }
+    .app .app-header .app-header-navbar .navbar {
+      padding: 0; }
+      .app .app-header .app-header-navbar .navbar .nav-item {
+        padding-left: 0.625rem;
+        padding-right: 0.625rem; }
+        .app .app-header .app-header-navbar .navbar .nav-item + .nav-item {
+          border-top: 1px dotted #444a54; }
+        .app .app-header .app-header-navbar .navbar .nav-item a {
+          color: white;
+          font-weight: bold; }
+          .app .app-header .app-header-navbar .navbar .nav-item a:hover {
+            color: #da3737; }
+        .app .app-header .app-header-navbar .navbar .nav-item button {
+          padding: 0;
+          color: white;
+          font-weight: bold;
+          display: block;
+          padding: 0.5rem 0;
+          background: none;
+          border: none;
+          box-shadow: none;
+          width: 100%;
+          text-align: left; }
+          .app .app-header .app-header-navbar .navbar .nav-item button:hover {
+            color: #da3737;
+            cursor: pointer; }
+        .app .app-header .app-header-navbar .navbar .nav-item .fab,
+        .app .app-header .app-header-navbar .navbar .nav-item .fas {
+          width: 2.5rem;
+          text-align: center;
+          margin-right: 0.325rem; }
+        .app .app-header .app-header-navbar .navbar .nav-item:first-child {
+          border-top: 1px solid #444a54; }
+        .app .app-header .app-header-navbar .navbar .nav-item:last-child {
+          border-bottom: 1px solid #444a54; }
+        .app .app-header .app-header-navbar .navbar .nav-item .nav-link-detail {
+          color: #666f7f; }
+
+.app .app-header .app-header-navigation {
+  background: #2d3138; }
+  .app .app-header .app-header-navigation .app-container {
+    padding: 0 10px; }
+  .app .app-header .app-header-navigation .nav {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr); }
+    .app .app-header .app-header-navigation .nav .nav-item {
+      text-align: center;
+      font-weight: bold; }
+      .app .app-header .app-header-navigation .nav .nav-item .nav-link {
+        color: #666f7f;
+        padding: 0.5rem 0.5rem 0.25rem;
+        border-radius: 0;
+        border-bottom: 0.25rem solid #22252a; }
+        .app .app-header .app-header-navigation .nav .nav-item .nav-link .badge {
+          background: rgba(102, 111, 127, 0.5); }
+        .app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover {
+          border-bottom: 0.25rem solid rgba(218, 55, 55, 0.5);
+          color: rgba(255, 255, 255, 0.5); }
+          .app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover .fas,
+          .app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover .fab {
+            color: rgba(218, 55, 55, 0.5); }
+        @media screen and (max-width: 800px) {
+          .app .app-header .app-header-navigation .nav .nav-item .nav-link .nav-link-text,
+          .app .app-header .app-header-navigation .nav .nav-item .nav-link .badge {
+            display: none; } }
+      .app .app-header .app-header-navigation .nav .nav-item .active {
+        background: none;
+        border-radius: 0;
+        border-bottom: 0.25rem solid #da3737;
+        color: white; }
+        .app .app-header .app-header-navigation .nav .nav-item .active .badge {
+          background: #666f7f; }
+        .app .app-header .app-header-navigation .nav .nav-item .active .fas,
+        .app .app-header .app-header-navigation .nav .nav-item .active .fab {
+          color: #da3737; }
+      .app .app-header .app-header-navigation .nav .nav-item .fas,
+      .app .app-header .app-header-navigation .nav .nav-item .fab {
+        margin-right: 0.325rem; }
+      .app .app-header .app-header-navigation .nav .nav-item .badge {
+        border-radius: 1cm;
+        font-size: inherit;
+        padding: 0.1625rem 0.325rem; }
+
+.app .app-footer {
+  background: #565e6b;
+  text-align: center; }
+  .app .app-footer .app-container {
+    padding: 1.25rem 10px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 2fr;
+    text-align: left; }
+    @media screen and (max-width: 800px) {
+      .app .app-footer .app-container {
+        grid-template-columns: 1fr;
+        grid-row-gap: 0.5rem;
+        text-align: center; }
+        .app .app-footer .app-container p {
+          text-align: center; } }
+  .app .app-footer a {
+    color: inherit;
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    text-decoration: none;
+    display: inline-block; }
+    .app .app-footer a:hover {
+      color: #da3737; }
+  .app .app-footer p {
+    text-align: right;
+    margin: 0;
+    color: #f1f2f3;
+    font-size: 0.9rem; }
+    .app .app-footer p a:not(:first-of-type) {
+      margin-left: 0.75rem; }
+    .app .app-footer p .fab {
+      font-size: 2rem;
+      color: #9ca3af;
+      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
+      .app .app-footer p .fab:hover {
+        color: #da3737; }
+  .app .app-footer ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: 0.9rem;
+    color: #f1f2f3; }
+  .app .app-footer h5 {
+    color: #9ca3af;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    font-weight: bold; }
+  .app .app-footer .links > :not(:last-child) {
+    margin-bottom: 0.5rem; }
+
+html {
+  font-size: 16px; }
+  @media screen and (max-width: 400px) {
+    html {
+      font-size: 12px; } }
+
+body {
+  font-family: 'Roboto', sans-serif;
+  background: #666f7f; }
+
+a {
+  color: #da3737; }
+  a:hover {
+    color: #da3737; }
+
+.breadcrumbs {
+  background: #565e6b;
+  margin-top: 0.5rem;
+  color: #dee2e6;
+  font-size: 0.9em; }
+  @media screen and (max-width: 800px) {
+    .breadcrumbs {
+      display: none; } }
+  .breadcrumbs .app-container {
+    padding: 0.5rem 10px;
+    max-width: 1200px;
+    margin: 0 auto; }
+  .breadcrumbs .divider,
+  .breadcrumbs .fas {
+    margin: 0 0.25rem;
+    color: #dee2e6; }
+  .breadcrumbs a {
+    color: inherit; }
+    .breadcrumbs a:hover {
+      color: white; }
+
+.btn {
+  border-radius: 2rem;
+  padding: 0 0.75rem 0 0; }
+  .btn .fas,
+  .btn .fab {
+    background: #da3737;
+    padding: 0.325rem;
+    line-height: inherit;
+    border-radius: 2rem;
+    margin: 0 0.325rem 0 0; }
+    .btn .fas:before,
+    .btn .fab:before {
+      min-width: 1.5rem;
+      display: block;
+      text-align: center; }
+  .btn.icon-only .fas,
+  .btn.icon-only .fab {
+    margin-right: -0.75rem; }
+  .btn.btn-sm {
+    padding: 0 0.5rem 0 0; }
+    .btn.btn-sm .fas,
+    .btn.btn-sm .fab {
+      padding: 0;
+      margin: 0 0.25rem 0 0; }
+      .btn.btn-sm .fas::before,
+      .btn.btn-sm .fab::before {
+        min-width: 1.3rem; }
+    .btn.btn-sm.icon-only {
+      padding-right: 0; }
+      .btn.btn-sm.icon-only .fas,
+      .btn.btn-sm.icon-only .fab {
+        margin-right: 0; }
+
+.btn-primary {
+  color: #FFFFFF;
+  background-color: #2d3138;
+  border-color: #2d3138;
+  font-weight: bold; }
+  .btn-primary.icon-only:not(.icon-border) {
+    border-color: #da3737; }
+
+.btn-secondary {
+  color: #FFFFFF;
+  background-color: #666f7f;
+  border-color: #666f7f;
+  font-weight: bold; }
+  .btn-secondary.icon-only:not(.icon-border) {
+    border-color: #da3737; }
+
+.btn-primary,
+.btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  border-width: 2px; }
+  .btn-primary:hover, .btn-primary:not(:disabled):not(:disabled):active, .btn-primary.dropdown-toggle[aria-expanded="true"],
+  .btn-secondary:hover,
+  .btn-secondary:not(:disabled):not(:disabled):active,
+  .btn-secondary.dropdown-toggle[aria-expanded="true"] {
+    background-color: #da3737;
+    border-color: #da3737; }
+  .btn-primary:not(:disabled):not(:disabled):focus, .btn-primary:not(:disabled):not(:disabled):active:focus, .btn-primary.dropdown-toggle[aria-expanded="true"],
+  .btn-secondary:not(:disabled):not(:disabled):focus,
+  .btn-secondary:not(:disabled):not(:disabled):active:focus,
+  .btn-secondary.dropdown-toggle[aria-expanded="true"] {
+    box-shadow: 0 0 0 0.2rem rgba(218, 55, 55, 0.5); }
+
+.card {
+  border: 0;
+  background: none; }
+  .card .card-header {
+    background: #dee2e6;
+    border: 0;
+    color: #22252a;
+    font-size: larger;
+    font-weight: bold;
+    border-bottom: 4px solid #ccd1d6;
+    border-radius: 0.5rem 0.5rem 0 0;
+    font-size: 1.4rem; }
+    @media screen and (max-width: 400px) {
+      .card .card-header {
+        font-size: 1.35rem; } }
+    .card .card-header .card-icon {
+      background: #da3737;
+      padding: 0.325rem 0.75em 0.325rem 0.325em;
+      border-radius: 0 1cm 1cm 0;
+      line-height: inherit;
+      margin: -0.325rem 0 -0.325rem -1.25rem;
+      color: white; }
+      .card .card-header .card-icon::before {
+        min-width: 1.75rem;
+        text-align: center;
+        display: block; }
+    .card .card-header .divider {
+      color: #da3737; }
+    .card .card-header .subtitle {
+      font-weight: normal;
+      font-size: 0.8em; }
+  .card .card-body {
+    background: #FFFFFF; }
+  .card .card-footer {
+    background: #dee2e6;
+    border: 0;
+    border-radius: 0 0 0.5rem 0.5rem; }
+
+.dropdown {
+  display: inline-block; }
+  .dropdown .dropdown-item {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem; }
+    .dropdown .dropdown-item .fas {
+      margin-right: 0.75rem; }
+  .dropdown .icon-only::after {
+    display: none; }
+
+.dropdown-menu {
+  border: 1px solid #2d3138;
+  border-radius: .5rem;
+  box-shadow: 0px 2px 5px 0px #505762bf; }
+  .dropdown-menu button:hover {
+    cursor: pointer;
+    background: rgba(218, 55, 55, 0.15); }
+    .dropdown-menu button:hover .fas,
+    .dropdown-menu button:hover .fab {
+      color: #da3737; }
+  .dropdown-menu .dropdown-item .fas {
+    min-width: 1.1rem;
+    text-align: center; }
+  .dropdown-menu .dropdown-item.active,
+  .dropdown-menu .dropdown-item:active {
+    background: #da3737;
+    color: #FFFFFF; }
+    .dropdown-menu .dropdown-item.active .fas,
+    .dropdown-menu .dropdown-item.active .fab,
+    .dropdown-menu .dropdown-item:active .fas,
+    .dropdown-menu .dropdown-item:active .fab {
+      color: inherit; }
+
+.error {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column; }
+  .error .box {
+    color: #9ca3af;
+    border-radius: 1rem;
+    text-align: center;
+    padding: 1.25rem;
+    background: #565e6b; }
+    .error .box > :last-child {
+      margin-bottom: 0; }
+  .error .fas {
+    font-size: 4rem;
+    margin-bottom: 1rem; }
+
+.laboratory > .card-body {
+  padding: 0;
+  display: grid;
+  grid-template-columns: 380px 1fr; }
+  @media screen and (max-width: 840px) {
+    .laboratory > .card-body {
+      grid-template-columns: 344px 1fr; } }
+  @media screen and (max-width: 800px) {
+    .laboratory > .card-body {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto; } }
+.laboratory #laboratory-import-file {
+  display: none; }
+.laboratory .laboratory-blueprint {
+  background: #dee2e6; }
+
+.blueprint-form {
+  background: #dee2e6; }
+  .blueprint-form .btn-help {
+    color: #b1b7bd;
+    box-shadow: none;
+    margin-right: -0.25em; }
+    .blueprint-form .btn-help:hover {
+      color: #da3737; }
+    .blueprint-form .btn-help .fas {
+      background: none; }
+  .blueprint-form .card {
+    overflow: visible; }
+  .blueprint-form .card-body {
+    padding: 0;
+    overflow: visible; }
+    .blueprint-form .card-body .card-header {
+      border-bottom: 1px solid #ccd1d6; }
+  .blueprint-form form {
+    background: #FFFFFF; }
+  .blueprint-form form[data-method="quickstart"] .manual-only {
+    display: none; }
+  .blueprint-form form[data-method="manual"] .quickstart-only {
+    display: none; }
+  .blueprint-form form:not([data-rank="solo"]) .solo-only {
+    display: none; }
+  .blueprint-form .form-group {
+    margin: 0;
+    display: flex; }
+    .blueprint-form .form-group.hidden {
+      display: none; }
+    .blueprint-form .form-group:not(:last-child) {
+      border-bottom: 1px solid #dee2e6; }
+    .blueprint-form .form-group > label {
+      width: 7.5rem;
+      flex-shrink: 0;
+      margin: 0;
+      font-weight: bold;
+      padding: 0.325rem 0.75rem;
+      box-sizing: border-box;
+      display: flex;
+      text-align: right;
+      justify-content: flex-end;
+      border-right: 1px solid #dee2e6;
+      background: rgba(222, 226, 230, 0.5);
+      line-height: calc(2.375rem - 0.75rem); }
+    .blueprint-form .form-group input,
+    .blueprint-form .form-group select {
+      border: 0;
+      background: none; }
+    .blueprint-form .form-group input::placeholder {
+      color: rgba(102, 111, 127, 0.5); }
+    .blueprint-form .form-group select {
+      padding-left: 0.5rem; }
+    .blueprint-form .form-group textarea {
+      padding: .375rem .75rem;
+      border: 0;
+      width: 100%;
+      box-sizing: border-box;
+      resize: vertical;
+      color: #495057;
+      min-height: 2.375rem;
+      font-size: 0.8em; }
+    .blueprint-form .form-group > :last-child {
+      margin-bottom: 0; }
+    .blueprint-form .form-group.section-end {
+      border-bottom: 2px solid #dee2e6; }
+    .blueprint-form .form-group .flex-input {
+      width: 100%;
+      display: flex; }
+      .blueprint-form .form-group .flex-input span {
+        opacity: 0.5;
+        padding: 0 0.5em;
+        display: flex;
+        align-items: center;
+        color: #b2b7c9; }
+  .blueprint-form .form-radio-list {
+    width: 100%;
+    display: flex;
+    padding: .375rem .75rem; }
+    .blueprint-form .form-radio-list .form-check-input:checked ~ * {
+      background: #da3737;
+      color: #FFFFFF;
+      font-weight: bold; }
+    .blueprint-form .form-radio-list .form-check-input {
+      display: none; }
+    .blueprint-form .form-radio-list .form-check {
+      flex-grow: 1;
+      margin: 0;
+      flex-shrink: 0;
+      width: 50%; }
+      .blueprint-form .form-radio-list .form-check:first-child .form-check-label {
+        border-radius: 4px 0 0 4px; }
+      .blueprint-form .form-radio-list .form-check:last-child .form-check-label {
+        border-radius: 0 4px 4px 0; }
+    .blueprint-form .form-radio-list .form-check-label {
+      flex-grow: 1;
+      text-align: center;
+      background: #dee2e6;
+      text-transform: uppercase;
+      font-size: 0.75rem;
+      color: #666f7f; }
+    .blueprint-form .form-radio-list .form-check-label:hover {
+      cursor: pointer; }
+  .blueprint-form .repeatable-section .card-footer {
+    background: #eef0f2;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem; }
+  .blueprint-form .repeatable-item {
+    border-bottom: 2px solid #dee2e6;
+    position: relative; }
+    .blueprint-form .repeatable-item .dropdown-options {
+      position: absolute;
+      top: 0.325rem;
+      right: 0.75rem; }
+      .blueprint-form .repeatable-item .dropdown-options .btn {
+        border-color: #da3737; }
+    .blueprint-form .repeatable-item .dropdown-toggle {
+      opacity: .1; }
+      .blueprint-form .repeatable-item .dropdown-toggle:disabled {
+        display: none; }
+      .blueprint-form .repeatable-item .dropdown-toggle:hover, .blueprint-form .repeatable-item .dropdown-toggle[aria-expanded="true"] {
+        opacity: 1; }
+  .blueprint-form .accordion .card {
+    border-radius: 0; }
+    .blueprint-form .accordion .card .card-header {
+      padding: 0;
+      border-radius: 0;
+      display: flex;
+      border-bottom: 1px solid #ccd1d6;
+      margin-bottom: 0; }
+      .blueprint-form .accordion .card .card-header button {
+        background: #dee2e6;
+        display: block;
+        text-align: left;
+        font-weight: bold;
+        width: 100%;
+        color: #2d3138;
+        text-decoration: none;
+        padding: 0;
+        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+        border-radius: 0;
+        border: 0;
+        display: flex;
+        align-items: center;
+        padding: 0.1875rem 0; }
+        .blueprint-form .accordion .card .card-header button .title {
+          flex-grow: 1;
+          margin-left: 0.325rem; }
+        .blueprint-form .accordion .card .card-header button:hover, .blueprint-form .accordion .card .card-header button[aria-expanded="true"] {
+          background: #da3737;
+          color: #FFFFFF; }
+          .blueprint-form .accordion .card .card-header button:hover .badge, .blueprint-form .accordion .card .card-header button[aria-expanded="true"] .badge {
+            background: #FFFFFF;
+            color: #da3737; }
+        .blueprint-form .accordion .card .card-header button .fa-chevron-right::before {
+          position: relative;
+          left: 1px; }
+        .blueprint-form .accordion .card .card-header button[aria-expanded="true"] .fa-chevron-right::before {
+          transform: rotate(90deg); }
+      .blueprint-form .accordion .card .card-header .badge {
+        background-color: #b1b7bd;
+        border-radius: 1cm;
+        padding: 0 0.325rem;
+        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+        color: white;
+        float: right;
+        margin-right: 0.75rem;
+        line-height: 1.5; }
+      .blueprint-form .accordion .card .card-header .fas {
+        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+        color: white;
+        border-radius: 1cm;
+        margin: 0 0 0 0.325rem;
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center; }
+        .blueprint-form .accordion .card .card-header .fas::before {
+          transition: transform .15s ease-in-out; }
+    .blueprint-form .accordion .card .card-footer {
+      border-radius: 0; }
+    .blueprint-form .accordion .card .collapse.show {
+      border-bottom: 1px solid #ccd1d6; }
+  .blueprint-form > .card-footer {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem; }
+
+#modal-blueprint-traits .modal-body:not([filter='any']) .trait.any, #modal-blueprint-traits .modal-body:not([filter='controller']) .trait.controller, #modal-blueprint-traits .modal-body:not([filter='defender']) .trait.defender, #modal-blueprint-traits .modal-body:not([filter='lurker']) .trait.lurker, #modal-blueprint-traits .modal-body:not([filter='striker']) .trait.striker, #modal-blueprint-traits .modal-body:not([filter='supporter']) .trait.supporter, #modal-blueprint-traits .modal-body:not([filter='sniper']) .trait.sniper, #modal-blueprint-traits .modal-body:not([filter='scout']) .trait.scout {
+  display: none; }
+#modal-blueprint-traits .modal-body select {
+  margin-bottom: 1.25rem; }
+#modal-blueprint-traits .modal-body ul {
+  list-style: none;
+  padding-left: 0; }
+  #modal-blueprint-traits .modal-body ul .title {
+    margin: 0; }
+  #modal-blueprint-traits .modal-body ul .description {
+    font-size: small;
+    margin: 0; }
+#modal-blueprint-traits .modal-body .form-check:hover {
+  background: #eef0f2;
+  margin-left: -1.25rem;
+  margin-right: -1.25rem;
+  padding-left: 2.5rem;
+  padding-right: 1.25rem; }
+#modal-blueprint-traits .modal-body .form-check-label {
+  cursor: pointer;
+  padding-top: 0.325rem;
+  padding-bottom: 0.325rem;
+  width: 100%; }
+#modal-blueprint-traits .modal-body .form-check-input {
+  top: 0.325rem; }
+  #modal-blueprint-traits .modal-body .form-check-input:checked ~ label {
+    color: #da3737; }
+
+#modal-markdown .accordion-markdown-help table {
+  background: #dee2e659;
+  overflow: hidden;
+  border-radius: 0.5em;
+  border: none; }
+  #modal-markdown .accordion-markdown-help table td {
+    border: none; }
+#modal-markdown .accordion-markdown-help .card:not(:first-child) {
+  margin-top: 1rem; }
+#modal-markdown .accordion-markdown-help .collapse.show {
+  border-bottom: none; }
+#modal-markdown .accordion-markdown-help .card-header {
+  border: none;
+  background: none;
+  margin-left: -0.25em;
+  margin-right: -1em; }
+  #modal-markdown .accordion-markdown-help .card-header button {
+    background: #da3737;
+    color: #FFFFFF;
+    font-weight: bold;
+    padding-left: 0.1875rem;
+    padding-right: 0.5em;
+    border-radius: 1em 0 0 1em; }
+    #modal-markdown .accordion-markdown-help .card-header button::before {
+      content: "\f054";
+      transition: transform .15s ease-in-out;
+      font-family: "Font Awesome 5 Free";
+      -webkit-font-smoothing: antialiased;
+      font-style: normal;
+      font-variant: normal;
+      text-rendering: auto;
+      margin-right: 0.5em;
+      transform: rotate(90deg);
+      background: #da3737;
+      color: white;
+      width: 1.5em;
+      border-radius: 1em;
+      text-align: center; }
+    #modal-markdown .accordion-markdown-help .card-header button.collapsed::before {
+      transform: rotate(0deg); }
+    #modal-markdown .accordion-markdown-help .card-header button.collapsed:not(:hover) {
+      background: #dee2e6;
+      color: inherit; }
+#modal-markdown .accordion-markdown-help .card-body {
+  padding: 1rem 0 0; }
+  #modal-markdown .accordion-markdown-help .card-body > :last-child {
+    margin-bottom: 0; }
+
+.monster-preview {
+  background-color: #ccd1d6;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 1.25rem 10px;
+  background-image: linear-gradient(45deg, #ccd1d6 25%, #c6ccd1 25%, #c6ccd1 50%, #ccd1d6 50%, #ccd1d6 75%, #c6ccd1 75%, #c6ccd1 100%);
+  background-size: 10px 10px; }
+  .monster-preview .btn-png {
+    margin-top: 1.25rem;
+    box-shadow: 0px 5px 10px 0px #50576240; }
+    .monster-preview .btn-png .fas {
+      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
+    .monster-preview .btn-png:not(:hover) {
+      background: #FFFFFF;
+      border-color: #FFFFFF;
+      color: #666f7f; }
+      .monster-preview .btn-png:not(:hover) .fas {
+        color: #FFFFFF; }
+  .monster-preview .btn-columns {
+    margin-top: 1.25rem;
+    box-shadow: 0px 5px 10px 0px #50576240; }
+    .monster-preview .btn-columns .fas {
+      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
+    .monster-preview .btn-columns:not(:hover) {
+      background: #FFFFFF;
+      border-color: #FFFFFF; }
+      .monster-preview .btn-columns:not(:hover) .fas {
+        color: #da3737;
+        background: none; }
+
+.modal-backdrop.show {
+  opacity: 0.75; }
+
+.modal .modal-header {
+  background: #22252a;
+  color: white;
+  border-bottom: 0;
+  border-radius: 0;
+  padding: 0.75rem 1.25rem;
+  border-bottom: 4px solid #dee2e6; }
+  .modal .modal-header .card-icon {
+    background: #da3737;
+    padding: 0.325rem 0.75rem 0.325rem 0.325rem;
+    border-radius: 0 1cm 1cm 0;
+    line-height: inherit;
+    margin: -0.325rem 0 -0.325rem -1.25rem; }
+    .modal .modal-header .card-icon::before {
+      min-width: 1.75rem;
+      text-align: center;
+      display: block; }
+  .modal .modal-header .modal-title {
+    font-weight: bold; }
+  .modal .modal-header .close {
+    opacity: 1;
+    color: #2d3138;
+    text-shadow: none;
+    margin: -0.75rem -1.25rem -0.75rem auto;
+    padding: 0.9rem 1.25rem; }
+    .modal .modal-header .close span {
+      transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
+    .modal .modal-header .close:hover, .modal .modal-header .close:focus {
+      color: white;
+      outline: none;
+      opacity: 1; }
+      .modal .modal-header .close:hover span, .modal .modal-header .close:focus span {
+        background: #da3737; }
+    .modal .modal-header .close span {
+      background: #666f7f;
+      display: block;
+      border-radius: 1cm 0 0 1cm;
+      padding: 0 0.75rem 0 0.75rem;
+      margin-right: -1.25rem; }
+.modal .modal-content {
+  border: 1px solid transparent;
+  background: none;
+  overflow: hidden;
+  border: 2px solid #da3737;
+  border-radius: 0.75rem; }
+.modal .modal-body {
+  background: white;
+  padding: 1.25rem; }
+  .modal .modal-body > :last-child {
+    margin-bottom: 0; }
+.modal .modal-footer {
+  background: #dee2e6;
+  border-top: 0;
+  padding: 0.75rem 1.25rem; }
+
+#modal-settings .settings {
+  border: 4px solid #dee2e6;
+  border-radius: 1rem; }
+#modal-settings .setting .btn {
+  margin-left: 0.5rem; }
+#modal-settings .setting .content {
+  display: flex;
+  align-items: center;
+  padding: 0.75rem 1.25rem; }
+#modal-settings .setting .confirmation {
+  display: none;
+  color: #da3737;
+  padding: 0.75rem 1.25rem; }
+#modal-settings .setting .confirmed {
+  display: none;
+  color: green;
+  padding: 0.75rem 1.25rem; }
+  #modal-settings .setting .confirmed .fa-check-circle {
+    font-size: 2.5em; }
+#modal-settings .setting select.form-control {
+  width: auto;
+  margin-left: 1em;
+  cursor: pointer; }
+#modal-settings .setting.confirm .content,
+#modal-settings .setting.confirm .confirmed {
+  display: none; }
+#modal-settings .setting.confirm .confirmation {
+  display: flex;
+  align-items: center; }
+#modal-settings .setting.confirmed .content,
+#modal-settings .setting.confirmed .confirmation {
+  display: none; }
+#modal-settings .setting.confirmed .confirmed {
+  display: flex;
+  align-items: center; }
+#modal-settings .setting + .setting {
+  border-top: 2px solid #dee2e6; }
+#modal-settings .setting .description {
+  flex-grow: 1; }
+  #modal-settings .setting .description .title {
+    font-weight: bold;
+    margin: 0;
+    text-transform: uppercase;
+    font-size: 0.9rem; }
+  #modal-settings .setting .description > :last-child {
+    margin-bottom: 0; }
+
+#modal-gmbinder .modal-body {
+  white-space: pre-line;
+  font-family: monospace;
+  font-size: small; }
+
+.monster {
+  font-size: 0.875rem;
+  position: relative;
+  width: 28.6em;
+  box-shadow: 0px 5px 10px 0px #50576240;
+  display: flex;
+  flex-direction: column; }
+  .monster > :first-child {
+    margin-top: 0; }
+  .monster > :last-child {
+    margin-bottom: 0; }
+  .monster .monster-contents {
+    width: 100%; }
+    .monster .monster-contents .monster-contents-body {
+      padding: 1.42em;
+      background: white; }
+  .monster.quickstart:not(.rank-solo) .solo-only {
+    display: none; }
+  .monster.quickstart .monster-header .monster-quickstart {
+    font-size: 0.8em;
+    font-weight: bold;
+    text-align: right;
+    margin-left: 0.8em;
+    flex-shrink: 0; }
+  .monster .monster-image.inline + * {
+    margin-top: 1.42em; }
+  .monster .monster-image img {
+    width: 100%;
+    border-radius: 0.25em; }
+  .monster .monster-image.banner {
+    width: 100%; }
+    .monster .monster-image.banner img {
+      border-radius: 0; }
+  .monster .monster-core > :last-child {
+    margin-bottom: 0; }
+  .monster .monster-core + * {
+    margin-top: 0.57em; }
+  .monster .monster-header {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: flex-end; }
+    .monster .monster-header h4 {
+      font-weight: bold;
+      color: #9a1515;
+      margin: 0;
+      line-height: 1;
+      font-size: 2em;
+      font-family: "Alegreya Sans SC", sans-serif;
+      margin-top: -0.1em; }
+    .monster .monster-header p {
+      margin: 0; }
+    .monster .monster-header .monster-description {
+      font-style: italic;
+      font-size: 0.8em; }
+      .monster .monster-header .monster-description span:first-of-type {
+        display: inline-block; }
+        .monster .monster-header .monster-description span:first-of-type::first-letter {
+          text-transform: uppercase; }
+      .monster .monster-header .monster-description span + span::before {
+        content: " "; }
+      .monster .monster-header .monster-description * + .alignment::before {
+        content: ", "; }
+  .monster .monster-ac,
+  .monster .monster-hp,
+  .monster .monster-speed,
+  .monster .monster-saves,
+  .monster .monster-skills,
+  .monster .monster-languages,
+  .monster .monster-senses,
+  .monster .monster-immunities,
+  .monster .monster-vulnerabilities,
+  .monster .monster-resistances,
+  .monster .monster-conditions,
+  .monster .monster-challenge {
+    display: flex;
+    flex-wrap: wrap; }
+  .monster h5 {
+    font-weight: bold;
+    color: #9a1515;
+    font-family: "Alegreya Sans SC", sans-serif;
+    display: inline-block;
+    width: 100%;
+    margin-bottom: 0;
+    font-size: 1.45em;
+    margin-top: 0.36em !important; }
+    .monster h5 + * {
+      margin-top: 0.52em; }
+  .monster hr {
+    margin: 0.285em 0 0;
+    width: 100%;
+    min-height: 1px;
+    height: 0.143em;
+    border: 0;
+    background: linear-gradient(to right, rgba(154, 21, 21, 0.75), rgba(154, 21, 21, 0));
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid; }
+    .monster hr:first-of-type, .monster hr:last-of-type {
+      height: 0.2143em;
+      background: linear-gradient(to right, #9a1515, rgba(154, 21, 21, 0)); }
+    .monster hr + * {
+      margin-top: 0.285em; }
+    .monster hr:last-of-type + * {
+      margin-top: 0.57em; }
+  .monster .label {
+    font-weight: bold; }
+  .monster .monster-abilities {
+    display: inline-grid;
+    width: 100%;
+    grid-template-columns: repeat(6, 1fr);
+    text-align: center;
+    line-height: 1.4; }
+    .monster .monster-abilities .label {
+      color: #9a1515;
+      display: block;
+      text-transform: uppercase; }
+  .monster ul {
+    list-style: none;
+    padding: 0;
+    margin-bottom: 0; }
+    .monster ul .label {
+      color: #9a1515; }
+    .monster ul li > p {
+      margin: 0; }
+  .monster p {
+    margin-bottom: 0; }
+    .monster p + * {
+      margin-top: 0.57em; }
+  .monster .monster-trait + *,
+  .monster .monster-action + *,
+  .monster .monster-reaction + *,
+  .monster .monster-legendary-action + *,
+  .monster .monster-lair-action + * {
+    margin-top: 0.57em; }
+  .monster .monster-trait p + *,
+  .monster .monster-action p + *,
+  .monster .monster-reaction p + *,
+  .monster .monster-legendary-action p + *,
+  .monster .monster-lair-action p + * {
+    margin-top: 0.57em; }
+  .monster .monster-trait .name,
+  .monster .monster-action .name,
+  .monster .monster-reaction .name,
+  .monster .monster-legendary-action .name,
+  .monster .monster-lair-action .name {
+    font-weight: bold;
+    font-style: italic; }
+  .monster .monster-trait > :last-child,
+  .monster .monster-action > :last-child,
+  .monster .monster-reaction > :last-child,
+  .monster .monster-legendary-action > :last-child,
+  .monster .monster-lair-action > :last-child {
+    margin-bottom: 0; }
+  .monster .lair-initiative,
+  .monster .legendary-per-round,
+  .monster .paragon-actions {
+    font-size: 0.8em;
+    font-style: italic; }
+  .monster .monster-notes + * {
+    margin-top: 0.57em; }
+  .monster hr + .h5-border {
+    display: none; }
+  .monster .monster-footer {
+    font-style: italic;
+    opacity: 0.5;
+    font-size: 0.8em; }
+  .monster .line-break {
+    display: block;
+    height: 0.57em; }
+  .monster .h5-border {
+    min-height: 1px;
+    height: 0.0714em;
+    background: linear-gradient(to right, rgba(154, 21, 21, 0.75), rgba(154, 21, 21, 0));
+    display: block;
+    margin-top: 0;
+    margin-bottom: 0.52em; }
+    .monster .h5-border.notes {
+      margin-top: 0.52em;
+      height: 0.2143em; }
+  @media screen and (max-width: 459px) {
+    .monster.columns-1 {
+      font-size: 0.75rem; } }
+  .monster.columns-2 {
+    width: 55em;
+    font-size: 0.85rem; }
+    @media screen and (max-width: 1200px) {
+      .monster.columns-2 {
+        font-size: 0.75rem; } }
+    @media screen and (max-width: 1095px) {
+      .monster.columns-2 {
+        font-size: 0.6rem; } }
+    @media screen and (max-width: 980px) {
+      .monster.columns-2 {
+        font-size: 0.5rem; } }
+    @media screen and (max-width: 880px) {
+      .monster.columns-2 {
+        font-size: 0.45rem; } }
+    @media screen and (max-width: 800px) {
+      .monster.columns-2 {
+        font-size: 0.7rem; } }
+    @media screen and (max-width: 680px) {
+      .monster.columns-2 {
+        font-size: 0.6rem; } }
+    @media screen and (max-width: 580px) {
+      .monster.columns-2 {
+        font-size: 0.5rem; } }
+    @media screen and (max-width: 490px) {
+      .monster.columns-2 {
+        font-size: 0.4rem; } }
+    @media screen and (max-width: 410px) {
+      .monster.columns-2 {
+        font-size: 0.35rem; } }
+    @media screen and (max-width: 400px) {
+      .monster.columns-2 {
+        font-size: 0.5rem; } }
+    @media screen and (max-width: 380px) {
+      .monster.columns-2 {
+        font-size: 0.45rem; } }
+    @media screen and (max-width: 350px) {
+      .monster.columns-2 {
+        font-size: 0.38rem; } }
+    .monster.columns-2 .monster-contents-body {
+      column-count: 2;
+      column-gap: 1.42em; }
+  .monster .h5-traits {
+    display: none; }
+    .monster .h5-traits + .h5-border {
+      display: none; }
+      .monster .h5-traits + .h5-border + .monster-trait {
+        margin-top: 0.57em; }
+  .monster.theme-5e .monster-contents-body {
+    background: url("https://i.imgur.com/wAhINL9.jpg"); }
+  .monster.theme-5e .monster-contents-header,
+  .monster.theme-5e .monster-contents-footer {
+    height: 0.4em;
+    min-height: 3px;
+    background: #bd9b4c;
+    border: 1px solid black;
+    border-left: 0;
+    border-right: 0;
+    width: 100%;
+    background-image: linear-gradient(45deg, #bd9b4c 25%, #b38720 25%, #b38720 50%, #bd9b4c 50%, #bd9b4c 75%, #b38720 75%, #b38720 100%);
+    background-size: 5px 5px; }
+  .monster.theme-transparent {
+    box-shadow: none; }
+    .monster.theme-transparent .monster-contents-body {
+      background: none; }
+  .monster.theme-giffyglyph {
+    box-shadow: none; }
+    .monster.theme-giffyglyph .h5-traits {
+      display: block; }
+    .monster.theme-giffyglyph ul {
+      padding: 0 !important;
+      margin-left: 1em;
+      margin-right: 1em;
+      border-radius: 0.5em;
+      flex-direction: column;
+      width: calc(100% - 2em);
+      border: 1px dotted rgba(88, 24, 13, 0.1);
+      overflow: hidden; }
+      .monster.theme-giffyglyph ul li {
+        display: flex;
+        width: 100%; }
+        .monster.theme-giffyglyph ul li:not(:last-child) {
+          border-bottom: 1px dotted rgba(88, 24, 13, 0.1); }
+      .monster.theme-giffyglyph ul li p {
+        width: 100%;
+        display: inline-flex; }
+        .monster.theme-giffyglyph ul li p .label {
+          font-family: "Alegreya Sans SC", sans-serif;
+          margin-right: 0.5em;
+          text-align: right;
+          display: inline-block;
+          width: 10.75em;
+          flex-shrink: 0;
+          font-size: 0.8em;
+          line-height: 1.9;
+          background: rgba(88, 24, 13, 0.05);
+          padding-right: 0.5em; }
+          .monster.theme-giffyglyph ul li p .label + span {
+            display: inline-block;
+            width: 100%;
+            padding-right: 0.5em; }
+    .monster.theme-giffyglyph hr {
+      display: none; }
+      .monster.theme-giffyglyph hr + * {
+        margin-top: 0.5em; }
+      .monster.theme-giffyglyph hr:first-of-type + * {
+        margin-top: 1em; }
+    .monster.theme-giffyglyph .quickstart-helpers {
+      margin-top: 0.5em; }
+    .monster.theme-giffyglyph .monster-contents-body {
+      padding: 0;
+      border-radius: 1em;
+      overflow: hidden;
+      box-shadow: 0px 5px 10px 0px #50576240; }
+      .monster.theme-giffyglyph .monster-contents-body .monster-header {
+        background: #58180d;
+        color: #FFFFFF;
+        padding: 0.75em 1em 0.5em; }
+        .monster.theme-giffyglyph .monster-contents-body .monster-header > * {
+          z-index: 1;
+          position: relative; }
+        .monster.theme-giffyglyph .monster-contents-body .monster-header h4 {
+          color: #FFFFFF; }
+      .monster.theme-giffyglyph .monster-contents-body > * {
+        padding-left: 1em;
+        padding-right: 1em; }
+    .monster.theme-giffyglyph .monster-abilities {
+      column-gap: 0.25em;
+      margin-top: 0.5em;
+      margin-bottom: 0; }
+    .monster.theme-giffyglyph .monster-stats + hr + *:not(.quickstart-helpers) {
+      margin-top: 0.5em !important; }
+    .monster.theme-giffyglyph .h5-border {
+      display: none; }
+    .monster.theme-giffyglyph .quickstart-helpers li {
+      display: flex; }
+    .monster.theme-giffyglyph h5 {
+      content: "Traits";
+      background: rgba(88, 24, 13, 0.1);
+      display: block;
+      margin: 0 0.65em 0.3em;
+      font-weight: bold;
+      color: #9a1515;
+      font-family: "Alegreya Sans SC", sans-serif;
+      display: inline-block;
+      width: calc(100% - 1.3em);
+      padding: 0 0.5em !important;
+      border-radius: 0.3em;
+      line-height: 1.5; }
+      .monster.theme-giffyglyph h5 > * {
+        font-size: 1.45em; }
+    .monster.theme-giffyglyph .monster-ability {
+      background: rgba(88, 24, 13, 0.1);
+      padding: 0.4em 0;
+      border-radius: 0.5em; }
+    .monster.theme-giffyglyph .monster-footer {
+      padding-bottom: 1.4em; }
+    .monster.theme-giffyglyph .monster-image.banner {
+      background: #FFFFFF;
+      border-radius: 0.5em 0.5em 0 0;
+      overflow: hidden;
+      border-bottom: 0;
+      z-index: 1; }
+      .monster.theme-giffyglyph .monster-image.banner + .monster-contents .monster-contents-body {
+        border-top: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0; }
+    .monster.theme-giffyglyph.columns-2 .monster-contents-body {
+      padding-top: 1em;
+      padding-bottom: 1em;
+      column-gap: 0; }
+    .monster.theme-giffyglyph.columns-2 .monster-header {
+      border-radius: 0.5em;
+      margin-left: 1em;
+      width: calc(100% - 2em); }
+    .monster.theme-giffyglyph.columns-2 .monster-footer {
+      padding-bottom: 0; }
+    .monster.theme-giffyglyph.columns-2 hr:first-of-type + * {
+      margin-top: 0.5em; }
+
+.panel {
+  box-shadow: 0px 5px 10px 0px #505762; }
+
+.vault > .card-header {
+  padding-right: 0.75rem; }
+.vault > .card-body {
+  padding: 0; }
+.vault > .card-footer {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem; }
+.vault #vault-import-file,
+.vault #vault-import-srd {
+  display: none; }
+.vault .dataTables_wrapper {
+  display: flex;
+  flex-direction: column; }
+  .vault .dataTables_wrapper .top {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.325rem 0.75rem;
+    background: #eef0f2;
+    border-radius: 0;
+    border-bottom: 0.25rem solid #da3737; }
+    .vault .dataTables_wrapper .top .dataTables_length {
+      min-width: 7rem;
+      margin-right: 0.75rem; }
+    .vault .dataTables_wrapper .top label {
+      margin: 0;
+      position: relative;
+      width: 100%; }
+      .vault .dataTables_wrapper .top label input {
+        padding-right: 1.6rem; }
+      .vault .dataTables_wrapper .top label input,
+      .vault .dataTables_wrapper .top label select {
+        border-radius: 1cm;
+        font-size: inherit;
+        line-height: inherit;
+        padding-top: 0;
+        padding-bottom: 0;
+        height: auto;
+        width: 100%;
+        box-sizing: border-box;
+        margin: 0; }
+    .vault .dataTables_wrapper .top .dataTables_filter {
+      flex-grow: 1;
+      margin-right: 0;
+      text-align: right; }
+      .vault .dataTables_wrapper .top .dataTables_filter label {
+        max-width: 16rem; }
+    .vault .dataTables_wrapper .top .dataTables_filter label::after {
+      font-family: "Font Awesome 5 Free";
+      content: "\f002";
+      -webkit-font-smoothing: antialiased;
+      display: inline-block;
+      font-style: normal;
+      font-variant: normal;
+      text-rendering: auto;
+      position: absolute;
+      right: 0.75rem;
+      font-weight: 900;
+      color: #666f7f;
+      line-height: inherit; }
+  .vault .dataTables_wrapper .content {
+    overflow: hidden; }
+  .vault .dataTables_wrapper table {
+    margin: 0 !important;
+    width: 100% !important;
+    table-layout: fixed; }
+    .vault .dataTables_wrapper table tbody tr:hover {
+      background: #eef0f2;
+      cursor: pointer; }
+    .vault .dataTables_wrapper table td,
+    .vault .dataTables_wrapper table th {
+      box-sizing: border-box; }
+    .vault .dataTables_wrapper table td {
+      padding: 0; }
+    .vault .dataTables_wrapper table th {
+      background: #eef0f2;
+      padding-top: 0.325rem;
+      padding-bottom: 0.325rem; }
+      .vault .dataTables_wrapper table th:not(:first-child) {
+        border-left: 1px solid #dee2e6; }
+      .vault .dataTables_wrapper table th::before, .vault .dataTables_wrapper table th::after {
+        bottom: 0.4em;
+        right: 0.5em;
+        font-family: "Font Awesome 5 Free";
+        color: #da3737; }
+        @media screen and (max-width: 400px) {
+          .vault .dataTables_wrapper table th::before, .vault .dataTables_wrapper table th::after {
+            bottom: 0.25em; } }
+      .vault .dataTables_wrapper table th::before {
+        content: "\f884"; }
+      .vault .dataTables_wrapper table th::after {
+        content: "\f160"; }
+    .vault .dataTables_wrapper table .sorting::after,
+    .vault .dataTables_wrapper table .sorting_asc::after,
+    .vault .dataTables_wrapper table .sorting_desc::before {
+      opacity: 0; }
+    .vault .dataTables_wrapper table .sorting::before {
+      opacity: 0.1;
+      color: inherit; }
+    .vault .dataTables_wrapper table .col-id {
+      width: 4rem;
+      text-align: center; }
+    .vault .dataTables_wrapper table .col-ac {
+      width: 4rem;
+      text-align: center; }
+    .vault .dataTables_wrapper table .col-hp {
+      width: 5rem;
+      text-align: center; }
+    .vault .dataTables_wrapper table .col-level {
+      width: 4rem;
+      text-align: center; }
+    .vault .dataTables_wrapper table .col-role {
+      width: 6rem; }
+    .vault .dataTables_wrapper table .col-rank {
+      width: 5.75rem; }
+    .vault .dataTables_wrapper table .col-cr {
+      width: 4rem;
+      text-align: center; }
+    .vault .dataTables_wrapper table .col-description,
+    .vault .dataTables_wrapper table .col-role-rank,
+    .vault .dataTables_wrapper table .col-ac-hp {
+      overflow: hidden;
+      width: 0; }
+    .vault .dataTables_wrapper table .dataTables_empty {
+      padding: 0.5rem 0.75rem; }
+    @media screen and (max-width: 800px) {
+      .vault .dataTables_wrapper table .col-ac,
+      .vault .dataTables_wrapper table .col-hp,
+      .vault .dataTables_wrapper table .col-role,
+      .vault .dataTables_wrapper table .col-rank {
+        overflow: hidden !important;
+        width: 0;
+        padding: 0 !important;
+        border-right: none !important; } }
+    .vault .dataTables_wrapper table .table-card {
+      display: flex;
+      flex-direction: row; }
+      .vault .dataTables_wrapper table .table-card .col-id {
+        text-align: center;
+        flex-shrink: 0;
+        font-weight: bold; }
+      .vault .dataTables_wrapper table .table-card .col-name {
+        white-space: normal;
+        flex-grow: 1; }
+        .vault .dataTables_wrapper table .table-card .col-name .name {
+          margin: 0;
+          font-weight: bold; }
+        .vault .dataTables_wrapper table .table-card .col-name .role {
+          font-size: 0.7em;
+          font-style: italic;
+          opacity: .75;
+          margin: 0.25em 0 0; }
+          .vault .dataTables_wrapper table .table-card .col-name .role .fas {
+            opacity: .5; }
+          .vault .dataTables_wrapper table .table-card .col-name .role:not(.rank-solo) .players {
+            display: none; }
+        .vault .dataTables_wrapper table .table-card .col-name .details,
+        .vault .dataTables_wrapper table .table-card .col-name .stats {
+          font-size: 0.7em;
+          font-style: italic;
+          opacity: .75;
+          margin: 0; }
+      .vault .dataTables_wrapper table .table-card .col-hp::after {
+        font-family: "Font Awesome 5 Free";
+        content: " \f004";
+        color: #da3737; }
+      .vault .dataTables_wrapper table .table-card .col-id,
+      .vault .dataTables_wrapper table .table-card .col-name,
+      .vault .dataTables_wrapper table .table-card .col-ac,
+      .vault .dataTables_wrapper table .table-card .col-hp,
+      .vault .dataTables_wrapper table .table-card .col-level,
+      .vault .dataTables_wrapper table .table-card .col-role,
+      .vault .dataTables_wrapper table .table-card .col-rank,
+      .vault .dataTables_wrapper table .table-card .col-cr {
+        padding: 0.5rem 0.75rem;
+        overflow: hidden;
+        text-overflow: ellipsis; }
+        .vault .dataTables_wrapper table .table-card .col-id:not(:last-child),
+        .vault .dataTables_wrapper table .table-card .col-name:not(:last-child),
+        .vault .dataTables_wrapper table .table-card .col-ac:not(:last-child),
+        .vault .dataTables_wrapper table .table-card .col-hp:not(:last-child),
+        .vault .dataTables_wrapper table .table-card .col-level:not(:last-child),
+        .vault .dataTables_wrapper table .table-card .col-role:not(:last-child),
+        .vault .dataTables_wrapper table .table-card .col-rank:not(:last-child),
+        .vault .dataTables_wrapper table .table-card .col-cr:not(:last-child) {
+          border-right: 1px dotted #eef0f2; }
+      .vault .dataTables_wrapper table .table-card .col-description,
+      .vault .dataTables_wrapper table .table-card .col-role-rank,
+      .vault .dataTables_wrapper table .table-card .col-ac-hp {
+        overflow: hidden;
+        width: 0; }
+      .vault .dataTables_wrapper table .table-card .col-ac,
+      .vault .dataTables_wrapper table .table-card .col-hp,
+      .vault .dataTables_wrapper table .table-card .col-level,
+      .vault .dataTables_wrapper table .table-card .col-role,
+      .vault .dataTables_wrapper table .table-card .col-rank,
+      .vault .dataTables_wrapper table .table-card .col-cr {
+        flex-shrink: 0; }
+      .vault .dataTables_wrapper table .table-card .col-rank:not(.rank-solo) .players {
+        display: none; }
+      .vault .dataTables_wrapper table .table-card.method-manual .role {
+        display: none; }
+      @media screen and (min-width: 801px) {
+        .vault .dataTables_wrapper table .table-card .role {
+          display: none; } }
+  .vault .dataTables_wrapper .bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.325rem 0.75rem;
+    background: #eef0f2;
+    border-radius: 0;
+    border-top: 0.25rem solid #da3737; }
+    .vault .dataTables_wrapper .bottom .dataTables_info {
+      padding: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      margin-right: 0.75rem;
+      white-space: normal; }
+    .vault .dataTables_wrapper .bottom .pagination {
+      margin: 0; }
+    @media screen and (max-width: 800px) {
+      .vault .dataTables_wrapper .bottom {
+        flex-direction: column; }
+        .vault .dataTables_wrapper .bottom .dataTables_info {
+          margin-bottom: 0.25rem;
+          margin-right: 0; } }
+  .vault .dataTables_wrapper .page-link {
+    color: #da3737;
+    background-color: white;
+    border: 1px solid white;
+    border: none;
+    border-radius: 1cm;
+    min-width: 2.2rem;
+    line-height: 1.2;
+    text-align: center;
+    font-weight: bold; }
+  .vault .dataTables_wrapper .page-item.active .page-link {
+    background-color: #da3737;
+    border-color: #da3737;
+    color: #FFFFFF; }
+  .vault .dataTables_wrapper .page-item.disabled .page-link {
+    color: rgba(0, 0, 0, 0.25);
+    background: #dee2e6;
+    border: 1px solid #dee2e6; }
+  .vault .dataTables_wrapper .page-item:not(:first-child) .page-link {
+    margin-left: 2px; }
+  .vault .dataTables_wrapper .page-item:first-child .page-link, .vault .dataTables_wrapper .page-item:last-child .page-link {
+    border-radius: 100%; }
+
+.vault.edit > .card-body {
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr 380px; }
+  @media screen and (max-width: 840px) {
+    .vault.edit > .card-body {
+      grid-template-columns: 1fr 344px; } }
+  @media screen and (max-width: 800px) {
+    .vault.edit > .card-body {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto; } }
+.vault.edit > .card-footer {
+  display: flex;
+  justify-content: space-between; }
+.vault.edit #monster-import-file {
+  display: none; }
+.vault.edit .monster-blueprint {
+  background: #dee2e6; }
+
+/*# sourceMappingURL=monstermaker.1.0.3.3.css.map */

packages.txt

@@ -0,0 +1,3 @@
+chromium
+wkhtmltopdf
+xvfb

requirements.txt

@@ -0,0 +1,7 @@
+accelerate
+html2image
+ftfy
+gradio-client
+torch
+transformers
+imgkit