/*----- 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:#1674B4;
    --blue:#4A90E2;
    --yellow: #F5D000;
    --light-yellow: #FFFCED;
    --orange: #F5A623;
    --green:#21C348;
    --red:#D70000;
    --hr:#E0E4E9;

	--border-radius: 0.5em;

    --page-title: bold clamp(1.25rem, 1.028rem + 1.11vw, 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 {color:var(--link-blue);text-decoration:none}
a:is(:hover, :focus-visible), a:focus {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:2em 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:clamp(1.125rem, 1.032rem + 0.46vw, 1.438rem)}
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}

.small {
	font-size: 0.875em;
}

/* 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;  width:100%; 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; min-height: 4.6875em; padding: 0.5em;}
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:is(:hover, :focus-visible),
main input[type="button"]:focus,
main input[type="submit"]:focus,
main input[type="reset"]:focus {background-color:var(--bright-purple);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 {
    font-size: 1.125em;
    line-height: 2.5em;
    padding: 0.25em 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%; }

main input[disabled],
main select[disabled] {
  border-color: transparent;
}

main :is(input[disabled], select[disabled]):is(:hover, :focus-visible) {
  border-color: inherit;
}

main label:has(input[type=radio]:only-child, input[type=checkbox]:only-child, input[type=file]) {
  border-radius: 4px;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

main label:has(input[type=radio]:focus, input[type=checkbox]:focus, input[type=file]:focus) {
  outline: 1px solid var(--bright-purple);
}

.button.small {
  line-height: 1.25em;
  padding: 0.25em 0.65em;
}


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


/* HEADER ------------------------ */
body>header {
  background:#fff;
  border-bottom:1px solid #fff;
}

body>header .header-top {
  padding: 0 1rem;display:flex;
}

body>header .header-top .logo .tool-name {
  color:var(--dark-purple);
  display: block;
  font: bold clamp(1rem, 0.833rem + 0.83vw, 1.563rem)/1em 'metropolis', sans-serif;
}

body>header .header-top .account-links a {
  background: none;
  color: var(--dark-purple);
  display: inline-block;
}
body>header .header-top .account-links a i {
    color: var(--dark-purple);
}
body>header nav {
  background: var(--light-grey);
  margin:0;
  padding:0 1rem;
}
body>header nav ul{
    overflow:visible;margin: 0;padding: 0;
}
body>header nav li{
	display:inline-block;
	position:relative;
}
body>header nav>ul>li>a {font-size:1rem; color:var(--dark-purple);}

body>header nav a{
    color:#fff;
    display:inline-block;
    padding:0 1em;
    text-decoration:none;
}

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

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

.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 a.button {color: #fff}
table.listTable a:not(.button) {color: var(--link-blue)}
table.listTable a:not(.button):is(:hover, :focus-visible) {color: var(--bright-purple)}
table.listTable .tdNul {font-style: italic}

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

table input[type="date"],table input[type="time"],table input[type="datetime-local"] {width:auto}

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

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:is(:hover, :focus-visible) {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}
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}


/* FORMS ------------------------------ */

.formTable,
:where(.formTable, .form-flex) :where(input:where([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), table, textarea, select) {
	width: 100%;
}

#ContactForm fieldset {
	margin: .5em 0 0;
	border: 0;
	padding: 0;
}

#ContactForm fieldset legend {
	padding: 0;
}

#ContactForm fieldset table {
	margin-left: 2em;
}

/* Forms - without tables ----- */
form.narrow .form-flex,
.narrow.form-flex {
	max-width: 18.75em;
}

.form-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.form-flex fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

.form-flex fieldset legend {
	float: left;
	width: 100%;
}

.form-flex>div {
	margin: 0 0 .75em;
}

.form-flex .full {
	width: 100%;
}

.form-flex>div>label:first-of-type {
	display: block;
}

/* Checkboxes, radios */
.form-flex>div>fieldset>label {
	display: inline-block;
}


.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; }




/* TOOL SPECIFIC STYLES  ------------------------------ */
.sport-grid {
    background:#fff;
    border-radius: var(--border-radius);
    margin-bottom: 0.5em;
    padding:1em;
}

.sport-grid:has(input:focus) {
  outline: 1px solid var(--bright-purple);
}


.sport-grid p {
    font-size: 0.875em;
    line-height: 1.25em;
    margin: 0.5em 0 0;
}

.white-block {
	background: #fff;
	border-radius: var(--border-radius);
	margin-bottom: 0.5em;
}

.white-block *:last-child {
	margin-bottom: 0;
}

.flex {
    display: flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    width:100%;
}

.flex-column {
    flex-direction: column;
}

.flex.width-auto {
    width:auto;
}

.agree label {
    display: inline-block;
    padding: 0 0.5em;
}

.table-total {
	line-height: 2.5625rem;
}

/* Align Self - can be applied individual items within a flex container  */
.align-self-auto {align-self: auto;}
.align-self-baseline {align-self: baseline;}
.align-self-center {align-self: center;}
.align-self-flex-start {align-self: flex-start;}
.align-self-flex-end {align-self: flex-end;}

/* Align Items */
.align-items-center {align-items: center;}
.align-items-stretch {align-items: stretch;}
.align-items-flex-start {align-items: flex-start;}
.align-items-flex-end {align-items: flex-end;}

/* Align Content */
.align-content-center {align-content: center;}
.align-content-stretch {align-content: stretch;}
.align-content-flex-start {align-content: flex-start;}
.align-content-flex-end {align-content: flex-end;}

/* Justify content within a flex container */
.space-around {justify-content: space-around;}
.space-between {justify-content: space-between;}
.space-evenly {justify-content: space-evenly;}
.flex-center {justify-content: center;}
.flex-start {justify-content: flex-start;}
.flex-end {justify-content: flex-end;}

/* Wrap  */
.flex-wrap {flex-wrap: wrap;}
.no-wrap {flex-wrap: nowrap;}

/* columns */
.two-columns > * {width:50%;}
.three-columns > * {width:33.333%;}
.four-columns > * {width:20%;}

/* Gap */
.gap-4 {gap:4px}
.gap-8 {gap:8px}
.gap-10 {gap:10px}
.gap-14 {gap:14px}
.gap-20 {gap:20px}
.gap-2em {gap:2em}

.no-margin {
	margin:0;
}

.small-edit-button {
	background: none;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	padding: 0;
	border-radius: 50%;
	display: inline-flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hr);
}

.small-edit-button:is(:hover, :focus-visible) {
	background: var(--bright-purple);
	border-color: var(--bright-purple);
}

.small-edit-button i {
	color: var(--bright-purple);
	font-size: 0.75em;
}

.small-edit-button:is(:hover, :focus-visible) i {
	color: #fff;
}




/* POPOVERS ------------------------------ */
dialog {
    align-content: center;
    align-items: center;
    background: rgba(0,0,0,0.85);
    border: 0;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    margin: 0;
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    padding: 1em;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: ease all 200ms;
    width: 100%;
    z-index: 10;
}

dialog[open] {
    opacity: 1;
    pointer-events: all;
}

dialog .center .close {
    background: none;
    color: #fff;
    font-size: 3em;
    line-height: 1rem;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-100%);
}

dialog .center .close:is(:hover, :focus-visible) {
    opacity: 0.5;
}

dialog .popover-mask {
    cursor: default;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

dialog .center {
    background: #fff;
    border-radius: var(--border-radius);
    max-width: 40rem;
    padding: 2em;
    position: relative;
    width: 100%;
    z-index: 2;
}

dialog h2 {
    font-weight: 700;
}

dialog .actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

dialog .actions .cancel {
    background: none;
    color: var(--blue);
}

dialog .actions .cancel:is(:hover, :focus-visible) {
    background: var(--hr);
    color: var(--dark-blue);
}





/* 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);}



/*============= 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;}
}