/* Custom CSS for Officer of the Controller "IU" Theme */

/* ------- Tag ------- */

h1 {
	font-size: 2.25rem;
	font-weight: 700;
}

h2 {
	font-size: 2rem;
	font-weight: 700;
}

h3 {
	font-size: 1.625rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

h4 {
	font-size: 1.4375rem;
	margin-bottom: .5rem;
	font-weight: 700;
}

h5 {
	font-size: 1.25rem;
	font-weight: 700;
}

h6 {
	font-size: 1rem;
	font-weight: 700;
}


hr {
	margin-top: 3rem;
	margin-bottom: 2.5rem;
}


img[src*='#left'] {
	float: left;
	margin-right: 1rem;
	max-width: 40%;
	height: auto;
}

img[src*='#right'] {
	float: right;
	margin-left: 1rem;
	max-width: 40%;
	height: auto;
}

img[src*='#center'] {
	display: block;
	margin: auto;
	max-width: 80%;
	height: auto;
}


img[src*='#fillwidth'] {
    width: 100%;
}

img[src*='#fillcenter'] {
	width: 100%;
	display: block;
	padding-left: 10%;
	padding-right: 10%;
}


iframe {
	display: block;
	width: 100%;
	border: 0;
}



/* ------- ID ------- */

#jumpToTop {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
}


#supportFormFrame {
	height: 900px;
}

@media only screen and (min-width: 600px) {
	#supportFormFrame {
		height: 725px;
	}
}

/* ------- Class ------- */

.feature_header {
    height: 200px;
    background-position: center center;
    background-size:cover;
}

@media only screen and (min-width: 740px) {
	.feature_header {
		height: 300px;
	}
}

@media only screen and (min-width: 1080px) {
	.feature_header {
		height: 350px;
	}
}

@media only screen and (min-width: 1260px) {
	.feature_header {
		height: 400px;
	}
}

@media only screen and (min-width: 1400px) {
	.feature_header {
		height: 450px;
	}
}

@media only screen and (min-width: 1600px) {
	.feature_header {
		height: 550px;
	}
}




.feature_header_floating_text {
    height: 350px;
    background-position: center center;
    background-size:cover;
    position: relative;
    text-align: center;
}

.feature_header_floating_text div {
    background: rgba(255,255,255,.8);
    border-radius: .5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    margin: 0;
    padding: 2rem 3rem;
    font-weight: bold;
    transform: translate(-50%, -50%);
}

.feature_header_floating_text div div {
    background: initial;
    position: relative;
    top: initial;
    left: initial;
    width: 100%;
    margin: 0;
    padding: 0;
    transform: initial;
}


.feature_header_floating_text_button a {
    display: inline-block;
    padding: 4px 10px;
    height: 100%;
    border: 1px solid transparent;
    border-width: 2px;
    border-radius: 20px;
    transition:all .1s ease-in-out;
	cursor: pointer;
	color: white;
	background-color: #900;
	text-decoration: none;
	font-weight: bold;
}

.feature_header_floating_text_button a:focus, .feature_header_floating_text_button a:hover {
	background-color: white;
	border-color: #900;
	border-width: 2px;
	color: #900;
	transition:all .1s ease-in-out;
}


.feature_header_floating_text p {
    margin: 0;
}


@media only screen and (min-width: 740px) {
	.feature_header_floating_text {
		height: 300px;
	}

	.feature_header_floating_text div {
	    width: 80%;
	}
}

@media only screen and (min-width: 1080px) {
	.feature_header_floating_text {
		height: 350px;
	}

	.feature_header_floating_text div {
	    width: 70%;
	}
}

@media only screen and (min-width: 1260px) {
	.feature_header_floating_text {
		height: 400px;
	}
}

@media only screen and (min-width: 1400px) {
	.feature_header_floating_text {
		height: 450px;
	}
}

@media only screen and (min-width: 1600px) {
	.feature_header_floating_text {
		height: 550px;
	}
}




.about_us_button a {
    display: inline-block;
    padding: 10px;
    height: 100%;
    border: 1px solid transparent;
    border-width: 2px;
    border-radius: 20px;
    transition:all .1s ease-in-out;
	cursor: pointer;
	color: white;
	background-color: #900;
	text-decoration: none;
	font-weight: bold;
}

.about_us_button a:focus, .about_us_button a:hover {
	background: 0 0;
	border-color: #900;
	border-width: 2px;
	color: #900;
	transition:all .1s ease-in-out;
}


.documentation_toc {

}

.documentation_toc ul {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

.documentation_toc ul li {
	list-style-type: none;
	font-weight: bold;
}

.documentation_toc ul ul {
	list-style-type: disc;
	padding-left: 3rem;
}

.documentation_toc ul ul li {
	list-style-type: disc;
	font-weight: normal;
}



.documentation_two_toc {
	float: right;
	overflow: hidden;
	width: 290px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 1rem;
	margin-left: 1.5rem;
	padding: 0rem .75rem 1rem .75rem;
	/* background-color: #f3f4f6; */
	background-color: #edecea;
}

.documentation_two_toc ul {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

.documentation_two_toc ul li {
	list-style-type: none;
	font-weight: bold;
}

.documentation_two_toc ul ul {
	list-style-type: disc;
	padding-left: 3rem;
}

.documentation_two_toc ul ul li {
	list-style-type: disc;
	font-weight: normal;
}



.documentation_three_toc {
	float: right;
	margin-left: 2rem;
}

@media only screen and (min-width: 600px) {
	.documentation_three_toc div {
		width: 400px;
	}
}

.documentation_three_toc div ul li {
	font-weight: bold;
}

.documentation_three_toc div ul li ul li {
	font-weight: normal;
	padding-left: 1rem;
}



.doc_nav_links {
	font-size: .875rem;
	vertical-align: middle;
}



.faq h3 {

	/* font-size: 1.4375rem; */
	/* font-weight: 700; */

	font-size: 1.25rem;
	font-weight: 700;
    margin-bottom: 0rem;
}

.faq h4 {
    /* font-size: 1.25rem; */
	/* font-weight: 700; */

	font-size: 1rem;
	font-weight: 700;

    margin-top: 1.75rem;
}

.faq h5 {
	font-size: 1rem;
	font-weight: 700;
    margin-top: 1.75rem;
}

@media only screen and (min-width: 750px) {
    .faq p {
        margin-left: 1.5rem;
    }

    .faq ul, .faq ol {
        margin-left: 2.25rem;
    }
}

.faq_toc {
    margin-bottom: 1rem;
}

.faq_toc ul {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

.faq_toc ul li {
	list-style-type: none;
	font-weight: bold;
}

.faq_toc > ul > li {
    margin-top: 1.5rem;
}

.faq_toc ul ul {
	padding-left: 3rem;
}

.faq_toc ul ul li {
	list-style-type: disc;
	font-weight: normal;
}



.footer_info_section {
	margin-top: 7rem;
	background-color: #7a1705;
	color: #ffffff;
}

.footer_info_section a {
	cursor: pointer;
	color: #fff;
	text-decoration: none;
}

.footer_info_section a:focus, .footer_info_section a:hover {
	text-decoration: underline;
}

.footer_info_section ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	columns: 2;
}

.footer_info_section ul li {
	margin: 0;
	padding: 0;
}


.goto_report_button {
	float: right;
	margin-left: 2rem;
	margin-bottom: 1rem;
}


.guidebook_chapters div {
	border: none;
}

.guidebook_chapters h3 {
	font-size: 1rem;
	margin: 0rem;
}

.guidebook_chapters p {
	margin-top: .1rem;
}

.guidebook_chapters div a {
	cursor: pointer;
	background-color: transparent;
	text-decoration: none;
}

.guidebook_chapters div div div img {
	padding-left: 25%;
	padding-right: 25%;
	background: #f2f2f2;
}

.guidebook_chapters div div div:focus, .guidebook_chapters div div div:hover {
	background: #fff;
	border-color: #fff;
	color: #900;
	/* font-weight: bold; */
	transition:all .1s ease-in-out;
}



.guidebook_toc {

}

.guidebook_toc ul {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

.guidebook_toc ul li {
	list-style-type: none;
	font-weight: bold;
}

.guidebook_toc ul ul {
	padding-left: 3rem;
}

.guidebook_toc ul ul li {
	list-style-type: disc;
	font-weight: normal;
}

.guidebook_toc ul ul ul li {
	list-style-type: circle;
}



.interested_section {
	background-color: #900;
	color: #fff;
}


.interested_section a {
    display: block;
    padding: 24px;
    height: 100%;
    border: 2px solid white;
    border-radius: .5rem;
    transition:all .1s ease-in-out;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
}

.interested_section a:focus, .interested_section a:hover {
	background: #fff;
	border-color: #fff;
	color: #900;
	transition:all .1s ease-in-out;
}





.left_nav {

	font-size: 1rem;
	margin: 0;
	margin-bottom: 2rem;
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
	background-color: #edecea;
	line-height: 1.6;
	box-sizing: border-box;
}

.left_nav li {
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
	margin: 0;
	padding: 0;
}

.left_nav li a {
	position: relative;
	display: block;
	color: #4A3C31;
	border-bottom: 1px solid #fff;
	padding: .5rem 1rem;
	transition: background-color .3s;
	background-color: transparent;
	cursor: pointer;
	line-height: inherit;
	text-decoration: none;
	font-weight: 400;
}

.left_nav a:focus, .left_nav a:hover {
	background-color: #b7b1ad;
	color: #16120f;
	transition: color .3s;
}


.left_nav_current {
	border-left: 3px solid #900 !important;
}



.list_alpha {
	list-style-type: lower-alpha;
}



.list_numeric {
	list-style-type: decimal;
}



.list_roman {
	list-style-type: lower-roman;
}


.main_nav ul {
    /* border-right: 1px solid #dddddd; */
    /* padding-right: 1rem; */
}


ol.tree li {
    position: relative;
}

ol.tree li ol {
    display: none;
}

ol.tree li.open > ol {
    display: block;
}

ol.tree li.parent:after {
    content: '[+]';
}

ol.tree li.parent.open:after {
    content: '';
}



.popular_resources a {
    display: block;
    padding: 24px;
    height: 100%;
    border: 2px solid rgba(0,0,0,.25);
    border-radius: .5rem;
    transition:all .1s ease-in-out;
	cursor: pointer;
	color: black;
	text-decoration: none;
}

.popular_resources a:focus, .popular_resources a:hover {
	background: #900;
	border-color: #900;
	color: white;
	transition:all .1s ease-in-out;
}


.search_button {
    border: none;
    color: black;
}

.search_button svg {
    height: 16px;
    width: 16px;
}

.side_by_side_tile div {
	border: none;
}

.side_by_side_tile h3 {
	margin: 0rem;
}

.side_by_side_tile h4 {
	font-size: 1rem;
	margin: 0rem;
}

.side_by_side_tile p {
	margin-top: .1rem;
	font-size: .875rem;
	overflow: auto;
}

.side_by_side_tile div div a {
    display: block;
    padding: 10px;
    height: 100%;

    border: 2px solid rgba(0,0,0,.25);
    border-radius: .5rem;
    transition:all .1s ease-in-out;

	cursor: pointer;
	background-color: transparent;
	text-decoration: none;
}


.side_by_side_tile div div img {
	float: left;
	margin-right: 1rem;
	width: 25%;
	max-height: 90%;
}

.side_by_side_tile div div a:focus, .side_by_side_tile div div a:hover {
    background: #900;
	border-color: #900;
	color: white;
	transition:all .1s ease-in-out;
}

.side_by_side_tile .greyed_out a {
    color: #595959;

}

.side_by_side_tile .greyed_out a:focus, .side_by_side_tile .greyed_out a:hover {
    background: none;
	border: 2px solid rgba(0,0,0,.25);
	color: #595959;
}


.side_by_side_toc {

}

.side_by_side_toc ul {
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 0;
}

.side_by_side_toc ul li {
	list-style-type: none;
	font-weight: bold;
}

.side_by_side_toc ul ul {
	padding-left: 3rem;
}

.side_by_side_toc ul ul li {
	list-style-type: disc;
	font-weight: normal;
}

.side_by_side_toc ul ul ul li {
	list-style-type: circle;
}



.sop tr {
	border: 0;
}

.sop tr td:first-child {
	font-weight: bold;
	vertical-align: top;
}

.sop tr td {
	padding: 0.5rem;
}



.stopfloat {
	clear: both;
}



.toc {
	float: right;
	margin-left: 2rem;
}

@media only screen and (min-width: 600px) {
	.toc div {
		width: 400px;
	}
}

.toc div ul li {
	font-weight: bold;
}

.toc div ul li ul li {
	font-weight: normal;
	padding-left: 1rem;
}



.updates_header {
    height: 200px;
    background-position: center center;
    background-size:cover;
}

@media only screen and (min-width: 740px) {
	.updates_header {
		height: 225px;
	}
}

@media only screen and (min-width: 1080px) {
	.updates_header {
		height: 250px;
	}
}

@media only screen and (min-width: 1260px) {
	.updates_header {
		height: 300px;
	}
}


.updates h3 {

	/* font-size: 1.4375rem; */
	/* font-weight: 700; */

	/* font-size: 1.25rem; */
	font-weight: 700;
    margin-bottom: 0rem;
}

.updates h4 {
    /* font-size: 1.25rem; */
	/* font-weight: 700; */

	font-size: 1rem;
	font-weight: 700;

    margin-top: 1.25rem;
}

.updates h5 {
	font-size: 1rem;
	font-weight: 700;
    margin-top: 1.25rem;
}

/* ------- Glossary ------- */

/* Highlights the entry a link jumps to, e.g. .../glossary#account-number.
   :target matches only the element whose id is the current URL fragment, so at most one entry
   is ever highlighted, and nothing applies when the URL carries no fragment.
   Deliberately scoped to .uco-glossary: in-page Table of Contents links elsewhere on the site
   also point at h4 ids, and those headings must not light up. */

.uco-glossary h4[id]:target,
.uco-glossary h4[id]:target + p,
.uco-glossary h4[id]:target + p + p {
	background-color: #fdf6e3;
	box-shadow: -0.75rem 0 0 #fdf6e3, 0.75rem 0 0 #fdf6e3;
}

/* Letter headings read as section dividers, not just another heading.
   #e2e7e9 is the same rule colour Rivet's .rvt-border-top uses. */

.uco-glossary h3[id^="letter-"] {
	margin-top: 3.5rem;
	padding-top: 1.25rem;
	border-top: 2px solid #e2e7e9;
}

.uco-glossary h3[id^="letter-"]:first-of-type {
	margin-top: 0;
}

/* Space between entries. The first entry of a letter stays close to its heading. */

.uco-glossary h4[id] {
	margin-top: 2.25rem;
}

.uco-glossary h3[id^="letter-"] + h4[id] {
	margin-top: 1rem;
}

/* The "Defined in" line reads as metadata. Rivet black-400; black-300 (#75838f)
   only reaches 3.89:1 on white and fails WCAG AA at this 14px size. */

.uco-glossary h4[id] + p + p.rvt-ts-xs {
	color: #4c5a69;
	margin-bottom: 0;
}

/* ------- Accordions ------- */

/* page-toc anchors every heading before the page's Twig runs, so an accordion
   title written as literal HTML picks up the hover-to-reveal "#" link that the
   collapsible macro's output never had. Remove it from accordion summaries only.
   display:none rather than opacity so it also leaves the keyboard tab order. */

.rvt-accordion__summary > .toc-anchor {
	display: none;
}

/* ------- Links ------- */

/* Match the Site Builder link colour (Rivet crimson-500, #990000). Rivet 2.9 sets
   a, .rvt-link to #006298 with a #00385f hover; Site Builder uses the same crimson
   for both states and relies on the underline for hover. This file loads last, so
   equal specificity is enough to win. */

a,
.rvt-link {
	color: #990000;
}

a:hover,
.rvt-link:hover {
	color: #990000;
}

/* ------- Navigation ------- */

/* Rivet 2.9 gives the left nav and the top menu blue hover/focus states (#006298 text,
   #328bb8 outline, #edfafd / #006298 hover boxes). Swap them to the crimson family so
   they match the link colour above: #990000 for text, outline and filled hovers,
   #fff3f0 (the tint Rivet already uses for the current sidenav item) for light hovers. */

/* left navigation */
.rvt-sidenav__link:hover,
.rvt-sidenav__link:focus {
	color: #990000;
}

.rvt-sidenav__toggle:hover,
.rvt-sidenav__toggle:focus,
.rvt-sidenav__link[aria-current="page"] + .rvt-sidenav__toggle:hover,
.rvt-sidenav__link[aria-current="page"] + .rvt-sidenav__toggle:focus {
	color: #990000;
	background-color: #fff3f0;
	outline-color: #990000;
}

.rvt-sidenav__link[aria-current="page"] + .rvt-sidenav__toggle:hover > svg,
.rvt-sidenav__link[aria-current="page"] + .rvt-sidenav__toggle:focus > svg {
	color: #990000;
}

/* top navigation */
.rvt-header-menu__link:hover,
.rvt-header-menu__link:focus {
	color: #990000;
	outline-color: #990000;
}

.rvt-header-menu__toggle:hover {
	background: #990000;
	outline-color: #990000;
}

.rvt-header-menu__submenu a:hover {
	background-color: #990000 !important;
}

/* header icon buttons (search / menu) share the same blue hover and focus ring */
.rvt-global-toggle:hover {
	background-color: #990000;
	outline-color: #990000;
}

.rvt-header-global__controls .rvt-global-toggle:focus {
	box-shadow: 0 0 0 .125rem #fff, 0 0 0 .25rem #990000;
}

/* the same icon button stays blue while its panel is open */
.rvt-header-global__controls .rvt-global-toggle[aria-expanded="true"] {
	background-color: #990000;
	border-color: #990000;
}

/* ------- Tiles ------- */

/* The landing-page tiles are Rivet 2 clickable cards. The round arrow badge on every
   tile is a blue arrow on a light-blue circle at rest, and the title turns blue on
   hover. Same crimson mapping as the navigation: #990000 text and arrow, #fff3f0 circle
   at rest, #ffcdc0 (Rivet's own danger-secondary tint) on hover. */

.rvt-card__title a::before {
	background-color: #fff3f0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23990000" viewBox="0 0 16 16"><path d="M1 7h10.844L7.737 2.146 9.263.854 15.31 8l-6.047 7.146-1.526-1.292L11.844 9H1V7Z"></path></svg>');
}

.rvt-card__title a:hover {
	color: #990000;
}

.rvt-card__title a:hover::before {
	background-color: #ffcdc0;
}

/* ------- Tabs and CTAs ------- */

/* Rivet 2 tabs (SOP index) hover and focus in blue; CTA links (home page) draw a blue
   arrow. Same crimson mapping. */

.rvt-tabs__tab:hover {
	background-color: #fff3f0;
	color: #990000;
}

.rvt-tabs__tab:hover::after {
	background-color: #990000;
}

.rvt-tabs__tab:focus {
	outline-color: #990000;
	background-color: #fff3f0;
}

.rvt-tabs__panel:focus {
	outline-color: #990000;
}

.rvt-cta::after {
	color: #990000;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23990000" viewBox="0 0 16 16"><path d="M1 7h10.844L7.737 2.146 9.263.854 15.31 8l-6.047 7.146-1.526-1.292L11.844 9H1V7Z"></path></svg>');
}

/* .rvt-cta--button is the crimson-filled variant on this site (white text, white arrow).
   The plain-CTA arrow rule above out-orders Rivet's white arrow at equal specificity,
   so restate it here. */
.rvt-cta--button::after {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23ffffff" viewBox="0 0 16 16"><path d="M1 7h10.844L7.737 2.146 9.263.854 15.31 8l-6.047 7.146-1.526-1.292L11.844 9H1V7Z"></path></svg>');
}

/* ------- Link hub ------- */

/* The home page's Popular Resources list is a Rivet 2 link hub. Its arrow is a light-blue
   SVG (#94d2e7) that no colour rule touches. Same crimson arrow as the tiles and CTAs.
   The component has no hover colour of its own (hover underlines the text), so this is
   the only rule it needs. */

.rvt-link-hub__link::after {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23990000" viewBox="0 0 16 16"><path d="M1 7h10.844L7.737 2.146 9.263.854 15.31 8l-6.047 7.146-1.526-1.292L11.844 9H1V7Z"></path></svg>');
}