<?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="apho">
		<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  {
    overflow-y:auto;
}
.collapsible-content p {
    margin-bottom: 0;
}
</style>
<div class="wrap-collabsible"><input class="toggle" id="collapsible" type="checkbox" /> <label class="lbl-toggle" for="collapsible">Title in Arabic</label>
<div class="collapsible-content">
<div class="content-inner">
<h2 style="color:blue;">Title in Arabic</h2>

<p>Info in Arabic</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  {
    overflow-y:auto;
}
.collapsible-content p {
    margin-bottom: 0;
}
</style>
<div class="wrap-collabsible"><input class="toggle" id="collapsible" type="checkbox" /> <label class="lbl-toggle" for="collapsible">WEAP Background Information</label>
<div class="collapsible-content">
<div class="content-inner">
<h3 style="color:blue;">WEAP Information Page</h3>

<p>This page shows the key background information that is stored within the WEAP model and that is deployed on an Cloud Server and connected to the WCKP. The WEAP information includes data for a historic period, and then shows the baseline data that is used as a reference scenario for future projections. Clicking on an individual object will allow the analyst to explore, plot, and download the data contained with the individual WEAP model objects. The available attributes of the indivudal data type will be displayed as a line or bar graph, with their units and named attributes. Multiple objects with similar attributes can be selected and displayed together (Multiple-Sites). While those objects with unique attributes will only allow for a single attribute to be displayed (Single-Sites)</p>
&nbsp;

<p style="color:red;">Red Dots - <span style="color: black"> Municipal and Industrial Demands (Indoor Water Use [m3/cap], Commercial and Industrial Water Use [mm3], and Population ['1000 people]) </span></p>
&nbsp;

<p style="color:green;">Green Dots - <span style="color: black"> Agricutlural Area (hectares by use type) </span></p>
&nbsp;

<p style="color:green;">Green Square - <span style="color: black">Groundwater Storage Capacity Storage Capacity (MM3)</span></p>
&nbsp;

<p style="color:green;">Green Triangles - <span style="color: black">Desalnization Plant Capacity (mil Imp Gal per Day) </span></p>
&nbsp;

<p style="color:brown;">Brown Circles - <span style="color: black">Wastewater Treatment Plant Capacity (MM3) </span></p>
<!--
<div>Image for testing</div>
<img alt="Image for testing" height="500" src="http://crme.rap.ucar.edu/WCKPortal/documents/20142/0/WEAP+Model+Components.jpg/f0487f2e-d165-98da-6bd4-b6475053bc51?t=1675185823399" width="300" />
--></div>
</div>
</div>]]></dynamic-content>
	</dynamic-element>
</root>