/* ================INSTRUCTIONS=================*/ 
/* By changing the info below, you can reduce the size of the logo or hide the search box. You can also override the standard font characteristics if you would like to use your own custom styles. In order for your changes to work though, you MUST include a reference in your HTML pages to both the common CSS file and custom CSS file in that order.

Instructions are provided below for customizing these classes. */

/* =============Width===============*/ 
/* BY DEFAULT, THERE IS NO MAX WIDTH:
If you want the want to restrict the width of the page, remove the comment out slashes and astricks surrounding the ".tmp-container  {max-width: 1170px;}". you can change the 1170px to a smaller/larger max width if you'd like */
 
/* .tmp-container {
	max-width: 1170px;
} */

/* =============Search===============*/ 
/* BY DEFAULT, Search box is displayed:
If you want the to hide the search, remove the comment out slashes and astricks surrounding the ".search-box {display:none;}" below.  */
 
#search-box {
	display: none;
}

/* =============LOGO===============*/ 
/* THE DEFAULT LOGO HEIGHT IS 65PX:
If you want the logo to be smaller (50px), comment out the ".logo-header img {height 65px;}" below and remove the comment out slashes and astricks surrounding the ".logo-header img {height: 50px...margin-top: 18px;}" and the header search input (so the search box size is reduced too). 50px is the MINIMUM HEIGHT for the logo. */
/* 
.logo-header img {
    height: 65px;
}
*/
.logo-header img {
	height: 50px;
} 
/*
.header-search input[type="search"] {
	height: 30px;
	margin-top: 16px;
}
.header-search button[type="submit"] {
	width: 26px;
	height: 30px;
	margin-top: 18px;
}
*/

/* =============STANDARD CONTENT===============*/ 
/* TO CHANGE THE TEXT SIZE OF THE CONTENT, FONT, ETC:
By default, USGS has set the font size, family, etc. in order to provide a consistent size for content across all pages. If you would prefer not to have any of these pre-defined formats, you can change them below. NOTE: header and footer will not be changed. */
#maincontent {
	font-size: 14px;
    line-height: 1.42857;
    color: #333333;
    background-color: #fff;
}

/* =============SEARCH===============*/ 
/* THIS HIDES THE SEARCH BOX ON VERY SMALL DEVICES:
For simplification, search bar is visible on larger screens but is hidden on small screens. If you would prefer not to have the search box at all, you can remove the "@media (max-width:500px) {" and the second closing "}". below */
@media (max-width:500px) {
.header-search form { 
	display: none}
}

/* =============SOCIAL MEDIA===============*/ 
/* If you would prefer not to have the social media links, you can remove the comment out slashes and astricks surrounding the content below */
.footer-social-links { 
	display: none
} 

/* ======Add styles to custom.css====== */

.btn-success {
    color: #fff;
    background-color: #0a8927;
    border-color: #0a8927;
}

a {
	color: #1e63ec !important;
}

.white-text {
	color: white !important;
}

select.form-control[multiple], select.form-control[size] {
    height: 220px;
}

a.ext_link {
    word-break: break-word;
}

.alert-danger {
	background-color: #fdd !important;
    border-color: #ff9696 !important;
}

.btn-primary {
    color: #fff !important;
} 

.btn-secondary {
    color: #fff !important;
	background-color: #767676 !important;
}

button#headerDropdownMenuButton {
	padding: 5px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	font-size: 12px;
	margin-top: 5px;
	float: right;
	width: 145px;
}

.center-btns {
	text-align: center;
}

.clearIt {
	clear: both;
}
 
.cooperator-link {
	/* TODO 
	position: absolute;
    left: 200px;
    margin-top: 12px; */
}

.cru.social-links a {
	font-size: 26px;
}

.cru.social-links  {
	float: right;
	margin-right: 15px;
	margin-top: 5px;
}

.cru.social-links ul {
	clear: both;
	height: 27px;
	margin-left: -28px;
}

.cru.social-links ul.social li {
	list-style: none;
    display: inline-table;
    vertical-align: middle;
}

.facebook a {
	color: #4b69b0 !important;
	margin-right: 6px;
}

.header.dropdown-menu.show {
    width: 100% !important;
	max-width: 550px !important;
    padding: 15px !important;
}

.header.dropdown-menu a {
    font-size: 12px!important;	
    display: inline-block !important;
    width: 100% !important;
    flex-direction: row !important;
	color: #007bff !important;
}

hr {
    clear: both;
	margin-left: -15px;
    margin-right: -15px;
}

.inline-btns {
	display: inline;
}

span.box {
  	width: 25px;
    height: 25px;
    border-radius: 5px;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 2px;
    padding-right: 0px;
    padding-left: 5px;
}


.instagram span.box {
  	width: 25px;
    height: 25px;
    background: rgb(131,58,180);
    background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    border-radius: 5px;
    text-align: center;
    padding-top: 2px;
    padding-right: 4px;
  	display: inline list-item;
}

.instagram span.box a {
  font-size: 15px !important;
  color: #fff !important;
}

.tumblr a {
	color: #001935 !important;
	font-size: 24px !important;
	margin-right: -3px;
}


/* =============HR TAG FOR FOOTER IN FIREFOX ===============*/
@-moz-document url-prefix() {
footer-doi hr {
     clear:both;
  }
}

/* ============= Page Content CSS by SAS ===============*/
#loader {
	position: fixed;
	top: 40%;
	left: 50%;
	display: none;
	background: url(/coopunits/static/images/spinner-big.gif) no-repeat;
	cursor: wait;
	padding: 20px;
	margin: 20px;
}

.align-left {
	float: left;
}

.align-right {
	float: right;
}

footer.footer hr {
	border-top: 1px solid #fff !important;
	margin-top: 0px;

}


.content {
    width: 600px;
    padding: 5px;
}

footer.footer .footer-doi {
	margin-top: 15px;
}

h1.page-title {
	font-family: Helvetica, sans-serif;
	font-size: 24px;
	margin-left: 15px;
	margin-top: 5px;
}

h2.staff-name {
	font-size: 28px;
	margin-top: 10px;
	margin-bottom: 15px;
}

h2.project-title,
h2.unit-title {
    margin-left: -15px;
}

h2.project-page-title {
	margin-left: 0px;
}

h2.state-coopunit-name {
	font-size: 24px;
}

h3.project-duration {
	font-size: 22px;
}

h3.modal-title {
	font-size: 1.25rem !important;
}

h3.staff-tabs-title {
	font-size: 22px;
}

hr.data-table-spacer {
	margin-top: 25px;
	margin-bottom: 25px;
}

img.project-picture {
	max-width: 300px;
	float: left;
	margin-right: 20px;
	margin-top: 8px;
	margin-bottom: 20px;
}

img.logo-picture {
	height: 50px;
}

img.staff-picture {
	width: 200px;
}

center img.staff-picture {
	margin-left: 2px;
}

.staff-box-home-page,
.staff-box-federal-page {
	min-width: 200px !important;
	max-width: 200px !important;
}

.staff-box-university-page,
.staff-box-student-page {
	margin-bottom: 25px !important;
}

li.staff-links,
li.staff-news {
	margin-left: -10px;
	margin-top: -15px;
}

.staff-profile-box-area {
    padding: 20px;
    padding-top: 15px;
    background-color: #f0f0f0 !important;
    float: left;
}

img.staff-picture-home-page {
	width: 115px; /* width of container */
    height: 145px; /* height of container */
    object-fit: cover;
    object-position: 20% 10%; /* try 20px 10px */ 
	margin-bottom: 10px;
	margin-right: 10px;
}

.project-box-area h4 {
	font-size: 20px;
}

#loader + hr {
    display: none;
}

span.page-sub-title {
	font-size: 16px;
}

span.project-box-area {
	padding: 20px;
	padding-top: 10px;
	width: 410px;
	background-color:#f8f9fa!important;
	float: right;
	margin-left: 30px;
	margin-bottom: 30px;
}

h3.home-page {
	font-size: 18px;
}

.staff-info h3 {
	font-size: 20px;
	margin-top: 10px;
    margin-bottom: 10px;
}

.staff-position,
.staff-status {
	font-size: 12px;
}

.staff-role {
	font-weight: bold;
}

.staff-tab-title ul {
	width: 100%;
}

/* Start Splash Home Page CSS */
.adjust-img-overlap {
	margin-top: 25px;
    margin-bottom: 25px;
}

 .btn.btn-green {
    color: #fff !important;
    background: #538300;
    display: inline-block;
    /* padding: 7.5px; */
    -webkit-transition: all .5s;
    transition: all .5s;
    border-radius: 1px;
    border-color: transparent;
    font-size: 14px;
    font-weight: 400;
    /* width: 230px; */
    margin-bottom:10px;
    margin-right: 20px;
}


.btn.btn-green:hover {
    color: #fff;
    background: #aadb36;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
}

button#dropdownMenuButton {
	padding: 5px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
	font-size: 12px;
	margin-top: -5px;
	width: 145px;
}

.col-sm-6.col-xs-12.section-header {
    padding-left: 0px;
	padding-right: 0px;
}

.col-12.content {
    padding-left: 30px;
    padding-right: 30px;
}

.col-12.data-table {
    padding-left: 0px;
    padding-right: 0px;
}

ul.unitDropdown-btns {
    margin-left: -40px;
}

ul.unitDropdown-btns li {
    display: block !important;
}

.unit-map-section .dropdown-menu.show {
    width: 100%;
    min-width: 550px;
    padding: 15px;
}

.unit-map-section .dropdown-menu a {
    font-size: 12px;
    display: inline-block;
    width: 100px;
    flex-direction: row;
}

.dropdown-menu a:after {
    content: " \ "  
}

h2.news-events-header {
	background: #699c4e;
	background: #1472ad;
	color: #ffffff;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	text-align: center;
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 25px;
}

h2.search-info-header {
	background: #1472ad;
	color: #ffffff;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	text-align: center;
	margin-left: -15px;
    margin-right: -15px;
	margin-bottom: 25px;
}

h2.unit-map-header {
	background: #1472ad;
	color: #ffffff;
	padding: 15px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 18px;
	text-align: center;
	margin-left: -15px;
	margin-right: -15px;
}

.hp.fab.fa-readme {
	font-size: 50px;
	color: #545658;
	background-color: #f3f3f3;
}

.hp.fas.fa-chalkboard-teacher,
.hp.fas.fa-network-wired,
.hp.far.fa-calendar-alt,
.hp.far.fa-newspaper,
.hp.far.fa-question-circle {
	font-size: 43px;
	color: #545658;
	margin-bottom: 8px;
	background-color: #f3f3f3;
}

.hp.fas.fa-file-alt,
.hp.fas.fa-users,
.hp.fas.fa-book-reader {
	font-size: 40px;
	color: #545658;
	margin-bottom: 10px;
}


img.homepage-picture {
    width: 100%;
  /*height: 325px;
    float: left;  
    object-fit: cover;
    object-position: 40% -80px;*/
}

img.map {
	margin-top: -24px;
	margin-bottom: 10px;
}

.list_container {
    overflow:hidden;
    -webkit-column-count:5;
    -moz-column-count:5;
    -o-column-count:5;
    column-count:5;
}

.news-events-item {
	/*border: 1px dotted #699c4e;
	border-left: 10px solid #699c4e;*/
	font-size: 16px;
	height: 120px;
	text-align: center;
}

.news-events-section {
	background: #f3f3f3;
}

.row.section-box-area {
    margin-left: -15px;
	margin-right: 0px;
}

.page-item.active .page-link {
    color: #fff !important;
	background-color: #0072ed !important;
    border-color: #0072ed !important;
}

.search-events-section {
	background: #f3f3f3;
}

.search-info-item {	
	/*border: .5px dotted #1472ad;
	border-left: 10px solid #1472ad;*/
	height: 120px;
	text-align: center;
	font-size: 16px;
}

table.dataTable td {
    color: #212529 !important;
} 

.unit-map-section {
	background: #ffffff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	z-index: 10;
}

/* Start Tabs CSS - Courtesy Kenan Yusuf @ https://kyusuf.com/post/completely-css-tabs/ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-bottom: 20px;	
  max-width: 100%;
  background: #efefef;
  box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
}

.tabs-input {
  position: absolute;
  opacity: 0;
}

.tabs-label {
  width: 100%;
  padding: 10px 15px;
  background: #d8d8d8;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  color: #5e5e5e;
  transition: background 0.1s, color 0.1s;
  border-left: 1px solid #fff;
}

.tabs-label:hover {
  background: #e5e5e5;
}

.tabs-label:active {
  background: #ccc;
}

.tabs-input:focus + .tabs-label {
  z-index: 1;
}

.tabs-input:checked + .tabs-label {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  background: #fff;
  color: #000;
}

.tabs-panel {
  display: none;
  width: 100%;
  padding: 20px 30px 30px;
  background: #fff;
}

.tabs-input:checked + .tabs-label + .tabs-panel {
  display: block;
}


/* -- Navigation and Unit/HQ dropdown styles */

.bg-light {
	background-color: #f0f0f0  !important;
	clear: both;
}

img.unit-picture,
img.education-picture,
img.research-picture,
img.technical-picture {
	max-height: 250px;
    width: 100%;
    max-width: 100%;
}

p.unit-contact-info {
	font-size: 13px;
}

.unit-box-area {
	padding: 20px;
	padding-top: 15px;
	/*width: 325px;*/
	background-color: #f3f3f3 !important;
	float: right;
	/*margin-left: 30px;
	margin-bottom: 30px;
	margin-right: -15px;*/
}

.unit-main-section {
	padding-bottom: 10px;
	padding-right: 20px;
}

/** show expanded nav and unit/hq dropdowns on hover  **/

 ul.navbar-nav li.dropdown > div.dropdown-menu{
        visibility:hidden;
        opacity:0;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        -o-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
}

ul.navbar-nav li.dropdown:hover > div.dropdown-menu{
        visibility:visible;
        opacity:0.9;
        display: block;
}
		
button.btn > div.dropdown-menu{
        visibility:hidden;
        display:block;
        opacity:0;
        -webkit-transition: opacity 0.5s ease-in-out;
        -moz-transition: opacity 0.5s ease-in-out;
        -o-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
  }

 button.btn:hover > div.dropdown-menu{
        visibility:visible;
        opacity:0.9;
        display: block;
}
		
.dropdown-menu.unit-listing {
            margin-left: -450px;
            margin-top:  -3px;
            width: 100% !important;
            max-width: 600px !important;
            padding: 5px !important;
            min-width: 600px;
            background-color: #fff !important;
			opacity: .95 !important;
}
		
.dropdown-menu.unit-listing-map {
            margin-top:  -10px;
			width: 100% !important;
            max-width: 600px !important;
            padding: 5px !important;
            min-width: 600px;
            background-color: #fff !important;
			opacity: .95 !important;
}
		
.dropdown-toggle {
            white-space: normal !important;
}

table.dataTable {
    width: 100% !important;
}

.navbar-nav .dropdown-menu {
    position: absolute !important;
    float: none;
}

nav.navbar.navbar-expand-lg.navbar-light.bg-light {
    background-color: #027f93 !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff !important;
    text-transform: uppercase !important;
    margin-right: 1.9em;
}

.dropdown-menu {
    top: 30px;
    padding: .4rem 0;
    margin: .125rem 0 0;
    color: #fff;
    background-color: #027f93;
    border: 0px solid rgba(0,0,0,.15); 
    border-radius: 0rem;
	width: 200px;
}

.dropdown-item {
    background-color: #027f93 !important;
	opacity: 100%;
    color: #fff !important;
	font-size: 14px !important;
}

.dropdown-item:hover {
    background-color: #005664 !important;
	width: 100%;
}

div.dataTables_length {
    margin-top: 6px;
}
div.dataTables_info {
    margin-top: 0px;
}

li.nav-item a:hover {
    background-color: #005664 !important;
}

.home_id a.unit-home,
.aboutus_id a.about-us,
.deij_id a.deij,
.staff_id a.staff-listing,
.cooperators_id a.cooperators,
.history_id a.history,
.research-research-pubs_id a.research-pubs,
.research-projects_id a.projects,
.research-presentations_id a.presentations,
.research-theses_id a.theses,
.research-technical-pubs_id a.technical-pubs,
.releases_id a.releases,
.course_id a.course,
.training_id a.training,
.seminar_id a.seminar,
.lecture_id a.lecture,
.graduate_id a.graduate,
.technical_id a.technical,
.university_id a.university,
.professional_id a.professional,
.outreach_id a.outreach,
.documents_id a.docs,
.news_id a.news,
.meetings_id a.meetings {
    background-color: #005664 !important;
}

@media (max-width:1199px) {
	.col-5.col-md-5.col-sm-12.unit-map-section {
        flex: 0 0 100%; 
    	max-width: 100%;
	}
	.col-md-6.col-sm-3.search-info-item {
		max-width: 25%;
	}
	.col-md-6.col-sm-4.news-events-item {
		max-width: 33%;
	}
	.col-md-12.col-sm-4.news-events-item {
		max-width: 33%;
	}
	footer.footer hr {
	    border-top: .5px solid #fff !important;
	    margin-top: 0px;

	}
	.navbar-light .navbar-nav .nav-link {
    	margin-right: .3em;
	}
}

@media (max-width:991px) {
	h2.project-title, h2.unit-title {
    	margin-left: 0px;
	}
	img.staff-picture {
		width: 150px;
	}
	img.project-picture {
		width: 200px;
	}
	.dropdown-menu {
    	top: 30px;
    	background-color: #005664;
	}

	.dropdown-item {
    	background-color: #fff !important;
		opacity: 100%;
    	color: #000 !important;
		font-size: 14px !important;
	}

	.dropdown-item:hover {
    	background-color: #005664 !important;
    	color: #fff !important;
		width: 140px;
	}
}

@media (max-width:766px) {
	span.project-box-area {
    	padding: 20px;
    	padding-top: 10px;
    	width: 410px;
    	background-color: #f8f9fa!important;
    	float: left;
    	margin-bottom: 30px;
	}
	div.dataTables_length {
    	float: left;
    	margin-left: 10px;
	}
	div.dataTables_info {
    	float: left;
    	margin-left: 10px;
	}
	div.dataTables_filter {
        text-indent: 25px;
        margin-top:15px;
    	float:left;
		margin-left: -40px;
	}
}

@media (min-width: 600px) {
	.tabs-label {
		width: auto;
	}
    .tabs-panel {
		order: 99;
    }
}

@media (max-width:575px) {
	.staff-profile-box-area {
		max-width: 300px;
		margin: auto;
	}	
}

@media (max-width:546px) {
	.dropdown-menu.show {
    	width: 100%;
    	min-width: 447px;
    	padding: 15px;
		margin-left: -60px !important;
	}	
	.page-title {
		font-size: 21px !important;
	}
	.page-sub-title {
		font-size: 14px !important;
	}
	span.page-sub-title {
		line-height: .2 !important;
		margin-bottom: -10px;
	}		
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; margin-bottom:15px; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%;
		margin-top: 30px;
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: -20px;
		left: 12px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		font-weight: bold;
	}

	/*
	Labeling of the data table above 'nth-of-type(1):before' is done within the file of the actual data table, see common-courses file for example.
	*/
	
		.list_container {
		overflow: hidden;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-o-column-count: 2;
		column-count: 2;
	}
	.dropdown-menu.unit-listing, .content {
		max-width: 270px !important;
		margin-left: 10px;
	}
	.dropdown-menu.unit-listing {
		max-width: 270px !important;
		min-width: 2700px;
		margin-left: -150px;
	}
}