@charset "utf-8";
@import url("/assets/css/uswds.css");
@import url("ospo-wide-page.css");
@import url("/assets/css/opensans.css");


body {
  /*font-family: Open sans-serif;*/
	font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
	background-color: #999;
	margin-top: 0px;
}


/* site-wide body text elements */
a:link, a:visited { color: #3D509E; }
/* a:hover { color: #940202; } */

p {
	font-size: 12px;
    line-height: 21px;
    color: #333;
    margin: 8px 0px 0px 0px;
    padding: 8px 0px 0px 0px;
    font-family: 'Open Sans' !important;
}

.h2 {
		font-size: 16px;
		color: #3d509e;
		font-weight: bold;
	}

.h3 {
		font-size: 14px;
		color: #000;
		font-weight: bold;
	}

/* page top link elements on all pages */
#top_container {
	/*position: relative; 
	width: 1050px; height: 30px;
	margin: 0px auto;
	background-image: url(../graphics/breadcrumb-image.jpg);*/
  display:none;
}

.home-link {
	font-size: 11px;
	color: #FFF;
	text-align: left;		
	position: absolute;
	width: 200px; height: 23px;
	margin: 0px 0px 0px 15px; 
	padding: 7px 0px 0px 0px;
}

.breadcrumb-links {
	font-size: 11px;
	color: #FFF;
	text-align: right;	 
	word-spacing: 4px; 
	position: relative; top: 0px; left: 535px;
	width: 400px; height: 23px;
	margin: 0px; 
	padding: 7px 0px 0px 0px;
}
	
	.home-link a, .breadcrumb-links a { 
		font-weight: bold; 
		color: #FFF; 
		text-decoration: underline; 
	}
	
.home-link a:hover, .breadcrumb-links a:hover { color: #CFD8FD; }

/* header items on all pages */
#OSPO-header {
	position: relative;
	width: 1050px; height: 105px;
	margin: 0px auto; 
}

/* dropdown box on all pages */
#dropdown-box {
position: relative;
width: 1050px;
margin: 0px auto;
padding: 10px 0px 10px 0px;
background-color: #0A4595;
}

.inputtext {
width: 175px; 
}

	#dropdown-box-container {
		width: 800px;
		margin: 0px auto;
	}

/* search form */
#search-form { position: absolute; right: 10px; top: 13px;	}

	.inputtext {
		font-size: 1.06rem;
		color: #666;
		width: 200px; height: 25px;
		border: none;
	}

	.search-icon {
		width: 17px; height: 14px;
		vertical-align: middle;
		border: none;		
	}

/* body wrapper on all pages */
#body-box {
	position: relative;
	width: 1050px;
	margin: 0px auto;
	background-color: #FFF;
}

/* footer items on all pages */
#footer-box {
	position: relative;
	width: 1050px; height: 105px;
	margin: 0px auto;
	background: url(/graphics/footer-back.png) repeat-x #AEB8CE;
}

#footer-text1, #footer-text2, #footer-text3 {
	text-align: left;
	position: absolute;
	width: 600px;
}

#footer-text1 {	margin: 25px 0px 0px 30px; }
#footer-text2 { margin: 45px 0px 0px 30px; }
#footer-text3 {	margin: 70px 0px 0px 30px; }

	.footer-links1 {
		font-size: 11px;
		color: #333;
	}
	
		.footer-links1 a {			
			color: #3D509E;
			font-weight:bold;
			text-decoration: none;
		}

	.footer-links2 { 
		font-size: 11px; 	
		color: #666;
	}
	
		.footer-links2 a {
			color: #6070AF;
			text-decoration: none;			
		}

			.footer-links1 a:hover, .footer-links2 a:hover {
				color: #940202;
				text-decoration: underline;			
			}		

	.footer-date {
		font-size: 11px;
		font-style: oblique;
		color: #454D6D;
	}

	#footer-logo {
		float: right;
		position: relative;
		width: 70px; height: 72px;
		margin: 25px 20px 0px 0px;
	}

/* centered image container */
.centered-image {
	text-align: center;
	position: relative;
	width: 1050px;
	padding-bottom: 30px;
}

/* centered titles */
.header-centered {
	text-align: center;
	position: relative;
	margin: 0px auto; 
	padding: 10px 0px;		
}

	.header-centered h1 {
		font-size: 20px;
		color: #000;
	}

	.header-centered h3 {
		font-size: 14px;
		color: #000;
		font-weight: bold;
	}

/* padding top left bottom right */
.padding30 {
	padding: 5px 30px 5px 30px;
}


/* responsive table */

.table {
  margin: 5px 0 40px 0;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
}
@media screen and (max-width: 540px) {
  .table {
    display: block;
  }
}

.row {
  display: table-row;
  background: #f6f6f6;
}
.row:nth-of-type(odd) {
  background: #e9e9e9;
}
.row.header {
  font-weight: 900;
  color: #000000;
  background: #BDBDBD;
}

}
@media screen and (max-width: 540px) {
  .row {
    padding: 8px 0;
    display: block;
  }
}

.cell {
  padding: 10px 12px;
  display: table-cell;
}
@media screen and (max-width: 580px) {
  .cell {
    padding: 2px 12px;
    display: block;
}
  }
.data {
	border-style: none !important;
}

/*Card*/
.program-holder-2 {
	display:grid;
	grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
	grid-column-gap: 2rem;
	position:relative;
	margin-left:1em;
	margin-right:1em;
}
.program-holder-3 {
	display:grid;
	grid-template-columns: repeat(3, minmax(200px, 1fr)) !important;
	grid-column-gap: 2rem;
	position:relative;
	margin-left:1em;
	margin-right:1em;
}
.program-holder-4 {
	display:grid;
	grid-template-columns: repeat(4, minmax(200px, 1fr)) !important;
	grid-column-gap: 2rem;
	position:relative;
	margin-left:1em;
	margin-right:1em;
}
.program-card {
	border-radius:8px;
	box-shadow:0px 3px 8px #969595;
	overflow:hidden;
	margin-bottom: 2.5rem;
	
}

.program-card img {
	display:block;
	width:100%;
	max-height:230px;
	overflow:hidden;
	max-width:100%;
}

.title {
	color:#0A4595;
	font-weight:700;
	padding:1.5rem;
	padding-bottom: 0.5rem;
	font-size:1.5em;
}

.title:after{
	content: '';
position: absolute;
display: block;
height: 2px;
width: 40px;
background-color: #0A4595;
}

.description{
	padding:1.5rem;
	padding-bottom: 0.5rem;
	padding-top: 0;
}

.program-card a {
	color:#0A4595;
	font-weight:700;
	display:inline-block;
	margin-bottom:1.5rem;
    margin-top:1rem;
	padding-left:1.5rem;
	padding-right:1.5rem;
	text-decoration: none;
}
		.program-card a:hover {
	color:#0099E8;
}
.accordion_head{
	background-color: #0A4595 !important;
	color: #fff !important;
}
.accordion {
	background-color: #0A4595 !important;
	color: #fff !important;
}
.responsive {
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.btn-ospo-main {
	display: inline-block;
	background-color: #0A4595;
	border:1px solid #0A4595;
	color: #fff;
	text-align: center;
	font-size: 17px;
	padding: 10px;
	width: 250px;
	transition: all 0.5s;
	cursor: pointer;
	margin: 5px;
  }
  .btn-ospo-main span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.5s;
  }
  .btn-ospo-main span:after {
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.5s;
  }
  .btn-ospo-main:hover {
	background-color: #0099e8;
	border:1px solid #0099e8;
  }
  .btn-ospo-main:hover span {
	padding-right: 0px;
  }
  .btn-ospo-main:hover span:after {
	opacity: 1;
	right: 0;
  }
  
  .btn-ospo-main span:before {
	  content: '';
	  background: url(../graphics/download-solid.svg);
	  color: #fff;
	  position: absolute;
	  left: -25px;
  }
  .btn-ospo-main svg { 
	  height: 1rem;
  }
  .btn-ospo-main svg path {
	  fill: #fff;
  }

	
  #body-box .page-title{
	margin-top: 0;
  }

/* Homepage Messages links 4/10/23 */
.message-list li a {
	background-color: transparent;
	color: #003087;
	outline-offset: 0.1111111111em;
	text-decoration: none;
	-webkit-text-decoration-skip: objects;
	transition: color 200ms cubic-bezier(0.4,0,1,1);
}
.message-list li a:hover,a:active {
	outline: 0;
}

.message-list li a:hover,.message-list li a:focus {
	color: #0099E8;
}

.message-list li a:hover{
	-webkit-text-decoration-color: #0099E8;
	text-decoration-color: #0099E8;
	-webkit-text-decoration-line: underline;
	text-decoration-line: underline;
	-webkit-text-decoration-style: dotted;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
}

.nesdis-footer__second {
	padding: unset;
    padding-top: 2rem;
    padding-bottom: 0.8rem;
    margin-top: 1rem;
    border-top: 1px solid white;
    text-align: right;
    font-size: 16px;
}

.nesdis-footer__second	.grid-row .grid-col-2{
	padding-left: 0;
}

.nesdis-footer__second .grid-col-fill {
    display: grid;
    align-items: top;
}

.nesdis-footer__second li {
    border-right: 1px solid white;
    padding: 0 1rem;
    line-height: 30px;
}

.nesdis-footer__second li:last-child {
    border-right: unset;
    padding-right: unset;
}

.footer-logo {
    background-image: url('/assets/img/noaa-logo-white.png');
    background-size: 100%;
    background-position: center center;
    display: block;
    height: 65px;
    width: 65px;
    margin-left: 0;
}

.fa-override .usa-site-alert--info .usa-alert .usa-alert__body::before {
    background: none;
    -webkit-mask: none;
    mask: none;
    font: var(--fa-font-regular);
    content: '\f15b';
    font-size: 2.45rem;
    position: absolute;
    left: 1.25rem;
    top: 0.90rem;
}

.usa-skipnav {
	z-index: 1000;
}

/*card corrections 6-06-23*/
.program-card a.card-fix {
    margin: 0;
    padding: 0;
}

.noshadow {
	box-shadow: none;
}


/*Button Edit 6-06-23*/
.usa-button {
	font-family: 'Open Sans';
	background: #fff !important;
	color:#0A4595 !important;
	border: 2px solid #0A4595 !important;
}

.usa-button:hover {
	background-color: #0A4595 !important;
	color: #fff !important;
}



/* update notifaction 6-26-23
https://www.ospo.noaa.gov/Products/land/spp/ssmis17.html
https://www.ospo.noaa.gov/Products/land/spp/ssmis18.html
*/


.usa-site-alert--info .usa-alert.update-alert .usa-alert__body::before{
	background:url("/assets/img/usa-icons/update.svg") no-repeat center/contain !important;
	display:inline-block;
	height:2rem;
	width:2rem;
	content:"";
	display:block;
	height:4;
	left:0.5rem;
	position:absolute;
	top:0.75rem;
  }
  @supports ((-webkit-mask: url("")) or (mask: url(""))){
	.usa-site-alert--info .usa-alert.update-alert .usa-alert__body::before{
	  background:none;
	  background-color:#1b1b1b;
	  -webkit-mask:url("/assets/img/usa-icons/update.svg") no-repeat center/contain !important;
			  mask:url("/assets/img/usa-icons/update.svg") no-repeat center/contain !important;
	}
  }
  .text-underline-none{
	text-decoration: none;
  }

  .table-hull{
	position: fixed;
	top: 250px;
	left: 0px;
	width: 25px;
	height: 50px;
	z-index: 500;
	background-color: #fff;
  }
  #link-col-210-top.r-side-nav {
	margin-left: 0;
  }
	.usa-sidenav {
      font-size: 0.8rem; 
      font-family:'Open Sans';
    }
    .usa-in-page-nav__heading {
      font-size: 1rem;
    }


	/* Style the tab */
    .tab {
		overflow: hidden;
		border: 1px solid #ccc;
		background-color: #f1f1f1;
	  }
  
	  /* Style the buttons inside the tab */
	  .tab button {
		background-color: inherit;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 9px 25px;
		transition: 0.3s;
		font-size: 17px;
	  }
  
	  /* Change background color of buttons on hover */
	  .tab button:hover {
		background-color: #0085CA;
	  }
  
	  /* Create an active/current tablink class */
	  .tab button.active {
		background-color: #ccc;
	  }
  
	  /* Style the tab content */
	  .tabcontent {
		display: none;
		padding: 6px 12px;
		border: 1px solid #ccc;
		border-top: none;
	  }
	  
	  .margin-20 {
		margin: 20px;
	  }
  
	  .tab {
		background-color: #0A4595
	  }
  
	  .tab button {
		color: #fff;
	  }
  
	  .tab button.active {
		background-color: #0085CA; 
		color:#fff;
	  }

	  .tab button.active {
		 background: #0085CA;
		}

		.table-sect {
            font-family: 'Open Sans', Arial, Helvetica, sans-serif;
            font-size: 12px;
        }

        .table-sect td {
            font-family: 'Open Sans', Arial, Helvetica, sans-serif;
            font-size: 12px;
            border: solid thin #000;
            padding: 5px;
        }

        .table-sect th {
            font-family: 'Open Sans', Arial, Helvetica, sans-serif;
            font-size: 12px;
            border: solid thin #000;
            background-color: #fff;
            padding: 5px;
        }