/***  databaseS  ***/

/* database Search Bar */

.databases-nav-bar {
	padding: 10px;
  background-color: #86c662;
	text-align: center;
}

.database-search-form {margin: 0 !important;}

@media screen and (min-width: 901px) {
	
.database-search-form input[type="text"], 
.database-search-form select {width: 20%;}

}

@media screen and (max-width: 900px) {
	
.database-search-form input[type="text"], 
.database-search-form select {margin-bottom: 5px;}

}

.database-search-form input[type="submit"] {
	border-color: #264653;
	background-color: #264653;
	color: white;
}

.database-search-form select {height: 43px;}

.database-search-form input[type="text"] {padding: 12px;}

.database-search-form input[type="submit"] {
	border: 2px solid #264653;
	height: 43px;
	vertical-align: middle;
}

.database-search-form input[type="submit"]:hover {
	border-color: #3A7C85;
	background-color: #3A7C85;
	color: white;
}

.database-search-form input[type="submit"]:active {
	border-color: #134E47;
	background-color: #134E47;
	color: white;
}

.database-search-form .button {
	padding: 10px 16px;
	border-color: #e2e2e2;
	background-color: #f3f3f3;
	color: #555 !important;
}

.database-search-form .button:hover {background-color: #e2e2e2;}

/* Loading Overlay */

.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: 0;
	overflow: hidden;
	background-color: rgba(0,0,0,0.5);
}

.loading-overlay.active {height: 100%;}

.loading-overlay-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

.loading-overlay .fa {color: white;}

/* database List */

.databases {padding-bottom: 30px;}

.database {
  position: relative;
  min-height: 50px;
  margin-bottom: 2em !important;
}

.database:last-child {margin-bottom: 0 !important;}

.database-title {margin: 0;}

.database-content {
  margin: 0;
  font-size: 0.9em;
}

/* database Nav */

.databases-nav a {
 	display: inline-block;
	padding: 0.75em 2em;
    border: 1px solid var(--primary-5);
    border-radius: var(--radius-3);
    background-color: var(--primary-5);
    font-weight: bold;
    color: white;
}

.databases-nav a:hover {
	border-color: var(--primary-4);
    background-color: var(--primary-4);
    color: white;
	text-decoration: none;
}

.databases-nav .next-posts-link {float: right;}

/***  DATABASE LIST  ***/

.databases .database {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #e2e2e2;
	margin: 0 !important;
}

.databases .database:first-child {
	border-top: 1px solid #e2e2e2;
}

.databases .database-thumb-wrap, 
.databases .database-title-wrap, 
.databases .database-text-wrap, 
.databases .database-help-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
  padding: 10px;
	border-right: 1px solid #e2e2e2;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.databases .database-thumb-wrap {
	width: 70px;
	border-left: 1px solid #e2e2e2;
}

.databases .database-thumb {
	border-radius: 50%;
}

.databases .database-title-wrap {
	width: 200px;
} 

.databases .database-text-wrap {
	width: calc(100% - 470px);
	font-size: 0.9em;
}

.databases .database-help-wrap {
	width: 200px;
	font-size: 0.9em;
}



/***  DATABASE NAV  ***/

.database-cat-nav-title {text-align: center;}

.database-cat-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.database-cat-menu .database-cat {
	display: block;
	width: 20%;
	margin: 0 !important;
}

.database-cat-menu .database-cat-link {
	display: block;
	height: 100%;
	padding: 15px;
	text-align: center;
	color: #6d6e71;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

.database-cat-menu .database-cat-link:hover {
	transform: translateY(-3px);
	color: #4b9f45;
}

.database-cat-menu .database-cat-thumb {
	display: block;
	max-width: 75px;
	border-radius: 50%;
	margin: 0 auto 10px;
	opacity: 1;
}