Hugging Face's logo

Spaces:
gstaff
/
test_space
Runtime error

App Files Community
gstaff commited on
Commit
1a5a832
•
1 Parent(s): c63db98

Add card formatting

Browse files
Files changed (3) hide show
  1. app.py +128 -6
  2. monsterMakerTemplate.html +162 -0
  3. monstermaker.css +1493 -0
app.py CHANGED
@@ -1,3 +1,8 @@
 
 
 
 
 
1
  import gradio as gr
2
  import numpy as np
3
  import torch
@@ -56,7 +61,7 @@ def gen_image(prompt):
56
  # See https://huggingface.co/spaces/pootow/min-dalle/blob/main/app.py
57
  # Hugging Space faces seems to run out of memory if grads are not disabled
58
  torch.set_grad_enabled(False)
59
- print(f'RUNNING gen_image with pronpt: {prompt}')
60
  images = model.generate_images(
61
  text=prompt,
62
  seed=-1,
@@ -79,8 +84,16 @@ learner = load_learner('export.pkl',
79
  cpu=not gpu) # cpu=False uses GPU; make sure installed torch is GPU e.g. `pip3 install torch torchvision torchaudio --extra-index-url https://download.pytorch.org/whl/cu116`
80
 
81
 
82
- def run_model(name):
 
 
 
 
 
 
 
83
  prompt = f"Name: {name}\r\n"
 
84
  prompt_ids = tokenizer.encode(prompt)
85
  if gpu:
86
  inp = tensor(prompt_ids)[None].cuda() # Use .cuda() for torch GPU
@@ -89,14 +102,123 @@ def run_model(name):
89
  preds = learner.model.generate(inp, max_length=1024, num_beams=5, temperature=1.5, do_sample=True)
90
  result = tokenizer.decode(preds[0].cpu().numpy())
91
  result = result.split('###')[0].replace(r'\r\n', '\n')
 
92
  return result
93
 
94
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  def run(name):
96
- text = run_model(name)
97
- pil = gen_image('smiling dog')
98
- return text, pil
 
 
 
99
 
100
 
101
- iface = gr.Interface(fn=run, inputs="text", outputs=["text", "pil"])
102
  iface.launch()
1
+ import base64
2
+ import pathlib
3
+ import re
4
+ from io import BytesIO
5
+
6
  import gradio as gr
7
  import numpy as np
8
  import torch
61
  # See https://huggingface.co/spaces/pootow/min-dalle/blob/main/app.py
62
  # Hugging Space faces seems to run out of memory if grads are not disabled
63
  torch.set_grad_enabled(False)
64
+ print(f'RUNNING gen_image with prompt: {prompt}')
65
  images = model.generate_images(
66
  text=prompt,
67
  seed=-1,
84
  cpu=not gpu) # cpu=False uses GPU; make sure installed torch is GPU e.g. `pip3 install torch torchvision torchaudio --extra-index-url https://download.pytorch.org/whl/cu116`
85
 
86
 
87
+ def parse_monster_description(text):
88
+ match = re.search(r"Description: (.*)", text)
89
+ description = match.group(1)
90
+ print(description.split('.')[0])
91
+ return description.split('.')[0]
92
+
93
+
94
+ def gen_monster_text(name):
95
  prompt = f"Name: {name}\r\n"
96
+ print(f'GENERATING MONSTER TEXT with prompt: {prompt}')
97
  prompt_ids = tokenizer.encode(prompt)
98
  if gpu:
99
  inp = tensor(prompt_ids)[None].cuda() # Use .cuda() for torch GPU
102
  preds = learner.model.generate(inp, max_length=1024, num_beams=5, temperature=1.5, do_sample=True)
103
  result = tokenizer.decode(preds[0].cpu().numpy())
104
  result = result.split('###')[0].replace(r'\r\n', '\n')
105
+ print(f'GENERATING MONSTER COMPLETE')
106
  return result
107
 
108
 
109
+ def extract_text_for_header(text, header):
110
+ match = re.search(fr"{header}: (.*)", text)
111
+ if match is None:
112
+ return ''
113
+ return match.group(1)
114
+
115
+
116
+ def format_monster_card(monster_text, image_data):
117
+ print('FORMATTING MONSTER TEXT')
118
+ # see giffyglyph's monster maker https://giffyglyph.com/monstermaker/app/
119
+ # Different Formatting style examples and some json export formats
120
+ card = pathlib.Path('monsterMakerTemplate.html').read_text()
121
+ if not isinstance(image_data, (bytes, bytearray)):
122
+ card = card.replace('{image_data}', f'{image_data}')
123
+ else:
124
+ card = card.replace('{image_data}', f'data:image/png;base64,{image_data.decode("utf-8")}')
125
+ name = extract_text_for_header(monster_text, 'Name')
126
+ card = card.replace('{name}', name)
127
+ monster_type = extract_text_for_header(monster_text, 'Type')
128
+ card = card.replace('{monster_type}', monster_type)
129
+ armor_class = extract_text_for_header(monster_text, 'Armor Class')
130
+ card = card.replace('{armor_class}', armor_class)
131
+ hit_points = extract_text_for_header(monster_text, 'Hit Points')
132
+ card = card.replace('{hit_points}', hit_points)
133
+ speed = extract_text_for_header(monster_text, 'Speed')
134
+ card = card.replace('{speed}', speed)
135
+ str_stat = extract_text_for_header(monster_text, 'STR')
136
+ card = card.replace('{str_stat}', str_stat)
137
+ dex_stat = extract_text_for_header(monster_text, 'DEX')
138
+ card = card.replace('{dex_stat}', dex_stat)
139
+ con_stat = extract_text_for_header(monster_text, 'CON')
140
+ card = card.replace('{con_stat}', con_stat)
141
+ int_stat = extract_text_for_header(monster_text, 'INT')
142
+ card = card.replace('{int_stat}', int_stat)
143
+ wis_stat = extract_text_for_header(monster_text, 'WIS')
144
+ card = card.replace('{wis_stat}', wis_stat)
145
+ cha_stat = extract_text_for_header(monster_text, 'CHA')
146
+ card = card.replace('{cha_stat}', cha_stat)
147
+ saving_throws = extract_text_for_header(monster_text, 'Saving Throws')
148
+ card = card.replace('{saving_throws}', saving_throws)
149
+ senses = extract_text_for_header(monster_text, 'Senses')
150
+ card = card.replace('{senses}', senses)
151
+ languages = extract_text_for_header(monster_text, 'Languages')
152
+ card = card.replace('{languages}', languages)
153
+ challenge = extract_text_for_header(monster_text, 'Challenge')
154
+ card = card.replace('{challenge}', challenge)
155
+ # TODO: Skills, immunities etc., remove unavailable
156
+ # include Melee or Ranged Weapon Attack:
157
+
158
+ description = extract_text_for_header(monster_text, 'Description')
159
+ card = card.replace('{description}', description)
160
+
161
+ match = re.search(r"Passives:\n([\w\W]*)", monster_text)
162
+ if match is None:
163
+ passives = ''
164
+ else:
165
+ passives = match.group(1)
166
+ p = passives.split(':')
167
+ if len(p) > 1:
168
+ p = ":".join(p)
169
+ p = p.split('\n')
170
+ passives_data = ''
171
+ for x in p:
172
+ x = x.split(':')
173
+ if len(x) > 1:
174
+ trait = x[0]
175
+ if 'Action' in trait:
176
+ break
177
+ detail = ":".join(x[1:])
178
+ passives_data += f'<div class="monster-trait"><p><span class="name">{trait}</span> <span class="detail">{detail}</span></p></div>'
179
+ card = card.replace('{passives}', passives_data)
180
+ else:
181
+ card = card.replace('{passives}', f'<div class="monster-trait"><p>{passives}</p></div>')
182
+
183
+ # TODO: multiple lines
184
+ match = re.search(r"Actions:\n(.*)", monster_text)
185
+ if match is None:
186
+ actions = ''
187
+ else:
188
+ actions = match.group(1)
189
+ a = actions.split(':')
190
+ if len(a) > 1:
191
+ action = a[0]
192
+ detail = ":".join(a[1:])
193
+ card = card.replace('{actions}',
194
+ f'<div class="monster-action"><p><span class="name">{action}</span> <span class="detail">{detail}</span></p></div>')
195
+ else:
196
+ card = card.replace('{actions}', f'<div class="monster-action"><p>{actions}</p></div>')
197
+
198
+ card = card.replace('Melee Weapon Attack:', '<i>Melee Weapon Attack:</i>')
199
+ card = card.replace('Hit:', '<i>Hit:</i>')
200
+
201
+ print('FORMATTING MONSTER TEXT COMPLETE')
202
+ return card
203
+
204
+
205
+ def pil_to_base64(image):
206
+ print('CONVERTING PIL IMAGE TO BASE64 STRING')
207
+ buffered = BytesIO()
208
+ image.save(buffered, format="PNG")
209
+ img_str = base64.b64encode(buffered.getvalue())
210
+ print('CONVERTING PIL IMAGE TO BASE64 STRING COMPLETE')
211
+ return img_str
212
+
213
+
214
  def run(name):
215
+ text = gen_monster_text(name)
216
+ description = parse_monster_description(text)
217
+ pil = gen_image(description)
218
+ image_data = pil_to_base64(pil)
219
+ card = format_monster_card(text, image_data)
220
+ return text, pil, card
221
 
222
 
223
+ iface = gr.Interface(fn=run, inputs="text", outputs=["text", "pil", 'html'])
224
  iface.launch()
monsterMakerTemplate.html ADDED
@@ -0,0 +1,162 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Document</title>
9
+ <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
10
+ integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"
12
+ crossorigin="anonymous">
13
+ <link rel="stylesheet" type="text/css"
14
+ 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">
15
+ <link rel="stylesheet" type="text/css"
16
+ href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i|Alegreya+Sans+SC:700">
17
+ <link rel="stylesheet" type="text/css" href="monstermaker.css">
18
+ </head>
19
+
20
+ <body>
21
+ <div class="monster theme-5e columns-1">
22
+ <div class="monster-contents">
23
+ <div class="monster-contents-header"></div>
24
+ <div class="monster-contents-body">
25
+ <div class="monster-image inline">
26
+ <img src="{image_data}" alt="Picture of {name}" />
27
+ </div>
28
+ <div class="monster-header">
29
+ <div>
30
+ <h4>{name}</h4>
31
+ <p class="monster-description">{monster_type}</p>
32
+ </div>
33
+ <!-- <div class="monster-quickstart">-->
34
+ <!-- <p>Level 1 Striker<br> Standard <span class="solo-only">vs 4 </span>(50 XP)</p>-->
35
+ <!-- </div>-->
36
+ </div>
37
+ <hr>
38
+ <ul>
39
+ <li class="monster-ac">
40
+ <p>
41
+ <span class="label">Armor Class</span>
42
+ <span>{armor_class}</span>
43
+ </p>
44
+ </li>
45
+ <li class="monster-hp">
46
+ <p>
47
+ <span class="label">Hit Points</span>
48
+ <span>{hit_points}</span>
49
+ </p>
50
+ </li>
51
+ <li class="monster-speed">
52
+ <p>
53
+ <span class="label">Speed</span>
54
+ <span>{speed}</span>
55
+ </p>
56
+ </li>
57
+ </ul>
58
+ <hr>
59
+ <div class="monster-abilities">
60
+ <div class="monster-ability">
61
+ <span class="label">Str</span>
62
+ <span>{str_stat}</span>
63
+ </div>
64
+ <div class="monster-ability">
65
+ <span class="label">Dex</span>
66
+ <span>{dex_stat}</span>
67
+ </div>
68
+ <div class="monster-ability">
69
+ <span class="label">Con</span>
70
+ <span>{con_stat}</span>
71
+ </div>
72
+ <div class="monster-ability">
73
+ <span class="label">Int</span>
74
+ <span>{int_stat}</span>
75
+ </div>
76
+ <div class="monster-ability">
77
+ <span class="label">Wis</span>
78
+ <span>{wis_stat}</span>
79
+ </div>
80
+ <div class="monster-ability">
81
+ <span class="label">Cha</span>
82
+ <span>{cha_stat}</span>
83
+ </div>
84
+ </div>
85
+ <hr>
86
+ <ul class="monster-stats">
87
+ <li class="monster-saves">
88
+ <p>
89
+ <span class="label">Saving Throws</span>
90
+ <span>{saving_throws}</span>
91
+ </p>
92
+ </li>
93
+ <li class="monster-senses">
94
+ <p>
95
+ <span class="label">Senses</span>
96
+ <span>{senses}</span>
97
+ </p>
98
+ </li>
99
+ <li class="monster-languages">
100
+ <p>
101
+ <span class="label">Languages</span>
102
+ <span>{languages}</span>
103
+ </p>
104
+ </li>
105
+ <li class="monster-challenge">
106
+ <p>
107
+ <span class="label">Challenge</span>
108
+ <span>{challenge}</span>
109
+ </p>
110
+ </li>
111
+ </ul>
112
+ <!-- <hr>-->
113
+ <!-- <ul class="quickstart-helpers">-->
114
+ <!-- <li>-->
115
+ <!-- <p>-->
116
+ <!-- <span class="label">Attacks</span>-->
117
+ <!-- <span>+5 to hit. <i>Hit:</i> 3 damage</span>-->
118
+ <!-- </p>-->
119
+ <!-- </li>-->
120
+ <!-- <li>-->
121
+ <!-- <p>-->
122
+ <!-- <span class="label">Attack DCs</span>-->
123
+ <!-- <span>Primary DC 13, Secondary DC 10</span>-->
124
+ <!-- </p>-->
125
+ <!-- </li>-->
126
+ <!-- </ul>-->
127
+ <hr>
128
+ <h5 class="h5-traits">Traits</h5>
129
+ <div class="h5-border"></div>
130
+ {passives}
131
+ <!-- <div class="monster-trait">-->
132
+ <!-- <p><span class="name">(Striker) Savage Assault.</span> <span class="detail">Once per turn, add your-->
133
+ <!-- level in extra damage to an attack.</span></p>-->
134
+ <!-- </div>-->
135
+ <!-- <div class="monster-trait">-->
136
+ <!-- <p><span class="name">Shifty.</span> <span class="detail">You can <i>Disengage</i> as a bonus-->
137
+ <!-- action.</span></p>-->
138
+ <!-- </div>-->
139
+ <h5>Actions</h5>
140
+ <div class="h5-border"></div>
141
+ {actions}
142
+ <!-- <div class="monster-action">-->
143
+ <!-- <p><span class="name">Slash.</span> <span class="detail"><i>Melee Weapon Attack:</i> +5 vs AC.-->
144
+ <!-- <i>Hit:</i> 3 (1d4 + 1) slashing damage.</span></p>-->
145
+ <!-- </div>-->
146
+ <!-- <div class="monster-action">-->
147
+ <!-- <p><span class="name">Knockback.</span> <span class="detail"><i>Melee Weapon Attack:</i> DC 13 vs-->
148
+ <!-- Strength. <i>Hit:</i> the target is pushed up to 10 ft away.</span></p>-->
149
+ <!-- </div>-->
150
+ <h5 class="h5-notes">Notes</h5>
151
+ <div class="h5-border"></div>
152
+ <div class="monster-notes">
153
+ <p class="note">{description}</p>
154
+ </div>
155
+ <p class="monster-footer">Made by MonsterGen</p>
156
+ </div>
157
+ <div class="monster-contents-footer"></div>
158
+ </div>
159
+ </div>
160
+ </body>
161
+
162
+ </html>
monstermaker.css ADDED
@@ -0,0 +1,1493 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .alert > :last-child {
2
+ margin-bottom: 0; }
3
+
4
+ .alert-default {
5
+ border: 4px solid #dee2e6;
6
+ border-radius: 1em; }
7
+
8
+ .app {
9
+ display: grid;
10
+ min-height: 100vh;
11
+ min-width: 300px;
12
+ grid-template-rows: 1fr auto;
13
+ grid-template-columns: 100%; }
14
+ .app .app-container {
15
+ max-width: 1200px;
16
+ margin: 0 auto; }
17
+
18
+ .app .app-body {
19
+ background: #666f7f;
20
+ margin-top: 6.25rem;
21
+ display: flex;
22
+ flex-direction: column; }
23
+ .app .app-body .app-container {
24
+ padding: 0.5rem 10px;
25
+ width: 100%;
26
+ flex-grow: 1; }
27
+
28
+ .app .app-header {
29
+ position: fixed;
30
+ top: 0;
31
+ width: 100%;
32
+ z-index: 2;
33
+ box-shadow: 0 0.25rem 0.75rem 0 #505762; }
34
+ @media screen and (min-width: 801px) {
35
+ .app .app-header .app-header-navbar {
36
+ display: none; } }
37
+ .app .app-header .app-header-heading {
38
+ background: #22252a; }
39
+ .app .app-header .app-header-heading .app-container {
40
+ padding: 0.625rem 10px;
41
+ display: grid;
42
+ grid-template-columns: auto repeat(8, 2rem);
43
+ grid-column-gap: 0.25rem;
44
+ align-items: end; }
45
+ @media screen and (max-width: 800px) {
46
+ .app .app-header .app-header-heading .app-container {
47
+ grid-template-columns: auto repeat(2, 2rem); }
48
+ .app .app-header .app-header-heading .app-container .btn:not(.btn-patreon):not(.btn-menu) {
49
+ display: none; } }
50
+ @media screen and (min-width: 801px) {
51
+ .app .app-header .app-header-heading .app-container .btn-menu {
52
+ display: none; } }
53
+ .app .app-header .app-header-heading h1 {
54
+ text-transform: uppercase;
55
+ font-weight: bold;
56
+ display: flex;
57
+ flex-direction: row;
58
+ line-height: 1;
59
+ margin: 0; }
60
+ .app .app-header .app-header-heading h1 img {
61
+ height: 2.5rem;
62
+ width: 2.5rem;
63
+ border: 2px solid #666f7f;
64
+ padding: 2px;
65
+ box-sizing: border-box;
66
+ border-radius: 100%;
67
+ margin-right: 0.325rem; }
68
+ .app .app-header .app-header-heading h1 a {
69
+ display: flex;
70
+ flex-direction: column; }
71
+ .app .app-header .app-header-heading h1 a span:first-of-type {
72
+ font-size: 0.95rem;
73
+ color: #da3737;
74
+ letter-spacing: 1px; }
75
+ .app .app-header .app-header-heading h1 a span:last-of-type {
76
+ color: #FFFFFF;
77
+ font-size: 1.9rem;
78
+ margin-bottom: -0.35rem; }
79
+ .app .app-header .app-header-heading h1 a:hover {
80
+ text-decoration: none; }
81
+ .app .app-header .app-header-heading h1 a:hover span:last-of-type {
82
+ text-decoration: underline;
83
+ text-decoration-color: #da3737; }
84
+ .app .app-header .app-header-heading .btn {
85
+ height: 2rem;
86
+ border-radius: 100%;
87
+ box-sizing: border-box;
88
+ display: flex;
89
+ align-items: center;
90
+ justify-content: center;
91
+ font-size: 1rem;
92
+ background-color: #666f7f;
93
+ border-color: #666f7f;
94
+ line-height: 1;
95
+ padding: 0; }
96
+ .app .app-header .app-header-heading .btn .fas,
97
+ .app .app-header .app-header-heading .btn .fab {
98
+ background: none;
99
+ padding: 0;
100
+ margin: 0; }
101
+ .app .app-header .app-header-heading .btn:hover {
102
+ background: #da3737;
103
+ border-color: #da3737; }
104
+ .app .app-header .app-header-heading .btn.btn-patreon {
105
+ background-color: #e85b46;
106
+ border-color: #e85b46; }
107
+ .app .app-header .app-header-heading .btn.btn-patreon:hover {
108
+ color: #e85b46;
109
+ background-color: #FFFFFF;
110
+ border-color: #FFFFFF; }
111
+ .app .app-header .app-header-navbar {
112
+ background: #22252a; }
113
+ .app .app-header .app-header-navbar .navbar {
114
+ padding: 0; }
115
+ .app .app-header .app-header-navbar .navbar .nav-item {
116
+ padding-left: 0.625rem;
117
+ padding-right: 0.625rem; }
118
+ .app .app-header .app-header-navbar .navbar .nav-item + .nav-item {
119
+ border-top: 1px dotted #444a54; }
120
+ .app .app-header .app-header-navbar .navbar .nav-item a {
121
+ color: white;
122
+ font-weight: bold; }
123
+ .app .app-header .app-header-navbar .navbar .nav-item a:hover {
124
+ color: #da3737; }
125
+ .app .app-header .app-header-navbar .navbar .nav-item button {
126
+ padding: 0;
127
+ color: white;
128
+ font-weight: bold;
129
+ display: block;
130
+ padding: 0.5rem 0;
131
+ background: none;
132
+ border: none;
133
+ box-shadow: none;
134
+ width: 100%;
135
+ text-align: left; }
136
+ .app .app-header .app-header-navbar .navbar .nav-item button:hover {
137
+ color: #da3737;
138
+ cursor: pointer; }
139
+ .app .app-header .app-header-navbar .navbar .nav-item .fab,
140
+ .app .app-header .app-header-navbar .navbar .nav-item .fas {
141
+ width: 2.5rem;
142
+ text-align: center;
143
+ margin-right: 0.325rem; }
144
+ .app .app-header .app-header-navbar .navbar .nav-item:first-child {
145
+ border-top: 1px solid #444a54; }
146
+ .app .app-header .app-header-navbar .navbar .nav-item:last-child {
147
+ border-bottom: 1px solid #444a54; }
148
+ .app .app-header .app-header-navbar .navbar .nav-item .nav-link-detail {
149
+ color: #666f7f; }
150
+
151
+ .app .app-header .app-header-navigation {
152
+ background: #2d3138; }
153
+ .app .app-header .app-header-navigation .app-container {
154
+ padding: 0 10px; }
155
+ .app .app-header .app-header-navigation .nav {
156
+ display: grid;
157
+ grid-template-columns: repeat(2, 1fr); }
158
+ .app .app-header .app-header-navigation .nav .nav-item {
159
+ text-align: center;
160
+ font-weight: bold; }
161
+ .app .app-header .app-header-navigation .nav .nav-item .nav-link {
162
+ color: #666f7f;
163
+ padding: 0.5rem 0.5rem 0.25rem;
164
+ border-radius: 0;
165
+ border-bottom: 0.25rem solid #22252a; }
166
+ .app .app-header .app-header-navigation .nav .nav-item .nav-link .badge {
167
+ background: rgba(102, 111, 127, 0.5); }
168
+ .app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover {
169
+ border-bottom: 0.25rem solid rgba(218, 55, 55, 0.5);
170
+ color: rgba(255, 255, 255, 0.5); }
171
+ .app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover .fas,
172
+ .app .app-header .app-header-navigation .nav .nav-item .nav-link:not(.active):hover .fab {
173
+ color: rgba(218, 55, 55, 0.5); }
174
+ @media screen and (max-width: 800px) {
175
+ .app .app-header .app-header-navigation .nav .nav-item .nav-link .nav-link-text,
176
+ .app .app-header .app-header-navigation .nav .nav-item .nav-link .badge {
177
+ display: none; } }
178
+ .app .app-header .app-header-navigation .nav .nav-item .active {
179
+ background: none;
180
+ border-radius: 0;
181
+ border-bottom: 0.25rem solid #da3737;
182
+ color: white; }
183
+ .app .app-header .app-header-navigation .nav .nav-item .active .badge {
184
+ background: #666f7f; }
185
+ .app .app-header .app-header-navigation .nav .nav-item .active .fas,
186
+ .app .app-header .app-header-navigation .nav .nav-item .active .fab {
187
+ color: #da3737; }
188
+ .app .app-header .app-header-navigation .nav .nav-item .fas,
189
+ .app .app-header .app-header-navigation .nav .nav-item .fab {
190
+ margin-right: 0.325rem; }
191
+ .app .app-header .app-header-navigation .nav .nav-item .badge {
192
+ border-radius: 1cm;
193
+ font-size: inherit;
194
+ padding: 0.1625rem 0.325rem; }
195
+
196
+ .app .app-footer {
197
+ background: #565e6b;
198
+ text-align: center; }
199
+ .app .app-footer .app-container {
200
+ padding: 1.25rem 10px;
201
+ display: grid;
202
+ grid-template-columns: 1fr 1fr 2fr;
203
+ text-align: left; }
204
+ @media screen and (max-width: 800px) {
205
+ .app .app-footer .app-container {
206
+ grid-template-columns: 1fr;
207
+ grid-row-gap: 0.5rem;
208
+ text-align: center; }
209
+ .app .app-footer .app-container p {
210
+ text-align: center; } }
211
+ .app .app-footer a {
212
+ color: inherit;
213
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
214
+ text-decoration: none;
215
+ display: inline-block; }
216
+ .app .app-footer a:hover {
217
+ color: #da3737; }
218
+ .app .app-footer p {
219
+ text-align: right;
220
+ margin: 0;
221
+ color: #f1f2f3;
222
+ font-size: 0.9rem; }
223
+ .app .app-footer p a:not(:first-of-type) {
224
+ margin-left: 0.75rem; }
225
+ .app .app-footer p .fab {
226
+ font-size: 2rem;
227
+ color: #9ca3af;
228
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
229
+ .app .app-footer p .fab:hover {
230
+ color: #da3737; }
231
+ .app .app-footer ul {
232
+ margin: 0;
233
+ padding: 0;
234
+ list-style: none;
235
+ font-size: 0.9rem;
236
+ color: #f1f2f3; }
237
+ .app .app-footer h5 {
238
+ color: #9ca3af;
239
+ font-size: 0.75rem;
240
+ text-transform: uppercase;
241
+ font-weight: bold; }
242
+ .app .app-footer .links > :not(:last-child) {
243
+ margin-bottom: 0.5rem; }
244
+
245
+ html {
246
+ font-size: 16px; }
247
+ @media screen and (max-width: 400px) {
248
+ html {
249
+ font-size: 12px; } }
250
+
251
+ body {
252
+ font-family: 'Roboto', sans-serif;
253
+ background: #666f7f; }
254
+
255
+ a {
256
+ color: #da3737; }
257
+ a:hover {
258
+ color: #da3737; }
259
+
260
+ .breadcrumbs {
261
+ background: #565e6b;
262
+ margin-top: 0.5rem;
263
+ color: #dee2e6;
264
+ font-size: 0.9em; }
265
+ @media screen and (max-width: 800px) {
266
+ .breadcrumbs {
267
+ display: none; } }
268
+ .breadcrumbs .app-container {
269
+ padding: 0.5rem 10px;
270
+ max-width: 1200px;
271
+ margin: 0 auto; }
272
+ .breadcrumbs .divider,
273
+ .breadcrumbs .fas {
274
+ margin: 0 0.25rem;
275
+ color: #dee2e6; }
276
+ .breadcrumbs a {
277
+ color: inherit; }
278
+ .breadcrumbs a:hover {
279
+ color: white; }
280
+
281
+ .btn {
282
+ border-radius: 2rem;
283
+ padding: 0 0.75rem 0 0; }
284
+ .btn .fas,
285
+ .btn .fab {
286
+ background: #da3737;
287
+ padding: 0.325rem;
288
+ line-height: inherit;
289
+ border-radius: 2rem;
290
+ margin: 0 0.325rem 0 0; }
291
+ .btn .fas:before,
292
+ .btn .fab:before {
293
+ min-width: 1.5rem;
294
+ display: block;
295
+ text-align: center; }
296
+ .btn.icon-only .fas,
297
+ .btn.icon-only .fab {
298
+ margin-right: -0.75rem; }
299
+ .btn.btn-sm {
300
+ padding: 0 0.5rem 0 0; }
301
+ .btn.btn-sm .fas,
302
+ .btn.btn-sm .fab {
303
+ padding: 0;
304
+ margin: 0 0.25rem 0 0; }
305
+ .btn.btn-sm .fas::before,
306
+ .btn.btn-sm .fab::before {
307
+ min-width: 1.3rem; }
308
+ .btn.btn-sm.icon-only {
309
+ padding-right: 0; }
310
+ .btn.btn-sm.icon-only .fas,
311
+ .btn.btn-sm.icon-only .fab {
312
+ margin-right: 0; }
313
+
314
+ .btn-primary {
315
+ color: #FFFFFF;
316
+ background-color: #2d3138;
317
+ border-color: #2d3138;
318
+ font-weight: bold; }
319
+ .btn-primary.icon-only:not(.icon-border) {
320
+ border-color: #da3737; }
321
+
322
+ .btn-secondary {
323
+ color: #FFFFFF;
324
+ background-color: #666f7f;
325
+ border-color: #666f7f;
326
+ font-weight: bold; }
327
+ .btn-secondary.icon-only:not(.icon-border) {
328
+ border-color: #da3737; }
329
+
330
+ .btn-primary,
331
+ .btn-secondary {
332
+ display: inline-flex;
333
+ align-items: center;
334
+ border-width: 2px; }
335
+ .btn-primary:hover, .btn-primary:not(:disabled):not(:disabled):active, .btn-primary.dropdown-toggle[aria-expanded="true"],
336
+ .btn-secondary:hover,
337
+ .btn-secondary:not(:disabled):not(:disabled):active,
338
+ .btn-secondary.dropdown-toggle[aria-expanded="true"] {
339
+ background-color: #da3737;
340
+ border-color: #da3737; }
341
+ .btn-primary:not(:disabled):not(:disabled):focus, .btn-primary:not(:disabled):not(:disabled):active:focus, .btn-primary.dropdown-toggle[aria-expanded="true"],
342
+ .btn-secondary:not(:disabled):not(:disabled):focus,
343
+ .btn-secondary:not(:disabled):not(:disabled):active:focus,
344
+ .btn-secondary.dropdown-toggle[aria-expanded="true"] {
345
+ box-shadow: 0 0 0 0.2rem rgba(218, 55, 55, 0.5); }
346
+
347
+ .card {
348
+ border: 0;
349
+ background: none; }
350
+ .card .card-header {
351
+ background: #dee2e6;
352
+ border: 0;
353
+ color: #22252a;
354
+ font-size: larger;
355
+ font-weight: bold;
356
+ border-bottom: 4px solid #ccd1d6;
357
+ border-radius: 0.5rem 0.5rem 0 0;
358
+ font-size: 1.4rem; }
359
+ @media screen and (max-width: 400px) {
360
+ .card .card-header {
361
+ font-size: 1.35rem; } }
362
+ .card .card-header .card-icon {
363
+ background: #da3737;
364
+ padding: 0.325rem 0.75em 0.325rem 0.325em;
365
+ border-radius: 0 1cm 1cm 0;
366
+ line-height: inherit;
367
+ margin: -0.325rem 0 -0.325rem -1.25rem;
368
+ color: white; }
369
+ .card .card-header .card-icon::before {
370
+ min-width: 1.75rem;
371
+ text-align: center;
372
+ display: block; }
373
+ .card .card-header .divider {
374
+ color: #da3737; }
375
+ .card .card-header .subtitle {
376
+ font-weight: normal;
377
+ font-size: 0.8em; }
378
+ .card .card-body {
379
+ background: #FFFFFF; }
380
+ .card .card-footer {
381
+ background: #dee2e6;
382
+ border: 0;
383
+ border-radius: 0 0 0.5rem 0.5rem; }
384
+
385
+ .dropdown {
386
+ display: inline-block; }
387
+ .dropdown .dropdown-item {
388
+ padding-left: 0.75rem;
389
+ padding-right: 0.75rem; }
390
+ .dropdown .dropdown-item .fas {
391
+ margin-right: 0.75rem; }
392
+ .dropdown .icon-only::after {
393
+ display: none; }
394
+
395
+ .dropdown-menu {
396
+ border: 1px solid #2d3138;
397
+ border-radius: .5rem;
398
+ box-shadow: 0px 2px 5px 0px #505762bf; }
399
+ .dropdown-menu button:hover {
400
+ cursor: pointer;
401
+ background: rgba(218, 55, 55, 0.15); }
402
+ .dropdown-menu button:hover .fas,
403
+ .dropdown-menu button:hover .fab {
404
+ color: #da3737; }
405
+ .dropdown-menu .dropdown-item .fas {
406
+ min-width: 1.1rem;
407
+ text-align: center; }
408
+ .dropdown-menu .dropdown-item.active,
409
+ .dropdown-menu .dropdown-item:active {
410
+ background: #da3737;
411
+ color: #FFFFFF; }
412
+ .dropdown-menu .dropdown-item.active .fas,
413
+ .dropdown-menu .dropdown-item.active .fab,
414
+ .dropdown-menu .dropdown-item:active .fas,
415
+ .dropdown-menu .dropdown-item:active .fab {
416
+ color: inherit; }
417
+
418
+ .error {
419
+ display: flex;
420
+ height: 100%;
421
+ justify-content: center;
422
+ align-items: center;
423
+ flex-direction: column; }
424
+ .error .box {
425
+ color: #9ca3af;
426
+ border-radius: 1rem;
427
+ text-align: center;
428
+ padding: 1.25rem;
429
+ background: #565e6b; }
430
+ .error .box > :last-child {
431
+ margin-bottom: 0; }
432
+ .error .fas {
433
+ font-size: 4rem;
434
+ margin-bottom: 1rem; }
435
+
436
+ .laboratory > .card-body {
437
+ padding: 0;
438
+ display: grid;
439
+ grid-template-columns: 380px 1fr; }
440
+ @media screen and (max-width: 840px) {
441
+ .laboratory > .card-body {
442
+ grid-template-columns: 344px 1fr; } }
443
+ @media screen and (max-width: 800px) {
444
+ .laboratory > .card-body {
445
+ grid-template-columns: 1fr;
446
+ grid-template-rows: auto auto; } }
447
+ .laboratory #laboratory-import-file {
448
+ display: none; }
449
+ .laboratory .laboratory-blueprint {
450
+ background: #dee2e6; }
451
+
452
+ .blueprint-form {
453
+ background: #dee2e6; }
454
+ .blueprint-form .btn-help {
455
+ color: #b1b7bd;
456
+ box-shadow: none;
457
+ margin-right: -0.25em; }
458
+ .blueprint-form .btn-help:hover {
459
+ color: #da3737; }
460
+ .blueprint-form .btn-help .fas {
461
+ background: none; }
462
+ .blueprint-form .card {
463
+ overflow: visible; }
464
+ .blueprint-form .card-body {
465
+ padding: 0;
466
+ overflow: visible; }
467
+ .blueprint-form .card-body .card-header {
468
+ border-bottom: 1px solid #ccd1d6; }
469
+ .blueprint-form form {
470
+ background: #FFFFFF; }
471
+ .blueprint-form form[data-method="quickstart"] .manual-only {
472
+ display: none; }
473
+ .blueprint-form form[data-method="manual"] .quickstart-only {
474
+ display: none; }
475
+ .blueprint-form form:not([data-rank="solo"]) .solo-only {
476
+ display: none; }
477
+ .blueprint-form .form-group {
478
+ margin: 0;
479
+ display: flex; }
480
+ .blueprint-form .form-group.hidden {
481
+ display: none; }
482
+ .blueprint-form .form-group:not(:last-child) {
483
+ border-bottom: 1px solid #dee2e6; }
484
+ .blueprint-form .form-group > label {
485
+ width: 7.5rem;
486
+ flex-shrink: 0;
487
+ margin: 0;
488
+ font-weight: bold;
489
+ padding: 0.325rem 0.75rem;
490
+ box-sizing: border-box;
491
+ display: flex;
492
+ text-align: right;
493
+ justify-content: flex-end;
494
+ border-right: 1px solid #dee2e6;
495
+ background: rgba(222, 226, 230, 0.5);
496
+ line-height: calc(2.375rem - 0.75rem); }
497
+ .blueprint-form .form-group input,
498
+ .blueprint-form .form-group select {
499
+ border: 0;
500
+ background: none; }
501
+ .blueprint-form .form-group input::placeholder {
502
+ color: rgba(102, 111, 127, 0.5); }
503
+ .blueprint-form .form-group select {
504
+ padding-left: 0.5rem; }
505
+ .blueprint-form .form-group textarea {
506
+ padding: .375rem .75rem;
507
+ border: 0;
508
+ width: 100%;
509
+ box-sizing: border-box;
510
+ resize: vertical;
511
+ color: #495057;
512
+ min-height: 2.375rem;
513
+ font-size: 0.8em; }
514
+ .blueprint-form .form-group > :last-child {
515
+ margin-bottom: 0; }
516
+ .blueprint-form .form-group.section-end {
517
+ border-bottom: 2px solid #dee2e6; }
518
+ .blueprint-form .form-group .flex-input {
519
+ width: 100%;
520
+ display: flex; }
521
+ .blueprint-form .form-group .flex-input span {
522
+ opacity: 0.5;
523
+ padding: 0 0.5em;
524
+ display: flex;
525
+ align-items: center;
526
+ color: #b2b7c9; }
527
+ .blueprint-form .form-radio-list {
528
+ width: 100%;
529
+ display: flex;
530
+ padding: .375rem .75rem; }
531
+ .blueprint-form .form-radio-list .form-check-input:checked ~ * {
532
+ background: #da3737;
533
+ color: #FFFFFF;
534
+ font-weight: bold; }
535
+ .blueprint-form .form-radio-list .form-check-input {
536
+ display: none; }
537
+ .blueprint-form .form-radio-list .form-check {
538
+ flex-grow: 1;
539
+ margin: 0;
540
+ flex-shrink: 0;
541
+ width: 50%; }
542
+ .blueprint-form .form-radio-list .form-check:first-child .form-check-label {
543
+ border-radius: 4px 0 0 4px; }
544
+ .blueprint-form .form-radio-list .form-check:last-child .form-check-label {
545
+ border-radius: 0 4px 4px 0; }
546
+ .blueprint-form .form-radio-list .form-check-label {
547
+ flex-grow: 1;
548
+ text-align: center;
549
+ background: #dee2e6;
550
+ text-transform: uppercase;
551
+ font-size: 0.75rem;
552
+ color: #666f7f; }
553
+ .blueprint-form .form-radio-list .form-check-label:hover {
554
+ cursor: pointer; }
555
+ .blueprint-form .repeatable-section .card-footer {
556
+ background: #eef0f2;
557
+ padding-left: 0.75rem;
558
+ padding-right: 0.75rem; }
559
+ .blueprint-form .repeatable-item {
560
+ border-bottom: 2px solid #dee2e6;
561
+ position: relative; }
562
+ .blueprint-form .repeatable-item .dropdown-options {
563
+ position: absolute;
564
+ top: 0.325rem;
565
+ right: 0.75rem; }
566
+ .blueprint-form .repeatable-item .dropdown-options .btn {
567
+ border-color: #da3737; }
568
+ .blueprint-form .repeatable-item .dropdown-toggle {
569
+ opacity: .1; }
570
+ .blueprint-form .repeatable-item .dropdown-toggle:disabled {
571
+ display: none; }
572
+ .blueprint-form .repeatable-item .dropdown-toggle:hover, .blueprint-form .repeatable-item .dropdown-toggle[aria-expanded="true"] {
573
+ opacity: 1; }
574
+ .blueprint-form .accordion .card {
575
+ border-radius: 0; }
576
+ .blueprint-form .accordion .card .card-header {
577
+ padding: 0;
578
+ border-radius: 0;
579
+ display: flex;
580
+ border-bottom: 1px solid #ccd1d6;
581
+ margin-bottom: 0; }
582
+ .blueprint-form .accordion .card .card-header button {
583
+ background: #dee2e6;
584
+ display: block;
585
+ text-align: left;
586
+ font-weight: bold;
587
+ width: 100%;
588
+ color: #2d3138;
589
+ text-decoration: none;
590
+ padding: 0;
591
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
592
+ border-radius: 0;
593
+ border: 0;
594
+ display: flex;
595
+ align-items: center;
596
+ padding: 0.1875rem 0; }
597
+ .blueprint-form .accordion .card .card-header button .title {
598
+ flex-grow: 1;
599
+ margin-left: 0.325rem; }
600
+ .blueprint-form .accordion .card .card-header button:hover, .blueprint-form .accordion .card .card-header button[aria-expanded="true"] {
601
+ background: #da3737;
602
+ color: #FFFFFF; }
603
+ .blueprint-form .accordion .card .card-header button:hover .badge, .blueprint-form .accordion .card .card-header button[aria-expanded="true"] .badge {
604
+ background: #FFFFFF;
605
+ color: #da3737; }
606
+ .blueprint-form .accordion .card .card-header button .fa-chevron-right::before {
607
+ position: relative;
608
+ left: 1px; }
609
+ .blueprint-form .accordion .card .card-header button[aria-expanded="true"] .fa-chevron-right::before {
610
+ transform: rotate(90deg); }
611
+ .blueprint-form .accordion .card .card-header .badge {
612
+ background-color: #b1b7bd;
613
+ border-radius: 1cm;
614
+ padding: 0 0.325rem;
615
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
616
+ color: white;
617
+ float: right;
618
+ margin-right: 0.75rem;
619
+ line-height: 1.5; }
620
+ .blueprint-form .accordion .card .card-header .fas {
621
+ transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
622
+ color: white;
623
+ border-radius: 1cm;
624
+ margin: 0 0 0 0.325rem;
625
+ width: 1.5rem;
626
+ height: 1.5rem;
627
+ padding: 0;
628
+ display: flex;
629
+ justify-content: center;
630
+ align-items: center; }
631
+ .blueprint-form .accordion .card .card-header .fas::before {
632
+ transition: transform .15s ease-in-out; }
633
+ .blueprint-form .accordion .card .card-footer {
634
+ border-radius: 0; }
635
+ .blueprint-form .accordion .card .collapse.show {
636
+ border-bottom: 1px solid #ccd1d6; }
637
+ .blueprint-form > .card-footer {
638
+ padding-left: 0.75rem;
639
+ padding-right: 0.75rem; }
640
+
641
+ #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 {
642
+ display: none; }
643
+ #modal-blueprint-traits .modal-body select {
644
+ margin-bottom: 1.25rem; }
645
+ #modal-blueprint-traits .modal-body ul {
646
+ list-style: none;
647
+ padding-left: 0; }
648
+ #modal-blueprint-traits .modal-body ul .title {
649
+ margin: 0; }
650
+ #modal-blueprint-traits .modal-body ul .description {
651
+ font-size: small;
652
+ margin: 0; }
653
+ #modal-blueprint-traits .modal-body .form-check:hover {
654
+ background: #eef0f2;
655
+ margin-left: -1.25rem;
656
+ margin-right: -1.25rem;
657
+ padding-left: 2.5rem;
658
+ padding-right: 1.25rem; }
659
+ #modal-blueprint-traits .modal-body .form-check-label {
660
+ cursor: pointer;
661
+ padding-top: 0.325rem;
662
+ padding-bottom: 0.325rem;
663
+ width: 100%; }
664
+ #modal-blueprint-traits .modal-body .form-check-input {
665
+ top: 0.325rem; }
666
+ #modal-blueprint-traits .modal-body .form-check-input:checked ~ label {
667
+ color: #da3737; }
668
+
669
+ #modal-markdown .accordion-markdown-help table {
670
+ background: #dee2e659;
671
+ overflow: hidden;
672
+ border-radius: 0.5em;
673
+ border: none; }
674
+ #modal-markdown .accordion-markdown-help table td {
675
+ border: none; }
676
+ #modal-markdown .accordion-markdown-help .card:not(:first-child) {
677
+ margin-top: 1rem; }
678
+ #modal-markdown .accordion-markdown-help .collapse.show {
679
+ border-bottom: none; }
680
+ #modal-markdown .accordion-markdown-help .card-header {
681
+ border: none;
682
+ background: none;
683
+ margin-left: -0.25em;
684
+ margin-right: -1em; }
685
+ #modal-markdown .accordion-markdown-help .card-header button {
686
+ background: #da3737;
687
+ color: #FFFFFF;
688
+ font-weight: bold;
689
+ padding-left: 0.1875rem;
690
+ padding-right: 0.5em;
691
+ border-radius: 1em 0 0 1em; }
692
+ #modal-markdown .accordion-markdown-help .card-header button::before {
693
+ content: "\f054";
694
+ transition: transform .15s ease-in-out;
695
+ font-family: "Font Awesome 5 Free";
696
+ -webkit-font-smoothing: antialiased;
697
+ font-style: normal;
698
+ font-variant: normal;
699
+ text-rendering: auto;
700
+ margin-right: 0.5em;
701
+ transform: rotate(90deg);
702
+ background: #da3737;
703
+ color: white;
704
+ width: 1.5em;
705
+ border-radius: 1em;
706
+ text-align: center; }
707
+ #modal-markdown .accordion-markdown-help .card-header button.collapsed::before {
708
+ transform: rotate(0deg); }
709
+ #modal-markdown .accordion-markdown-help .card-header button.collapsed:not(:hover) {
710
+ background: #dee2e6;
711
+ color: inherit; }
712
+ #modal-markdown .accordion-markdown-help .card-body {
713
+ padding: 1rem 0 0; }
714
+ #modal-markdown .accordion-markdown-help .card-body > :last-child {
715
+ margin-bottom: 0; }
716
+
717
+ .monster-preview {
718
+ background-color: #ccd1d6;
719
+ display: flex;
720
+ flex-direction: column;
721
+ justify-content: flex-start;
722
+ align-items: center;
723
+ padding: 1.25rem 10px;
724
+ background-image: linear-gradient(45deg, #ccd1d6 25%, #c6ccd1 25%, #c6ccd1 50%, #ccd1d6 50%, #ccd1d6 75%, #c6ccd1 75%, #c6ccd1 100%);
725
+ background-size: 10px 10px; }
726
+ .monster-preview .btn-png {
727
+ margin-top: 1.25rem;
728
+ box-shadow: 0px 5px 10px 0px #50576240; }
729
+ .monster-preview .btn-png .fas {
730
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
731
+ .monster-preview .btn-png:not(:hover) {
732
+ background: #FFFFFF;
733
+ border-color: #FFFFFF;
734
+ color: #666f7f; }
735
+ .monster-preview .btn-png:not(:hover) .fas {
736
+ color: #FFFFFF; }
737
+ .monster-preview .btn-columns {
738
+ margin-top: 1.25rem;
739
+ box-shadow: 0px 5px 10px 0px #50576240; }
740
+ .monster-preview .btn-columns .fas {
741
+ transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
742
+ .monster-preview .btn-columns:not(:hover) {
743
+ background: #FFFFFF;
744
+ border-color: #FFFFFF; }
745
+ .monster-preview .btn-columns:not(:hover) .fas {
746
+ color: #da3737;
747
+ background: none; }
748
+
749
+ .modal-backdrop.show {
750
+ opacity: 0.75; }
751
+
752
+ .modal .modal-header {
753
+ background: #22252a;
754
+ color: white;
755
+ border-bottom: 0;
756
+ border-radius: 0;
757
+ padding: 0.75rem 1.25rem;
758
+ border-bottom: 4px solid #dee2e6; }
759
+ .modal .modal-header .card-icon {
760
+ background: #da3737;
761
+ padding: 0.325rem 0.75rem 0.325rem 0.325rem;
762
+ border-radius: 0 1cm 1cm 0;
763
+ line-height: inherit;
764
+ margin: -0.325rem 0 -0.325rem -1.25rem; }
765
+ .modal .modal-header .card-icon::before {
766
+ min-width: 1.75rem;
767
+ text-align: center;
768
+ display: block; }
769
+ .modal .modal-header .modal-title {
770
+ font-weight: bold; }
771
+ .modal .modal-header .close {
772
+ opacity: 1;
773
+ color: #2d3138;
774
+ text-shadow: none;
775
+ margin: -0.75rem -1.25rem -0.75rem auto;
776
+ padding: 0.9rem 1.25rem; }
777
+ .modal .modal-header .close span {
778
+ transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
779
+ .modal .modal-header .close:hover, .modal .modal-header .close:focus {
780
+ color: white;
781
+ outline: none;
782
+ opacity: 1; }
783
+ .modal .modal-header .close:hover span, .modal .modal-header .close:focus span {
784
+ background: #da3737; }
785
+ .modal .modal-header .close span {
786
+ background: #666f7f;
787
+ display: block;
788
+ border-radius: 1cm 0 0 1cm;
789
+ padding: 0 0.75rem 0 0.75rem;
790
+ margin-right: -1.25rem; }
791
+ .modal .modal-content {
792
+ border: 1px solid transparent;
793
+ background: none;
794
+ overflow: hidden;
795
+ border: 2px solid #da3737;
796
+ border-radius: 0.75rem; }
797
+ .modal .modal-body {
798
+ background: white;
799
+ padding: 1.25rem; }
800
+ .modal .modal-body > :last-child {
801
+ margin-bottom: 0; }
802
+ .modal .modal-footer {
803
+ background: #dee2e6;
804
+ border-top: 0;
805
+ padding: 0.75rem 1.25rem; }
806
+
807
+ #modal-settings .settings {
808
+ border: 4px solid #dee2e6;
809
+ border-radius: 1rem; }
810
+ #modal-settings .setting .btn {
811
+ margin-left: 0.5rem; }
812
+ #modal-settings .setting .content {
813
+ display: flex;
814
+ align-items: center;
815
+ padding: 0.75rem 1.25rem; }
816
+ #modal-settings .setting .confirmation {
817
+ display: none;
818
+ color: #da3737;
819
+ padding: 0.75rem 1.25rem; }
820
+ #modal-settings .setting .confirmed {
821
+ display: none;
822
+ color: green;
823
+ padding: 0.75rem 1.25rem; }
824
+ #modal-settings .setting .confirmed .fa-check-circle {
825
+ font-size: 2.5em; }
826
+ #modal-settings .setting select.form-control {
827
+ width: auto;
828
+ margin-left: 1em;
829
+ cursor: pointer; }
830
+ #modal-settings .setting.confirm .content,
831
+ #modal-settings .setting.confirm .confirmed {
832
+ display: none; }
833
+ #modal-settings .setting.confirm .confirmation {
834
+ display: flex;
835
+ align-items: center; }
836
+ #modal-settings .setting.confirmed .content,
837
+ #modal-settings .setting.confirmed .confirmation {
838
+ display: none; }
839
+ #modal-settings .setting.confirmed .confirmed {
840
+ display: flex;
841
+ align-items: center; }
842
+ #modal-settings .setting + .setting {
843
+ border-top: 2px solid #dee2e6; }
844
+ #modal-settings .setting .description {
845
+ flex-grow: 1; }
846
+ #modal-settings .setting .description .title {
847
+ font-weight: bold;
848
+ margin: 0;
849
+ text-transform: uppercase;
850
+ font-size: 0.9rem; }
851
+ #modal-settings .setting .description > :last-child {
852
+ margin-bottom: 0; }
853
+
854
+ #modal-gmbinder .modal-body {
855
+ white-space: pre-line;
856
+ font-family: monospace;
857
+ font-size: small; }
858
+
859
+ .monster {
860
+ font-size: 0.875rem;
861
+ position: relative;
862
+ width: 28.6em;
863
+ box-shadow: 0px 5px 10px 0px #50576240;
864
+ display: flex;
865
+ flex-direction: column; }
866
+ .monster > :first-child {
867
+ margin-top: 0; }
868
+ .monster > :last-child {
869
+ margin-bottom: 0; }
870
+ .monster .monster-contents {
871
+ width: 100%; }
872
+ .monster .monster-contents .monster-contents-body {
873
+ padding: 1.42em;
874
+ background: white; }
875
+ .monster.quickstart:not(.rank-solo) .solo-only {
876
+ display: none; }
877
+ .monster.quickstart .monster-header .monster-quickstart {
878
+ font-size: 0.8em;
879
+ font-weight: bold;
880
+ text-align: right;
881
+ margin-left: 0.8em;
882
+ flex-shrink: 0; }
883
+ .monster .monster-image.inline + * {
884
+ margin-top: 1.42em; }
885
+ .monster .monster-image img {
886
+ width: 100%;
887
+ border-radius: 0.25em; }
888
+ .monster .monster-image.banner {
889
+ width: 100%; }
890
+ .monster .monster-image.banner img {
891
+ border-radius: 0; }
892
+ .monster .monster-core > :last-child {
893
+ margin-bottom: 0; }
894
+ .monster .monster-core + * {
895
+ margin-top: 0.57em; }
896
+ .monster .monster-header {
897
+ display: inline-flex;
898
+ width: 100%;
899
+ justify-content: space-between;
900
+ align-items: flex-end; }
901
+ .monster .monster-header h4 {
902
+ font-weight: bold;
903
+ color: #9a1515;
904
+ margin: 0;
905
+ line-height: 1;
906
+ font-size: 2em;
907
+ font-family: "Alegreya Sans SC", sans-serif;
908
+ margin-top: -0.1em; }
909
+ .monster .monster-header p {
910
+ margin: 0; }
911
+ .monster .monster-header .monster-description {
912
+ font-style: italic;
913
+ font-size: 0.8em; }
914
+ .monster .monster-header .monster-description span:first-of-type {
915
+ display: inline-block; }
916
+ .monster .monster-header .monster-description span:first-of-type::first-letter {
917
+ text-transform: uppercase; }
918
+ .monster .monster-header .monster-description span + span::before {
919
+ content: " "; }
920
+ .monster .monster-header .monster-description * + .alignment::before {
921
+ content: ", "; }
922
+ .monster .monster-ac,
923
+ .monster .monster-hp,
924
+ .monster .monster-speed,
925
+ .monster .monster-saves,
926
+ .monster .monster-skills,
927
+ .monster .monster-languages,
928
+ .monster .monster-senses,
929
+ .monster .monster-immunities,
930
+ .monster .monster-vulnerabilities,
931
+ .monster .monster-resistances,
932
+ .monster .monster-conditions,
933
+ .monster .monster-challenge {
934
+ display: flex;
935
+ flex-wrap: wrap; }
936
+ .monster h5 {
937
+ font-weight: bold;
938
+ color: #9a1515;
939
+ font-family: "Alegreya Sans SC", sans-serif;
940
+ display: inline-block;
941
+ width: 100%;
942
+ margin-bottom: 0;
943
+ font-size: 1.45em;
944
+ margin-top: 0.36em !important; }
945
+ .monster h5 + * {
946
+ margin-top: 0.52em; }
947
+ .monster hr {
948
+ margin: 0.285em 0 0;
949
+ width: 100%;
950
+ min-height: 1px;
951
+ height: 0.143em;
952
+ border: 0;
953
+ background: linear-gradient(to right, rgba(154, 21, 21, 0.75), rgba(154, 21, 21, 0));
954
+ -webkit-column-break-inside: avoid;
955
+ page-break-inside: avoid;
956
+ break-inside: avoid; }
957
+ .monster hr:first-of-type, .monster hr:last-of-type {
958
+ height: 0.2143em;
959
+ background: linear-gradient(to right, #9a1515, rgba(154, 21, 21, 0)); }
960
+ .monster hr + * {
961
+ margin-top: 0.285em; }
962
+ .monster hr:last-of-type + * {
963
+ margin-top: 0.57em; }
964
+ .monster .label {
965
+ font-weight: bold; }
966
+ .monster .monster-abilities {
967
+ display: inline-grid;
968
+ width: 100%;
969
+ grid-template-columns: repeat(6, 1fr);
970
+ text-align: center;
971
+ line-height: 1.4; }
972
+ .monster .monster-abilities .label {
973
+ color: #9a1515;
974
+ display: block;
975
+ text-transform: uppercase; }
976
+ .monster ul {
977
+ list-style: none;
978
+ padding: 0;
979
+ margin-bottom: 0; }
980
+ .monster ul .label {
981
+ color: #9a1515; }
982
+ .monster ul li > p {
983
+ margin: 0; }
984
+ .monster p {
985
+ margin-bottom: 0; }
986
+ .monster p + * {
987
+ margin-top: 0.57em; }
988
+ .monster .monster-trait + *,
989
+ .monster .monster-action + *,
990
+ .monster .monster-reaction + *,
991
+ .monster .monster-legendary-action + *,
992
+ .monster .monster-lair-action + * {
993
+ margin-top: 0.57em; }
994
+ .monster .monster-trait p + *,
995
+ .monster .monster-action p + *,
996
+ .monster .monster-reaction p + *,
997
+ .monster .monster-legendary-action p + *,
998
+ .monster .monster-lair-action p + * {
999
+ margin-top: 0.57em; }
1000
+ .monster .monster-trait .name,
1001
+ .monster .monster-action .name,
1002
+ .monster .monster-reaction .name,
1003
+ .monster .monster-legendary-action .name,
1004
+ .monster .monster-lair-action .name {
1005
+ font-weight: bold;
1006
+ font-style: italic; }
1007
+ .monster .monster-trait > :last-child,
1008
+ .monster .monster-action > :last-child,
1009
+ .monster .monster-reaction > :last-child,
1010
+ .monster .monster-legendary-action > :last-child,
1011
+ .monster .monster-lair-action > :last-child {
1012
+ margin-bottom: 0; }
1013
+ .monster .lair-initiative,
1014
+ .monster .legendary-per-round,
1015
+ .monster .paragon-actions {
1016
+ font-size: 0.8em;
1017
+ font-style: italic; }
1018
+ .monster .monster-notes + * {
1019
+ margin-top: 0.57em; }
1020
+ .monster hr + .h5-border {
1021
+ display: none; }
1022
+ .monster .monster-footer {
1023
+ font-style: italic;
1024
+ opacity: 0.5;
1025
+ font-size: 0.8em; }
1026
+ .monster .line-break {
1027
+ display: block;
1028
+ height: 0.57em; }
1029
+ .monster .h5-border {
1030
+ min-height: 1px;
1031
+ height: 0.0714em;
1032
+ background: linear-gradient(to right, rgba(154, 21, 21, 0.75), rgba(154, 21, 21, 0));
1033
+ display: block;
1034
+ margin-top: 0;
1035
+ margin-bottom: 0.52em; }
1036
+ .monster .h5-border.notes {
1037
+ margin-top: 0.52em;
1038
+ height: 0.2143em; }
1039
+ @media screen and (max-width: 459px) {
1040
+ .monster.columns-1 {
1041
+ font-size: 0.75rem; } }
1042
+ .monster.columns-2 {
1043
+ width: 55em;
1044
+ font-size: 0.85rem; }
1045
+ @media screen and (max-width: 1200px) {
1046
+ .monster.columns-2 {
1047
+ font-size: 0.75rem; } }
1048
+ @media screen and (max-width: 1095px) {
1049
+ .monster.columns-2 {
1050
+ font-size: 0.6rem; } }
1051
+ @media screen and (max-width: 980px) {
1052
+ .monster.columns-2 {
1053
+ font-size: 0.5rem; } }
1054
+ @media screen and (max-width: 880px) {
1055
+ .monster.columns-2 {
1056
+ font-size: 0.45rem; } }
1057
+ @media screen and (max-width: 800px) {
1058
+ .monster.columns-2 {
1059
+ font-size: 0.7rem; } }
1060
+ @media screen and (max-width: 680px) {
1061
+ .monster.columns-2 {
1062
+ font-size: 0.6rem; } }
1063
+ @media screen and (max-width: 580px) {
1064
+ .monster.columns-2 {
1065
+ font-size: 0.5rem; } }
1066
+ @media screen and (max-width: 490px) {
1067
+ .monster.columns-2 {
1068
+ font-size: 0.4rem; } }
1069
+ @media screen and (max-width: 410px) {
1070
+ .monster.columns-2 {
1071
+ font-size: 0.35rem; } }
1072
+ @media screen and (max-width: 400px) {
1073
+ .monster.columns-2 {
1074
+ font-size: 0.5rem; } }
1075
+ @media screen and (max-width: 380px) {
1076
+ .monster.columns-2 {
1077
+ font-size: 0.45rem; } }
1078
+ @media screen and (max-width: 350px) {
1079
+ .monster.columns-2 {
1080
+ font-size: 0.38rem; } }
1081
+ .monster.columns-2 .monster-contents-body {
1082
+ column-count: 2;
1083
+ column-gap: 1.42em; }
1084
+ .monster .h5-traits {
1085
+ display: none; }
1086
+ .monster .h5-traits + .h5-border {
1087
+ display: none; }
1088
+ .monster .h5-traits + .h5-border + .monster-trait {
1089
+ margin-top: 0.57em; }
1090
+ .monster.theme-5e .monster-contents-body {
1091
+ background: url("https://i.imgur.com/wAhINL9.jpg"); }
1092
+ .monster.theme-5e .monster-contents-header,
1093
+ .monster.theme-5e .monster-contents-footer {
1094
+ height: 0.4em;
1095
+ min-height: 3px;
1096
+ background: #bd9b4c;
1097
+ border: 1px solid black;
1098
+ border-left: 0;
1099
+ border-right: 0;
1100
+ width: 100%;
1101
+ background-image: linear-gradient(45deg, #bd9b4c 25%, #b38720 25%, #b38720 50%, #bd9b4c 50%, #bd9b4c 75%, #b38720 75%, #b38720 100%);
1102
+ background-size: 5px 5px; }
1103
+ .monster.theme-transparent {
1104
+ box-shadow: none; }
1105
+ .monster.theme-transparent .monster-contents-body {
1106
+ background: none; }
1107
+ .monster.theme-giffyglyph {
1108
+ box-shadow: none; }
1109
+ .monster.theme-giffyglyph .h5-traits {
1110
+ display: block; }
1111
+ .monster.theme-giffyglyph ul {
1112
+ padding: 0 !important;
1113
+ margin-left: 1em;
1114
+ margin-right: 1em;
1115
+ border-radius: 0.5em;
1116
+ flex-direction: column;
1117
+ width: calc(100% - 2em);
1118
+ border: 1px dotted rgba(88, 24, 13, 0.1);
1119
+ overflow: hidden; }
1120
+ .monster.theme-giffyglyph ul li {
1121
+ display: flex;
1122
+ width: 100%; }
1123
+ .monster.theme-giffyglyph ul li:not(:last-child) {
1124
+ border-bottom: 1px dotted rgba(88, 24, 13, 0.1); }
1125
+ .monster.theme-giffyglyph ul li p {
1126
+ width: 100%;
1127
+ display: inline-flex; }
1128
+ .monster.theme-giffyglyph ul li p .label {
1129
+ font-family: "Alegreya Sans SC", sans-serif;
1130
+ margin-right: 0.5em;
1131
+ text-align: right;
1132
+ display: inline-block;
1133
+ width: 10.75em;
1134
+ flex-shrink: 0;
1135
+ font-size: 0.8em;
1136
+ line-height: 1.9;
1137
+ background: rgba(88, 24, 13, 0.05);
1138
+ padding-right: 0.5em; }
1139
+ .monster.theme-giffyglyph ul li p .label + span {
1140
+ display: inline-block;
1141
+ width: 100%;
1142
+ padding-right: 0.5em; }
1143
+ .monster.theme-giffyglyph hr {
1144
+ display: none; }
1145
+ .monster.theme-giffyglyph hr + * {
1146
+ margin-top: 0.5em; }
1147
+ .monster.theme-giffyglyph hr:first-of-type + * {
1148
+ margin-top: 1em; }
1149
+ .monster.theme-giffyglyph .quickstart-helpers {
1150
+ margin-top: 0.5em; }
1151
+ .monster.theme-giffyglyph .monster-contents-body {
1152
+ padding: 0;
1153
+ border-radius: 1em;
1154
+ overflow: hidden;
1155
+ box-shadow: 0px 5px 10px 0px #50576240; }
1156
+ .monster.theme-giffyglyph .monster-contents-body .monster-header {
1157
+ background: #58180d;
1158
+ color: #FFFFFF;
1159
+ padding: 0.75em 1em 0.5em; }
1160
+ .monster.theme-giffyglyph .monster-contents-body .monster-header > * {
1161
+ z-index: 1;
1162
+ position: relative; }
1163
+ .monster.theme-giffyglyph .monster-contents-body .monster-header h4 {
1164
+ color: #FFFFFF; }
1165
+ .monster.theme-giffyglyph .monster-contents-body > * {
1166
+ padding-left: 1em;
1167
+ padding-right: 1em; }
1168
+ .monster.theme-giffyglyph .monster-abilities {
1169
+ column-gap: 0.25em;
1170
+ margin-top: 0.5em;
1171
+ margin-bottom: 0; }
1172
+ .monster.theme-giffyglyph .monster-stats + hr + *:not(.quickstart-helpers) {
1173
+ margin-top: 0.5em !important; }
1174
+ .monster.theme-giffyglyph .h5-border {
1175
+ display: none; }
1176
+ .monster.theme-giffyglyph .quickstart-helpers li {
1177
+ display: flex; }
1178
+ .monster.theme-giffyglyph h5 {
1179
+ content: "Traits";
1180
+ background: rgba(88, 24, 13, 0.1);
1181
+ display: block;
1182
+ margin: 0 0.65em 0.3em;
1183
+ font-weight: bold;
1184
+ color: #9a1515;
1185
+ font-family: "Alegreya Sans SC", sans-serif;
1186
+ display: inline-block;
1187
+ width: calc(100% - 1.3em);
1188
+ padding: 0 0.5em !important;
1189
+ border-radius: 0.3em;
1190
+ line-height: 1.5; }
1191
+ .monster.theme-giffyglyph h5 > * {
1192
+ font-size: 1.45em; }
1193
+ .monster.theme-giffyglyph .monster-ability {
1194
+ background: rgba(88, 24, 13, 0.1);
1195
+ padding: 0.4em 0;
1196
+ border-radius: 0.5em; }
1197
+ .monster.theme-giffyglyph .monster-footer {
1198
+ padding-bottom: 1.4em; }
1199
+ .monster.theme-giffyglyph .monster-image.banner {
1200
+ background: #FFFFFF;
1201
+ border-radius: 0.5em 0.5em 0 0;
1202
+ overflow: hidden;
1203
+ border-bottom: 0;
1204
+ z-index: 1; }
1205
+ .monster.theme-giffyglyph .monster-image.banner + .monster-contents .monster-contents-body {
1206
+ border-top: 0;
1207
+ border-top-left-radius: 0;
1208
+ border-top-right-radius: 0; }
1209
+ .monster.theme-giffyglyph.columns-2 .monster-contents-body {
1210
+ padding-top: 1em;
1211
+ padding-bottom: 1em;
1212
+ column-gap: 0; }
1213
+ .monster.theme-giffyglyph.columns-2 .monster-header {
1214
+ border-radius: 0.5em;
1215
+ margin-left: 1em;
1216
+ width: calc(100% - 2em); }
1217
+ .monster.theme-giffyglyph.columns-2 .monster-footer {
1218
+ padding-bottom: 0; }
1219
+ .monster.theme-giffyglyph.columns-2 hr:first-of-type + * {
1220
+ margin-top: 0.5em; }
1221
+
1222
+ .panel {
1223
+ box-shadow: 0px 5px 10px 0px #505762; }
1224
+
1225
+ .vault > .card-header {
1226
+ padding-right: 0.75rem; }
1227
+ .vault > .card-body {
1228
+ padding: 0; }
1229
+ .vault > .card-footer {
1230
+ padding-left: 0.75rem;
1231
+ padding-right: 0.75rem; }
1232
+ .vault #vault-import-file,
1233
+ .vault #vault-import-srd {
1234
+ display: none; }
1235
+ .vault .dataTables_wrapper {
1236
+ display: flex;
1237
+ flex-direction: column; }
1238
+ .vault .dataTables_wrapper .top {
1239
+ display: flex;
1240
+ justify-content: space-between;
1241
+ padding: 0.325rem 0.75rem;
1242
+ background: #eef0f2;
1243
+ border-radius: 0;
1244
+ border-bottom: 0.25rem solid #da3737; }
1245
+ .vault .dataTables_wrapper .top .dataTables_length {
1246
+ min-width: 7rem;
1247
+ margin-right: 0.75rem; }
1248
+ .vault .dataTables_wrapper .top label {
1249
+ margin: 0;
1250
+ position: relative;
1251
+ width: 100%; }
1252
+ .vault .dataTables_wrapper .top label input {
1253
+ padding-right: 1.6rem; }
1254
+ .vault .dataTables_wrapper .top label input,
1255
+ .vault .dataTables_wrapper .top label select {
1256
+ border-radius: 1cm;
1257
+ font-size: inherit;
1258
+ line-height: inherit;
1259
+ padding-top: 0;
1260
+ padding-bottom: 0;
1261
+ height: auto;
1262
+ width: 100%;
1263
+ box-sizing: border-box;
1264
+ margin: 0; }
1265
+ .vault .dataTables_wrapper .top .dataTables_filter {
1266
+ flex-grow: 1;
1267
+ margin-right: 0;
1268
+ text-align: right; }
1269
+ .vault .dataTables_wrapper .top .dataTables_filter label {
1270
+ max-width: 16rem; }
1271
+ .vault .dataTables_wrapper .top .dataTables_filter label::after {
1272
+ font-family: "Font Awesome 5 Free";
1273
+ content: "\f002";
1274
+ -webkit-font-smoothing: antialiased;
1275
+ display: inline-block;
1276
+ font-style: normal;
1277
+ font-variant: normal;
1278
+ text-rendering: auto;
1279
+ position: absolute;
1280
+ right: 0.75rem;
1281
+ font-weight: 900;
1282
+ color: #666f7f;
1283
+ line-height: inherit; }
1284
+ .vault .dataTables_wrapper .content {
1285
+ overflow: hidden; }
1286
+ .vault .dataTables_wrapper table {
1287
+ margin: 0 !important;
1288
+ width: 100% !important;
1289
+ table-layout: fixed; }
1290
+ .vault .dataTables_wrapper table tbody tr:hover {
1291
+ background: #eef0f2;
1292
+ cursor: pointer; }
1293
+ .vault .dataTables_wrapper table td,
1294
+ .vault .dataTables_wrapper table th {
1295
+ box-sizing: border-box; }
1296
+ .vault .dataTables_wrapper table td {
1297
+ padding: 0; }
1298
+ .vault .dataTables_wrapper table th {
1299
+ background: #eef0f2;
1300
+ padding-top: 0.325rem;
1301
+ padding-bottom: 0.325rem; }
1302
+ .vault .dataTables_wrapper table th:not(:first-child) {
1303
+ border-left: 1px solid #dee2e6; }
1304
+ .vault .dataTables_wrapper table th::before, .vault .dataTables_wrapper table th::after {
1305
+ bottom: 0.4em;
1306
+ right: 0.5em;
1307
+ font-family: "Font Awesome 5 Free";
1308
+ color: #da3737; }
1309
+ @media screen and (max-width: 400px) {
1310
+ .vault .dataTables_wrapper table th::before, .vault .dataTables_wrapper table th::after {
1311
+ bottom: 0.25em; } }
1312
+ .vault .dataTables_wrapper table th::before {
1313
+ content: "\f884"; }
1314
+ .vault .dataTables_wrapper table th::after {
1315
+ content: "\f160"; }
1316
+ .vault .dataTables_wrapper table .sorting::after,
1317
+ .vault .dataTables_wrapper table .sorting_asc::after,
1318
+ .vault .dataTables_wrapper table .sorting_desc::before {
1319
+ opacity: 0; }
1320
+ .vault .dataTables_wrapper table .sorting::before {
1321
+ opacity: 0.1;
1322
+ color: inherit; }
1323
+ .vault .dataTables_wrapper table .col-id {
1324
+ width: 4rem;
1325
+ text-align: center; }
1326
+ .vault .dataTables_wrapper table .col-ac {
1327
+ width: 4rem;
1328
+ text-align: center; }
1329
+ .vault .dataTables_wrapper table .col-hp {
1330
+ width: 5rem;
1331
+ text-align: center; }
1332
+ .vault .dataTables_wrapper table .col-level {
1333
+ width: 4rem;
1334
+ text-align: center; }
1335
+ .vault .dataTables_wrapper table .col-role {
1336
+ width: 6rem; }
1337
+ .vault .dataTables_wrapper table .col-rank {
1338
+ width: 5.75rem; }
1339
+ .vault .dataTables_wrapper table .col-cr {
1340
+ width: 4rem;
1341
+ text-align: center; }
1342
+ .vault .dataTables_wrapper table .col-description,
1343
+ .vault .dataTables_wrapper table .col-role-rank,
1344
+ .vault .dataTables_wrapper table .col-ac-hp {
1345
+ overflow: hidden;
1346
+ width: 0; }
1347
+ .vault .dataTables_wrapper table .dataTables_empty {
1348
+ padding: 0.5rem 0.75rem; }
1349
+ @media screen and (max-width: 800px) {
1350
+ .vault .dataTables_wrapper table .col-ac,
1351
+ .vault .dataTables_wrapper table .col-hp,
1352
+ .vault .dataTables_wrapper table .col-role,
1353
+ .vault .dataTables_wrapper table .col-rank {
1354
+ overflow: hidden !important;
1355
+ width: 0;
1356
+ padding: 0 !important;
1357
+ border-right: none !important; } }
1358
+ .vault .dataTables_wrapper table .table-card {
1359
+ display: flex;
1360
+ flex-direction: row; }
1361
+ .vault .dataTables_wrapper table .table-card .col-id {
1362
+ text-align: center;
1363
+ flex-shrink: 0;
1364
+ font-weight: bold; }
1365
+ .vault .dataTables_wrapper table .table-card .col-name {
1366
+ white-space: normal;
1367
+ flex-grow: 1; }
1368
+ .vault .dataTables_wrapper table .table-card .col-name .name {
1369
+ margin: 0;
1370
+ font-weight: bold; }
1371
+ .vault .dataTables_wrapper table .table-card .col-name .role {
1372
+ font-size: 0.7em;
1373
+ font-style: italic;
1374
+ opacity: .75;
1375
+ margin: 0.25em 0 0; }
1376
+ .vault .dataTables_wrapper table .table-card .col-name .role .fas {
1377
+ opacity: .5; }
1378
+ .vault .dataTables_wrapper table .table-card .col-name .role:not(.rank-solo) .players {
1379
+ display: none; }
1380
+ .vault .dataTables_wrapper table .table-card .col-name .details,
1381
+ .vault .dataTables_wrapper table .table-card .col-name .stats {
1382
+ font-size: 0.7em;
1383
+ font-style: italic;
1384
+ opacity: .75;
1385
+ margin: 0; }
1386
+ .vault .dataTables_wrapper table .table-card .col-hp::after {
1387
+ font-family: "Font Awesome 5 Free";
1388
+ content: " \f004";
1389
+ color: #da3737; }
1390
+ .vault .dataTables_wrapper table .table-card .col-id,
1391
+ .vault .dataTables_wrapper table .table-card .col-name,
1392
+ .vault .dataTables_wrapper table .table-card .col-ac,
1393
+ .vault .dataTables_wrapper table .table-card .col-hp,
1394
+ .vault .dataTables_wrapper table .table-card .col-level,
1395
+ .vault .dataTables_wrapper table .table-card .col-role,
1396
+ .vault .dataTables_wrapper table .table-card .col-rank,
1397
+ .vault .dataTables_wrapper table .table-card .col-cr {
1398
+ padding: 0.5rem 0.75rem;
1399
+ overflow: hidden;
1400
+ text-overflow: ellipsis; }
1401
+ .vault .dataTables_wrapper table .table-card .col-id:not(:last-child),
1402
+ .vault .dataTables_wrapper table .table-card .col-name:not(:last-child),
1403
+ .vault .dataTables_wrapper table .table-card .col-ac:not(:last-child),
1404
+ .vault .dataTables_wrapper table .table-card .col-hp:not(:last-child),
1405
+ .vault .dataTables_wrapper table .table-card .col-level:not(:last-child),
1406
+ .vault .dataTables_wrapper table .table-card .col-role:not(:last-child),
1407
+ .vault .dataTables_wrapper table .table-card .col-rank:not(:last-child),
1408
+ .vault .dataTables_wrapper table .table-card .col-cr:not(:last-child) {
1409
+ border-right: 1px dotted #eef0f2; }
1410
+ .vault .dataTables_wrapper table .table-card .col-description,
1411
+ .vault .dataTables_wrapper table .table-card .col-role-rank,
1412
+ .vault .dataTables_wrapper table .table-card .col-ac-hp {
1413
+ overflow: hidden;
1414
+ width: 0; }
1415
+ .vault .dataTables_wrapper table .table-card .col-ac,
1416
+ .vault .dataTables_wrapper table .table-card .col-hp,
1417
+ .vault .dataTables_wrapper table .table-card .col-level,
1418
+ .vault .dataTables_wrapper table .table-card .col-role,
1419
+ .vault .dataTables_wrapper table .table-card .col-rank,
1420
+ .vault .dataTables_wrapper table .table-card .col-cr {
1421
+ flex-shrink: 0; }
1422
+ .vault .dataTables_wrapper table .table-card .col-rank:not(.rank-solo) .players {
1423
+ display: none; }
1424
+ .vault .dataTables_wrapper table .table-card.method-manual .role {
1425
+ display: none; }
1426
+ @media screen and (min-width: 801px) {
1427
+ .vault .dataTables_wrapper table .table-card .role {
1428
+ display: none; } }
1429
+ .vault .dataTables_wrapper .bottom {
1430
+ display: flex;
1431
+ justify-content: space-between;
1432
+ align-items: center;
1433
+ padding: 0.325rem 0.75rem;
1434
+ background: #eef0f2;
1435
+ border-radius: 0;
1436
+ border-top: 0.25rem solid #da3737; }
1437
+ .vault .dataTables_wrapper .bottom .dataTables_info {
1438
+ padding: 0;
1439
+ text-overflow: ellipsis;
1440
+ overflow: hidden;
1441
+ margin-right: 0.75rem;
1442
+ white-space: normal; }
1443
+ .vault .dataTables_wrapper .bottom .pagination {
1444
+ margin: 0; }
1445
+ @media screen and (max-width: 800px) {
1446
+ .vault .dataTables_wrapper .bottom {
1447
+ flex-direction: column; }
1448
+ .vault .dataTables_wrapper .bottom .dataTables_info {
1449
+ margin-bottom: 0.25rem;
1450
+ margin-right: 0; } }
1451
+ .vault .dataTables_wrapper .page-link {
1452
+ color: #da3737;
1453
+ background-color: white;
1454
+ border: 1px solid white;
1455
+ border: none;
1456
+ border-radius: 1cm;
1457
+ min-width: 2.2rem;
1458
+ line-height: 1.2;
1459
+ text-align: center;
1460
+ font-weight: bold; }
1461
+ .vault .dataTables_wrapper .page-item.active .page-link {
1462
+ background-color: #da3737;
1463
+ border-color: #da3737;
1464
+ color: #FFFFFF; }
1465
+ .vault .dataTables_wrapper .page-item.disabled .page-link {
1466
+ color: rgba(0, 0, 0, 0.25);
1467
+ background: #dee2e6;
1468
+ border: 1px solid #dee2e6; }
1469
+ .vault .dataTables_wrapper .page-item:not(:first-child) .page-link {
1470
+ margin-left: 2px; }
1471
+ .vault .dataTables_wrapper .page-item:first-child .page-link, .vault .dataTables_wrapper .page-item:last-child .page-link {
1472
+ border-radius: 100%; }
1473
+
1474
+ .vault.edit > .card-body {
1475
+ padding: 0;
1476
+ display: grid;
1477
+ grid-template-columns: 1fr 380px; }
1478
+ @media screen and (max-width: 840px) {
1479
+ .vault.edit > .card-body {
1480
+ grid-template-columns: 1fr 344px; } }
1481
+ @media screen and (max-width: 800px) {
1482
+ .vault.edit > .card-body {
1483
+ grid-template-columns: 1fr;
1484
+ grid-template-rows: auto auto; } }
1485
+ .vault.edit > .card-footer {
1486
+ display: flex;
1487
+ justify-content: space-between; }
1488
+ .vault.edit #monster-import-file {
1489
+ display: none; }
1490
+ .vault.edit .monster-blueprint {
1491
+ background: #dee2e6; }
1492
+
1493
+ /*# sourceMappingURL=monstermaker.1.0.3.3.css.map */