/* Style the tab */
.tab {
  overflow: hidden;
  
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  
  border-top: none;
}



/* Style the tab content */
.tabbox {
  max-width: 50rem;
 
}

	 



#bottom-nav {
	margin-top: 3rem;
	background-color: #00795f;
}

#bottom-nav:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

#bottom-nav a {
	font-size: 1.25rem;
	text-decoration: none !important;
	color: #94d500;
}

#bottom-nav > div {
	cursor: pointer;
}

#bottom-nav div.next {
	box-sizing: border-box;
    width: 47.5%;
	float: right;
	padding: 1rem 0;
    text-align: center;
}

#bottom-nav div.prev {
	box-sizing: border-box;
    width: 47.5%;
	float: left;
	padding: 1rem 0 1rem 1.75rem;
	text-align: center;
}

#bottom-nav div.hover {
	background-color: #94d500;
}

#bottom-nav div.hover a {
	color: #333;	
}

#bottom-nav div.hover p span {
	color: #004f50;
}

#bottom-nav p {
	display: inline-block;
	padding: 0;
	text-align: left;
	line-height: 1.5;
}

#bottom-nav p span {
	text-transform: uppercase;
	color: #fff;
}

.detail-arrow {
	height: 0.66rem;
	margin: 0;
}


/* make h2 sub title to be max width 60rem size */
div.content-container > h2:not(.cardtitle) {
    max-width: 60rem;          
}



.flex-grid-halves.content-container.legend {
	margin-top: 2.75rem;
}

h1.green,div.content-container > h1:first-child {
	margin-top: 1.5rem;
	color: #00795f;
}

h2.cardtitle {
	margin: 0;
	font-size: 1.25rem;
	color: #fff;
}

h2.header {
	display: flex;
	margin-top: 2rem;
}

h2.header + p {
	margin-bottom: 1.75rem;
}

h2.header a img {
	margin: 0 0 0 0.75rem;
	vertical-align: bottom;
}

h2.legend {
	margin-top: 0;
}

.imageboxinclusion,.imageboxpractical,.imageboxworkforce {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 2rem;
	vertical-align: top;
	border: 2px solid #62605d;
}


.imageboxinsidebottom {
	position: relative;
	height: 6.25rem;
}

.imageboxinsidebottom.tall {
	height: 7.75rem;
}

.imageboxinsidebottom > div {
	vertical-align: top;
}

.imageboxinsidebottom > div:first-child {
	display: inline-block;
	box-sizing: border-box;
	width: calc(100% - 75px);
	padding: 1rem 0.5rem 0.5rem 0.75rem;
}

.imageboxinsidebottom > div:nth-child(2) {
	display: inline-block;
}

.imageboxinsidebottom div > span {
	position: absolute;
    bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	color: rgb(112, 116, 120);
}	

.imageboxinsidebottom div.brief {
	font-size: 2.1rem;
	font-weight: 900;
	line-height: 1;
	color: rgb(112, 116, 120);
}

.imageboxinsidebottom div.text {
	font-size: 0.9rem;
	font-weight: 900;
	line-height: 1.35;
	color: rgb(112, 116, 120);
}

.imageboxinsidebottom div.large.text {
	font-size: 1rem;
}

.imageboxinsidetop {
	display: flex;
	align-items: center;
	height: 3.66rem;
	padding: 0.33rem 0.5rem;
	background-color: #62605d;
}

.imageboxlegends {
	box-sizing: border-box;
	max-width: 690px;
}

.imageboxlegendsinside > div {
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

.imageboxlegendsinside > div:nth-child(odd) {
	max-width: 195px
}

#imageboxinsidelegends > div > span {
	vertical-align: top;
}

.imgcheckmiddle {
	width: 35px;
	margin: 0 1rem 1.5rem 0;
    vertical-align: middle;
}

.imgchecktop {
	width: 45px;
}

main.full-width > div.content-container,main.full-width > div.content-container.tableau {
	padding: 0 1.25rem;
}

.notable {
    height: 4rem;
	padding: 0.75rem 0.5rem 1rem;
	line-height: 1.4;
	font-size: 0.9rem;
	color: rgb(56, 28, 38);
	border-bottom: 0.33rem solid #62605d;
}

.notable.tall {
	height: 5.25rem;
}

p.bottomdetail {
	margin-bottom: 0;
	padding: 2px 0.66rem 1px 0;
	text-align: right;
	font-size: 0.9rem;
	color: #fff;
	background-color: #62605d;
}

span.large-green-text {
	font-size: 1.5rem;
	color: #00795f;
}

span.words {
	font-size: 0.75rem;
	font-weight: 900;
	color: rgb(112, 116, 120);
}

.tableauPlaceholder {
	position: relative;
}

.tableauPlaceholder,.tableauPlaceholder iframe {
	max-width: 100%;
	scroll: no;
}

@media (min-width: 350px) {
	#bottom-nav div.next {
		background: url(../img/svg/bottom-nav-next.svg) right 1.5rem top 3.75rem no-repeat;
	}
	
	#bottom-nav div.next.hover {
		background-image: url(../img/svg/bottom-nav-next-hover.svg);
		background-color: #94d500;
	}
	
	#bottom-nav div.next p {
		padding: 0 2rem 0 1rem;
	}
	
	#bottom-nav div.prev {
		padding: 1rem 0;
		background: url(../img/svg/bottom-nav-prev.svg) left 1.5rem top 3.75rem no-repeat;
	}
	
	#bottom-nav div.prev.hover {
		background-image: url(../img/svg/bottom-nav-prev-hover.svg);
		background-color: #94d500;
	}
	
	#bottom-nav div.prev p {
		padding: 0 1rem 0 3.25rem;
	}
}

@media (min-width: 450px) {
	#bottom-nav div.next {
		padding-right: 5%;
		background-position: right 2.5rem top 3.75rem
	}
	
	#bottom-nav div.prev {
		padding-left: 5%;
		background-position: left 2.5rem top 3.75rem
	}
	
	.imageboxinclusion:hover,.imageboxpractical:hover,.imageboxworkforce:hover {
		opacity: 0.75;
	}
	
	main.full-width > div.content-container {
		padding: 0;
	}
}

@media (min-width: 600px) {
	.imageboxinclusion,.imageboxpractical,.imageboxworkforce {
		width: 45%;
		margin: 0 1.5rem 2rem 0;
		cursor: pointer;
	}
}

@media (min-width: 800px) {
	#bottom-nav {
		margin-top: 4.25rem;
	}
	
	#bottom-nav a {
		padding: 2rem 0;
	}
	
	#bottom-nav a {
		font-size: 1.5rem;
	}
	
	#bottom-nav div.next {
		text-align: right;
	}
	
	#bottom-nav div.prev {
		text-align: left;
	}
	
	h1.green,div.content-container > h1:first-child {
		margin-top: 3.5rem;
	}
	
	h2.header {
		display: flex;
		margin-top: 3.33rem;
	}
	
	main.full-width > div.content-container.tableau {
		padding: 0.5rem 1rem 0;
	}
}

@media (min-width: 900px) {
	.imageboxinclusion,.imageboxpractical,.imageboxworkforce {
		width: 30%;
	}
}

@media (min-width: 1000px) {
	.flex-grid-55-45 .col.wide > p {
		padding: 3.5rem 2rem 0 2.75rem;
	}
}

@media (min-width:1150px) {
	#bottom-nav a {
		font-size: 1.85rem;
	}
	
	#bottom-nav div.next {
		padding-right: 5%;
		background-position: right 2.5rem top 4.25rem
	}
	
	#bottom-nav div.prev {
		padding-left: 5%;
		background-position: left 2.5rem top 4.25rem;
	}
	
	.imageboxinclusion,.imageboxpractical,.imageboxworkforce {
		width: 17%;
	}
}

@media (min-width:1750px) {
	#bottom-nav div.next {
    	padding-right: 0;
		text-align: center;
		background-position: right 14rem top 4.25rem;
	}
	
	#bottom-nav div.prev {
    	padding-left: 0;
		text-align: center;
		background-position: left 14rem top 4.25rem;
	}
}

/* iframe pages */

.desktop {
	display: none;
	align: center;
	width: 100%;
}



/* tableau size switch show and hide tableau*/

@media only screen and (min-width: 750px) {
	
	div.tabluauouter {
	max-width: 60rem;
	margin-left: 5%
	
	
	}
	
	
	
	
	
	
	
	.desktop {
		display: inline-block;
		align: center;
		
		
	}
	
	.phone {
		display: none;
		align: center;
	}
	
	
	/* tableau size switch show and hide tableau for Modern-work environment*/
	div.tabluauouterforTablecenter {
	
	margin-left: 5%;
	
	 display: grid;
 
 
	
	}
	
	
	
	
}



/* tableau bar to hide desktop*/


div.barhide900px {
	width: 100%;
    height: 870px;
    overflow: hidden;
	display: inline-block;
	margin:auto;
}



div.barhide600px {
	width: 100%;
    height: 570px;
    overflow: hidden;
	display: inline-block;
	margin:auto;

	
}

div.barhide500px {
	width: 100%;
    height: 470px;
    overflow: hidden;
	display: inline-block;
	margin:auto;
}

div.barhide400px {
	width: 100%;
    height: 370px;
    overflow: hidden;
	display: inline-block;
	margin:auto;
}


div.barhide250px {
	width: 100%;
    height: 220px;
	
    overflow: hidden;
	display: inline-block;
	margin:auto;
}

div.barhide350px {
	width: 100%;
    height: 330px;
    overflow: hidden;
	display: inline-block;
	margin:auto;
}




/* tableau bar to hide phone size */

div.barhidephone800px {
	width: 97%;
    height: 795px;
    overflow: hidden;
}




div.barhidephone500px {
	width: 97%;
    height: 495px;
    overflow: hidden;
	
}

div.barhidephone400px {
	width: 97%;
    height: 395px;
    overflow: hidden;
}

div.barhidephone350px {
	width: 97%;
    height: 345px;
    overflow: hidden;
}




div.barhidephone250px {
	width: 97%;
    height: 245px;
    overflow: hidden;
}



div.barhidephone200px {
	width: 97%;
    height: 195px;
    overflow: hidden;
}







/* Navigation additional added from HTML*/



 @media screen and (max-width: 900px) {
  .tabnav a:not(:first-child) {display: none;}
  .tabnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 900px) {
  .tabnav.responsive {position: relative;}
  .tabnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .tabnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  border-bottom: 2px solid;
  border-color: white;
  }
}




/* Progress and Target Table  */



div.centertableouter {

	   
    margin-left:5%; 
    
	
	max-width: 50rem;
}


div.centertable {
position: relative; 
display: block;
	
	width: 100%;
	left: 5%;
}

table.tablebox {
	width: 100%;
	cellspacing: 0;
	cellpadding: 2;
}

tbody.tablebody
{ text-align: center;
}

th.title {
  background-color: black;
  color: white;
  font-weight: bold;
  font-size: 16px;
	width: 30%
}

th.title3columns {
  background-color: black;
  color: white;
  font-weight: bold;
  font-size: 16px;
	width: 20%
}


th.titlenone {
  background-color: white;
  
	width: 30%
}

td.titlenone {
  background-color: white;
  
	width: 30%
}


th.titlespace1 {
  width: 10%
}

th.titlespace2 {
  width: 25%
}

td.progress {
  background-color: white;
  color: rgb(0, 121, 95);
  font-weight: bold;
  font-size: 32px
}


td.titlespace1 {
  width: 10%
}

td.titlespace2 {
  width: 25%
}



td.target {
  background-color: white;
  font-weight: bold;
  font-size: 32px
}

td.comingsoon {
  background-color: white;
  color: #e31c3d;
  font-weight: bold;
  font-size: 18px
}


td.establish {
  background-color: white;
  color: #000000;
  
  font-size: 20px
}


td.year {
  background-color: white;
  font-size: 16px;
  font-weight: bold;
  
}

/* Green bar More about...  */

h2.green-bar {
	box-sizing: border-box;
    margin: 0;
    padding: 0.2rem;
    text-align: left;
    font-size: 1.5rem;
    font-weight: normal;
    color: #fff;
	background-color: #00795f;
	max-width: 65rem;
}


#NaPS201 {
text-align: center;
}
#NaPS101 {
text-align: center;
}



p.source {
 font-size: 9px;
 font-family: "Lato",sans-serif;
    color: #767676;
 
}

p.note {
 font-size: 10px;
 font-family: "Lato",sans-serif;
    color: #767676;
 
}

/* Engineer images */



div.columnimage {
  float: left;
  width: 30%;
  padding: 5px;
  

}


/* main images center*/



.centerimageouter {
  width: auto;
  
  
}

.centerimageinner {
   display: block;
  margin-left: 5%;
  
  width: 90%;

}



/* Clearfix (clear floats) */
div.rowimage::after {
  content: "";
  clear: both;
  display: table;
  
}




/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
 div.columnimage {
    width: 100%;
  }
}


/* Dashboard pictures 2 images side by side*/

.imagesinner {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;

    
}
#twoimagecentersidebyside{
   text-align:center;
   margin: 0 auto;
}






/* Dashboard pictures using figures*/




figure {
  display: inline-block;
  width: 70%;
  align-items: center;
  
}

figure.95perimage {
  display: inline-block;
  width: 95%;
  align-items: center;
  
}


figure.80perimage {
  display: inline-block;
  width: 70%;
  align-items: center;
  
}


figure.maximage {
  display: inline-block;
  width: 90%;

  align-items: center;
  
}


figure figcaption {
  display: table-cell;
  float: center;
  max-width: 80%;
  text-align: left;
  
  
}

#figcaptioncenter {
  display: inline-block;
  width: 100%;
  
  margin-left: 10%;
}


figure figcaption.note {
 font-size: 12px;
 font-family: "Lato",sans-serif;
    color: Gray;
 
}


figure.imagesrow2 {
  display: inline-block;
  width: 40%;
  text-align: center;
  
}

figure.imagesrow3 {
  display: inline-block;
  width: 25%;
  text-align: center;
  
}

@media screen and (max-width: 600px) {
 figure.imagesrow2 {
    width: 80%;
  }
  
  figure.imagesrow3 {
    width: 80%;
  }
  
  figure {
  
  width: 90%;

}
  
  
  figure.maximage {
  display: inline-block;
  width: 90%;
  align-items: center;
  
}
  
  
}

p.dashboard em {
  color: #767676;
  font-style: normal;
}





#emunderline1 {
  color: #00795f;
  font-style: normal;
  text-decoration: underline;
}

#emunderline2 {
  color: #00795f;
  font-style: normal;
  text-decoration: underline;
}
#emunderline3 {
  color: #00795f;
  font-style: normal;
  text-decoration: underline;
}
#emunderline4 {
  color: #00795f;
  font-style: normal;
  text-decoration: underline;
}


/* For Skip Navigation
 * Class for elements that are only visible to the screen reader. From
 * https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
 */
.visually-hidden {
	clip: rect(1px 1px 1px 1px); /* IE 6/7 */
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	margin: -1px;
}

/*
 * For `.visually-hidden` elements that should be visible when it gains focus.
 */
.visible-when-focused:focus {
	clip: auto;
	height: auto;
	overflow: visible;
	position: static;
	white-space: normal;
	width: auto;
	margin: auto;
}

/*
 * Style for "Skip Navigation" type links.  Should have an href linked to 
 * a `.bypass-block-target` element.
 */
.bypass-block-link {
	position: absolute;
	text-decoration: none;
	background: #ffffcc;
	padding: 0.2em;
	z-index: 10;
}



.red-input:focus {
  background: yellow;
  color: red;
}


/*
 * For center image 100% width
 */


div.imagecenterouter {
	width: 100%;
}

div.imagecenterinner {
position: relative; 
display: block;
	
	width: 100%;
}





/*
 * For hr line width (between subject)
 */
 
 hr.hrmax60rem {
	 max-width: 65rem;
	 margin-right: auto
	 }

	 
	 
	 
	 
	 
	 

	 
/*
 * To center Nav button and drop-down on mobile:
 */
 	 
	 
button#left-nav,ul.left-nav {
    margin-left: -1.25rem;
}