<!

--------------------------------
DOSSIER TEMPLATE
this template was made by Juni.

PLEASE EDIT WITH WYSIWYG TURNED OFF!

i would highly recommend using circlejourney:
https://th.circlejourney.net/

COLORS THAT YOU CAN CTRL+FIND REPLACE WITH A #000000 HEX:

ACCENT COLOR: red
PHOTO BACKGROUND COLOR: grey
BACKGROUND PAPER COLOR: #f3f3f3
INK COLOR: black
PHOTO FRAME: #ffffff
TEXT BOX COLOR: white
FAINT TEXT COLOR: rgba(0,0,0,.5)
Note that your text box color and ink color should contrast,
as they also control the header and button colors.

--------------------------------->
<div class="container mx-auto my-4 p-0" style="position: relative;
font-family: Courier New; color: black; max-width: 680px; height:
770px;">
<div style="background-color: #f3f3f3; box-shadow: 0px 0px 5px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1); border-radius: 5px; position:
absolute;
width: 100%; height: 100%; transform: rotate(-2deg);"></div>
<!--------------------------------
DOCUMENT WATERMARK
you can add a watermark to the paper by adding a background url.
ideally, please use a transparent image of your watermark.

alternately, you can add paper texture, just use a repeating

pattern and change...
background-repeat: repeat;
--------------------------------->
<div style="background-image: url('');
background-size: 105%; background-repeat: no-repeat; background-
position: center;
background-color: #f3f3f3; box-shadow: 0px 0px 5px rgba(0,0,0,.1);
border: 1px solid rgba(0,0,0,.1); border-radius: 5px; position:
relative;
width: 100%; height: 100%;">
<!-- Header -->
<div style="position: absolute;">
<ul class="nav nav-tabs card-header-tabs mt-2 ml-2">
<li><a class="btn btn-secondary m-1 p-1 text-center active"
style="width: 2rem; border-radius: 100%; color: white;
background-color: black;" data-toggle="tab" href="#tab-basics">
<span class="tooltipster" title="Basics"><i class="fa-solid
fa-user my-1"></i></span></a></li>
<li><a class="btn btn-secondary m-1 p-1 text-center"
style="width: 2rem; border-radius: 100%; color: white;
background-color: black;" data-toggle="tab" href="#tab-personality">
<span class="tooltipster" title="Personality"><i class="fa-
solid fa-comment-dots my-1"></i></span></a></li>
<li><a class="btn btn-secondary m-1 p-1 text-center"
style="width: 2rem; border-radius: 100%; color: white;
background-color: black;" data-toggle="tab" href="#tab-background">
 <span class="tooltipster" title="Background"><i class="fa-
solid fa-book my-1"></i></span></a></li>
</ul>
</div>
<div class="mt-4 text-center">
<div class="mx-auto" style="max-width: 100px;">
<!--------------------------------
COMPANY ICON
replace the icon with any fontawesome icon, optional.
you can also adjust the size by changing the 'fa-7x'
to be bigger or smaller with the number.

you can replace this with an image instead too, such as:
<img src="IMAGE URL">
--------------------------------->
<i class="fa-light fa-globe fa-7x py-2"></i>
</div>
<p class="text-uppercase font-weight-bold">Investigation Report</p>
</div>
<!-- office use section, hides on mobile -->
<div class="d-md-inline d-none" style="position: absolute; width: 190px;
top: 0px; right: 0px; font-size: .6rem;">
<div class="mt-3 mr-3 p-1 text-center" style="border: 1px solid
black;">
<p>FOR OFFICE USE ONLY</p>
<div class="row no-gutters mt-1">
<div class="col-md-6 col-12 text-md-right">
LAST UPDATED:
</div>
<div class="col-md-6 col-12" style="border-bottom: 1px solid
black;">
<!--------------------------------
DATE LAST UPDATED
when you last updated this app
--------------------------------->
03/26/2022
</div>
</div>
<div class="row no-gutters mt-1">
<div class="col-md-6 col-12 text-md-right">
STATUS:
</div>
<div class="col-md-6 col-12" style="border-bottom: 1px solid
black;">
<!--------------------------------
STATUS
--------------------------------->
ALIVE / DEAD
</div>
</div>
</div>
</div>
<div class="tab-content px-md-4 px-3" style="height: 590px;">
<!-- Page - Basics -->
<div class="h-100 tab-pane fade active show overflow-auto" id="tab-
basics">
<div class="text-center" style="font-size: .8em;">
<p style="color: rgba(0,0,0,.5);">FORM OC-105A: Basic
observations recorded for individual.</p>
 </div>
<div class="row no-gutters ">
<div class="col-md-6 col-12 mt-3 pt-3 order-md-1 order-0
justify-content-center">
<!-- image carousel -->
<div class="d-flex flex-column h-100 w-100">
<div class="ml-4 mt-4" style="background-color:
#ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,.4);
transform: rotate(4deg); height: 240px;
width: 86%; position: absolute;"></div>
<div class="carousel slide carousel-fade mx-auto p-1 w-
100" style="flex: 1 1 auto;" data-ride="false" data-pause="true" id="photos">
<div class="carousel-inner h-100 w-100">
<div class="carousel-item active p-2">
<div class="mx-3 mt-2 mb-md-0 mb-2 p-md-3
p-2" style="background-color: #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,.4);
transform: rotate(-2deg);
height: 250px;">
<!--------------------------------
IMAGE ONE
the photos can be cycled with the button. if you use a
transparent image, change the background-color as you like.
--------------------------------->
<div style="background-image:
url('http://via.placeholder.com/250x250');
background-size: cover;
background-repeat: no-repeat;
background-position:
center;
background-color: grey;
height: 100%;">
</div>
</div>
</div>
<div class="carousel-item p-2">
<div class="mx-3 mb-md-0 mb-2 p-md-3 p-2"
style="background-color: #ffffff; box-shadow: 0px 0px 5px rgba(0,0,0,.4);
transform: rotate(1deg);
height: 250px;">
<!--------------------------------
IMAGE TWO
the photos can be cycled with the button. if you use a
transparent image, change the background-color as you like.
--------------------------------->
<div style="background-image:
url('http://via.placeholder.com/250x250');
background-size: cover;
background-repeat: no-repeat;
background-position:
center;
background-color: grey;
height: 100%;">
</div>
</div>
</div>
</div>
</div>
<div class="text-center" style="position: absolute;
top: 10px; left: 0; right: 0;">
 <!-- tape image -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/47243584_FgJoOXj4yf4r5hO.png">
</div>
<!-- carousel button -->
<div class="justify-content-center">
<a class="btn btn-secondary mb-3 p-1 carousel-
control text-center" style="width: 2rem; border-radius: 100%; color: white;
background-color: black;" data-slide="next" aria-hidden="true" href="#photos">
<span class="tooltipster" title="Image"><i
class="fa-solid fa-arrows-rotate my-1"></i></span>
</a>
</div>
</div>
</div>
<div class="col-md-6 col-12 order-md-0 order-1">
<!-- identity rows -->
<div class="my-2 px-2 py-1 text-uppercase" style="color:
white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing:
1px;">
Identity
</div>
<div class="row no-gutters" style="font-size: .8em;">
<!--------------------------------
NAME
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
Name
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
First Middle Last
</div>
<!--------------------------------
ALIAS
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
Alias
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
Nickname/Codename
</div>
<!--------------------------------
GENDER
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
Gender
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
Gender & Pronouns
</div>
<!--------------------------------
SEXUALITY
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
Sexuality
</div>
 <div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
Sexual Orientation
</div>
</div>
<!-- characteristic rows -->
<div class="my-2 px-2 py-1 text-uppercase" style="color:
white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing:
1px;">
Characteristics
</div>
<div class="row no-gutters" style="font-size: .8em;">
<!--------------------------------
AGE
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
Age
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
00 yrs
</div>
<!--------------------------------
BIRTHDAY
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
D.o.B.
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
Month 00, YYYY
</div>
<!--------------------------------
HEIGHT
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
Height
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
0'0" / 00.00 cm
</div>
<!--------------------------------
SPECIES/ETHNICITY/RACE
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
Race
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
or Ethnicity, or Species
</div>
</div>
<!-- affiliation rows -->
<div class="my-2 px-2 py-1 text-uppercase" style="color:
white; background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing:
1px;">
Affiliation
</div>
 <div class="row no-gutters" style="font-size: .8em;">
<!--------------------------------
ORGANIZATION
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
ORG
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
Affiliation
</div>
<!--------------------------------
ROLE
--------------------------------->
<div class="col-3 mb-1 text-uppercase text-truncate">
Role
</div>
<div class="col-9 mb-1 text-center" style="color: red;
background-color: white; border: 1px solid rgba(0,0,0,.2);">
Job Title
<span class="tooltipster"
title="Job description can be added here.">
<i class="fa-duotone fa-circle-info"></i></span>
</div>
</div>
</div>
</div>
<!-- threat analysis -->
<div class="my-2 px-2 py-1 text-uppercase d-flex justify-content-
end" style="color: white; background-color: black; border-radius: 5px 5px 5px 5px;
letter-spacing: 1px;">
<div class="mr-auto">Threat Analysis</div>
<div>Lvl:</div>
<div class="align-items-center" style="color: red;">
<!--------------------------------
THREAT LVL
replace "fa-regular" with "fa-solid" to fill in the diamond.
You can also remove "Lvl:" and the diamonds.
--------------------------------->
<i class="fa-solid fa-diamond px-1"></i>
<i class="fa-regular fa-diamond px-1"></i>
<i class="fa-regular fa-diamond px-1"></i>
<i class="fa-regular fa-diamond px-1"></i>
<i class="fa-regular fa-diamond px-1"></i>
</div>
</div>
<div class="row no-gutters ">
<div class="col-md-7 col-12">
<!-- stat bars -->
<div class="row no-gutters mb-1" style="font-size: .8em;">
<div class="col-3 mb-1 text-uppercase d-flex align-
items-center">
<p class="text-truncate">Strength</p>
<span class="tooltipster ml-auto" data-
placement="right"
title="Physical ability. Lifting, pushing,
striking things with force, and enduring physical stress.">
<i class="fa-duotone fa-circle-info
pr-1"></i></span>
 </div>
<div class="col-9">
<div class="progress mb-1 p-1" style="background-
color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
<!--------------------------------
STRENGTH
change BOTH the width and the text numbers
--------------------------------->
<div class="progress-bar" role="progressbar"
style="color: white; background-color: black;
width: 25%">
25%
</div>
</div>
</div>
<div class="col-3 mb-1 text-uppercase d-flex align-
items-center">
<p class="text-truncate">Speed</p>
<span class="tooltipster ml-auto" data-
placement="right"
title="Reaction under pressure, dexterity,
and reflexes.">
<i class="fa-duotone fa-circle-info
pr-1"></i></span>
</div>
<div class="col-9">
<div class="progress mb-1 p-1 " style="background-
color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
<!--------------------------------
SPEED
change BOTH the width and the text numbers
--------------------------------->
<div class="progress-bar" role="progressbar"
style="color: white; background-color: black;
width: 25%">
25%
</div>
</div>
</div>
<div class="col-3 mb-1 text-uppercase d-flex align-
items-center">
<p class="text-truncate">Intellect</p>
<span class="tooltipster ml-auto" data-
placement="right"
title="Knowledge and experience. Can be
interpreted either as booksmarts or as wisdom.">
<i class="fa-duotone fa-circle-info
pr-1"></i></span>
</div>
<div class="col-9">
<div class="progress mb-1 p-1 " style="background-
color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
<!--------------------------------
Intellect
change BOTH the width and the text numbers
--------------------------------->
<div class="progress-bar" role="progressbar"
style="color: white; background-color: black;
width: 25%">
 25%
</div>
</div>
</div>
<div class="col-3 mb-1 text-uppercase d-flex align-
items-center">
<p class="text-truncate">Combat</p>
<span class="tooltipster ml-auto" data-
placement="right"
title="Pure fighting ability. Experience,
strategy, and application of speed, strength, and intellect in a conflict.">
<i class="fa-duotone fa-circle-info
pr-1"></i></span>
</div>
<div class="col-9">
<div class="progress mb-1 p-1 " style="background-
color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
<!--------------------------------
Combat
change BOTH the width and the text numbers
--------------------------------->
<div class="progress-bar" role="progressbar"
style="color: white; background-color: black;
width: 25%">
25%
</div>
</div>
</div>
<div class="col-3 mb-1 text-uppercase d-flex align-
items-center">
<p class="text-truncate">Charisma</p>
<span class="tooltipster ml-auto" data-
placement="right"
title="Social skill. Acting, persuasion,
communication, comprehension, and perception.">
<i class="fa-duotone fa-circle-info
pr-1"></i></span>
</div>
<div class="col-9">
<div class="progress mb-1 p-1 " style="background-
color: white; border: 1px solid rgba(0,0,0,.2); border-radius: 0;">
<!--------------------------------
Charisma
change BOTH the width and the text numbers
--------------------------------->
<div class="progress-bar" role="progressbar"
style="color: white; background-color: black;
width: 25%">
25%
</div>
</div>
</div>
</div>
</div>
<!-- fake signature -->
<div class="col-md-5 col-12 mt-auto pl-md-3 d-md-flex d-none
align-items-center">
<div class="text-center" style="font-size: .8em; color:
rgba(0,0,0,.5);">
 <p>
I certify that, to the best of my knowledge, the
provided information is true and correct.
</p>
<div class="my-2 p-2" style="background-color: white;
font-family: Calibri; font-size: .9rem; border: 1px solid rgba(0,0,0,.2);">
<p style="border-bottom: 1px solid black;">
<!--------------------------------
PI SIGNATURE
you can type a name instead but it's not as
cool or fun :( also there's no guarantee
whatever font you'd like to use will work
on all devices. I recommend a transp image!
you are also free to just use the one I put
in as generic filler.
--------------------------------->
<img style="max-height: 30px;"

src="https://f2.toyhou.se/file/f2-toyhou-se/images/65983635_WPscRV9DYUVim3M.png?
1686112262">
</p>
<span style="font-size: .8em;">Private Investigator
Signature</span>
</div>
</div>
</div>
</div>
</div>

<!-- Page - Personality -->

<div class="h-100 tab-pane fade" id="tab-personality">
<div class="h-100 d-flex flex-column">
<div class="text-center" style="font-size: .8em;">
<p style="color: rgba(0,0,0,.5);">FORM OC-105B: Behavioral
information of individual.</p>
</div>
<!-- mbti attributes -->
<div class="my-2 px-2 py-1 text-uppercase" style="color: white;
background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
Attributes
</div>
<div class="row no-gutters ">
<div class="col-12">
<!-- stat line -->
<div class="row no-gutters mb-1 align-items-center"
style="font-size: .8em;">
<div class="col-md-2 col-4 order-0 text-uppercase
d-flex align-items-center">
<span class="tooltipster mr-auto" data-
placement="right"
title="Energized by interacting with
others. Participates in events and are known to act quickly.">
<i class="fa-duotone fa-circle-info
pr-1"></i></span>
<p class="text-truncate">Extrovert</p>
</div>
<div class="col-md-2 col-4 order-2 text-uppercase
d-flex align-items-center">
<p class="text-truncate">Introvert</p>
 <span class="tooltipster ml-auto" data-
placement="left"
title="Energized by reflection and
working alone. Analyze and reflect before taking action.">
<i class="fa-duotone fa-circle-info
pr-1"></i></span>
</div>
<div class="col order=1">
<div class="progress card flex-row rounded-0
border-0 mx-2" style="background-color: rgba(0,0,0,.5); height: 1px; overflow:
visible;">
<!--------------------------------
EXTROVERT / INTROVERT
change the width number
--------------------------------->
<div class="progress-bar" style="height: 0;
background-color: transparent;
width: 25%;">
</div><i class="fa-solid fa-xmark"
style="color: red; margin-top:-8px;font-size:16px;"></i>
</div>
</div>
</div>
<!-- stat line -->
<div class="row no-gutters mb-1 align-items-center"
style="font-size: .8em;">
<div class="col-md-2 col-4 order-0 text-uppercase
d-flex align-items-center">
<span class="tooltipster mr-auto" data-
placement="right"
title="Pragmatic, realistic, focused on
facts and real world experiences.">
<i class="fa-duotone fa-circle-info pr-
1"></i></span>
<p class="text-truncate">Sensing</p>
</div>
<div class="col-md-2 col-4 order-2 text-uppercase
d-flex align-items-center">
<p class="text-truncate">Intuition</p>
<span class="tooltipster ml-auto" data-
placement="left"
title="Abstract, forward thinking,
focused on patterns and possibilities.">
<i class="fa-duotone fa-circle-info pr-
1"></i></span>
</div>
<div class="col order=1">
<div class="progress card flex-row rounded-0
border-0 mx-2" style="background-color: rgba(0,0,0,.5); height: 1px; overflow:
visible;">
<!--------------------------------
SENSING / INTUITION
change the width number
--------------------------------->
<div class="progress-bar" style="height: 0;
background-color: transparent;
width: 85%;">
</div><i class="fa-solid fa-xmark"
style="color: red; margin-top:-8px;font-size:16px;"></i>
 </div>
</div>
</div>
<!-- stat line -->
<div class="row no-gutters mb-1 align-items-center"
style="font-size: .8em;">
<div class="col-md-2 col-4 order-0 text-uppercase
d-flex align-items-center">
<span class="tooltipster mr-auto" data-
placement="right"
title="Logical decision makers,
analytical, evaluate the facts.">
<i class="fa-duotone fa-circle-info pr-
1"></i></span>
<p class="text-truncate">Thinking</p>
</div>
<div class="col-md-2 col-4 order-2 text-uppercase
d-flex align-items-center">
<p class="text-truncate">Feeling</p>
<span class="tooltipster ml-auto" data-
placement="left"
title="Empathetic decision makers,
careful to consider different points of view.">
<i class="fa-duotone fa-circle-info pr-
1"></i></span>
</div>
<div class="col order=1">
<div class="progress card flex-row rounded-0
border-0 mx-2" style="background-color: rgba(0,0,0,.5); height: 1px; overflow:
visible;">
<!--------------------------------
THINKING / FEELING
change the width number
--------------------------------->
<div class="progress-bar" style="height: 0;
background-color: transparent;
width: 55%;">
</div><i class="fa-solid fa-xmark"
style="color: red; margin-top:-8px;font-size:16px;"></i>
</div>
</div>
</div>
<!-- stat line -->
<div class="row no-gutters mb-1 align-items-center"
style="font-size: .8em;">
<div class="col-md-2 col-4 order-0 text-uppercase
d-flex align-items-center">
<span class="tooltipster mr-auto" data-
placement="right"
title="Makes plans and lists, follows
schedules, highly organized.">
<i class="fa-duotone fa-circle-info pr-
1"></i></span>
<p class="text-truncate">Judging</p>
</div>
<div class="col-md-2 col-4 order-2 text-uppercase
d-flex align-items-center">
<p class="text-truncate">Perceiving</p>
<span class="tooltipster ml-auto" data-
placement="left"
title="Spontaneous and flexible, highly
adaptable to change.">
<i class="fa-duotone fa-circle-info pr-
1"></i></span>
</div>
<div class="col order=1">
<div class="progress card flex-row rounded-0
border-0 mx-2" style="background-color: rgba(0,0,0,.5); height: 1px; overflow:
visible;">
<!--------------------------------
JUDGING / PERCEIVING
change the width number
--------------------------------->
<div class="progress-bar" style="height: 0;
background-color: transparent;
width: 15%;">
</div><i class="fa-solid fa-xmark"
style="color: red; margin-top:-8px;font-size:16px;"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Personality -->
<div class="my-2 px-2 py-1 text-uppercase" style="color: white;
background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
Personality
</div>
<div class="mb-2 p-3 text-justify overflow-auto"
style="background-color: white; font-family: Calibri; font-size: .9rem; border: 1px
solid rgba(0,0,0,.2); flex: 1 1 auto;">
<div class="row mb-2">
<div class="col-md col-12 pr-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
<div class="col-md-auto col-12 px-2 text-uppercase
text-center" style="color: red;">
<!--------------------------------
CHARACTER TRAITS
--------------------------------->
<p>TRAIT - TRAIT- TRAIT - TRAIT</p>
</div>
<div class="col-md col-12 pl-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
</div>
<!--------------------------------
PERSONALITY
--------------------------------->
<p>
Some things you can write about in this section
include: their intelligence, strengths, weaknesses, adaptability, habits,
temperament, morality, attitude, opinions, optimism, work ethic, values and
beliefs, desires, coping mechanisms, or fears.
</p>
<p>
 You can also address how they treat strangers vs
friends vs family, or what they prioritize in life, as well as their alignments
(lawful / neutral / chaotic and good / neutral / evil).
</p>
<p>
Are they patient or impulsive? Agreeable or contrary?
Idealistic or pragmatic? Collected or expressive? Sincere or deceptive? Timid or
brave? How happy are they? How anxious are they? What are their priorities (family,
friends, love, home, health, praise, justice, truth, power, fame, wealth)?
</p>
<p class="text-muted">
(This whole text box scrolls by the way.)
</p>
<!-- header section -->
<div class="row mb-2">
<div class="col-md col-12 pr-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
<div class="col-md-auto col-12 px-2 text-uppercase
text-center" style="color: red;">
<p>Mannerisms</p>
</div>
<div class="col-md col-12 pl-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
</div>
<!--------------------------------
MANNERISMS
--------------------------------->
<p>
Patterns in behavior, such as ticks, habits,
addictions, or quirks.
</p>
<!-- header section -->
<div class="row mb-2">
<div class="col-md col-12 pr-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
<div class="col-md-auto col-12 px-2 text-uppercase
text-center" style="color: red;">
<p>Speech</p>
</div>
<div class="col-md col-12 pl-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
</div>
<!--------------------------------
SPEECH
--------------------------------->
<p>
Recorded patterns in communication.
</p>
</div>
</div>
</div>
 <!-- Page - Background -->
<div class="h-100 tab-pane fade overflow-auto" id="tab-background">
<div class="h-100 d-flex flex-column">
<div class="text-center" style="font-size: .8em;">
<p style="color: rgba(0,0,0,.5);">FORM OC-105C: History
known of individual.</p>
</div>
<div class="my-2 px-2 py-1 text-uppercase" style="color: white;
background-color: black; border-radius: 5px 5px 5px 5px; letter-spacing: 1px;">
Background
</div>
<div class="mb-2 p-3 text-justify overflow-auto"
style="background-color: white; font-family: Calibri; font-size: .9rem; border: 1px
solid rgba(0,0,0,.2); flex: 1 1 auto;">
<!-- header section -->
<div class="row mb-2">
<div class="col-md col-12 pr-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
<div class="col-md-auto col-12 px-2 text-uppercase
text-center" style="color: red;">
<p>Origin</p>
</div>
<div class="col-md col-12 pl-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
</div>
<!--------------------------------
ORIGIN
--------------------------------->
<p>
What circumstances were they born in? Where did they
come from? Was their life comfortable or a struggle? Childhood circumstances,
education, training, and other information can be written here.
</p>
<!-- header section -->
<div class="row mb-2">
<div class="col-md col-12 pr-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
<div class="col-md-auto col-12 px-2 text-uppercase
text-center" style="color: red;">
<p>Turning Point</p>
</div>
<div class="col-md col-12 pl-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
</div>
<!--------------------------------
TURNING POINT
--------------------------------->
<p>
At what moment did your character enter the story and
find their agency? What formed their initial motivations?
 </p>
<!-- header section -->
<div class="row mb-2">
<div class="col-md col-12 pr-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
<div class="col-md-auto col-12 px-2 text-uppercase
text-center" style="color: red;">
<p>Presently</p>
</div>
<div class="col-md col-12 pl-md-0">
<hr class="my-2" style="background-color:
rgba(0,0,0,.1);">
</div>
</div>
<!--------------------------------
PRESENTLY
--------------------------------->
<p>
What is your character's current job? What are their
goals? What sort of places do they roam?
</p>
<p class="text-muted">
(This whole text box scrolls by the way.)
</p>
</div>
</div>
</div>
<!-- End Pages -->
</div>
</div>
<!-- code credit // you may reposition or relocate this, but do NOT remove it
-->
<div style="position: absolute; right: 0;">
<a class="ml-auto text-muted" href="https://toyhou.se/15365618.pwyw-
dossier"><i class="fa-light fa-code"></i></a>
</div>
</div>