<?xml version="1.0"?>

<root available-locales="ar_BH,en_US" default-locale="en_US">
	<dynamic-element name="content" type="text_area" index-type="text" instance-id="ddgc">
		<dynamic-content language-id="ar_BH"><![CDATA[<style type="text/css">input[type='checkbox'] {
    display: none;
}

.wrap-collabsible {
    margin: 1.2rem 0;
}

.lbl-toggle {
    display: block;
    font-weight: bold;
    font-family: "WB-Gothic", -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    color: #014d99;
    background: rgb(246, 246, 246);
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
    border: #cccccc;
}

.lbl-toggle:hover {
    color: black;
}

.lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 350px;
}

.toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
    background: white;
/*    border-bottom: 1px solid rgba(0, 105, 255, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;*/
    padding: .5rem 1rem;
}

.collapsible-content p {
    margin-bottom: 0;
}
</style>
<div class="wrap-collabsible"><input class="toggle" id="collapsible" type="checkbox" /> <label class="lbl-toggle" for="collapsible">مزيد من المعلومات</label>
<div class="collapsible-content">
<div class="content-inner">
<p>عنصر نائب لمحتوى المساعدة.</p>
</div>
</div>
</div>]]></dynamic-content>
		<dynamic-content language-id="en_US"><![CDATA[<style type="text/css">input[type='checkbox'] {
    display: none;
}

.wrap-collabsible {
    margin: 1.2rem 0;
}

.lbl-toggle {
    display: block;
    font-weight: bold;
    font-family: "WB-Gothic", -apple-system, BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Lucida Grande", "Helvetica Neue", "Helvetica", "Fira Sans", "Roboto", "Noto", "Droid Sans", "Cantarell", "Oxygen", "Ubuntu", "Franklin Gothic Medium", "Century Gothic", "Liberation Sans", sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    color: #014d99;
    background: rgb(246, 246, 246);
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
    border: #cccccc;
}

.lbl-toggle:hover {
    color: black;
}

.lbl-toggle::before {
    content: ' ';
    display: inline-block;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;
    vertical-align: middle;
    margin-right: .7rem;
    transform: translateY(-2px);
    transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 350px;
}

.toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
    background: white;
/*    border-bottom: 1px solid rgba(0, 105, 255, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;*/
    padding: .5rem 1rem;
}

.collapsible-content p {
    margin-bottom: 0;
}
</style>
<div class="wrap-collabsible"><input class="toggle" id="collapsible" type="checkbox" /> <label class="lbl-toggle" for="collapsible"> Info on Using the Knowledge Explorer within the WCKP</label>
<div class="collapsible-content">
<div class="content-inner">
<h2 style="color:blue;">Building Scenarios</h2>
<p>The WCKP is a tool for exploring alternative scenarios across a range of different attributes and assumptions.<br> The user can modify the attributes of 4 scenarios, which have a default name of S1, S2, S3, and S4.<br> The fifth scenario is not editable, and is established as the "Reference" scenario, with each of the assumed attributes given for each of the values. There are 11 total attributes that can be changed, including:
</p>

</div>
</div>
</div>]]></dynamic-content>
	</dynamic-element>
</root>