* { box-sizing: border-box; }

body {
	background-color: #ffffff;
    color: #2c2c2c;
    font: 1em Arial, Helvetica, sans-serif;
    margin: 0;
    line-height: 1.5em;
}

:focus, #yes:focus + label, #no:focus + label {
    outline: 2px solid #13a8e0;
    box-shadow: 0 0 3px #13a8e0;
}

.relatedtopics.aboveheading {display:none;}


li[data-highlighted] > a {
    font-weight: bold;
}

.date {
    font-size: .9em;
    font-style: italic;
    color: #565656;
}

abbr[title="Required"], abbr[title="required"] {
	color: darkred;
}

.mobile__button{display: none;}

#topic a:link {
    color: #005c80;
    font-weight: 700;
}

#topic a:visited {
    color: #0A45B1;
}

#topic a:hover, a:focus {
    color: #008EBF;
}

header{
	padding: 0;
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
	background-color: #eff4f7;
    overflow: hidden;
}
header h1, header p {
	color: #414141;
	font-size: 1.2em;
	font-weight: 400;
	margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}	

header h1 {
    padding: 0 0 0 75px;
}

header p {
	padding: 0 0 0 88px;
    color: #414141;
    font-size: 1.2em;
    font-weight: 400;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.heading--small {
	font-size: 1.2em;
	font-weight: normal;
}

.heading1 {
	font-size: 2em !important;
	font-weight: normal !important;
	line-height: 2em;
	color: #2c2c2c;
    margin: 0 0 20px 0;
}

.heading2 {
	font-size: 1.8em !important;
	font-weight: normal !important;
	line-height: 2em;
	color: #2c2c2c;
    margin: 0 0 40px 0;
}

.heading3 {
	font-size: 1.5em !important;
	font-weight: normal !important;
	line-height: 2em;
	color: #2c2c2c;
    margin: 0 0 40px 0;
}

.heading4, .heading5 {
	font-size: 1em !important;
	font-weight: bold !important;
	line-height: 2em;
	color: #2c2c2c;
    margin: 0 0 40px 0;
}

header .hgroup:before {
    content: '';
    background: url(https://nfc.usda.gov/images/sprite.svg) -14px -20px no-repeat;
    background-size: 91px 60px;
    height: 42px;
    width: 62px;
    position: absolute;
    top: 9px;
    left: 5px;
}

header .hgroup {
    width: 70%;
    position: relative;
    display: table-cell;
    padding: 20px 0;
}

#search__form {
    margin: 0;
    width: auto;
    display: table-cell;
    text-align: right;
    padding: 0 10px 0 0;
    white-space: nowrap;
}

#query {
	padding: 8px 6px;
    border-radius: 3px;
    border: 1px solid #B1ADAD;
	width: 100%;
}

#topic > article h1 {
    font-size: 1em;
    margin: 0;
}

#topic article {
    margin: 0 0 30px 0;
}

#topic > article p {
    margin: 5px 0 0 0;
}

#skipnav {
    background-color: rgba(16, 16, 16, 0.7);
    padding: 20px 0 20px 26px;
    color: #ffffff;
    box-shadow: 0 8px 6px -6px rgb(158, 158, 158);
    position: absolute;
    top: -70px;
    left: 0;
    width: 100%;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.3s, top 0.3s;
    -moz-transition: -moz-transform 0.3s, top 0.3s;
    transition: transform 0.3s, top 0.3s;
}

#skipnav:focus {
    top: 0;
}

.flexbox main {
    display: flex;
    position: relative;
}

main {
	display: table;
	border-spacing: 10px;
	position: relative;
}

#search-btn {
	background-color: #03668B;
    color: #ffffff;
    padding: 8px 25px;
    border: none;
    border-radius: 3px;
    margin: 10px auto;
    transition: ease-in-out .3s;
}



aside {    
	background-color: #35506e;
    font-size: .8em;
    padding: 0 20px;
	margin: 0 0 44px 0;
	text-align: right;
	box-shadow: 0 8px 6px -6px rgb(158, 158, 158);
}

.options-menu a:link, .options-menu a:visited, .options-menu button {
    color: #ffffff;
    background: none;
    border: none;
    text-decoration: none;
    height: 49px;
    display: inline-block;
    margin: 0 31px 0 0;
    padding: 0 17px;
	position: relative;
	-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    -moz-transition: -moz-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
}

.options-menu a:hover, .options-menu a:focus, .options-menu button:hover, .options-menu button:focus {
	background-color: #3FB1D6;
}


.options-menu a.focus::after {
    height: 4px;
    opacity: 1;
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    transform: translateY(-4px);
}

.options-menu a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background: #fff;
    content: '';
    opacity: 0;
    -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: height 0.3s, opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

nav {
    background-color: #ffffff;
    display: table-cell;
    width: 25%;
    overflow: auto;
    font-size: .9em;
    padding: 0 2%;
    -webkit-transition: width 0.3s, -webkit-transform 0.3s;
    -moz-transition: width 0.3s, -moz-transform 0.3s;
    transition: transform 0.3s, width 0.3s;
}

.flexbox nav {
	order: 1;
	display:block;
}



nav ul {
	margin:0;
    transition: transform 0.3s, width 0.3s;
}

nav .book {
    font-weight: 700;
    /*margin: 20px 0;
    display: inline-block*/
}

nav .page {
    font-weight: 400;
}

.indexheading {
    font-weight: 700;
}


#opts{
	line-height:1em;
	margin: 0 30px;
}
#opts button {
    vertical-align: middle;
	margin: 0 7px 0 0;
}

button {position: relative;}
button .icon {
    width:25px;
    height:25px;
    fill:#ffffff;
}
    
.svg button span:before {
    content: '';
    border-color: transparent transparent #333333 transparent;
    border-style: solid;
    border-width: 8px;
    height: 0px;
    width: 0px;
    position: absolute;
    left: 0;
    bottom: 40px;
    right: 0;
    margin: auto;
}

.svg button span {
    background-color: #333333;
    width: 100px;
    height: 40px;
    line-height: 3em;
    position: absolute;
    left: -20px;
    margin: auto;
    top: 47px;
    border-radius: 3px;
    box-shadow: 0 8px 6px -6px rgb(144, 142, 142);
    transition: .5s cubic-bezier(0.25, 0.1, 0, 0.99) top;
	transform: scale(0);
    z-index: 1;
}

.svg button:hover, .svg button:focus {
   overflow: visible;
}

.svg button:hover > span, button:focus > span {
    top: 57px;
	transform: scale(1);
}


#topic {
    display: table-cell;
    width: 70%;
    margin: 0 auto;
    /*-webkit-transition: -webkit-transform 0.3s, margin-left 0.3s;
    -moz-transition: -moz-transform 0.3s, margin-left 0.3s;
    transition: transform 0.3s, margin-left 0.3s;*/
	transition: margin-left ease-in-out .3s;
}

.flexbox #topic {
	display: block;
	order: 2;
}

abbr {
    text-decoration: none;
    border-bottom: 1px dotted #333;
}

#topic abbr > a {
    text-decoration: none;
    color: #444444 !important;
    font-weight: normal !important;
}

.expandinginline:before {
    content: '(';
    margin: 0 0 0 5px;
}

.expandinginline:after {
    content: ' )';
    margin: 0 5px 0 0;
}

.expandinginline {
    font-style: italic;
}

table {width: 100%;}
img {max-width: 100%;height:auto;}

#topic #feedback > svg {
    width: 20px;
    height: 20px;
    fill: #454545;
    vertical-align: middle;
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    -moz-transition: -moz-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
}

#topic #feedback {
    background: none;
    border: 1px solid #454545;
    border-radius: 5px;
    color: #454545;
	font-weight: normal;
    margin: 0 0 0 20px;
    text-decoration: none;
    white-space: nowrap;
	padding: 13px 17px;
    background-color: #f9f9f9;
    -webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
    -moz-transition: -moz-transform 0.3s, background-color 0.3s;
    transition: transform 0.3s, background-color 0.3s;
}

#topic #feedback span {
    margin: 0 0 0 10px;
    vertical-align: middle;
}

#topic #feedback:hover, #topic #feedback:focus {
    color: #ffffff;
    background-color: #3367d6;
    border-color: #3367d6;
}

#topic #feedback:hover > svg, #topic #feedback:focus > svg {
    fill: #ffffff;
}

#feedbackSection {
    background-color: #f9f9f9;
    max-width: 460px;
    margin: 0 auto 30px;
    padding: 30px 0;
    border-radius: 5px;
    position: relative;
    z-index: 1;
	box-shadow: none;
	text-align: center;
}

#feedbackSection h1 {
    display: inline;
    font-weight: 400;
    font-size: 1.2em;
}

.submitted #feedback, .submitted form {
    display: none;
}

#feedbackSection.submitted h1 {
    float: none;
    margin: 0;
}

#feedbackSection.submitted {
    padding: 30px;
}

div.printOnly {
    margin: 20px 0;
    border-top: 2px solid #e1e1e1;
    padding-top: 20px;
}

div.printOnly h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
}

div.printOnly ol {
    list-style-type: decimal;
}

.printOnly {
    display: none;
}

#sendFeedback {
    background-color: #ffffff;
    font-size: .9em;
    color: #333333;
}

#yes, #no {
    position: absolute;
    left: -9999px;
}

label[for="text"], label[for="email"] {
    display: block;
    margin: 30px 0 10px 0;
}

#text, #email {
    display: block;
    width: 90%;
    margin: 0 auto 30px;
    padding: 8px 3px;
    border-radius: 3px;
    border: 1px solid #ababab;
}

label[for="yes"], label[for="no"] {
    margin: 0 30px 0 0;
    background: url(../images/assets.png) no-repeat -60px 0;
    width: 70px;
    height: 35px;
    line-height: 36px;
    text-align: right;
    display: inline-block;
}

input[type="radio"]:checked + label {
    background-position: -60px -34px;
}

.tableintopic td, th {
    border: 1px solid #e1e1e1 !important;
    padding: 3px 5px;
    text-align: left;
    background: #ffffff;
}

/* TOC UI Styles */

#toc > .tree {
	padding-left: 15px;
	transition: 1s cubic-bezier(0.25, 0.1, 0, 0.98) transform;
	border-left: 3px solid #b1c2cc;
}
#toc > .tree.loading {
    transform: translateY(50px);
    opacity: 0;
}
#toc > ul, #toc .children {list-style: none;padding-left: 0;}
.visually-hidden {position: absolute; left: -999em;} 
.hasChildren, .noChildren {position: relative;}
.tree li ul {display: none;}
.tree li {padding-left: 20px;}
.tree a {padding: 2px 5px 2px 0;}
.tree a.focussed, .activedescendant > a {outline: 2px solid #BCD7E8;}
.tree .hasChildren a {background-image: none;}
.toggle, .page {background-position: left top; background-image: url(../images/assets.png);background-repeat: no-repeat; cursor: pointer; height: 18px; width: 20px; position: absolute; left: 0; top: 3px;}
.tree .expanded {background-position: -22px 0;}
.tree .collapsed {background-position: 0 0;}
.tree .page {background-position: -43px 0;}
.treeview a:link, .treeview a:visited {
    color: #35567b;
    text-decoration: none;
}
/* END TOC UI Styles */



.fullscreen > #toc {
	display:none;
}
.fullscreen > #topic {width: 100%;padding:0 20px;}

.treeview a:hover, .treeview a:focus {
    color: #008EBF;
}

table.relatedtopics {
    padding: 10px 20px 30px;
    margin: 30px 0;
    border-left: 5px solid #0A607B;
    font-size: .8em;
    background-color: #fbfbfb;
}

table.relatedtopics p {
    margin: 0;
}

/* Prevents img without src to appear */
img:not([src]) {
    visibility: hidden;
    width:100%;
}

/* AUTHORIT Specific Styles Below */


.authoritactualdata {
    font-family: 'Courier New', monospace;
}

.authoritbutton {
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.authoritvalue, .authoritsystemmessage {
    font-family: 'Courier New', monospace;
    font-style: italic;
}

.authoritemailaddress {
    font-style: italic;
}

.authoritmenuoption {
    font-weight: bold;
    font-style: italic;
}

.authorittelephone {
    font-weight: bold;
}

.tablefieldspecs {
	font-style:italic;
}

p.authoritnote, p.authoritnote1, p.authoritnote2, p.authoritnote3 {
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    padding: 10px 15px;
    background-color: #F7F7F7;
    margin: 20px auto;
}

/* End AUTHORIT Styles */

/* ==========================================================================
   Buttons
   ========================================================================== */

/**
 * Buttons, links that look like buttons, and input buttons all should have
 * consistent and uniform styling. Links should look like links, and navigate the
 * user to a new page/screen. If a link should behave like a button, consider using
 * a <button>. If that is not feasible use the .button class and consider using ARIA.
 *
 */

.button-group {
	list-style: none;
    margin: 0;
    padding: 20px 0;
}

.button-group--directional {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.button-group--directional button:first-child, .button-group--directional .button:first-child, .button-group--directional input[type="submit"]:first-child, .button-group--directional input[type="reset"]:first-child {
	float: left;
}

.button-group .button, .button-group button {
    display: inline-block;
    margin: 5px 10px;
}

.button, button, .pagination__button, input[type="submit"], input[type="reset"] {
	padding: 10px 30px;
	background-color: #ffffff;
	border: 1px solid transparent;
	text-decoration: none;
	border-radius: 3px;
	display: inline-block;
	margin: 10px auto;
	cursor: pointer;
	font-size: .8rem;
	transition: ease background .3s, color .3s;
}

.button--has-icon-left {
	padding-left: 10px;
}

.button--has-icon-right {
	padding-right: 10px;
}

.button--full-width {
	display: block;
	width: 100%;
}

.button:hover, button:hover, .pagination__button:hover {
	text-decoration: none;
}

/* Blue button modifiers
   ========================================================================== */

.button--blue {
    background-color: #016e98;
    color: #ffffff;
}

.button--blue:hover, .button--blue:focus {
	background-color: #185a71;
}

.button--blue .icon {
	fill: #ffffff;
}

/* Gray Button (Used for secondary actions) modifiers
   ========================================================================== */

.button--gray {
	border-color: #636363;
	background-color: #ffffff;
	color: #636363;
}

.button--gray:hover, .button--gray:focus {
	background-color: #636363;
	color: #ffffff;
}

.button--gray:hover .icon, .button--gray:focus .icon {
	fill: #ffffff;
}

/* White button modifiers
   ========================================================================== */

.button--white {
	background-color: #ffffff;
	color: #002b68;
}

.button--white .icon {
	fill: #002b68;
}

.button--white:hover, .button--white:focus { 
	background-color: #2a76a9;
	color: #ffffff;
}

.button--white:hover .icon, .button--white:focus .icon { 
	fill: #ffffff;
}

/* Icon Only Button modifiers */

.button--icon {
	padding:0;
	vertical-align:middle;
	margin: auto;
}

/* Disabled Button modifiers
   ========================================================================== */
   
.button--disabled, .button[disabled], [disabled] {
    background-color: #a9a9a9;
    color: #ffffff;
    border-color: #989898;
    pointer-events: none;
	
}

.button--disabled .icon, .button[disabled="true"] {
	fill: #ffffff;
	
}

.button--disabled:hover, .button[disabled="true"]:hover, .button--disabled:focus, .button[disabled="true"]:focus {
	background-color: #cccccc;
	color: #565656;
	pointer-events: none;
	
}

.button--disabled:hover .icon, .button[disabled="true"]:hover .icon, .button--disabled:focus .icon, .button[disabled="true"]:focus .icon {
	fill: #565656;
}

/* ==========================================================================
   Icon Styles
   ========================================================================== */

/**
 * 
 *
 */

.icon {
    width: 31px;
    height: 30px;
	fill: #5f697b;
    display: inline;
    margin: 0 auto;
	vertical-align: middle;
	transition: .3s ease fill;
}

.icon--small {
	width: 20px;
	height: 20px;
}

.icon--medium {
  width: 50px;
  height: 50px;
  fill: rgb(43, 49, 65);
}

.icon--large {
  width: 100px;
  height: 100px;
  fill: rgb(43, 49, 65);
}

.heading__icon {
	margin: 0 10px 0 0;
}

.icon--primary {
	fill: #139dcc;
}

.icon--secondary {
	fill: #ffffff;
}

/* Small toasts for errors, warnings, informative, and success conditions
   ================================================================================ */

.toast__container {
	position: fixed;
    z-index: 1000;
	right: -9999px;
	opacity: 0;
	transition: .3s ease opacity;
}

.toast--visible {
	opacity: 1;
}

.toast {
	background-color: rgba(76, 76, 76, 0.94)/*#4c4c4c*/;
    border: 1px solid #333333;
    color: #ffffff;
    padding: 1rem 2rem 1rem 4rem;
    border-radius: 3px;
    margin: 20px auto;
    font-size: .9rem;
	position: relative;
}

.toast .icon {
	margin: auto;
	fill: #ffffff;
	position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
}

.toast__close {
	background: none;
    padding: 0;
    margin: 0 0 0 20px;
    width: 33px;
    height: 32px;
    overflow: hidden;
    vertical-align: middle;
}

.toast--error {
	background-color: rgba(197, 78, 72, 0.94)/*#c54e48*/;
    border: 1px solid #bd362f;
	color: #ffffff;
}

.toast--error .icon {
	fill: #ffffff;
}

.toast--warning {
	background-color: #fffef0;
    border: 1px solid #dcc906;
	color: #333333;
}

.toast--warning .icon {
	fill: #dcc906;
}

.toast--info {
	background-color: rgba(1, 110, 152, 0.92)/*#edfaff*/;
    border: 1px solid #139dcc;
	color: #ffffff;
}

.toast--info .icon {
	fill: #ffffff;
}

.toast--success {
	background-color: rgba(60, 122, 60, 0.94)/*#edfbf7*/;
    border: 1px solid #3c7a3c;
	color: #ffffff;
}

.toast--success .icon {
	fill: #ffffff;
}

/* Modal Window
   ========================================================================== */

.modal__window {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
	background: #333333;
    background: rgba(51, 51, 51, 0.74);
    z-index: 100;
	opacity: 0;
	visibility: hidden;
	overflow-y: scroll;
    transition: .3s ease opacity;
}

.modal__container {
    background-color: #ffffff;
    width: 70%;
	max-width: 600px;
    top: 10%;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 3px;
    box-shadow: 0 8px 6px -6px rgb(56, 56, 56);
    position: absolute;
}

.modal__header {
    text-align: center;
    margin: 0;
    padding: 30px 0;
	font-size: 1.8rem;
    font-weight: normal;
    line-height: 2em;
}

.modal__content {
    padding: 0 30px;
}

.modal__footer {
    margin: 30px 0 0;
    padding: 20px 30px;
    background-color: #f7f7f7;
    border-radius: 0 0 3px 3px;
}

.modal__footer .button-group {
	padding: 0;
}

.modal__close-button {
    position: absolute;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
	color: #ffffff;
    border: none;
    overflow: hidden;
    top: -40px;
    right: 0;
    background: none;
}

.modal__close-button .icon {
    fill: #ffffff;
    width: 40px;
    height: 40px;
}

.modal__close-button:hover .icon, .modal__close-button:focus .icon {
    fill: #bfbdbd;
}

.modal__window--active {
	opacity: 1;
	visibility: visible;
}

/* Modal Window Effects */

.modal__window--fade .modal__container {
	opacity: 0;
	transition: .3s ease opacity;
}

.modal__window--fade.modal__window--active .modal__container {
	opacity: 1;
}

.modal__window--slide .modal__container {
	top: -9999px;
	transition: .3s ease top;
}

.modal__window--slide.modal__window--active .modal__container {
	top: 10%;
}

@media (max-width: 700px) {
	
	html, body, main {height:100%;}
	#opts {
		float: none;
		width: 100%;
		margin: 0;
		text-align: center;
    }

    .fullscreen > #toc {display:block;}
	.fullscreen > #topic {width: auto;}
	
	main {position: static !important;}
	#siteName {padding: 0 10px 0 75px;}
	header p {display: none;}
	.mobile__button {
		background: #35506e;
		border: none;
		padding: 5px 17px 5px 10px;
		border-radius: 5px;
		display: inline-block;
		vertical-align: middle;
	}
	.mobile__button abbr {
		vertical-align: middle;
		color: #ffffff;
		margin: 0 0 0 10px;
		text-decoration: none;
	}
	#toc > .tree{padding: 0 10px;border:none;}
	.mobile__button .icon {fill: #ffffff;}

    #toc {
		position: fixed;
		transform: translateX(-300px);
		top: 0;
		left: 0;
		padding: 0;
		box-shadow: 7px -6px 9px -6px rgb(99, 98, 98);
		max-width: 256px;
		width: 100%;
		height: 100%;
		z-index: 10;
		transition: transform 0.3s ease;
    }
    
    #topic {
        width: auto;
        padding: 0 20px;
    }
    
    aside {
    	margin: 0 0 20px 0;
	}
	
	#options button {
		margin: 0 25px 0 0;
	}
	
	#options {
		margin: 0 0 20px 0;
		float: none;
	}
	
	.treeview:before {
		content: 'Table of Contents';
		display: block;
		background-color: #eaeaea;
		padding: 10px 0 10px 20px;
		margin: 0 0 10px;
	}
    
    #options a:link, #options a:visited {
        margin: 0 25px 0 0;
    }
    #opts #viewFull{display: none;}
    .menuOut > #toc {transform: translateX(0);}
}



@media (max-width: 480px) {
	#feedbackSection h1 {
		margin: 0 auto 10px;
		float: none;
		text-align: center;
	}
	#topic #feedback {
		margin: auto;
		display: block;
		width: 80%;
	}
}

@media (max-width: 350px) {
	aside{
		text-align: center;
    	padding: 0;
	}
	aside a:link, aside a:visited, aside button {
		margin: 0 5px 0 0;
	}
}

@media print {
    section.printOnly,main,#topic{display:block !important;}
    sup.printOnly{display:inline;}
	#topic{width: auto;order: initial;padding: 30px;}
	.relatedtopics,#feedbackSection,header,aside,#toc,#options,#dd{display:none;}
	abbr{text-decoration: none;}
}