/*----- 2022 Updated Site Wrap -----*/

@font-face {
    font-family: 'metropolis';
    src: url('/includes/fonts/metropolis-bold-webfont.woff2') format('woff2'),
         url('/includes/fonts/metropolis-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'metropolis';
    src: url('/includes/fonts/metropolis-bolditalic-webfont.woff2') format('woff2'),
         url('/includes/fonts/metropolis-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'metropolis';
    src: url('/includes/fonts/metropolis-regular-webfont.woff2') format('woff2'),
         url('/includes/fonts/metropolis-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'metropolis';
    src: url('/includes/fonts/metropolis-regularitalic-webfont.woff2') format('woff2'),
         url('/includes/fonts/metropolis-regularitalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}


:root {
    --dark-purple:#0A2448;
    --bright-purple:#AF4B93;
    --light-purple:#D6DDE6;
    --dark-grey:#414042;
    --light-grey:#F0F2F4;
    --dark-blue:#1569A1;
    --link-blue:#288ACB;
    --blue:#4A90E2;
    --yellow: #F5D000;
    --light-yellow: #FFFCED;
    --orange: #F5A623;
    --green:#21C348;
    --red:#D70000;
    --hr:#E0E4E9;

    --tool-name: bold 1.5625rem/1em 'metropolis', sans-serif;
    --page-title: bold 2rem/1em 'metropolis', sans-serif;

    --gutter: 6vw;

}

html {-webkit-box-sizing:border-box;box-sizing:border-box;}
*, *:before, *:after {-webkit-box-sizing:inherit;box-sizing:inherit;}
body {margin:0;padding:0;-webkit-text-size-adjust:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

img{border: 0}
ul{padding-left: 0}
ul li{list-style:none}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr{font-family:inherit; font-size:inherit; font-style:inherit;font-weight:inherit}
table {border-collapse:collapse}
td, th {empty-cells:show;vertical-align:top;text-align:left}
body {background:#fff}
#skipNavigation{background:#fff;color:#000;padding:.5em;position:absolute;left:0;top:-1000px;z-index:10}
#skipNavigation:focus,#skipNavigation:active{top:0;}
iframe[src="/management/login/persistSession.aspx"] {display: none}

/* text */
body, .text, input, button, select, textarea {font-family:'metropolis', sans-serif;line-height:1.5;color:var(--dark-grey);-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.text{font-size: 1rem}
a, a *{color:var(--link-blue);text-decoration:none}
a:hover, a:active, a:hover *, a:active *{color:var(--bright-purple)}
p,h1,h2,h3,h4,hr,.content ul,.contentEditor ul,blockquote,dd,ol{margin-top:0;margin-bottom:1rem}
h1, h2, h3, h4, h5, h6, th{font-weight:400; line-height: 120%;}
p + h2, p + h3, p + h4, p + h5, p + h6 {margin-top:2em;}
.textColor, h1, h2, h3, h4, h5, h6, th, dt{color:var(--dark-purple)}
em, i, q, cite, .italic{font-style:italic}
b, strong{font-weight:700}
u{text-decoration:none}
hr{border:0; width:100%; border-top:2px solid var(--hr);margin:1em 0;padding-top:1px}
p {font-size:1em}
main h1 {font: var(--page-title); color:var(--dark-purple); background: var(--light-purple); margin:0; padding: 1.3125rem var(--gutter)}
main h2 {font-size:1.45em}
main h3 {font-size:1.3em}
main h4, th{font-size:1.2em}
main h5 {font-size:1.1em}
main h6 {font-size:1.0em}
main .intro {font-size: 1.25em;}
main sup, main sub {font-size:.6em; line-height:.6em;vertical-align:baseline;position:relative}
main sup {bottom:1ex}
main sub {top:.5ex}

/* content */
.content {word-wrap:break-word}
.content .photoright, .content .photoleft{max-width:50%;height:auto}
.content .photoright img,.content .photoleft img {max-width:100%;height:auto;margin: 0;float: none}
.content img.phototreatment{max-width:50%;height:auto}
.content figure.phototreatment{width: 100%;text-align: center}
.content figure.phototreatment img{max-width: 100%;width: auto;height: auto}
img.phototreatment,img.photoright,img.photoleft,.photoright img,.photoleft img {max-width: 100%;height: auto}
.photoright{float:right;clear:right}
.photoleft{float:left;clear:left}
.muted {opacity:0.5;filter:alpha(opacity=50)}
.highlight, .content .highlight{background:#FFC;padding:1em;margin:1em 0}
small, .textSm{font-size:.8em}
.content table{width:100%}
.shareIcons{display:inline-block;position:relative;overflow:auto}
.shareIcons a{display:block;float:left;margin:0 .5em 1em 0;height:20px;width:20px;background-position:center center; background-repeat:no-repeat;background-size:contain;border-radius:.2em;-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2);box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2)}
.shareIcons a:hover{background-color:#F03C5E}
	.shareFacebook{background-color:#3b5998; background-image:url(../../images/icons/64x64/facebook.png)}
	.shareTwitter{background-color:#00aced; background-image:url(../../images/icons/64x64/twitter.png)}
	.shareLinkedin{background-color:#007bb6; background-image:url(../../images/icons/64x64/linkedin.png)}
    .shareGoogle{background-color:#dd4b39; background-image:url(../../images/icons/64x64/google-plus.png)}
    
/* list */
.content ol{margin-left:2em}
.content ol ol li {list-style: lower-alpha}
.content ul li{padding-left:2em;text-indent: -1em}
.content ul li:before{content: "\25B8";display: inline-block;width: 1em;text-align: center;text-indent:0}
.content ul li ul li:before{opacity: .5}

/* addon classes */
.clearFloats{clear:both}
.nobr{white-space: nowrap}
.twoCol, .threeCol, .resCol{
-webkit-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
-webkit-column-gap:2em;
        column-gap:2em;
}
.req{color:#c00}
.textIcon{background:#999; background-color:rgba(0,0,0,.2);font-size:.8em;line-height:1em;display:inline-block;padding:.2em .4em;border-radius: .5em;color:#fff}
.textIcon:hover{background:#666; background-color:rgba(0,0,0,.4);color:#fff}
.clearfix:after{content: "";display: table;clear: both;}
.videoContainer {width: 100%;height:0;line-height:0;position: relative;padding-top:56.25%; /* 16:9 */}
.videoContainer.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */}
.videoContainer iframe {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:0}
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}

/* forms */
main input, 
main button, 
main select, 
main textarea {font-size:1rem;line-height: 1.2em}
main input[type="text"], 
main input[type="password"], 
main input[type="tel"], 
main input[type="date"],
main input[type="number"], 
main input[type="email"], 
main input[type="url"], 
main input[type="search"], 
main textarea, 
main select, 
main input[type="button"], 
main input[type="submit"], 
main input[type="reset"] {border-radius:0; outline: none; -webkit-appearance:none;font-size: 1rem}
main input[type="text"],
main input[type="password"],
main input[type="tel"],
main input[type="date"],
input[type="number"],
main input[type="email"],
main input[type="url"],
main input[type="search"],
main textarea, 
main select {height:2.5625rem; cursor:pointer; border:1px solid rgba(0,0,0,0.125); background:#fff; border-radius:4px; padding:0 0.5em; box-shadow:none}
main select {padding-right:1.75em; background: #fff url(/images/select-arrow.svg) no-repeat center right}
main textarea {height:auto;}
main input[type="text"]:hover,
main input[type="password"]:hover,
main input[type="tel"]:hover,
main input[type="date"]:hover,
main input[type="number"]:hover,
main input[type="email"]:hover,
main input[type="url"]:hover, 
main input[type="search"]:hover, 
main textarea:hover, 
main select:hover,
main input[type="text"]:focus,
main input[type="password"]:focus,
main input[type="tel"]:focus,
main input[type="date"]:focus,
main input[type="number"]:focus,
main input[type="email"]:focus,
main input[type="url"]:focus, 
main input[type="search"]:focus, 
main textarea:focus, 
main select:focus {border-color:var(--bright-purple)}
main textarea{display:block;}
main select option{padding:0 .2em}
main .greyBtn,
main button,
main .button,
main input[type="button"], 
main input[type="submit"], 
main input[type="reset"] {height:auto; background:var(--link-blue);display: inline-block; color:#fff;border:0; border-radius:4px; padding:0 1.5em;line-height:2.5625rem; font-size:1rem; cursor:pointer}
main input::-moz-focus-inner {border:0;padding:0;}
main .greyBtn:hover,
main button:hover,
main .button.hover,
main input[type="button"]:hover,
main input[type="submit"]:hover,
main input[type="reset"]:hover,
main .button:hover,
main .button:focus,
main input[type="button"]:focus,
main input[type="submit"]:focus,
main input[type="reset"]:focus {background-color:var(--dark-blue);color:#fff}
main input[value="Clear"] {background:none; padding:0; color:var(--link-blue)}
main input[value="Clear"]:hover {color:var(--bright-purple)}
main .button {display: inline-block}
main button img{height:1em;width:auto;vertical-align:top}
main input.bulky, .bulky {padding:.4em .6em;font-size:1.2em}
main .formTable, .formTable table{width:100%}
main .formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable input[type="search"], .formTable textarea{width:100%}
main .formTable table td,.formTable table td:first-child{padding-bottom:0}
main .formTable.right td:first-child{text-align:right;width:1%}
main .formTable.right td{width:auto}
main .subjClass{display:none !important;}
main #Captcha label{padding-left:0}
main td.right, th.right{text-align:right}
main .wsNew{display:inline-block;font-size:.7em;line-height:1.5em;height:1.5em;padding:0 .3em;margin:.3em 0;background-color:#FFC700;overflow:visible;vertical-align:top;color:#fff;font-style:italic}
main .formEdit select, .formBuilder select { width:40%; }

/* pagination */
.pagination{font-size:.95em;text-align:right}



/* HEADER ------------------------------*/
body>header {background:#fff; border-bottom:1px solid #fff; position:sticky; top:0; z-index:2;}
body>header .header-top {padding: 0 1rem;display:flex; justify-content: space-between; align-content: center; align-items:center;}
body>header .header-top .logo {padding: 1.1875rem; display:flex; align-content: center; align-items:center; flex-wrap: wrap}
body>header .header-top .logo img {width:auto}
body>header .header-top .logo .tool-name {display: block; margin-left: 1rem; font: var(--tool-name); color:var(--dark-purple)}
body>header .header-top .account-links a {display: inline-block; background: none; color: var(--dark-purple); font-size:1rem}
body>header .header-top .account-links a:hover {color:var(--bright-purple)}
body>header .header-top .account-links a.login:before {content:""; padding-left:1em; margin-right:0.25em; background: url(/images/icon-lock.svg) no-repeat center;}
body>header .header-top .account-links a.back-to-main:before {content:""; padding-left:1em; background: url(/images/icon-home.svg) no-repeat center;}
body>header nav ul,
body>header nav ul li {margin:0; padding:0; position:relative}
body>header nav>ul>li>a {font-size:1rem; color:var(--dark-purple);}
/* nav */
nav ul{margin: 0}
body>header nav {margin:0; padding:0 1rem; background: var(--light-grey)}
body>header nav ul{overflow:visible;margin: 0;padding: 0;}
body>header nav li{display:inline-block;position:relative}
body>header nav a{line-height:3.25rem;padding:0 1em;display:inline-block;color:#fff;text-decoration:none;}
body>header nav>ul>li:hover>a, 
body>header nav>ul>li:active>a,
body>header nav>ul>li.on>a{background:#fff; color:var(--dark-purple)}
/* drop-down menu */
body>header nav li ul{z-index:1;width:200px;padding:1em 0;background:var(--dark-purple);position:absolute;overflow:auto;height:auto; top: -200vh;opacity: 0;z-index: -1; visibility: hidden; transition: ease 200ms opacity 0.35s;}
body>header nav li:hover ul, 
body>header nav>ul>li>a.tapped + ul, 
body>header nav>ul>li>a:focus + ul, 
body>header nav>ul>li>ul:focus-within {opacity: 1; top:auto; visibility: visible; z-index: 1;}
body>header nav>ul>li:last-child:not(:nth-child(2), :nth-child(3), :nth-child(4)) ul{right:0}
body>header nav li ul li{width:100%;display:block;float:left; padding:0 2px}
body>header nav ul li ul li a{background:none;color:#fff}
body>header nav li ul li a {font-size:.9em; border-radius:3px; line-height:1.1em;padding:.3em .5em; display:block;width:100%;text-align:left;float:left}
body>header nav li ul li a:hover, .t1 li ul li a:active{color:var(--dark-purple);background:#fff}
body>header nav li ul ul {display: none}



/* MAIN ------------------------ */
main {padding:0; background:#F3F5F8; min-height: 20rem; padding: 0 var(--gutter) 12.5rem; position:relative; float:none; clear:both}
main h1 {margin: 0 calc(var(--gutter) * -1) 2rem}

main .text-align-center {text-align: center;}

.twoCol, .threeCol, .resCol{
-webkit-column-rule:1px outset rgba(0,0,0,.15);
   -moz-column-rule:1px outset rgba(0,0,0,.15);
        column-rule:1px outset rgba(0,0,0,.15);
}

.flex {display: flex}
.flex.space-between {justify-content: space-between;}
.flex.center-horizontally {align-content: center; align-items:center}
.flex.center-bottom {align-content: flex-end; align-items:flex-end}
.flex.flex-wrap {flex-wrap:wrap}

.twoCol {-webkit-columns:2;-moz-columns:2;columns:2;}
.threeCol {-webkit-columns:3;-moz-columns:3;columns:3;}
.resCol { -webkit-columns: auto;-moz-columns: auto;columns: auto; -webkit-column-width: 13em;-moz-column-width: 13em;column-width: 13em;}

.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}

.photoright{margin:0 0 3em 4em;}
.photoleft{margin:0 4em 3em 0;}

.dashboardOptions .clearFloats + div {margin-top:2em}

.manageLinks {float:none; margin:0}
.manageLinks + hr + form + hr, .manageLinks + hr {margin: 1em 0}
.manageLinks + hr + form + hr {margin-bottom: 2em}
.manageLinks + hr + form {margin: 0}

/* Styled List */
.uList {padding-left: 1em; }

/* Form */
input[type=text],input[type=password],input[type=email],input[type=url],input[type=number],input[type=date] {padding: 4px 4px 4px 1em;border: 1px solid #CBCACA;border-radius: 3px;height: 35px;vertical-align: middle;}
textarea {padding: 4px 4px 4px 1em;border: 1px solid #CBCACA;border-radius: 3px;margin-right: 1em}
select {display: inline-block;height: 35px;border: 1px solid #CBCACA;border-radius: 3px;background: #fff;min-width: 40px}
form {margin: 1em 0}

/* Buttons */
.greyBtn {background-color: #EFEFEF;border: 1px solid #DFDFDF;padding: 0 1em;line-height: 2.2;font-size: .875em;color: #231F20;border-radius: 3px;vertical-align: middle;-webkit-transition: all 300ms ease;transition: all 300ms ease;float: left;margin-right: 2em}
.greyBtn span {font-weight: 600;}
.greyBtn:after {content: '\203A';margin-left: 5px}
.greyBtn:hover {background: #262262;color:#fff}
input[type=submit],input[type=button] {background: #8DC63F; cursor: pointer; border-radius: 3px;padding: 0 1em;font-size: .875em;color: #fff;font-weight: 500;height: 35px;vertical-align: middle;-webkit-transition: all 300ms ease;transition: all 300ms ease}
input[type=submit]:hover,input[type=button]:hover {background: #666;}

/* Tables */
table.listTable {width: 100%;margin-bottom: 1em}
table.listTable thead tr {font-size: 1rem;width: 100%;line-height: 1.9}
table.listTable th {vertical-align:middle; color:var(--dark-purple); font-weight: 600; padding:0.5rem}
table.listTable td {padding:0.5rem}
table.listTable tbody tr {width: 100%; font-size:1em}
table.listTable tbody td:first-child {padding-left: 8px}
table.listTable a {color: var(--link-blue)}
table.listTable a:hover {color: var(--bright-purple)}
table.listTable .tdNul {font-style: italic}

table input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]):not([value="Clear"]),
table select,
table textarea {width:100%}

.loginTable {max-width: 27.5rem;margin: 0 auto;}
.loginTable .formTable td {vertical-align: middle;}
.loginTable .formTable td:first-child {text-align: right;}

table.alternate>tbody>tr:nth-child(odd) {background-color: #fff}
table.alternate>tbody>tr:hover {background-color: var(--light-yellow)}

table th.tablesorter-header { white-space:nowrap; cursor:pointer;}
table th.tablesorter-header .tablesorter-icon::after {font-family: "FontAwesome";content:'\00a0\f0dc'; font-style:normal;}
table th.tablesorter-headerSortDown .tablesorter-icon::after {font-family: "FontAwesome";content:'\00a0\f0dd'; font-style:normal;}
table th.tablesorter-headerSortUp .tablesorter-icon::after {font-family: "FontAwesome";content:'\00a0\f0de'; font-style:normal;}

table th.sorter-false { cursor:default;}
table th.sorter-false .tablesorter-icon::after {content:none !important;}

.formTable{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:100%}
.formTable{margin:15px 0 0 0}
.formTable td, .formTable th{padding:5px 8px 5px 0}
.formTable td:first-child{padding-left:8px}
.formTable td.text{padding-top:5px;text-align:right;vertical-align:top;}
.formTable.left td.text{text-align:left;}
.formTable img{position:relative;bottom:-3px}
.subjClass{display:none !important;}

.managementTable { border-bottom: 1px solid #c2c1d0; margin-bottom: 2em; width: 100%; }
.managementTable tr td:first-child { padding: 6px 0 0 5px; width: 15%; }
.managementTable td { padding: 5px 7px; }

.manageLinks {text-align: right;}
    .flex .manageLinks:not(.no-padding) {padding-top:1.5rem}
.manageLinks a {font-size: 1rem; padding:0.5rem 0; color: var(--dark-purple); display: inline-block; margin-left: .5em}
.manageLinks a:hover {color: var(--bright-purple)}
.manageLinks i {padding-right: .4em;}

.fa-pencil {color:#F5A623;}
.fa-plus,.fa-plus-circle {color:#1DA200;}
.fa-download {color:#4A90E2;}
.fa-minus-circle {color:#e9594d;}

/* AutoCompelte */
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-suggestions span { font-size:1em; font-style:italic;}


#ui-datepicker-div { font-size: .9em; }

.tabs {border-bottom:1px solid #afadc0;height:30px;margin:0;}
.tabs a {display:block;float:right;padding:8px 14px 5px;margin:2px 0 0 10px;background-color:#d7d6e0;color:#5e5b81;font-size:13px;line-height:13px;border:1px solid #afadc0;font-family:Georgia, "Times New Roman", Times, serif;border-radius: .4em .4em 0 0;-webkit-transition: all 150ms ease-out;transition: all 150ms ease-out;}
.tabs a:hover {background-color:#ebebf0;margin-top:0;padding-bottom:8px;color:#363262}
.tabs a.on, 
.requisitionTabs a.on:hover {border-bottom:1px solid #fff; background-color:#fff;margin-top:0;padding-bottom:8px;color:#363262}

tr.ui-sortable-handle {cursor:grab;}
.sortable .item {background-color: #fff;border: 1px solid var(--light-purple); cursor:grab; margin: 5px;padding: 10px;}

.verylow {background:rgba(204,0,0,.6); color: #fff; cursor:pointer;}
.low {background:rgba(204,0,0,.2); color: rgb(102,0,0); cursor:pointer;}
.good {background:rgba(0,153,0,.2); color: rgb(0,102,0); cursor:pointer;}
.verygood {background:rgba(0,102,0,.6); color: #fff; cursor:pointer;}
.neutral {cursor:pointer;}

.orange {color:var(--orange);}
.green {color:var(--green);}
.blue {color:var(--blue);}
.red {color:var(--red);}

.button, input[type=button] {}
.button:hover, input[type="button"] {}

table.like { width:100%;}
table.like td { text-align:center; width:20%; vertical-align:bottom;}

span.req { color:Red;}

tr.dark, div.dark { background-color:#efefef;}
tr.light, div.light { background-color:#ffffff;}

.twoCol {-webkit-columns:2;columns:2;}
.threeCol {-webkit-columns:3;columns:3;}
.resCol {
	-webkit-columns: auto;columns: auto;
	-webkit-column-width: 13em;column-width: 13em;
}
.resCol li {display:inline-block}
ol{margin-left:2em; margin-bottom: 2em}
.resCol {margin-bottom: 2em;margin-top: 2em; padding-bottom: 1em; border-bottom: solid 1px #ccc}
main ul li{padding-left:2em;text-indent: -1em;padding-bottom: .5em;font-weight: 500;color: #4A4A4A}
main ul li:before{content: "\f0da"; font-family: fontAwesome; display: inline-block;width: 1em;text-align: center;text-indent:0;color: #262262}

.letterBody {padding: 2em; background: #f8f7f7; margin-top: 2em;}
.letterBody h1 {margin-top: 0}
.responseQuestion {position: relative; margin-bottom: 2em;}
.responseQuestion p {color: #262262}
.responseQuestion .required {position: absolute; top: 0; right: 0; color: red; font-size: 0.8em; font-style: italic; font-weight: 600;}
.letter-category {padding:0.25em 0 1em 3rem; margin-bottom: 1em; border-bottom: 1px solid #dfdfdf; position: relative;}
.letter-category h2 {color: #262262; margin-bottom: 0}
.letter-category h2 i {width: 2em; height: 2em; position: absolute; top:0; left:0; font-size: 1.125rem; border-radius: 3px; line-height: 2em; text-align: center; color:#fff; background: #262262;}
.letter-category ul {margin: 0; padding: 0; border: 0}

main > .letter-category:first-child {padding-top: 3em;}
main > .letter-category:first-child h2 i {top: 2.5625rem;}


table.listTable.icons tbody td {vertical-align: middle}
table.listTable.icons tbody td:first-child {color: #fff; font-size: 1.25rem; padding: 0.25em; width: 1em; text-align: center; background: #262262; border-bottom: 1px solid rgba(255,255,255,0.3);}
table.listTable.icons tbody td:nth-child(2) {padding-left: 1em; font-size: 0.875rem; font-weight: 600; color: #262262}

.title-2 {color:#231F20; font-size:1.5rem; font-weight:600}
.title-2 span {font-size:0.875rem; font-style:italic; font-weight: 400; display: block;}

.status-bar {margin:0 0 2em; background: #f2f2f2; border-radius: 4px; display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}
.status-bar > div {color:#000; position:relative; font-size:0.875rem; padding: 0.75em 2em; line-height: 1.25em;font-weight:600; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
.status-bar > div:first-child {border-radius: 4px 0 0 4px}
.status-bar > div:last-child {border-radius: 0 4px 4px 0}
.status-bar > div.active {background:#fff; border: 1px solid #8DC63F; box-shadow:inset 0 0 9px 0 #E0FFB5}
.status-bar > div + div {margin-left:1em}
.status-bar > div > span {display: block; font-weight:400; color:#666; font-size: 0.875em; font-style:italic;}
.status-bar + h1 {margin-bottom:1rem}
.status-bar + h1 + .instructions {margin-top:1rem}

.instructions {background: #fff8d8;margin: 2em 0;border: 2px solid #6a6a3f;border-radius: 5px;color: #000;padding: 2em;}
.instructions > *:last-child {margin-bottom: 0;}

.select-different-passage {font-size:0.875em; display: inline-block; margin-bottom:1em}

ul.passage-list {overflow: auto;}
ul.passage-list li:first-child {width: 49%;float: right;background: #fff8d8;position: relative;text-indent: 0;border: 2px solid #6a6a3f;border-radius: 5px;color: #000;padding: 1rem;}
ul.passage-list li:first-child:before {content:"Article:"; line-height:1em; font-size:0.875rem; font-style:italic; display: block; font-family:Arial, Helvetica, sans-serif}
ul.passage-list li:first-child a {font-weight:600}
ul.passage-list li {float:left; width: 49%; clear:left;}


/* POPOVER ------------------------------ */
.popoverBody main {background:none;}
.popoverBody h1 {font-size: 1.5rem; background:none; margin:0 0 1rem; padding:0;}


/* TRANSITIONS ------------------------------ */
a, a *,button,.button,input[type="button"],input[type="submit"],.rsFullscreenBtn,#alertApp,#alertApp span,#alertDesc,#navContainer li,.hamburger{-webkit-transition: all 200ms ease;transition: all 200ms ease}
input:focus, select:focus, textarea:focus{-webkit-transition: background-color 150ms ease;transition: background-color 150ms ease}


/* FORM ERROR ------------------------------ */
.formError {background-color:Black; border:0; padding: 5px 10px; color:#fff; display:none; margin:0 0 2px; z-index:9999; border-radius: 10px; -moz-box-shadow:0 2px 2px #333; -webkit-box-shadow:0 2px 2px #333;}
.formError p {margin:0; font-size:.9em; }
.formError em { border:10px solid;  border-color:Black transparent transparent; bottom:-17px; display:block; height:0; left:40px; position:absolute; width:0; }


/* FOOTER ------------------------------ */
body>footer {position:relative; padding:0.8125rem 2rem; text-align: center; background:#fff; color:var(--dark-purple); line-height:1.25em; font-size:0.875rem}
body>footer nav {display: inline-block}
body>footer nav span:before {content: "|"; margin: 0 0.5em}
body>footer nav a {color:var(--dark-purple);}
body>footer nav a:hover {color:var(--bright-purple);}


@media screen and (max-width:1130px) {
    body > header .header-top .logo {padding-left:0}
    body > header .header-top .logo img {width:14em}
    body > header .header-top .logo .tool-name {font-size:1rem}
    body > header nav a {padding: 0 0.5em}
    body > header nav > ul > li > a {font-size:0.875rem}
}



/*============= TARGET iPAD FOR FORM BUTTONS ===============*/
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2){
.formTable td {display: block; padding:5px 5px 25px 5px;}
.formTable table.like td {display: inline-block; width: 15%;}
.formTable td.text {font-size: 2em; text-align: left; padding-bottom: 0;}
.formTable .formSelect {font-size: 2em; line-height: 2.25em;}
.formTable input[type="text"], .formTable input[type="password"] {font-size: 2em; line-height: 2.25em;}
.formButton {font-size: 1.5em; line-height: 2em; padding:.3em .6em;}
body {font-size:16px;}
}

/* iPhone5+ */ 
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5){
#login td {display: block; padding-bottom: 25px;}
#login td.text {font-size: 2em; text-align: left; padding-bottom: 0;}
#login .formSelect {font-size: 2em; line-height: 2.25em;}
#login input[type="text"] {font-size: 2em; line-height: 2.25em;}
.formButton {font-size: 2em; line-height: 2em; padding:4px 10px;}
body {font-size:16px;}
}

/* iPhone 4/4S */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) {
#login td {display: block; padding-bottom: 25px;}
#login td.text {font-size: 2em; text-align: left; padding-bottom: 0;}
#login .formSelect {font-size: 2em; line-height: 2.25em;}
#login input[type="text"] {font-size: 2em; line-height: 2.25em;}
.formButton {font-size: 2em; line-height: 2em; padding:4px 10px;}
body {font-size:16px;}
}