/**************************** _Base2021.1.css ****************************/
/**************************** START **********************/
/**************************** START **********************/
/**************************** START **********************/


/**************************** GENERAL **/
/* Do not change anything in these configurations */
html
{
    margin: 0;
    padding: 0;
	min-width: 320px;
    min-height: 100%;
}
body
{
	background-color: var(--BodyBackgroundColor);
	margin: 0px;
	padding: 0px;
	clear: none;
    min-height: 100%;
}

body, p, table, tr, td, th, q, li
{
	font-family: var(--MainFontFamily);
	font-weight: var(--MainFontWeight);
	text-align: left; 
	font-size: var(--MainFontSize);
    line-height: calc(var(--MainFontSize) * var(--MainLineHeightRatio));
	color: var(--MainFontColor);
}
h1, h2, h3, h4, h5, h6
{
	font-family: var(--HsFontFamily);
	font-weight: var(--HsFontWeight);
	text-align: left; 
    clear: both;
}
p, q, li
{
	padding: 0px;
	margin: 12px 0px 12px 0px;                      /** Analyze if it makes sense to var(--) these. We should also apply it to ul, ol */
	clear: none;
}
input:not([type='submit']), select, textarea, option
{
	font-family: var(--FormControlFontFamily);
	font-weight: var(--FormControlFontWeight);
	font-size: var(--FormControlFontSize);
	text-align: left; 
    vertical-align: baseline;
    background: var(--FormControlBackgroundColor);
}
input[type='submit'], button
{
	font-family: var(--FormButtonFontFamily);
	font-weight: var(--FormButtonFontWeight);
	font-size: var(--FormButtonFontSize);
	text-align: left; 
    vertical-align: baseline;
    background: var(--FormButtonBackgroundColor);
}
ul, ol
{
    color: var(--ListColor);
	margin: 0px;
    padding: 0px 0px 0px 40px;
	margin-bottom: 12px;
}
ul ul, ul ol, ol ol, ol ul
{
    margin: 4px 0 0 0;                            /** CanChange: Spacing between UL/OL inside UL/OL **/
}
li 
{
	margin: 4px 0px 4px 0px;        /** CanChange: Inter LI Spacing **/
}
table, tr, td, th, thead, tfoot, tbody
{
	margin: 0px;
	padding: 0px;
	clear: none;
    text-align: left;
	border-spacing: 0;
}
table
{
	border-collapse: collapse;
}
td, th
{
	vertical-align: top;
}



/**************************** ADDITIONAL STYLING FOR Hs ELEMENTS **********************/
/* Your styles in here */
/* Font family, weight are var-configured, but can be overriden. Text-align is configured above.*/
/* Required configurations include font-size and color; padding and margin and line-height. */

h1 
{
	font-size: 2.4rem;
    color: var(--Black);
    padding: 1rem 0 0 0;
	margin-top: 0;
	margin-bottom: 0.5rem;
	line-height: calc(2.4rem * 1.25);
    text-transform: uppercase;
}
h2
{
	font-size: 32px;
    color: var(--DarkGreen);
    padding: 20px 0px 0px 0px;
	margin-top: 0;
	margin-bottom: 20px;
	line-height: calc(32px * 1.25);
}
h3
{
	font-size: 24px;
    color: var(--Blue);
    padding: 20px 0px 0px 0px;
	margin-top: 0;
	margin-bottom: 12px;
    text-transform: uppercase;
	line-height: calc(24px * 1.25);
}
h4
{
	font-size: 20px;
    color: var(--Blue);
    padding: 12px 0px 0px 0px;
	margin-top: 0;
	margin-bottom: 12px;
	line-height: 20px;
}
h5
{
	font-size: 18px;
    color: var(--DarkGreen);
    padding: 8px 0px 0px 0px;
	margin-top: 0;
	margin-bottom: 8px;
	line-height: calc(18px * 1.25);
}

/****************************  ADDITIONAL STYLING FOR FORM CONTROL ELEMENTS **/
/* Your styles for input:not([type='submit']), select, textarea in here */
/* Standard font family, weight, size, color and background are var-configured */

input:not([type='submit']), select, textarea
{
    padding: 0 20px;
    border-radius: 8px;
    box-sizing: border-box;
    border: 0;
    outline: none;
}
input, select
{
    height: 50px;
}

/****************************  ADDITIONAL STYLING FOR FORM BUTTON ELEMENTS **/
/* Your styles for input[type='submit'], button in here */
button {
    width: 100%;
    border: 0;
    outline: none;
    border-radius: 8px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    color: var(--White);
    background-color: var(--DarkGreen);
    font-family: 'BioSans-Regular';
    font-size: 1.3rem;
    font-weight: 900;
    cursor: pointer;
}

/****************************  ADDITIONAL STYLING FOR TABLE ELEMENTS **/


/**************************** APS Class - If not used, first H's, P's, OL's, UL's have a margin-top and padding-top of 0; and last childs have a margin-bottom of 0 **/
div>h1:not(.APS):first-child, div>h2:not(.APS):first-child, div>h3:not(.APS):first-child, div>h4:not(.APS):first-child, div>h5:not(.APS):first-child, div>h6:not(.APS):first-child, div>p:not(.APS):first-child, div>ul:not(.APS):first-child, div>ol:not(.APS):first-child,
td>h1:not(.APS):first-child, td>h2:not(.APS):first-child, td>h3:not(.APS):first-child, td>h4:not(.APS):first-child, td>h5:not(.APS):first-child, td>h6:not(.APS):first-child, td>p:not(.APS):first-child, td>ul:not(.APS):first-child, td>ol:not(.APS):first-child,
th>h1:not(.APS):first-child, th>h2:not(.APS):first-child, th>h3:not(.APS):first-child, th>h4:not(.APS):first-child, th>h5:not(.APS):first-child, th>h6:not(.APS):first-child, th>p:not(.APS):first-child, th>ul:not(.APS):first-child, th>ol:not(.APS):first-child,
li:not(.APS):first-child
{
    margin-top: 0;
	padding-top: 0;
}
div>h1:not(.APS):last-child, div>h2:not(.APS):last-child, div>h3:not(.APS):last-child, div>h4:not(.APS):last-child, div>h5:not(.APS):last-child, div>h6:not(.APS):last-child, div>p:not(.APS):last-child, div>ul:not(.APS):last-child, div>ol:not(.APS):last-child,
td>h1:not(.APS):last-child, td>h2:not(.APS):last-child, td>h3:not(.APS):last-child, td>h4:not(.APS):last-child, td>h5:not(.APS):last-child, td>h6:not(.APS):last-child, td>p:not(.APS):last-child, td>ul:not(.APS):last-child, td>ol:not(.APS):last-child,
th>h1:not(.APS):last-child, th>h2:not(.APS):last-child, th>h3:not(.APS):last-child, th>h4:not(.APS):last-child, th>h5:not(.APS):last-child, th>h6:not(.APS):last-child, th>p:not(.APS):last-child, th>ul:not(.APS):last-child, th>ol:not(.APS):last-child,
li:not(.APS):last-child
{
	margin-bottom: 0;
}

/**************************** FIX ELEMENTS **/
div, form { margin: 0px; padding: 0px; }
div { padding-top: 0.01px; padding-bottom: 0.01px; text-align: left; }
img { border: none; display: block;}
p img { display: inline;}
table { border-spacing: 0px; border-collapse: collapse; }
td, th { border-spacing: 0px; vertical-align: top; }
object {display: block}

/**************************** A ELEMENT **/
a 
{
    color: var(--Red);
    text-decoration: none;
	cursor: pointer;
	font-weight: inherit;
}
a:hover
{
    text-decoration: underline;
}

/**************************** LEGACY STYLES **********************/
.Bordered 
{
    border: black 1px solid;
}
div.FormGeneric div.ValidatorErrors 
{    
	background-color: var(--Red);
	border: solid 1px #000000;
	margin-bottom: 8px;
}
div.FormGeneric div.ValidatorErrors p {
	color: var(--White);
	margin: 8px 10px 8px 10px;
}

/**************************** END **********************/
/**************************** END **********************/
/**************************** END **********************/

/**************************** _Root.css ****************************/
i.Dropdown
 {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 14px;
    color: #959595;
    z-index: 10;
}
select.Disabled
{
    background: #f0f0f0;
}

div.WidthConstraint
{
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
    box-sizing: border-box;
}
.CenterSelfBlock
{
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    display: block;
}
.RightSelfBlock
{
    margin-left: auto;
    margin-right: 0;
    width: max-content;
    display: block;
}
.CenterChildrenInlineBlocks
{
    text-align: center;
}
span.NoBreak
{
	white-space: nowrap;
	text-wrap: avoid;
}

button.Link
{
    background-color: var(--White);
    color: var(--Black);
    width: auto;
    padding: 1.3rem;
    border-color: var(--LightGray);
    font-weight: 400;
    font-size: calc(var(--FormButtonFontSize) * 0.8);
    height: auto;
    line-height: normal;
    margin-top: 1.3rem;
}

div.ValidatorErrors
{
    background-color: var(--Red);
    padding: 0.5rem;
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0.5rem;
    display: none;
}
div.ValidatorErrors p
{
    color: var(--White);

}
form div.FieldHighlighter.PointUp
{
    position: absolute;
    clip-path: polygon(0 20px, 20px 20px, 40px 0, 60px 20px, 100% 20px, 100% 100%, 0 100%, 0 0);
    background-color: var(--DarkGray);
    display: none;
    padding: 30px 10px 10px 10px;
    color: var(--White);
}
form div.FieldHighlighter.PointDown
{
    position: absolute;
    clip-path: polygon(0 calc(100% - 20px), 20px calc(100% - 20px), 40px 100%, 60px calc(100% - 20px), 100% calc(100% - 20px), 100% 0, 0 0, 0 calc(100% - 20px));
    background-color: var(--DarkGray);
    display: none;
    padding: 10px 10px 30px 10px;
    color: var(--White);
}
form div.FieldHighlighter p
{
    color: var(--White);
}
button.Disabled
{
    background-color: var(--LightGray);
}

section.GrayBackground {
    background-image: url('/images/GrayBackground.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}


/**************************** _Variables.css ****************************/
:root
{
    --Black: #202020;
    --White: #ffffff;
    --DarkGreen: #00703c;
    --DarkGreenShade20: #cce2d8;
    --DarkGreenShade10: #e5f0eb;
    --LightGray: #ccc;
    --DarkGray: #555;
    --LightGreen: #c0d72e;
    --Gray: #767676;
    --Red: #a00000;

    --BodyBackgroundColor: #ffffff;

    --MainFontFamily: 'BioSans-Regular', sans-serif;
    --MainFontWeight: 400;
    --MainFontSize: 16px;
    --MainLineHeightRatio: 1.5;
    --MainFontColor: var(--Black);

    --HsFontFamily: 'BioSans-Regular', sans-serif;
    --HsFontWeight: 500;
    
    --FormControlFontFamily: 'BioSans-Regular', sans-serif;
    --FormControlFontWeight: 400;
    --FormControlFontSize: 16px;
    --FormControlTextColor: var(--Black);
    --FormControlBackgroundColor: var(--White);

    --FormButtonFontFamily: 'BioSans-Regular', sans-serif;
    --FormButtonFontWeight: 900;
    --FormButtonFontSize: 1.3rem;
    --FormButtonTextColor: var(--Black);
    --FormButtonBackgroundColor: var(--DarkGreen);

    --ListColor: var(--DarkGreen);

    --MaxWidth: 1880px;
    --MaxWidthTight: 800px;
}

/* IMPORTANT CLASSES FOR LAYOUT */

/* Inside Grids, .Item's that need to have: div.Image, h4, div.Desc, div.Link & div.Progress*/

/* Section.Content can be .WhiteBackground or .GrayBackground */
/* Inside Section.Content, a div.Content that is .Read (adjusts line height) and .ConstraintWidth or .ConstraintWidthTight */

/* To float images, div.AvoidWidows with two divs inside: div.FL & div.Content */

/**************************** Alert.css ****************************/
div#Alert
{
    display: none;
    padding: 40px;
    background-color: var(--White);
    border: solid 4px var(--LightGray);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    position: fixed;
    z-index: 20000;
    box-sizing: border-box;
}
div#Alert p
{
    text-align: center;
}
div#AlertMessage
{
    margin-bottom: 2rem;
}
div#AlertMessage i.Large
{
    font-size:  5rem;
    color: var(--LightGreen);
    line-height: 6rem;
    vertical-align: middle;
}
div#AlertMessage i.Animated
{
    animation: ease-out;
    animation-duration: 0.35s;
    animation-name: resize;
    animation-iteration-count: 1;

}
@keyframes resize
{
    from {font-size: 2rem} to {font-size: 5rem}
}

/**************************** Beneficiaries.css ****************************/
section.Beneficiaries
{
    padding-top: 4rem;
    padding-bottom: 4rem;
}
section.Beneficiaries ul
{
    column-count: 3;
    column-gap: 40px;
}
@media (max-width: 1600px) {
    section.Beneficiaries ul
    {
        column-count: 2
    }
}
@media (max-width: 800px) {
    section.Beneficiaries ul
    {
        column-count: 1
    }
}

/**************************** BulletTable.css ****************************/
ul.BulletTable 
{
    border-left: 1px solid var(--DarkGreen);
    border-right: 1px solid var(--DarkGreen);
    border-top: 1px solid var(--DarkGreen);
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    margin: 0 0 1.5rem 0;
}
ul.BulletTable li
{
    position: relative;
    list-style: none;
    width: 100%;
    padding: 12px 25px 12px 60px;
    border-bottom: 1px solid var(--DarkGreen);
    color: var(--Black);
    box-sizing: border-box;
    margin: 0;
}
ul.BulletTable li:nth-child(2n+1)
{
    background-color: var(--DarkGreenShade10);
}

ul.BulletTable li:after
{
    position: absolute;
    content: '\f00c';
    font-family: fontAwesome;
    font-size: 22px;
    color: var(--DarkGreen);
    top: 10px;
    left: 20px;
}

/**************************** Columns1.css ****************************/
section.C1
{
}
section.C1 div.C1Wrapper
{
    width: 90%;
    margin: 0 auto;
    max-width: var(--MaxWidth);
}
@media (max-width: 800px)
{
    section.C1 div.C1Wrapper {
        width: calc(100% - 40px);
    }
}
section.C1 div.C1WrapperTight
{
    width: 90%;
    margin: 0 auto;
    max-width: var(--MaxWidthTight);
}
@media (max-width: 800px)
{
    section.C1 div.C1WrapperTight {
        width: calc(100% - 40px);
    }
}


/**************************** Columns2.css ****************************/
section.C2
{
}
section.C2 div.C2Wrapper
{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 90%;
    margin: 0 auto;
    max-width: var(--MaxWidth);
}
@media (max-width: 800px)
{
    section.C2 div.C2Wrapper {
        width: calc(100% - 40px);
    }
}
section.C2 div.C2Wrapper div.C2Left
{
    width: 100%;
    position: relative;
}
section.C2 div.C2Wrapper div.C2Left img.Main
{
    width: 100%;
    box-sizing: border-box;
    display: block;
}
section.C2 div.C2Wrapper div.C2Left img.Corner
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
section.C2 div.C2Wrapper div.C2Right
{
    width: 100%;
    box-sizing: border-box;
    margin-top: 2rem;
    padding-bottom: 4rem;
}
section.C2.NextIsC1 div.C2Wrapper div.C2Right
{
    padding-bottom: 0;
}

section.C2 div.C2HighlightMiddle
{
    z-index: 100;
    position: relative;
    padding: 1.5rem;
    background-image: url('/images/DarkGreenBackground.jpg');
    background-size: cover;
    box-sizing: border-box;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
section.C2 div.C2HighlightMiddle p
{
    color: var(--White);
}

@media (min-width: 768px) {
    section.C2.WhiteBackground div.C2Wrapper
    {
        padding-top: 2rem;
        padding-bottom: 4rem;
    }
    section.C2.WhiteBackground.NextIsC1 div.C2Wrapper
    {
        padding-bottom: 2rem;
    }
    body.About section.C2 div.C2Wrapper div.C2Left
    {
        background-image: url('/images/AboutPicture.jpg');
    }
    body.Home div.C2Wrapper div.C2Left
    {
        background-image: url('/images/WhitePicture.jpg');
    }
    body.SocialImpact section.C2 div.C2Wrapper div.C2Left
    {
        background-image: url('/images/SocialImpactPicture.jpg');
    }
    body.VitalSignsOutcomesWizard section.C2 div.C2Wrapper div.C2Left
    {
        background-image: url('/images/VitalSignsOutcomesWizardPicture.jpg');
    }
    section.C2 div.C2Wrapper div.C2Left
    {
        width: 40%;
        margin-right: 5%;
        padding-left: 0;
        padding-right: 0;

        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        min-height: 400px;
    }
    section.C2 div.C2Wrapper div.C2Left img.Main
    {
        display: none;
    }
    section.C2 div.C2Wrapper div.C2Right
    {
        width: 55%;
        padding: 0;
        margin-top: 0;
    }

    section.C2 div.C2HighlightMiddle
    {
        width: 140%;
        margin-left: -40%;
        border: solid 5px var(--White);
    }
}
@media (min-width: 1600px) {
    section.C2 div.C2Wrapper div.C2Left {
        min-height: 20vw;
    }

}


/**************************** DarkGreenHighlight.css ****************************/
section.DarkGreenHighlight
{
    background-image: url('/images/DarkGreenBackground.jpg');
    background-size: cover;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
section.DarkGreenHighlight div.DarkGreenHighlightWrapper
{
    width: 90%;
    margin: 0 auto;
    max-width: var(--MaxWidth);
}
@media (max-width: 800px)
{
    section.DarkGreenHighlight div.DarkGreenHighlightWrapper {
        width: calc(100% - 40px);
    }
}
section.DarkGreenHighlight div.DarkGreenHighlightWrapper p
{
    color: var(--White);
}
section.DarkGreenHighlight div.DarkGreenHighlightWrapper h2
{
    color: var(--LightGreen);
}
section.DarkGreenHighlight div.DarkGreenHighlightWrapper a
{
    color: var(--LightGreen);
}

/**************************** Error.css ****************************/
section.Error div.Error
{
    flex: 1 0 50%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    box-sizing: border-box;
}

section.Error div.Error h1
{
    text-align: center;
}

/**************************** Footer.css ****************************/
footer
{
    padding: 3rem 0 2rem 0;
    border-bottom: 8px solid var(--LightGreen);
    background-color: var(--White);
}
div.FooterWrapper
{
    width: 90%;
    margin: 0 auto;
}
div.FooterTop
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}
div.FooterTop ul
{
    margin: 0;
    padding: 0;
}
div.FooterTop ul li
{
    display: inline-block;
    margin: 10px 10px 10px 10px; 
    list-style: none;
    padding: 0;
}
div.FooterTop ul li a
{
    display: inline-block;
    font-weight: 300;
    font-size: 0.9rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--Gray);
}
@media (max-width: 768px) {
    div.FooterTop ul li {
        display: block;
    }
    div.FooterTop ul li 
    {
        text-align: center;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    div.FooterTop ul li.Separator
    {
        display: none;
    }
}
div.FooterBottom
{
}
div.FooterBottom p
{
    text-align: center;
    color: var(--Gray);
    font-weight: 300;
    font-size: 0.9rem;
}

/**************************** Header.css ****************************/
header
{
    border-top: 7px solid var(--LightGreen);
    background: var(--White);
    padding: 9px 0;
    position: relative;
}
header div.HeaderWrapper
{
    width: 90%;
    margin: 0 auto;
}
header div.HeaderTop
{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
}
header div.Logo
{
    flex: 0 0 auto;
    max-width: 200px;
}
header nav
{
    flex: 1 1 auto;
}
header nav ul
{
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    float: right;
    align-items: center;
}
header nav ul li
{
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
}
header nav ul li a
{
    padding: 12px 25px;
    color: var(--DarkGray);
    display: inline-block;
    text-decoration: none;
    border-radius: 8px;
    margin-left: 10px;
    margin-right: 10px;
}
header nav ul li a:hover
{
    background: var(--LightGreen);
    color: var(--DarkGreen);
    transition: 0.5s;
    text-decoration: none;
}
header nav ul li.Active a
{
    background: var(--LightGreen);
    color: var(--DarkGreen);
    transition: 0.5s;
    text-decoration: none;
}
@media (max-width: 1000px) {
    header nav ul
    {
        padding: 0;
    }
    header div.HeaderTop {
        flex-wrap: wrap;
    }
    header div.Logo
    {
        flex: 1 1 auto;
        text-align: center;
        max-width: unset;
    }
    header div.Logo img
    {
        display: inline-block;
        margin-bottom: 1rem;
    }
}
header div.MenuToggle
{
    display: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    background: var(--DarkGreen);
    text-align: center;
    font-size: 36px;
    position: relative;
    z-index: 10500;
    cursor: pointer;
    color: var(--White);
    line-height: 60px;
    border-radius: 8px;
}
@media (max-width: 800px) {
    header div.HeaderTop
    {
        flex-wrap: nowrap;
    }
    header div.Logo
    {
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    header nav
    {
        display: none;
    }
    header div.MenuToggle
    {
        display: block;
        margin-left: auto;
    }
}
header nav.MobileOpen
{
    background-color: var(--DarkGreen);
    position: absolute;
    top: 0;
    left: 0; right: 0;
    display: block;
    z-index: 10500;
    padding-top: 1rem;
    padding-bottom: 1rem;
}
header nav.MobileOpen ul
{
    flex-direction: column;
    float: none;
    margin: 0;
}
header nav.MobileOpen ul li
{
    width: calc(100% - 20px);
    margin-left: auto;
    margin-right: auto;
}
header nav.MobileOpen ul li a
{
    width: 100%;
    box-sizing: border-box;
    color: var(--White);
    padding: 25px 25px;
    border-bottom: dotted 1px rgba(255,255,255,0.3);
    margin: 2px 0 2px 0;
}
header nav ul li a.Button
{
    border: solid 1px var(--LightGreen);
}

/**************************** HeaderInternal.css ****************************/
section.HeaderInternal
{
    position: relative;
    margin-bottom: 2rem;
}
section.HeaderInternal img {
    width: 100%;
}
section.HeaderInternal div.TextOnTopWrapper
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
section.HeaderInternal div.TextOnTopWrapper h1
{
    text-align: center;
    color: var(--White);
    font-size: 2.4rem;
    font-family: 'BioSans-Bold', sans-serif;
    line-height: normal;
}
section.HeaderInternal div.TextOnTopWrapper h1 span.Small
{
    font-size: 1.6rem;
}
@media (max-width: 640px) {
    section.HeaderInternal div.TextOnTopWrapper h1
    {
        font-size: 1.6rem;
    }
    section.HeaderInternal div.TextOnTopWrapper h1 span.Small
    {
        font-size: 1.2rem;
    }

}

/**************************** HowToUse.css ****************************/
section.HowToUse
{
    background-color: var(--DarkGreenShade20);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
section.HowToUse div.HowToUseWrapper
{
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 90%;
    margin: 0 auto;
}
section.HowToUse div.HowToUseWrapper div.HowToUseLeft
{
    flex: 0 1 40%;
}
section.HowToUse div.HowToUseWrapper div.HowToUseMiddle
{
    flex: 0 0 20%;
    min-width: 500px;
}
section.HowToUse div.HowToUseWrapper div.HowToUseRight
{
    flex: 0 1 40%;
}
@media (max-width: 1200px) {
    section.HowToUse div.HowToUseWrapper {
        flex-wrap: wrap;
    }
    section.HowToUse div.HowToUseWrapper div.HowToUseLeft {
        flex: 0 0 100%;
        order: 3;
    }
    section.HowToUse div.HowToUseWrapper div.HowToUseMiddle {
        flex: 0 0 100%;
        order: 1;
        min-width: unset;
    }
    section.HowToUse div.HowToUseWrapper div.HowToUseMiddle canvas {
        display: none;
    }
    section.HowToUse div.HowToUseWrapper div.HowToUseRight {
        flex: 0 0 100%;
        order: 2;
    }
    section.HowToUse div.HowToUseWrapper div.HowToUseRight>br {
        display: none;
    }
    section.HowToUse div.HowToUseWrapper div.HowToUseRight div.HowToUseRightBottom {
        margin-top: 20px;
    }
    section.HowToUse div.HowToUseWrapper div.HowToUseLeft {
        margin-top: 20px;
    }
}
section.HowToUse h1
{
    text-transform: unset;
    text-align: center;
    padding-bottom: 2rem;
}
section.HowToUse h1 span.Smaller
{
    font-size: 1.2rem;
}
section.HowToUse h3
{
    margin-bottom: 0;
}

/**************************** LoginRegister.css ****************************/

section.LoginRegister div.Register
{
    flex: 0 0 50%;
    padding: 40px;
    box-sizing: border-box;
}
section.LoginRegister div.Login
{
    flex: 0 0 50%;
    padding: 40px;
    background-image: url('/images/DarkGreenBackground.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
}
section.LoginRegister div.Login h2
{
    color: var(--White);
}
section.LoginRegister div.Login p
{
    color: var(--White);
}
section.LoginRegister div.Login a
{
    color: var(--LightGreen);
}
@media (max-width: 800px) 
{
    section.LoginRegister div.LoginRegisterWrapper
    {
        flex-direction: column;
    }
}

section.LoginRegister div#LoginResetPasswordRequestPanel
{
    display: none;
}



/**************************** MakingAnImpact.css ****************************/
section.MakingAnImpact
{
    padding-top: 2rem;
    padding-bottom: 0rem;
}
section.MakingAnImpact div.C2Wrapper div.C2Right
{
    align-self: center;
}
section.MakingAnImpact div.C2Wrapper div.C2Right p
{
    text-align: center;
}
section.MakingAnImpact div.C2Wrapper div.C2Right h2
{
    text-align: center;
}
section.MakingAnImpact div.C2Wrapper div.C2Right button.Link
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    section.MakingAnImpact
    {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    section.MakingAnImpact div.C2Wrapper div.C2Right 
    {
        margin-top: 0;
    }
    section.MakingAnImpact div.C2Wrapper div.C2Right p
    {
        text-align: left;
    }
    section.MakingAnImpact div.C2Wrapper div.C2Right h2
    {
        text-align: left;
    }
    section.MakingAnImpact div.C2Wrapper div.C2Right div.MAIInner
    {
        width: 100%;
        margin: 0;
    }
    section.MakingAnImpact div.C2Wrapper div.C2Right button.Link
    {
        margin-left: 0;
    }
}

/**************************** ReportResults.css ****************************/
div#ReportResultsWrapper
{
    display: none;
    position: fixed;
    z-index: 20000;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
div#ReportResults
{
    height: min-content;
    min-height: calc(100% - 3.5rem);
    max-width: 800px;
    margin: 1.75rem auto;
    position: relative;
    width: auto;
    background-color: var(--White);
    border: solid 4px var(--LightGray);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
div#ReportResultsHeader
{
    flex: 0 0 80px;
    background-color: var(--DarkGreen);
    padding: 10px;
    position: relative;
}
div#ReportResultsInner
{
    flex: 1 1 auto;
    padding: 40px;
}
div#ReportResultsFooter
{
    padding: 20px;
    flex: 0 0 auto;
}
div#ReportResultsInner h5+p
{
    margin-top: 4px;
}
div#ReportResultsInner hr
{
    margin-top: 1.5rem;
}
div#ReportResultsHeader #ReportCloseInHeader
{
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 2rem;
    color: var(--White);
}
div#ReportResultsInner div.OptionsExport
{
    display: grid;
    grid-template-columns: repeat(2, minmax(auto, 200px));
    grid-column-gap: 40px;
    justify-content: center;
    margin-top: 60px;
}
div#ReportResultsInner div.OptionsExport div
{
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    background-color: var(--LightGray);
    cursor: pointer;
}
div#ReportResultsInner div.OptionsExport div:hover
{
    background-color: var(--LightGreen);
}
div#ReportResultsInner div.OptionsExport div i
{
    font-size: 40px;
    display: inline-block;
    text-align: center;
}
div#ReportResultsInner div.OptionsExport div p
{
    text-align: center;
}

/**************************** ResetPassword.css ****************************/
section.ResetPassword div.ResetPassword
{
    flex: 1 0 50%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    box-sizing: border-box;
}

section.ResetPassword div.ResetPassword h2
{
    text-align: center;
}

/**************************** Selector.css ****************************/
section.Selector
{
    background: url('/images/GreenBackground.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-top: 2px solid #fff;
    padding: 3.5rem 0;
}
section.Selector div.Selector
{
    width: 40%;
    min-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 800px)
{
    section.Selector div.Selector {
        width: calc(100% - 40px);
        min-width: unset;
    }
}
section.Selector div.SelectorField
{
    position: relative;
    margin-bottom: 1.8rem;
    box-sizing: border-box;
}
section.Selector div.SelectorField select
{
    display: block;
    width: 100%;
    z-index: 100;
    cursor: pointer;
    word-wrap: normal;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

section.Selector div#SpecificOutcome
{
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
}
section.Selector div#SpecificOutcome input[type='checkbox'] {
    height: 24px;
    width: 24px;
    border-radius: 4px;
}
section.Selector div#SpecificOutcome
{
    display: grid;
    grid-template-columns: min-content 1fr;
    grid-row-gap: 12px;
    grid-column-gap: 24px;
}
section.Selector button#ReportSubmit
{
    margin-top: 1.8rem;
    position: relative;
    z-index: 300;
}

section.Selector div#ReportResults
{
    width: 40%;
    min-width: 700px;
    margin-left: auto;
    margin-right: auto;
   padding-top: 1.8rem;
   padding-bottom: 1.8rem;
}
@media (max-width: 800px)
{
    section.Selector div#ReportResults {
        width: calc(100% - 40px);
        min-width: unset;
    }
}
section.Selector p
{
    text-align: center;
}
section.Selector h1
{
    text-align: center;
}


/**************************** Slideshow.css ****************************/
section.Slideshow div.Slide h2.SlideTitle
{
    margin-top: 200px;
    color: var(--LightGreen);
    text-align: center;
    display: block;
    font-size: 2.4rem;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.6);
    font-family: 'BioSans-Bold', sans-serif;
}
section.Slideshow div.Slide h2.SlideTitle span.Smaller
{
    font-size: 1.6rem;
}

section.Slideshow div.cycle-pager
{
    text-align: center;
    width: 100%;
    z-index: 500;
    position: absolute;
    top: 10px;
    overflow: hidden;
}
section.Slideshow div.cycle-pager span
{
    width: 32px;
    height: 16px;
    border-bottom: solid 3px var(--White);
    display: inline-block;
    cursor: pointer;
    margin-left: 4px;
    margin-right: 4px;
}
section.Slideshow div.cycle-pager span.cycle-pager-active
{
    border-bottom: solid 3px var(--LightGreen);
}
section.Slideshow div.Slide
{
    height: 50vh;
    min-height: 400px;
    width: 100%;
}

/**************************** Subscription.css ****************************/
section.Subscription
{
    padding: 1.5rem 0;
}
@media (min-width: 768px) {
    section.Subscription
    {
        padding: 5rem 0;
    }
}

section.Subscription div.Wrapper
{
    width: 90%;
    margin: 0 auto;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    max-width: var(--MaxWidthTight);
    padding: 40px;
}

section.Subscription input
{
    border: solid 1px var(--LightGray);
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}
section.Subscription select
{
    border: solid 1px var(--LightGray);
    display: inline-block;
    margin-bottom: 1rem;
}
section.Subscription input::placeholder
{
    color: var(--DarkGray);
    font-weight: 300;
}
section.Subscription select::placeholder
{
    color: var(--DarkGray);
    font-weight: 300;
}
section.Subscription button
{
    color: var(--DarkGreen);
    background-color: var(--LightGreen);
}
section.Subscription div#SUBMessage
{
    background-color: var(--LightGreen);
    width: 100%;
    padding: 0.5rem;
    border-radius: 8px;
    box-sizing: border-box;
    display: none;
    margin-bottom: 0.5rem;
}
section.Subscription div#SUBMessage p
{
    color: var(--DarkGreen);
}
section.Subscription div#SUBMessage a
{
    color: var(--Black);
}
section.Subscription button.Disabled
{
    color: var(--Gray);
    background-color: var(--LightGray);
}
section.Subscription table tr td
{
    border: solid 1px var(--LightGray);
    padding: 0.5rem 1rem;
}

/**************************** UserManagement.css ****************************/

section.UserManagement
{
    padding: 1.5rem 0;
}
@media (min-width: 768px) {
    section.UserManagement
    {
        padding: 5rem 0;
    }
}

section.UserManagement div.Wrapper
{
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    max-width: 1200px;
}

section.UserManagement input
{
    border: solid 1px var(--LightGray);
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
}
section.UserManagement input::placeholder
{
    color: var(--DarkGray);
    font-weight: 300;
}
section.UserManagement button
{
    color: var(--DarkGreen);
    background-color: var(--LightGreen);
}
section.UserManagement div#REGMessage, section.UserManagement div#RPQMessage, section.UserManagement div#RESMessage
{
    background-color: var(--LightGreen);
    width: 100%;
    padding: 0.5rem;
    border-radius: 8px;
    box-sizing: border-box;
    display: none;
    margin-bottom: 0.5rem;
}
section.UserManagement div#REGMessage p, section.UserManagement div#RPQMessage p, section.UserManagement div#RESMessage p
{
    color: var(--DarkGreen);
}
section.UserManagement div#REGMessage a, section.UserManagement div#RPQMessage a, section.UserManagement div#RESMessage a
{
    color: var(--Black);
}
section.UserManagement button.Disabled
{
    color: var(--Gray);
    background-color: var(--LightGray);
}