/**
* COLOR VARS
*
* Copy these color variables for use in header and footer styles.
* These are necessary for both the header and footer styles.
* Place these at the top of your stylesheet. They may be used 
* throughout your project to comply with branding guidelines.
**/
:root {

    /* Neutral Brand Colors */
    --color-white: #fff;
    --color-black: #000;
    --color-cool-gray: #d9d9d9;
    --color-warm-gray: #d7d2cb;

    /* Primary Brand Color */
    --color-red: #ba0c2f;

    /* Secondary Brand Color */
    --color-green: #215732;

    /* Accent Brand Colors */
    --color-teal: #007d8a;
    --color-mint: #b5e3d8;
    --color-gold: #f1b434;
    --color-coral: #ff6d6a;
    --color-dark-green: #13322b;
    --color-dark-red: #971b2f;
    --color-oatmeal: #faf7ef;

    /* Additional Named Colors http://chir.ag/projects/name-that-color/ */
    --color-alabaster: #f8f8f8;
    --color-mine-shaft: #3d3d3d;
    --color-gallery: #ececec;
    --color-silver: #ccc;
    --color-boulder: #767676;

    /* Brand Fonts */
    --body-font: "ivystyle-sans", sans-serif;
    --heading-font: "ivypresto-headline", serif;
}

/**
* TYPOGRAPHY STYLES
* These are necessary for both the header and footer styles.
**/
body {
    font-family: var(--body-font);
    font-size: 18px;
    font-weight: 400;
    line-height: calc(26 / 18);
    /* 1.444 */
}

/* The heading styles below are recommended, but not necessary */
h1,
h2,
h3 {
    font-family: var(--heading-font);
    font-weight: 400;
    line-height: calc(26 / 18);
    margin-bottom: 0.75em;
    /* 1.444 */
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

@media (min-width: 768px) {

    h1 {
        font-size: 44px;
    }

    h2 {
        font-size: 38px;
    }

    h3 {
        font-size: 32px;
    }

    h4 {
        font-size: 26px;
    }

    h5 {
        font-size: 22px;
    }
}

/* end typography styles */

/* LINKS */
a {
    background: transparent;
    text-decoration: none;
    color: var(--color-dark-red);
    cursor: pointer;
    transition: all .3s ease-in-out;
}

a:hover {
    background: transparent;
    text-decoration: underline;
    color: var(--color-dark-red);
    cursor: pointer
}

a:visited {
    color: var(--color-dark-red)
}

.offscreen,
.screen-reader-text {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

.usernameinuse {
    width: 15em;
    float: left;
    margin-left: 10px;
    font-size: 1.1em;
    color: #8B0000;
}

span.status {
    background-color: var(--color-mint);
    padding: 0 8px;
}

span.important {
    border: 2px solid var(--color-red);
    padding: 0.5rem 1rem;
    display: block;
}

span.important h2 {
    color: var(--color-red);
}

a.offsite:link,
.offsite {
    padding-right: 12px;
    background: transparent url("/css/images/aoutside.gif") no-repeat 100%;
    white-space: nowrap;
}

/**
* HEADER STYLES
**/
.site-header__branding {
	align-items: flex-start;
	background-color: var(--color-red);
	color: var(--color-white);
	display: flex;
    flex-direction: column;
    gap: 1rem;
	justify-content: space-between;
	padding: 16px 10px 16px 20px;

	@media (min-width: 768px) {
        flex-direction: row;
		align-items: center;
		padding: 16px 60px;
	}
}

.site-header__logo {
	align-items: center;
	display: flex;
    flex-wrap: wrap;

	& a {
		align-items: center;
		display: flex;
		height: 100%;
		text-decoration: none;
	}

	& img {
		border-right: 1px solid var(--color-white);
		height: 30px;
		padding-right: 16px;
	}

	@media (min-width: 1280px) {
		height: 34px;

		& img {
			height: 34px;
		}
	}

	& a:hover {
		text-decoration: none;
	}
	
	& a:focus {
		outline: 1px solid var(--color-white);
	}

	& a:focus:hover {
		outline: 0;
	}

    @media (min-width: 1280px) {
        	height: 30px;
    }
}

.site-header__title {
    font-family: var(--body-font);
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 1rem;
    width: 100%;

    @media (min-width: 768px) {
        font-size: 28px;
        margin-left: 2rem;
        margin-top: 0;
        width: auto;
    }
}

.site-header__tag {
	color: var(--color-white);
	font-family: var(--body-font);
    font-size: 18px;
    font-weight: 400;
	line-height: 1;
	margin-bottom: -2.3px;
	margin-left: 16px;

	@media (min-width: 1280px) {
		font-size: 28px;
	}
}

.site-header__nav a {
	color: var(--color-white);
	font-size: 18px;
  	line-height: 34px;
	text-decoration: none;

	&:hover {
		color: var(--color-white);
		text-decoration: underline;
	}

	@media (min-width: 1280px) {
		font-size: 28px;
	}
}

.site-header__return-link {
	color: var(--color-white);
	display: none;
	padding: 8px 20px 6px;
	text-decoration: none;

	&:hover {
		color: var(--color-white);
		text-decoration: underline;
	}

	@media (min-width: 1280px) {
		display: inline-block;
	}
}

.site-title__link {
	color: var(--color-black);
	text-decoration: none;
	transition: color .3s ease-in-out;

	&:hover {
		color: var(--color-teal);
	}
}
.site-title {
	text-align: center;
}

/* end header styles */

/**
* FOOTER STYLES
**/
.site-footer {
	background-color: var(--color-black);
	border-top: 10px solid var(--color-mint);
	color: var(--color-white);
	margin-top: 56px;
	padding: 0 0 28px;

	@media (min-width: 1280px) {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 52px 60px;
	}
}

.site-footer .help_info {
    box-sizing: border-box;
    text-align: center;
    transform: translateY(-108px);
    padding: 0 16px;
    position: absolute;
    color: var(--color-black);
    left: 0;
    width: 100%;

    @media (min-width: 768px) {
        transform: translateY(-65px);
    }
    @media (min-width: 1280px) {
        transform: translateY(-115px)
    }
}

.site-footer__contact {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
    font-size: 14px;
    font-style: normal;
	margin: 0 0 28px;
	padding: 0 24px;
	text-align: center;

	@media (min-width: 1280px) {
		border-bottom: 1px solid var(--color-white);
		flex-basis: 50%;
		font-size: 18px;
		margin: 0;
		order: 1;
		padding: 0 0 48px;
		text-align: left;
	}

	& a {
		color: var(--color-white);
		font-weight: 400;
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}
	}
}

.site-footer__contact-line {
	display: block;
    margin-bottom: 9px;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.site-footer__contact-line--name {
	font-weight: 900;
	margin-bottom: 12px;

	@media (min-width: 1280px) {
		font-size: 20px;
		margin-bottom: 16px;
	}
}

.site-footer__contact-line--address {
	line-height: 1.5;
	margin: 0;
}

.site-footer__copyright {
	border-top: 1px solid var(--color-white);
	font-size: 14px;
	padding: 24px 24px 0;
	text-align: center;

	@media (min-width: 1280px) {
		align-items: flex-end;
		border: none;
		display: flex;
		flex-basis: 50%;
		margin-top: 16px;
		min-height: 24px;
		order: 3;
		padding: 0;
		text-align: left;
	}
}

.footer-utilities {
	border-bottom: 1px solid var(--color-white);
	display: flex;
	margin: 0 0 28px;
	padding: 28px 0;

	@media (min-width: 1280px) {
		flex-basis: 50%;
		justify-content: flex-end;
		margin: 0;
		order: 2;
		padding: 0 0 48px;
	}

	& > * {
		flex-basis: 50%;

		@media (min-width: 1280px) {
			flex: 0 1 auto;
		}
	}
}

.footer-utilities__menu {
	font-weight: 700;
	list-style: none;
	margin: 0;
	padding: 0 24px;

	@media (min-width: 1280px) {
		padding: 0 8px;
	}

	& .menu-item {
		margin-left: 0;
		padding-left: 0;

		&:not(:last-child) {
			margin-bottom: 23px;
		}

		@media (min-width: 1280px) {
			white-space: nowrap;
		}
	}

	& a {
		color: var(--color-white);
		font-size: 18px;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.footer-utilities__menu--col-1 {
	font-weight: 700;

	@media (min-width: 1280px) {
		margin-right: 48px;
	}
}

.footer-social {

	@media (min-width: 1280px) {
		align-items: center;
		display: flex;
		flex-basis: 50%;
		margin-top: 16px;
		min-height: 24px;
		order: 4;
	}
}

.footer-social__menu {
	display: flex;
	justify-content: center;
	list-style: none;
	margin: 0 0 28px;
	padding: 0 24px;

	@media (min-width: 1280px) {
		margin: 0 0 0 auto;
		padding: 0;
	}

	& .menu-item {
		padding: 0;

		&:not(:last-child) {
			margin-right: 16px;

			@media (min-width: 1280px) {
				margin-right: 24px;
			}
		}
	}

	& .menu-item a {
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		color: var(--color-white);
		display: block;
		height: 20px;
		overflow: hidden;
		padding: 0;
		text-indent: 101%;
		transition: transform .2s;
		white-space: nowrap;
		width: 20px;

		@media (min-width: 1280px) {
			height: 28px;
			width: 28px;
		}

		/* The default social icons are the svg version, but there are pngs of each in the assets folder if you can't use svg. */
		&[href*="facebook.com"] {
			background-image: url("../images/facebook.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="instagram.com"] {
			background-image: url("../images/instagram.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="twitter.com"] {
			background-image: url("../images/twitter.psvgng"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="vimeo.com"] {
			background-image: url("../images/vimeo.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="youtube.com"] {
			background-image: url("../images/youtube.svg"); /* change this url to reflect where the image exists in your project */
		}

		&[href*="signup.e2ma.net"] {
			background-image: url("../images/email.svg"); /* change this url to reflect where the image exists in your project */
		}

		&:hover {
			color: var(--color-white);
			text-decoration: none;
			transform: scale(1.2);
		}
	}
}
/* End footer styles */

/*
LEGAL
=====
CSS Based on Mollio CSS/HTML Templates
Original CSS & Copyright: Daemon Pty Limited 1995-2006, http://www.daemon.com.au & http://www.mollio.org/
License: Released Under the "Common Public License 1.0", http://www.opensource.org/licenses/cpl.php
Version: 010306
*/

/* Styles for ZeroClipboard buttons */
#d_clip_button {
    text-align: center;
    background-color: var(--color-white);
    vertical-align: -20%;
    width: 16px;
    display: inline;
}

#d_clip_button.zeroclipboard-is-hover {
    background-color: #eee;
}

#d_clip_button.zeroclipboard-is-active {
    background-color: #aaa;
}

/* THE BIG GUYS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* FORMS */
/* form {
    margin-top: 1rem;
    margin-bottom: 1rem;
} */

fieldset {
    border: none;
    margin-bottom: 0.75rem;
}

label {
    display: block;
    padding: 5px 0;
}

/* FORMS - general classes */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select {
    background: var(--color-white);
    color: var(--color-black);
    border: 1px solid var(--color-black);
    font-family: var(--body-font);
    font-size: 14px;
    padding: 5px 0.75rem;
    vertical-align: middle;

    &::placeholder {
        color: var(--color-black);
        font-family: var(--body-font);
    }
}

input[type="submit"],
input[type="button"],
input[type="reset"],
button,
.button-style {
    border: 2px solid var(--color-red);
    background: var(--color-red);
    color: var(--color-white);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    padding: 0.25rem 0.75rem;
    transition: all .3s ease-in-out;
    height: 29px;
    vertical-align: middle;

    &:visited {
        color: var(--color-white);
    }

    &:hover {
        background: var(--color-white);
        color: var(--color-red);
        text-decoration: none;
    }
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--color-teal);
}

input.f-submit,
button.f-submit {
    /* padding: 1px 3px;
    background: #666;
    color: var(--color-white);
    font-weight: bold;
    font-size: 96% */
}

/* FORMS - f-wrap-1 - simple form, headings on left, form elements on right */
form.f-wrap-1 {
    width: 100%;
    padding: 1rem 2rem;
    box-sizing: border-box;
    background: var(--color-oatmeal);
    border-top: 5px solid var(--color-red);
}

form.f-wrap-1 > div {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

form.f-wrap-1 > div h1 {
    order: 1;
}

form.f-wrap-1 fieldset {
    order: 3;
    width: 100%;
}

form.f-wrap-1 h3 {
    margin: 0 0 .6em;
}

form.f-wrap-1 label {
    width: 100%;
}

form.f-wrap-1 label input,
form.f-wrap-1 label select {
    width: 15em;
    margin-left: 10px;
}

form.f-wrap-1 label textarea,
#cke_message {
    width: 80%;
    margin-left: 10px;
}

form.f-wrap-1 label strong .req {
    color: var(--color-red);
    font-size: 150%;
    font-weight: normal;
}

form.f-wrap-1 div.req {
    order: 2;
    flex-grow: 1;
    font-weight: normal;
    text-align: right;
}

form.f-wrap-1 div.req strong {
    color: var(--color-red);
    font-size: 140%;
}

form.f-wrap-1 label select {
    width: 15.5em
}

form.f-wrap-1 label textarea.f-comments {
    width: 20em
}

form.f-wrap-1 input.f-submit {
    margin: 10px 0;
}

form.f-wrap-1 fieldset.f-checkbox-wrap,
form.f-wrap-1 fieldset.f-radio-wrap {
    float: left;
    width: 32em;
    border: none;
    margin: 0;
    padding-bottom: .7em
}

form.f-wrap-1 fieldset.f-checkbox-wrap strong,
form.f-wrap-1 fieldset.f-radio-wrap strong {
    float: left;
    width: 8em;
    line-height: 1.7;
    display: block;
    position: relative;
    padding-top: .3em
}

form.f-wrap-1 fieldset.f-checkbox-wrap fieldset,
form.f-wrap-1 fieldset.f-radio-wrap fieldset {
    float: left;
    width: 13em;
    margin: 3px 0 0 10px
}

form.f-wrap-1 fieldset.f-checkbox-wrap label,
form.f-wrap-1 fieldset.f-radio-wrap label {
    float: left;
    width: 13em;
    border: none;
    margin: 0;
    padding: 2px 0;
    margin-right: -3px
}

form.f-wrap-1 label input.f-checkbox,
form.f-wrap-1 label input.f-radio {
    width: auto;
    float: none;
    margin: 0;
    padding: 0
}

form.f-wrap-1 label span.errormsg {
    position: absolute;
    top: 0;
    right: -10em;
    left: auto;
    display: block;
    width: 16em;
    background: transparent url(images/errormsg_bg.gif) no-repeat 0 0
}

form.f-wrap-1 label span.errormsg strong {
    padding: 10px 0;
    margin: 0 10px 0 30px;
    color: #B30800;
    font-weight: bold;
    display: block;
    width: auto;
    float: none;
    line-height: 1.3
}

/* FORMS - f-wrap-2 - simple form, headings on top, form elements on bottom */
form.f-wrap-2 {
    width: 100%;
    padding: .5em 0;
    background: #f6f6f6;
    border-top: 1px solid #d7d7d7;
    position: relative
}

form.f-wrap-2 fieldset {
    width: auto;
    margin: 0 1em
}

form.f-wrap-2 h3 {
    margin: 0 0 .6em;
    font: bold 155% arial;
    color: #c00
}

form.f-wrap-2 label {
    clear: left;
    float: left;
    width: 100%;
    border-top: 1px solid var(--color-white)
}

/* hide from IE mac \*/
form.f-wrap-2 label {
    float: none
}

/* end hiding from IE5 mac */

form.f-wrap-2 label input,
form.f-wrap-2 label textarea,
form.f-wrap-2 label select {
    float: left;
    margin-left: 10px
}

form.f-wrap-2 label strong {
    float: left;
    line-height: 1.7;
    display: block;
    position: relative
}

form.f-wrap-2 label strong .req {
    color: #c00;
    font-size: 150%;
    font-weight: normal;
    position: absolute;
    top: -.1em;
    line-height: 1;
    left: -.4em;
    width: .3em;
    height: .3em
}

form.f-wrap-2 div.req {
    color: #666;
    font-size: 96%;
    font-weight: normal;
    position: absolute;
    top: .4em;
    right: .4em;
    left: auto;
    width: 13em;
    text-align: right
}

form.f-wrap-2 div.req strong {
    color: #c00;
    font-size: 140%
}

form.f-wrap-2 label select {
    width: 15.5em
}

form.f-wrap-2 label textarea.f-comments {
    width: 20em
}

form.f-wrap-2 div.f-submit-wrap {
    padding: 5px 0 5px 8em
}

form.f-wrap-2 input.f-submit {
    margin: 0 0 0 10px
}

form.f-wrap-2 fieldset.f-checkbox-wrap,
form.f-wrap-2 fieldset.f-radio-wrap {
    clear: left;
    float: left;
    width: 32em;
    border: none;
    margin: 0;
    padding-bottom: .7em
}

form.f-wrap-2 fieldset.f-checkbox-wrap strong,
form.f-wrap-2 fieldset.f-radio-wrap strong {
    float: left;
    width: 8em;
    line-height: 1.7;
    display: block;
    position: relative;
    padding-top: .3em
}

form.f-wrap-2 fieldset.f-checkbox-wrap fieldset,
form.f-wrap-2 fieldset.f-radio-wrap fieldset {
    float: left;
    margin: 3px 0 0 10px
}

form.f-wrap-2 fieldset.f-checkbox-wrap label,
form.f-wrap-2 fieldset.f-radio-wrap label {
    float: left;
    border: none;
    margin: 0;
    padding: 2px 0;
    margin-right: -3px
}

form.f-wrap-2 label input.f-checkbox,
form.f-wrap-2 label input.f-radio {
    width: auto;
    float: none;
    margin: 0;
    padding: 0
}

form.f-wrap-2 label span.errormsg {
    position: absolute;
    top: 0;
    right: -10em;
    left: auto;
    display: block;
    width: 16em;
    background: transparent url(images/errormsg_bg.gif) no-repeat 0 0
}

form.f-wrap-2 label span.errormsg strong {
    padding: 10px 0;
    margin: 0 10px 0 30px;
    color: #B30800;
    font-weight: bold;
    display: block;
    width: auto;
    float: none;
    line-height: 1.3
}

/* FORMS - f-wrap-request - simple form, headings on left, form elements on right */
form.f-wrap-request {
    width: 100%;
    padding: 1rem;
    background: var(--color-oatmeal);
    position: relative;
    box-sizing: border-box;
    margin: 0;
}

form.f-wrap-request:first-of-type {
    border-top: 2px solid var(--color-gold);
}

form.f-wrap-request:last-of-type {
    border-bottom: 2px solid var(--color-gold);
}

form.f-wrap-request fieldset {
    width: auto;
    margin: 0 1em
}

form.f-wrap-request fieldset fieldset {
    width: 100%;
    margin: 0;
}

form.f-wrap-request .alert {
    border: 2px solid var(--color-red);
    background-color: transparent;
    padding: 0 1rem;
    margin-bottom: 1rem;
    display: block;
}

form.f-wrap-request label {
    width: 100%;
}

form.f-wrap-request label input,
form.f-wrap-request label textarea,
form.f-wrap-request label select {
    width: 100%;
    box-sizing: border-box;
}

form.f-wrap-request label strong {
    float: left;
    width: 60%;
    line-height: 1.7;
    display: block;
    position: relative
}

form.f-wrap-request label strong .note {
    color: #333333;
    font-size: 80%;
    font-weight: normal
}

form.f-wrap-request div.req {
    position: relative;
}

form.f-wrap-request div.req strong,
form.f-wrap-request label strong .req {
    color: var(--color-red);
    font-size: 27px;
    font-weight: normal;
    position: absolute;
    top: -.1em;
    line-height: 1em;
    left: -.4em;
    width: .3em;
    height: .3em
}

form.f-wrap-request div.req strong {
    color: var(--color-red);
    font-size: 140%;
}

form.f-wrap-request label select {
    width: 15.5em
}

form.f-wrap-request label textarea.f-comments {
    width: 20em
}

form.f-wrap-request div.f-submit-wrap {
    padding: 5px 0 5px 8em
}

form.f-wrap-request input.f-submit,
button.f-submit {
    margin: 10px 0 0;
}

form.f-wrap-request fieldset.f-checkbox-wrap,
form.f-wrap-request fieldset.f-radio-wrap {
    float: left;
    width: 32em;
    border: none;
    margin: 0;
    padding-bottom: .7em
}

form.f-wrap-request fieldset.f-checkbox-wrap strong,
form.f-wrap-request fieldset.f-radio-wrap strong {
    float: left;
    width: 8em;
    line-height: 1.7;
    display: block;
    position: relative;
    padding-top: .3em
}

form.f-wrap-request fieldset.f-checkbox-wrap fieldset,
form.f-wrap-request fieldset.f-radio-wrap fieldset {
    float: left;
    width: 13em;
    margin: 3px 0 0 10px
}

form.f-wrap-request fieldset.f-checkbox-wrap label,
form.f-wrap-request fieldset.f-radio-wrap label {
    float: left;
    width: 13em;
    border: none;
    margin: 0;
    padding: 2px 0;
    margin-right: -3px
}

form.f-wrap-request label input.f-checkbox,
form.f-wrap-request label input.f-radio {
    width: auto;
    float: none;
    margin: 0;
    padding: 0
}

form.f-wrap-request label span.errormsg {
    position: absolute;
    top: 0;
    right: -10em;
    left: auto;
    display: block;
    width: 16em;
    background: transparent url(images/errormsg_bg.gif) no-repeat 0 0
}

form.f-wrap-request label span.errormsg strong {
    padding: 10px 0;
    margin: 0 10px 0 30px;
    color: #B30800;
    font-weight: bold;
    display: block;
    width: auto;
    float: none;
    line-height: 1.3
}

/* FORMS - f-wrap-detail - simple form, headings on left, form elements on right */
form.f-wrap-detail {
    width: 100%;
    padding: .5em 0;
    background: #f6f6f6;
    border-top: 1px solid #d7d7d7;
    position: relative
}

form.f-wrap-detail fieldset {
    width: auto;
    margin: 0 1em
}

form.f-wrap-detail h3 {
    margin: 0 0 .6em;
    font: bold arial;
    color: #c00
}

form.f-wrap-detail h2,
fieldset legend {
    margin: .6em 0 .6em;
    font: bold arial;
    color: #72121B
}

form.f-wrap-detail label {
    clear: left;
    float: left;
    width: 100%;
    border-bottom: 1px solid var(--color-white)
}

/* hide from IE mac \*/
form.f-wrap-detail label {
    float: none
}

/* end hiding from IE5 mac */

form.f-wrap-detail label input,
form.f-wrap-detail label textarea,
form.f-wrap-detail label select {
    width: 35%;
    float: left;
    margin-left: 10px
}

form.f-wrap-detail label strong {
    float: left;
    width: 60%;
    line-height: 1.7;
    display: block;
    position: relative
}

form.f-wrap-detail label strong .note {
    color: #333333;
    font-size: 80%;
    font-weight: normal
}

form.f-wrap-detail label strong .req {
    color: #c00;
    font-size: 150%;
    font-weight: normal;
    position: absolute;
    top: -.1em;
    line-height: 1em;
    left: -.4em;
    width: .3em;
    height: .3em
}

form.f-wrap-detail div.req {
    color: #666;
    font-size: 96%;
    font-weight: normal;
    position: absolute;
    top: .4em;
    right: .4em;
    left: auto;
    width: 13em;
    text-align: right
}

form.f-wrap-detail div.req strong {
    color: #c00;
    font-size: 140%
}

form.f-wrap-detail label select {
    width: 15.5em
}

form.f-wrap-detail label textarea.f-comments {
    width: 20em
}

form.f-wrap-detail div.f-submit-wrap {
    padding: 5px 0 5px 8em
}

form.f-wrap-detail input.f-submit {
    margin: 0 0 0 10px
}

form.f-wrap-detail fieldset.f-checkbox-wrap,
form.f-wrap-detail fieldset.f-radio-wrap {
    float: left;
    width: 32em;
    border: none;
    margin: 0;
    padding-bottom: .7em
}

form.f-wrap-detail fieldset.f-checkbox-wrap strong,
form.f-wrap-detail fieldset.f-radio-wrap strong {
    float: left;
    width: 8em;
    line-height: 1.7;
    display: block;
    position: relative;
    padding-top: .3em
}

form.f-wrap-detail fieldset.f-checkbox-wrap fieldset,
form.f-wrap-detail fieldset.f-radio-wrap fieldset {
    float: left;
    width: 13em;
    margin: 3px 0 0 10px
}

form.f-wrap-detail fieldset.f-checkbox-wrap label,
form.f-wrap-detail fieldset.f-radio-wrap label {
    float: left;
    width: 13em;
    border: none;
    margin: 0;
    padding: 2px 0;
    margin-right: -3px
}

form.f-wrap-detail label input.f-checkbox,
form.f-wrap-detail label input.f-radio {
    width: auto;
    float: none;
    margin: 0;
    padding: 0
}

form.f-wrap-detail label span.errormsg {
    position: absolute;
    top: 0;
    right: -10em;
    left: auto;
    display: block;
    width: 16em;
    background: transparent url(images/errormsg_bg.gif) no-repeat 0 0
}

form.f-wrap-detail label span.errormsg strong {
    padding: 10px 0;
    margin: 0 10px 0 30px;
    color: #B30800;
    font-weight: bold;
    display: block;
    width: auto;
    float: none;
    line-height: 1.3
}


/* TYPOGRAPHY */
p {
    margin: 0.75rem 0;
}
ul,
ol {
    margin: 0 0 1.5em
}

.highlight {
    color: #E17000
}

.subdued {
    color: #555
}

.error {
    color: var(--color-red);
    font-weight: bold
}

.success {
    color: var(--color-green);
    font-weight: bold
}

.caption {
    color: #555;
    font-size: 11px
}

.date {
    color: #bbb;
    display: block;
}

small {
    font-size: 11px
}

.disabledText {
    color: #555
}

/* LISTS */
ul {
    margin: .3em 0 1.5em 0;
    list-style-type: none
}

ul.related {
    margin-top: -1em
}

ol {
    margin: .5em .5em 1.5em
}

ol li {
    margin-left: 1.4em;
    padding-left: 0;
    background: none;
    list-style-type: decimal
}

li {
    line-height: 1.4em;
    padding-left: 15px;
    background-image: url(/css/images/bullet.gif);
    background-repeat: no-repeat;
}

li.doc {
    background-position: 3px -500px
}

ul.nomarker li {
    background: none;
    padding-left: 0
}

dl {
    margin: 0 0 1em 0
}

dt {
    font-weight: bold;
    margin-top: 1.3em
}

dl dl {
    margin: 0 0 1.5em 30px
}

/* GENERAL */
img {
    border: none
}

hr {
    margin: 1em 0;
    background: #f2f2f2;
    height: 1px;
    color: #f2f2f2;
    border: none;
    clear: both
}

.clear {
    clear: both;
    position: relative;
    font-size: 0px;
    height: 0px;
    line-height: 0px
}

/* NAV - top horizontal nav */
#nav,
#nav ul {
    padding: 0;
    margin: 0;
    list-style: none
}

#nav {
    font-weight: bold;
    height: 2.5em;
    font: bold 125% arial;
    margin: 0 105px 0 20px
}

#nav li {
    position: relative;
    background: var(--color-white);
    float: left;
    width: auto;
    display: block;
    margin: 0;
    border-bottom: 0px solid #666;
    background: url("../images/atlasbox.gif") no-repeat 100%;
    border-right: 0px solid #252525;
    padding: 0 2px 2px 0
}

#nav a,
#nav a:link,
#nav a:visited,
#nav a:hover,
#nav a:active {
    color: #002c5f;
    text-decoration: none;
    cursor: pointer;
    border-width: 1px 1px 1px 0px;
    border-color: #043767;
    display: block;
    padding: 4px 10px 2px
}

#nav a:hover {
    color: #3088BD
}

#nav li ul {
    border-left: 1px solid #72121B;
    background: #efefef url("../images/featurebox_bg.gif") no-repeat 100% 100%;
    width: 18.8em;
    font-size: 80%;
    margin-top: 0px;
    position: absolute;
    font-weight: normal;
    left: -999em
}

#nav li:hover ul,
#nav li.sfhover ul {
    left: 10px;
    z-index: 99999
}

#nav li li {
    background: none;
    float: none;
    border: none;
    border: 1px solid #999;
    border-top: 1px solid var(--color-white);
    border-right: none;
    border-left: none;
    padding-left: 0px
}

#nav li li.last {
    border-bottom: none
}

#nav li li a,
#nav li li a:link,
#nav li li a:visited,
#nav li li a:hover {
    color: #002c5f;
    padding: 3px 10px 2px;
    width: 17em
}

#nav li li a:hover {
    color: #3088BD;
    font-weight: bold;
}

#nav li.active {
    background: #333399;
    border-bottom: 3px solid #333399
}

#nav li.active ul {
    border: none;
    background: #c00 url("../images/featurebox2_bg.gif") no-repeat 100% 100%
}

#nav li.active a:link,
#nav li.active a:visited,
#nav li.active a:hover,
#nav li.active a:active {}

#nav li.active a:hover {
    color: #333FFF;
    font-weight: bold;
}

#nav li.active li {
    font-size: .8em;
    border: none;
    border-top: 1px solid #c15c5c;
    border-bottom: 1px solid #870000
}

#nav li.active li.last {
    border-bottom: none
}

#nav li.active li a:link,
#nav li.active li a:visited,
#nav li.active li a:hover,
#nav li.active li a:active {
    color: var(--color-white)
}

#nav li.active li a:hover {
    background: #666 url("../images/sprites.gif") repeat-x 0 99%;
    color: #333FFF;
    font-weight: bold;
}

#nav li.active li.active a:link,
#nav li.active li.active a:visited,
#nav li.active li.active a:hover,
#nav li.active li.active a:active {
    color: var(--color-white);
    font-weight: bold;
    background: #666 url("../images/sprites.gif") repeat-x 0 99%
}


/* hide from IE mac */
#nav li {
    width: auto
}

/* end hiding from IE5 mac */

/* ITEM NAV */
.itemnav {
    margin: 0;
    margin-bottom: 1rem;
    padding: 3px;
    background-color: var(--color-oatmeal);
    padding-left: 28px;
    border-bottom: 2px solid var(--color-gold);
}

.itemnav.viewDelete {
    padding: 3px 2.125rem;
    background-color: transparent;
    border-bottom: none;
}

.itemnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.itemnav li {
    display: inline-block;
    background-image: none;
    padding: 0;
}

.itemnav li::after {
    content: '|';
    display: inline-block;
    margin: 0 2px 0 6px;
}

.itemnav li:last-of-type::after {
    display: none;
}
/* end ITEM NAV */

/* ITEM CHOICES LIST */
.itemChoices {
    display: flex;
    gap: 1rem;
}

.itemChoices li a {
    text-align: center;
}

.itemChoices img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* end ITEM CHOICES LIST */

/* SEARCH */
#search form {
    margin: 0;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    color: var(--color-black);
    padding: 4px 6px;

    @media (min-width: 768px) {
        padding: 0 6px;
    }
}

#search input.f-criteria {
    width: min-content;
}

#search label {
    display: block;
    @media (min-width: 768px) {
            display: inline-block;
    margin-right: 5px;
    }

}

#search input.f-submit {
    /* width: auto;
    font-size: 81%;
    margin: 0 0 -.15em;
    height: 1.95em */
}

#search #searchType input {
    /* margin: 0 0 -0.4em;
    height: 1.2em */
}

#search #searchType label {
    /* font-weight: normal;
    font-size: 0.8em;
    padding: 0px 0 0 5px */
}

/* POWERED BY - mollio logo in this case */
#poweredby {
    width: 96px;
    height: 63px;
    position: absolute;
    top: -102px;
    right: 0
}

#skip-to-content {
    background-color: var(--color-white);
	left: 0;
	padding: 0.625rem;
	position: fixed;
	top: 0;
	transform: translate(-100%, -100%);
	z-index: 100;

	&:focus {
		transform: translate(1rem, 1rem);
	}
}

/* LAYOUT - main body of page */
body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    grid-column-gap: 2rem;
    grid-row-gap: 3rem;

    @media screen and (min-width: 1280px) {
        grid-template-columns: 330px 2fr 1fr;
        grid-template-rows: repeat(3, auto);
    }
}

#header,
#site-footer {
    width: 100vw;

    @media screen and (min-width: 1280px) {
        grid-column: span 3;
    }
}

#header {
    grid-row: 1;
}

#site-footer {
    grid-row: 5;

    @media screen and (min-width: 1280px) {
        grid-row: 3;
    }
}

main {
    box-sizing: border-box;
    max-width: 100vw;
    grid-row: 3;
    padding: 0 2rem;

    @media screen and (min-width: 1280px) {
        grid-column: 2;
        grid-row: 2;
        max-width: calc(100vw - 410px);
        padding: 0;
    }
}

main > h1 {
    margin-top: 0;
    line-height: 1;
}

.mobile-only {
    @media screen and (min-width: 1280px) {
        display: none;
    }
}

#utility {
    border-top: 0px solid #999;
    box-sizing: border-box;
    max-width: 100vw;
    padding-left: 2rem;
    padding-right: 2rem;
    grid-row: 2;


    @media screen and (min-width: 1280px) {

        grid-column: 1;
        grid-row: 2;
        padding-left: 3rem;
        padding-right: 0;
    }
}

#utility nav {
    height: 0;
    overflow: auto;

    @media screen and (min-width: 1280px) {
        height: auto;
    }
}

#utility nav.open {
    height: auto;
}

#utility button .chevron {
    display: inline-block;
    transition: transform .3s ease-in-out;
    transform: rotate(0deg);
}

#utility button.open .chevron {
    transform: rotate(180deg);
}

#sidebar {
    /* border-top: 5px solid #999; */
    margin-right: 2rem;
    margin-left: 2rem;
    grid-row: 4;

    @media screen and (min-width: 1280px) {
        grid-column: 3;
        grid-row: 2;
        margin-right: 3rem;
        margin-left: 0;
    }
}

.featurebox {
    color: var(--color-dark-green);
    padding: 15px 20px 20px;
    border-top: 5px solid var(--color-dark-green);
    margin: 0 0 1.5em;
    background: var(--color-mint);
}

.featurebox p,
.featurebox h1,
.featurebox h2,
.featurebox h3,
.featurebox h4,
.featurebox h5,
.featurebox h6 {
    margin: 0 0 .3em;
    color: var(--color-dark-green);
}

.featurebox p {
    border: none;
    margin: 0 0 0.5em;
}

.featurebox a {
    font-weight: bold;
}

.alertNone,
.alertSystem,
.alertUser,
.alertStatus,
.alertDeliveryLocation {
    padding: 0px 20px 20px;
    border-top: 5px solid var(--color-red);
    margin: 0 0 1.5em;
    background: var(--color-oatmeal);
}

.alertNone h1,
.alertNone h2,
.alertNone h3,
.alertNone h4,
.alertNone h5,
.alertNone h6,
.alertSystem h1,
.alertSystem h2,
.alertSystem h3,
.alertSystem h4,
.alertSystem h5,
.alertSystem h6,
.alertUser h1,
.alertUser h2,
.alertUser h3,
.alertUser h4,
.alertUser h5,
.alertUser h6,
.alertStatus h1,
.alertStatus h2,
.alertStatus h3,
.alertStatus h4,
.alertStatus h5,
.alertStatus h6,
.alertDeliveryLocation h1,
.alertDeliveryLocation h2,
.alertDeliveryLocation h3,
.alertDeliveryLocation h4,
.alertDeliveryLocation h5,
.alertDeliveryLocation h6 {
    margin: 0 0 .3em;
    color: var(--color-red);
}

.alertNone p,
.alertSystem p,
.alertUser p,
.alertStatus p,
.alertDeliveryLocation p  {
    border: none;
    margin: 0 0 0.5em;
}

.alertNone a,
.alertSystem a,
.alertUser a,
.alertStatus a,
.alertDeliveryLocation a  {
    font-weight: bold;
}

.thumbnail {
    margin: 0 0 0 10px;
    position: relative;
    z-index: 9999;
    border: 1px solid #eee;
    float: right;
    width: 100px;
    padding: 5px;
    background: var(--color-white)
}

.thumbnail img {
    border: 1px solid #000
}

.pagination {
    background: #f2f2f2;
    color: #666;
    padding: 4px 2px 4px 7px;
    border: 1px solid #ddd;
    margin: 0 0 1.5em
}

.pagination p {
    position: relative;
    text-align: right
}

.pagination p a:link,
.pagination p a:visited,
.pagination p a:hover,
.pagination p a:active {
    text-decoration: none;
    background: var(--color-white);
    padding: 2px 5px;
    border: 1px solid #ccc
}

.pagination p a:hover {
    background: #c00;
    color: var(--color-white)
}

.pagination p span {
    text-decoration: none;
    background: var(--color-white);
    padding: 2px 5px;
    border: 1px solid #ccc;
    color: #ccc
}

.pagination * {
    margin: 0
}

.pagination h4 {
    margin-top: -1.45em;
    padding: 0;
    border: none
}

#resultslist-wrap {
    margin: 0 0 1.5em;
    font-size: 92%
}

#resultslist-wrap dt,
#resultslist-wrap dl {
    margin: 0
}

#resultslist-wrap dt {
    font: bold 85% arial;
    padding: 3px 0
}

#resultslist-wrap li {
    padding: 0 0 1em;
    margin: 0 0 0 1.2em;
    font: bold 145% arial
}

#resultslist-wrap li dd {
    font: normal 73% arial
}

#resultslist-wrap li dl {
    margin: 0
}

#resultslist-wrap dd {
    line-height: 1.3
}

#resultslist-wrap dd.filetype,
#resultslist-wrap dd.date {
    color: #999;
    display: inline;
    padding-right: .5em
}

#transactionMenu {
    border-top: 5px solid #999;
    border-bottom: 1px solid #ccc;
    margin-bottom: .5em;
    width: 100%
}

#transactionMenu a:link,
#transactionMenu a:visited {
    color: #c00;
    font-weight: bold;
    line-height: 2em;
    padding: .3em
}

#transactionMenu a:hover,
#transactionMenu a:active {
    background-color: var(--color-alabaster)
}

#transactionMenu .separator {
    color: #ccc;
    margin-left: 5px;
    margin-right: 5px
}

#transactionMenu .noActionMessage {
    color: #999;
    font-weight: normal;
    line-height: 2em;
    padding: .3em
}

/* TABLES */
.table1 {
    border: 2px solid #900;
    border-collapse: collapse;
    width: 100%
}

.table1 td {
    background: var(--color-white) url("../images/sprites.gif") repeat-x 0 -1600px;
    border: 1px solid var(--color-white)
}

.table1 th {
    text-align: left;
    border: 1px solid var(--color-white)
}

.table1 thead th {
    color: #CC3300;
    font-size: 145%;
}

.table1 tbody th {
    color: var(--color-white);
    font-size: 115%;
    background: #88b8db url("../images/sprites.gif") repeat-x 0 -1400px;
}

.table1 tbody th.sub {
    font-size: 100%;
    color: #000;
    background: #efefef url("../images/sprites.gif") repeat-x 0 -1500px;
}

td a img {
    max-height: 32px;
}

/* TABLES - calendar */
.calendar {
    width: 200px;
    font-size: 92%
}

.calendar td {
    text-align: center;
    border: 1px solid #ddd
}

.calendar th {
    text-align: center
}

.calendar thead th {
    padding: 3px 2px
}

.calendar tbody th {
    padding: 2px
}

.calendar tbody th.sub {
    padding: 2px
}

/* 'MORE' LINK - provides an accessible alternative to just using 'more' as a link at the end of paragraphs */
a.morelink:link,
a.morelink:visited,
a.morelink:hover,
a.morelink:active {
    background: transparent url("../images/sprites.gif") no-repeat 5px -500px;
    padding-left: 21px
}

a.morelink:hover {
    background: transparent url("../images/sprites.gif") 5px -400px
}

.morelink span {
    position: absolute;
    left: -9999px;
    width: 900px
}

/* CODE - formatting for code inserted into body - more here: http://dizque.lacalabaza.net/temp/lipt/ */
ol.code {
    font-family: monospace;
    position: relative
}

ol.code li {
    color: #666;
    margin-bottom: 1px
}

ol.code code {
    color: #000;
    display: block
}

ol.code .cmt {
    color: #4077d2
}

li.tab0 code {
    padding-left: 4em
}

li.tab1 code {
    padding-left: 8em
}

li.tab2 code {
    padding-left: 12em
}

li.tab3 code {
    padding-left: 16em
}

li.tab4 code {
    padding-left: 20em
}

li.tab5 code {
    padding-left: 24em
}

ol.code li {
    background: #f3f3f3 url("../images/td_bg.gif") no-repeat 100% 100%
}

p.note {
    margin: 1rem;
    background: var(--color-oatmeal);
    padding: 1rem;
}

#type-e #utility {
    position: absolute;
    top: 0;
    left: auto;
    right: 25px;
    width: 165px;
    border-top: 5px solid #999
}

/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary,
#nav-secondary ul {
    position: static
}

#nav-secondary,
#nav-secondary li {
    list-style: square;
	list-style-position: inside;
    margin: 0;
    padding: 0;
    background: transparent;
}

#nav-secondary {
    padding-top: 0;
    border-top: 5px solid var(--color-dark-red);
}

#nav-secondary a,
#nav-secondary .nav-section {
    line-height: 1.8;
    padding: 5px 0;
    font-weight: bold;
}

#nav-secondary li.active .nav-section {
    color: var(--color-teal);
}

#nav-secondary li {
    border-top: 1px solid var(--color-white);
    border-bottom: 1px solid var(--color-cool-gray);
}

/* SECONDARY NAVIGATION - 2nd TIER */
#nav-secondary ul {
    margin: 0 0 1em 23px;
    padding: 0
}

#nav-secondary li.active li {
	list-style: url("../images/arrow.svg") inside;
}

#nav-secondary li.active li a,
#nav-secondary li.active li a:link,
#nav-secondary li.active li a:visited {
    line-height: 1.3;
    padding: 4px 0;
    font-weight: normal;
    width: auto;
    width: 130px;
}

#nav-secondary li.active li a:hover,
#nav-secondary li.active li a:active {
    color: var(--color-dark-red);
}

#nav-secondary li.active li {
    border: none;
    margin: 0
}

#nav-secondary li.active li.active a:link,
#nav-secondary li.active li.active a:visited,
#nav-secondary li.active li.active a:hover,
#nav-secondary li.active li.active a:active {
    font-weight: bold;
}

/* SECONDARY NAVIGATION - 3rd TIER */
#nav-secondary ul ul {
    margin: 0 0 1em 13px;
    padding: 0
}

#nav-secondary li.active li.active li a,
#nav-secondary li.active li.active li a:link,
#nav-secondary li.active li.active li a:visited {
    width: 117px;
}

#nav-secondary li.active li.active li a:link,
#nav-secondary li.active li.active li a:visited,
#nav-secondary li.active li.active li a:hover,
#nav-secondary li.active li.active li a:active {
    font-weight: normal;
}

#nav-secondary li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active a:active {
    font-weight: bold;
}

/* SECONDARY NAVIGATION - 4th TIER */
#nav-secondary ul ul ul {
    margin: 0 0 1em 13px;
    padding: 0;
}

#nav-secondary li.active li.active li.active li a,
#nav-secondary li.active li.active li.active li a:link,
#nav-secondary li.active li.active li.active li a:visited {
    width: 104px;
}

#nav-secondary li.active li.active li.active li a:link,
#nav-secondary li.active li.active li.active li a:visited,
#nav-secondary li.active li.active li.active li a:hover,
#nav-secondary li.active li.active li.active li a:active {
    font-weight: normal;
}

#nav-secondary li.active li.active li.active li.active a:link,
#nav-secondary li.active li.active li.active li.active a:visited,
#nav-secondary li.active li.active li.active li.active a:hover,
#nav-secondary li.active li.active li.active li.active a:active {
    font-weight: bold;
}

/* LAYOUT - FOOTER */
#footer {
    clear: both;
    border-top: 1px solid #E3E8EE;
    padding: 10px 0 30px;
    font-size: 86%;
    color: #555;
    text-align: left
}

#footer p {
    margin: 0
}

#footer a:link {
    color: #555
}

/* DEFAULT TABLE */

table th,
table tr,
table td,
table caption {
    padding: 5px 8px;
}

table {
    border-color: var(--color-mine-shaft);
}

.table1 {
    border: 2px solid #900;
    border-collapse: collapse;
    width: 100%
}

.table1 td {
    background: var(--color-white) url("../images/sprites.gif") repeat-x 0 -1600px;
    border: 1px solid var(--color-white)
}

.table1 th {
    text-align: left;
    border: 1px solid var(--color-white)
}

.table1 thead th {
    color: #CC3300;
    font-size: 145%;
}

.table1 tbody th {
    color: var(--color-white);
    font-size: 115%;
    background: #88b8db url("../images/sprites.gif") repeat-x 0 -1400px;
}

.table1 tbody th.sub {
    font-size: 100%;
    color: #000;
    background: #efefef url("../images/sprites.gif") repeat-x 0 -1500px;
}

.default-table {
    width: 100%
}

.default-table table {
    border-collapse: collapse !important;
    border: 1px solid;
    margin-bottom: 20px !important;
}

.default-table tbody td {
    font-size: 100%;
}

.default-table tbody td,
th {
    border-left: 1px solid;
    vertical-align: top;
}

.default-table thead tr {
    background: var(--color-oatmeal);
}

.default-table thead tr.row-header {
    background: #72121B;
    color: var(--color-white);
}

.default-table thead tr.row-headings {
    border-bottom: 1px solid;
}

.default-table thead th {
    text-align: left;
    font-weight: bold;
}

.default-table tbody th {
    text-align: left;
    color: var(--color-white);
    line-height: 1.5em;
    text-transform: uppercase;
}

.default-table tbody tr.row-odd th {
    background: var(--color-alabaster);
}

.default-table tbody tr.row-odd {
    background: var(--color-alabaster);
}

.default-table tbody tr.row-hover {
    background: var(--color-oatmeal);
}

.default-table tbody tr th {
    background: var(--color-white);
}

.default-table tbody tr {
    background: var(--color-white);
}

.default-table tfoot th,
tfoot td {
    border-top: 1px solid;
    text-align: left;
    color: #000;
}

.default-table tfoot th {
    text-transform: uppercase;
    border: none;
}

.default-table tfoot td {
    font-size: 110%;
}

.default-table a {
    text-decoration: underline;
}

#sort_results {
    margin-bottom: 1rem;
}

.dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.dataTable td input {
    margin-right: 1rem;
}

/* INSTRUCTOR TABLE */
.instructor-table,
.instructor-table-nohover {
    width: 100%;
}

span.instructor-table {
    display: block;
    max-width: 100%;
}

.instructor-table table,
.instructor-table-nohover table {
    border-collapse: collapse !important;
    border: 1px solid;
    margin-bottom: 20px !important;
}

.instructor-table tbody td,
th,
.instructor-table-nohover tbody td,
th {
    border-left: 1px solid;
    vertical-align: top;
}

.instructor-table thead tr,
.instructor-table-nohover thead tr {
    background: var(--color-oatmeal);
    color: #000;
}

.instructor-table thead tr.row-header,
.instructor-table-nohover thead tr.row-header {
    background: #72121B;
    color: var(--color-white);
}

.instructor-table thead tr.row-headings,
.instructor-table-nohover thead tr.row-headings {
    border-bottom: 1px solid;
}

.instructor-table thead th,
.instructor-table-nohover thead th {
    text-align: left;
    font-weight: bold;
}

.instructor-table thead th a,
.instructor-table-nohover thead th a {
    text-decoration: underline;
    color: #000000;
}

.instructor-table tbody th,
.instructor-table-nohover tbody th {
    text-align: left;
    color: var(--color-white);
    line-height: 1.5em;
    text-transform: uppercase;
}

.instructor-table tbody tr.row-odd th,
.instructor-table-nohover tbody tr.row-odd th {
    background: var(--color-oatmeal);
}

.instructor-table tbody tr.row-odd,
.instructor-table-nohover tbody tr.row-odd {
    background: var(--color-oatmeal);
}

/* .instructor-table tbody tr.row-hover,
.instructor-table tbody tr:hover {
    background: #E6E6FA;
    cursor: pointer;
} */

.instructor-table tbody tr th,
.instructor-table-nohover tbody tr th {
    background: var(--color-white);
}

.instructor-table tbody tr,
.instructor-table-nohover tbody tr {
    background: var(--color-white);
}

.instructor-table tfoot th,
tfoot td,
.instructor-table-nohover tfoot th,
tfoot td {
    border-top: 1px solid;
    text-align: left;
    color: #000;
}

.instructor-table tfoot th,
.instructor-table-nohover tfoot th {
    text-transform: uppercase;
    border: 1px solid;
}

.instructor-table tfoot td,
.instructor-table-nohover tfoot td {
    border: 1px solid;
}

.instructor-table a,
.instructor-table-nohover a {
    text-decoration: underline;
}

table caption {
    background: var(--color-dark-green);
    color: var(--color-white);
    font-weight: bold;
    font-size: 1.125rem;
    text-align: left;
}


/* INSTRUCTOR DIVS */

.instructor {
    border: 1px solid var(--color-mine-shaft);
    margin-bottom: 1rem;
    width: 100%;
    position: relative;
}

.instructor .header {
    background: var(--color-dark-green);
    font-family: var(--body-font);
    font-size: 20px;
    color: var(--color-white);
    width: 100%;
    margin: 0;
    padding: 5px 8px;
    box-sizing: border-box;
}

.instructor .row,
.instructor div,
.instructor p {
    box-sizing: border-box;
    margin: 0 5px 8px 5px;
    max-width: 100%;
}

.instructor .rowline {
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid;
    width: 99%;
}

.item-icon {
    margin: 0;
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 44px;
    left: 6px;
}

.xlist-table {
    width: 100%
}

.xlist-table table {
    border-collapse: collapse !important;
    border: 1px solid;
    font: 75%/1.5em arial, geneva, sans-serif;
}

.xlist-table tbody td,
th {
    border-left: 1px solid;
    vertical-align: top;
}

.xlist-table thead tr {
    background: var(--color-white)0F5;
    color: #000;
}

.xlist-table thead tr.row-header {
    background: var(--color-white)0F5;
    color: #000;
}

.xlist-table thead tr.row-headings {
    border: 1px solid;
}

.xlist-table thead th {
    border: 1px solid;
    text-align: left;
    font-weight: bold;
}

.xlist-table thead th a {
    text-decoration: underline;
    color: #000000;
}

.xlist-table tbody th {
    text-align: left;
    color: var(--color-white);
    line-height: 1.5em;
    text-transform: uppercase;
}

.xlist-table tbody tr.row-odd th {
    background: var(--color-white)0F5;
}

.xlist-table tbody tr.row-odd {
    background: var(--color-white)0F5;
}

.xlist-table tbody tr th {
    background: var(--color-white)0F5;
}

xlist-table tbody tr {
    background: var(--color-white)0F5;
}

.xlist-table tfoot th,
tfoot td {
    border: 1px solid;
    text-align: left;
    color: #000;
}

.xlist-table tfoot th {
    text-transform: uppercase;
    border: none;
}

.xlist-table tfoot td {
    font-size: 110%;
}

.xlist-table a {
    text-decoration: underline;
}

/* STUDENT TABLE */
.student-table,
.student-table-nohover {
    width: 100%
}

.student-table table,
.student-table-nohover table {
    border-collapse: collapse !important;
    border: 1px solid;
    margin-bottom: 20px !important;
}

.student-table tbody td,
th,
.student-table-nohover tbody td,
th {
    border-left: 1px solid;
    vertical-align: top;
}

.student-table thead tr,
.student-table-nohover thead tr {
    background: var(--color-oatmeal);
}

.student-table thead tr.row-header,
.student-table-nohover thead tr.row-header {
    background: #72121B;
    color: var(--color-white);
}

.student-table thead tr.row-headings,
.student-table-nohover thead tr.row-headings {
    border-bottom: 1px solid;
}

.student-table thead th,
.student-table-nohover thead th {
    text-align: left;
    font-weight: bold;
}

.student-table thead th a,
.student-table-nohover thead th a {
    text-decoration: underline;
    color: #3300CC;
}

.student-table tbody th,
.student-table-nohover tbody th {
    text-align: left;
    color: var(--color-white);
    line-height: 1.5em;
    text-transform: uppercase;
}

.student-table tbody tr.row-odd th,
.student-table-nohover tbody tr.row-odd th {
    background: var(--color-alabaster);
}

.student-table tbody tr.row-odd,
.student-table-nohover tbody tr.row-odd {
    background: var(--color-alabaster);
}

/* .student-table tbody tr.row-hover,
.student-table tbody tr:hover {
    background: var(--color-white)ACD;
    cursor: pointer;
} */

.student-table tbody tr th,
.student-table-nohover tbody tr th {
    background: var(--color-white);
}

.student-table tbody tr,
.student-table-nohover tbody tr {
    background: var(--color-white);
}

.student-table tfoot th,
tfoot td,
.student-table-nohover tfoot th,
tfoot td {
    border: 1px solid;
    text-align: left;
    color: #000;
}

.student-table tfoot th,
.student-table-nohover tfoot th {
    text-transform: uppercase;
    border: 1px solid;
}

.student-table tfoot td,
.student-table-nohover tfoot td {
    font-size: 110%;
    border: 1px solid;
}

.student-table a,
.student-table-nohover a {
    text-decoration: underline;
}

/* Student DIVS */
.student {
    border: 1px solid var(--color-mine-shaft);
    margin-bottom: 1rem;
    width: 100%;
    position: relative;
}

.student .header {
    background: var(--color-dark-green);
    color: var(--color-white);
    width: 100%;
    margin: 0;
    padding: 5px 8px;
    box-sizing: border-box;
}

.student form {
    padding: 5px 8px;
}

.student .row {
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    width: 100%;
}

.student .rowline {
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 1px solid;
    width: 100%;
}



#faq-toc li {
    font-weight: bold;
    line-height: 1.4em;
    padding-left: 0px;
    background-image: url(/css/images/bullet.gif);
    background-repeat: no-repeat;
}

#faq-contents {
    line-height: normal
}

#faq-contents .faq-item {
    width: 100%;
    border-top: 5px solid #999;
    padding-top: 1px;
    padding-bottom: 10px
}

#faq-contents .faq-item-box {
    color: #333;
    padding: 0px 20px 20px;
    border-top: 1px solid #d7d7d7;
    background: #f6f6f6
}

#faq-contents .faq-item-box p {
    margin: 0 0 .3em;
    border-bottom: 1px solid #333399;
    color: #333399
}

#faq-contents .faq-item-box p {
    border: none;
    margin: 0 0 1em;
    color: #444
}

#faq-contents .faq-item-box a {
    font-weight: bold
}

#faq-contents li {
    font-weight: normal;
    line-height: 1.4em;
    padding-left: 0px;
    background-image: url(/css/images/bullet.gif);
    background-repeat: no-repeat;
}

.ValidationError {
    font-weight: bold;
    color: #AC0000
}

/* Misc. Inline Styles Moved to CSS Ares 4.4.0.0 */
span.irf-menu-item-icon {
    float: left;
    text-align: center;
    margin: 5px;
    padding: 20px;
}

/* span.item-icon {
    float: left;
    margin: 10px 10px 2px 5px;
    width: 20px;
    height: 100px;
} */

span.item-title {
    font-weight: bold;
}

span.status-line {
    background-color: #E6F4FF;
    font-size: 110%;
}

div.item-text {
    margin-left: 25px;
}

div.shared-list-name {
    font-size: 1.2em;
}

div.view-edit-delete {
    margin: 2px 15px 2px 25px;
    padding: 3px;
    background-color: #E6E6FA;
    border: 1px solid #0000FF;
}

.float-left {
    float: left;
}

.hidden {
    display: none;
}

.item-import-course-details {
    display: flex;
    margin: 0;
    padding: 0;
}

.item-import-course-details span {
    width: 50%;
    float: left;
    border: 1px solid rgb(0, 0, 102);
    border-collapse: collapse !important;
}

.item-import-course-details .course-details-heading {
    background-color: rgb(0, 0, 102);
    color: var(--color-white);
    font-weight: bold;
}

.item-import-course-details .course-details-name {
    font-size: 1.2em;
}

/* DATEPICKER PANEL */
.panel {
    border: none;
    background-color: var(--color-oatmeal);
    box-shadow: 0 0 8px var(--color-mine-shaft);
}

.row_head {
    border: none;
    background-color: var(--color-oatmeal);
}

.arrow_prev,
.arrow_next,
.arrow_prev_down,
.arrow_next_down {
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--color-black);
    background-color: transparent;
    border: none;
}

.arrow_prev_over,
.arrow_next_over {
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--color-oatmeal);
    background-color: var(--color-red);
    border: none;
}

.head {
    font-family: var(--body-font);
    font-size: 14px;
    color: var(--color-black);
    background-color: transparent;
}

.row_week {
    border-width: 2px;
    border-color: var(--color-gold);
    border-left: none;
    border-right: none;
    border-top: none;
}

.weekday {
    font-family: var(--body-font);
    background-color: var(--color-gold);
    border: none;
    color: var(--color-black);
}

.day,
.day_down,
.day_other {
    font-family: var(--body-font);
    background-color: transparent;
    border: none;
}

.day_over {
    font-family: var(--body-font);
    background-color: var(--color-cool-gray);
    border: none;
}

.day_current {
    font-family: var(--body-font);
    background-color: var(--color-green);
    border: none;
}

.day_other,
.day_other_over {
    font-family: var(--body-font);
    background-color: var(--color-cool-gray);
    border: none;
    opacity: 0.5;
}

.foot {
    font-family: var(--body-font);
    font-size: 14px;
    background-color: var(--color-red);
    border: 2px solid var(--color-red);
}

.foot_over {
    font-family: var(--body-font);
    font-size: 14px;
    background-color: transparent;
    border: 2px solid var(--color-red);
    color: var(--color-red);
}

/* TAG CLOUD */
.tagCloud-2 {
    font-size: 14px;
}