/**********************
  General
***********************/

* {
	box-sizing: border-box;
}

html {
	background-color: #292b2c;
	height: 100%;
}

body {
	background-color: #292b2c;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #212529;
	padding: 0;
	margin: 0 auto;
	height: 100%;
}

body a {
	color: #237d79;
	text-decoration: none;
}


/**********************
  Site Wrapper
***********************/

.site-wrapper {
	background-color: #eef2f6;
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);
	margin: 0 auto;
	position: relative;
}

.site-wrapper > article {
	min-height: 40vh;
}

/**********************
  Header
***********************/

header {
	background:
		url("/javax.faces.resource/images/header-blurred.png.xhtml?ln=WEB-INF");
	background-color: #225F67;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: inset 0px 0px 40px 8px #2c7a84;
	clear: both;
	color: #fff;
	height: calc(100vh - 150px);
	margin-top: 150px;
	min-height: 480px;
	overflow-x: hidden;
	overflow-y: hidden;
	padding-left: 2vw;
	padding-right: 2vw;
}

header.thin-header {
	/* background-image: url("/javax.faces.resource/images/header.png.xhtml?ln=WEB-INF"); */
	background: rgb(0,0,0);
	background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(44,122,132,1) 23%);
	border-bottom: solid 5px #ccc;
	border-left: 0;
	border-right: 0;
	box-shadow: none;
	height: auto;
	min-height: auto;
}

header > .p-grid {
	animation-duration: 1s;
	animation-name: fadeInDown;
	height: 100%;
	margin: 0 auto;
	border: dashed 0px #0c0;
	position: relative;
}

header > .p-grid > div {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

header button::before {
	content: '\f090';
	font-family: FontAwesome;
	font-size: 36px;
	margin-left: 10px;
	margin-right: -25px;
	float: right;	
}

header button.folder::before {
	content: '\f07b';
}

header button.folder:hover::before {
	content: '\f07c';
	margin-right: -30px;
}

header button.ui-button.logout::before {
	content: '\f08b';
}

header button.explore::before {
	content: '\f054';
}

header button, header button.ui-button.logout {
	background: none;
	background-color: #ff6e00;
	border: solid 1px #ff6e00;
	border-radius: 0px;
	box-shadow: none;
	color: #ffffff;
	cursor: pointer;
	display: block;
	float: left;
	font-size: 16px;
	letter-spacing: 2px;
	margin-right: 20px;
	padding: 16px 42px 16px 20px;
	text-align: left;
	transition: 0.3s;
	width: 100%;
}

header button:hover, header button.ui-button.logout:hover {
	background-color: #fff;
	border-color: #fff;
	color: #ff6e00;
}

header button.explore {
	background-color: rgba(44, 122, 132, 0.2);
	border-color: #fff;
}

header button.explore:hover {
	background: #fff;
	color: #2C7A84;
}

header button span {
	display: block;
	letter-spacing: 1px;
	text-shadow: none !important;
}

header button span:first-child {
	font-size: 1.1em;
	font-weight: bold;
	text-transform: uppercase;
}


header h1 {
	font-size: 7vh;
	font-weight: 100;
	margin: 0 0 4vh 0;
	text-align: center;
}

header.thin-header h1 {
	font-size: 2vw;
	margin: 0 auto;
	padding: 20px 0 20px 0;
	text-align: left;
}

header p {
	font-size: 15px;
	font-weight: 100;
	text-align: center;
}

header form {
	margin-top: 7vh;
}


header > .p-grid > .p-col-6 {
	border: 0px solid #f1f1f1;
	perspective: 1000px;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

header > .p-grid > .p-col-6 .flip-card-inner.flip {
	transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
	backface-visibility: hidden;
	height: 100%;
	width: 100%;
}

.flip-card-back {
	position: absolute;
	top: 0;
	transform: rotateY(180deg);
}

.flip-card-back .loggedInAs {
	color: #ff6e00;
	font-weight: bold;
}

.flip-card-front {
	transform: perspective(200px) rotateX(0deg);
}

header .back {
	color: #fff;
	cursor: pointer;
	font-size: 20px;
	padding: 0 15px;
	position: absolute;
	z-index: 200;
	transition: all 0.3s ease;
}

header .back::before {
	content: '\f060';
	font-family: FontAwesome;	
}


header .back:hover {
	color: #ff6e00;
	text-shadow: 2px 2px rgba(0, 0, 0, 0.2);
	transform: scale(1.2);
}

#loginForm {
	margin: 0;
	padding: 0;
	width: 100%;
}

.loginForm-wrapper {
	background: #fff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
	margin: -66px 0 0 0;
	padding: 60px 45px 25px 45px;
	position: relative;
	z-index: 1;
}

.loginForm-wrapper .ui-g-12 {
	float: none;
}

#loginForm h2 {
	font-size: 1.5vw;
	font-weight: normal;
	text-align: center;
}


#loginForm h2 span {
	background-color: #fff;
	border: solid 1px #fff;
	border-radius: 65px;
	color: #2c7a84;
	font-size: 50px;
	margin-bottom: 12px;
	margin-top: 28px;
	padding: 2px 8px 0px 8px;
	position: relative;
	z-index: 2;
	/* box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.24); */
}

body .loginForm-wrapper input.ui-inputfield {
	background: #f2f2f2;
	border: 0;
	border-radius: 0;
	box-sizing: border-box;
	color: #2C7A84;
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 15px;
	outline: 0;
	padding: 15px;
	width: 100%;
}

.loginForm-wrapper button::before {
	content: '';
}

.loginForm-wrapper button {
	background: none;
 	background-color: #2c7a84;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	margin-bottom: 10px;
	outline: 0;
	padding: 10px;
	text-shadow: none;
	text-transform: uppercase;
	transition: all 0.3 ease;
	width: 100%;
}

.loginForm-wrapper button:hover,.loginForm-wrapper button:active,.loginForm-wrapper button:focus {
	background: #ff6e00;
	border-color: #ff6e00;
	color: #fff;
}

.loginForm-wrapper .message {
	color: #2c7a84;
	margin: 15px 0 10px 0;
}

.loginForm-wrapper .message a {
	color: #2c7a84;
	transition: all 0.3s ease-out;
}

.loginForm-wrapper .message a:hover {
	color: #ff6e00;
}


/**********************
  Article
***********************/

article {
	padding-bottom: 0px;
	transition: margin-left 0.5s ease;
}

article > div, article > form {
	/*padding-left: 2vw;
	padding-right: 2vw; */
	transition: margin-left 0.5s ease;
}

body article div.ui-panel > div.ui-panel-titlebar {
	text-align: left;
}

body article div.ui-panel > div.ui-panel-content {
	border: 1px solid #dddddd;
	border-top: 0;
}

article > div > div {
	color: #292b2c;
	margin: 0 auto;
	padding: 30px 0 60px 0;
	text-align: center;
	border-bottom: solid 0px #2C7A84;
}

article > div.features {
	background-color: #ffffff;
	/*background-image: url("../../images/bacteria-purple-blurred-small.png");
	background-position: center left;
	background-repeat: no-repeat;
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);*/
}

article div.features > div .features-content .feature-header {
    color: #225F67;
    font-size: 70px;
	height: 47px;
    margin-bottom: 40px;
	position: relative;
}

article div.features > div .features-content h3 {
    font-size: 18px;
}

article div.features > div .features-content p {
    font-size: 14px;
    margin: 6px 0 0 0;
}

article div.card {
	border-radius: 4px;
	background: #fff; /*#fafcfe;
	background-image: url("../../images/bacteria-purple-small.png");
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-bottom: 300px;
	*/
	padding: 16px;
	box-sizing: border-box;
}

article div.card.card-w-title {
	padding-bottom: 16px;
}

article div.card.no-gutter {
	margin-bottom: 0;
}

article div.card h1 {
	font-size: 20px;
	font-weight: 400;
	margin: 24px 0;
}

article div.card h1:first-child {
	margin-top: 0px;
}

article div.card h2 {
	font-size: 2em;
	font-weight: 400;
}

article div.card h3 {
	font-size: 16px;
	font-weight: 400;
}

article div.card h4 {
	font-size: 14px;
	font-weight: 400;
}

article div#video {
	background-color: #fff;
}

article div#video .video-content {
	margin-top: 45px;
}


article .intro {
    color: #2C7A84;
    font-size: 1.4em;
    letter-spacing: 2px;
    line-height: 1.9;
    margin: 40px 10% 30px 10%;
    padding-bottom: 20px;
    text-align: center;
}

.border-bottom {
	border-bottom: solid 1px currentcolor; 
}

/**********************
  Nav
***********************/

nav {
	background-color: #fff;
	border-bottom: solid 5px #2C7A84;
	height: 150px;
	padding-left: 2vw;
	padding-right: 2vw;
	position: absolute;
	top: -150px;
	width: 100%;
	z-index: 150;
}

nav.sticky {
	height: 100px;
	position: fixed;
	top: 0;
}

nav .grid {
	animation-duration: 1s;
	animation-name: fadeInDown;
	background-color: #fff;
	height: 100%;
	margin: 0 auto;
}

nav .logo-wrapper a {
	display: inline-block;
	font-size: 60px;
	height: 70px;
	max-height: 80px;
	max-width: 100%;
	position: relative;
	vertical-align: middle;
}

nav .logo-wrapper a img {
	height: 70px;
	transition: opacity .2s ease;
	width: auto;
}


nav ul {
	list-style: none;
	margin-top: 0;
	text-align: left;
}

nav .position-left ul {
	padding-left: 79px;
	margin-top: -10px;
}

nav .position-right ul {
	height: 100%;
	vertical-align: middle;
}

nav ul > li {
	display: inline-block;
	float: left;
}

nav .position-left ul > li {
	font-size: 1em;
}

nav .position-right ul > li {
	font-size: 1.4em;
	height: 100%;
}

nav ul > li > a {
	color: #2E7C84;
	display: inline-block;
	font-weight: normal;
	letter-spacing: 1px;
}

nav .position-left ul > li > a {
	color: #625E5D;
	padding: 0 5px;
	position: relative;
}

nav .position-right ul > li > a {
	height: 100%;
	padding: 60px 1vw 0 1vw;
	position: relative;
	vertical-align: middle;
	text-transform: uppercase;
	transition: color 0.3s ease-out;
}

nav .position-right ul > li.current > a {
	background-color: #fafafa;
	color: #ff6e00;
	font-style: oblique;
	letter-spacing: 3px;
	text-transform: lowercase;
}

nav ul > li > a::after {
	border-radius: 2px;
	border-bottom: solid 1px #ff6e00;
	border-top: solid 1px #ff6e00;
	content: "";
	position: absolute;
	bottom: -1px;
	left: 50%;
	right: 50%;
	transition: right 0.4s cubic-bezier(0, .5, 0, 1), left 0.4s cubic-bezier(0, .5, 0, 1);
}

nav .position-left ul > li > a::after {
	bottom: -5px;
}

nav .position-right ul > li > a::after {
	border-radius: 6px;
	border-width:3px;
}

nav .position-left ul > li > a:hover {
	color: #2E7C84;
}

nav .position-right ul > li > a:hover {
	color: #ff6e00;
}

nav ul>li>a:hover::after {
	left: 0;
	right: 0;
}

nav .position-left ul > li > a span.fa {
	padding-right: 3px;
	transition: color 0.3s ease-out;
}

nav .position-left ul > li > a:hover span.fa {
	color: #ff6e00;
}


/**********************
  Footer
***********************/

footer {
	background-color: #292b2c;
	border-top: solid 1px #dee4e9;
	height: 180px;
	overflow: hidden;
	padding: 30px 0;
	padding-left: 2vw;
	padding-right: 2vw;
	width: 100%;
}

footer a {
	color: #ccc;
}

footer a:hover {
	color: #fff;
}

footer > div.p-grid {
	margin: 0 auto;
	text-align: left;
}

footer>div img {
	width: 120px;
	margin-bottom: 10px;
}

footer>div span {
	color: #cccccc;
}

footer>div .footer-newsletter a {
	position: relative;
}

footer>div .footer-newsletter input {
	width: 180px;
}

footer>div .footer-newsletter .input-icon
	{
	position: absolute;
	right: 5px;
	top: 0;
	color: #3e9018;
	font-size: 18px;
}

footer>div ul {
	box-shadow: none;
	float: none;
	margin: 0;
	margin-left: 0px;

	padding: 8px 14px;
}

footer>div ul li {
	display: block;
	margin: 0;
	text-align: left;
	line-height: 1.5;
}

footer>div ul li a {
	border-bottom: 1px solid transparent;
	transition: color 0.4s ease-out;
}

footer>div ul li a:hover {
	background-color: transparent;
}


footer > div > div.p-grid {
}

footer .social-icons {
	font-size: 36px;
	padding: 0.5em;
	text-align: right;
	vertical-align: middle;
}

footer .social-icons a {
	color: #ffffff;
}

footer .social-icons > div.p-grid {
	margin-left: 0;
	margin-right: 0;
}

footer .social-icons div.p-col {
	padding: 0 0 0 0;
}

footer .social-icons a .fa {
	color: #eee;
	transition: transform 0.3s ease;
}

footer .social-icons a:hover .fa {
	color: #fff;
	transform: scale(1.4);
}

footer li.address, footer li.phone, footer li.email {
	color: #ccc;
	font-size: 0.7em;
	list-style-type: bullet;
	padding-left: 1.5em;
}

footer li.address:before, footer li.phone:before, footer li.email:before
	{
	font-family: FontAwesome;
	display: inline-block;
	margin-left: -1.5em;
	width: 1.5em;
}

footer li.address:before {
	content: "\f041";
}

footer li.phone:before {
	content: "\f095";
}

footer li.email:before {
	content: "\f0e0";
}

footer > div a.wellcome-logo, footer > div a.uq-logo {
	font-size: 2em;
}

footer > div a.wellcome-logo img {
	width: 120px;
}

footer > div a.uq-logo img {
	margin: 0px 0px 0px 0px;
	width: 180px;
}



/**********************
  Exception Pages
***********************/
.exception-body {
	background-image: url("/javax.faces.resource/images/imb-at-night.jpg.xhtml?ln=WEB-INF");
	background-color: rgb(26, 57, 139);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
}

.exception-body .exception-image {
    position: absolute;
    top: -36px;
    text-align: center;
    width: 100%;
    z-index: 1;
}

.exception-body .exception-panel {
    background-color: #292b2c;
    height: 160px;
    position: absolute;
    bottom: 0;
    text-align: center;
	width: 100%;
}

.exception-body .exception-panel .exception-panel-content {
    color: #ffffff;
    margin-left: -200px;
	position: relative;
    left: 50%;
    top: 30px;
    width: 400px;
}

.exception-body .exception-panel .exception-panel-content p {
	font-weight: 400;
	margin: 0;
}

.exception-body .exception-panel .exception-panel-content .information-text {
    padding: 15px;
}

.exception-body .exception-text {
    color: #ffffff;
    font-size: 36px;
    font-weight: bold;
	padding-top: 30px;
	text-align: center;
}

.exception-body .exception-text .badRequest-box, .exception-body .exception-text .internalError-box, .exception-body .exception-text .notfound-box {
	animation: rotate3x;
	animation-delay: 0s;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(.46,.03,.52,.96);
	color: rgb(26, 57, 139);
	background-color: #fff;
	display: inline-block;
	padding: 2px 8px;
	transform: rotate(10deg);
	transition: none;
}

.exception-body .exception-text .badRequest-box:hover, .exception-body .exception-text .internalError-box:hover, .exception-body .exception-text .notfound-box:hover {
	transform: rotate(1090deg);
	transition: transform 1s cubic-bezier(.46,.03,.52,.96);
}

.exception-body .exception-text .notfound-text {
	color: #fff;
}

.exception-body.internalError {
	background-image: url("/javax.faces.resource/images/samples.jpg.xhtml?ln=WEB-INF");
	background-color: rgb(45, 71, 118);
}

.exception-body .exception-text .internalError-box {
	color: rgb(45, 71, 118);
	background-color: #fff;
}

.exception-body .exception-text .internalError-text {
	color: #fff;
}

.exception-body.badRequest {
	background-image: url("/javax.faces.resource/images/blue-molecule-close-up.jpg.xhtml?ln=WEB-INF");
	background-color: rgb(165, 210, 231);
}

.exception-body .exception-text .badRequest-box {
	color: rgb(165, 210, 231);
	background-color: #fff;
}

.exception-body .exception-text .badRequest-text {
	color: #fff;
}


/**********************
  PrimeFaces
***********************/

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
	box-shadow: none;
    filter: none;
}

body .ui-autocomplete .ui-autocomplete-dropdown {
    background: transparent;
    border: 0 none;
	color: #212529;
    padding: 0;
    width: 28px;
}

body .ui-autocomplete-panel .ui-autocomplete-items {
    padding: 5px 0;
}

body .ui-autocomplete-panel .ui-autocomplete-items .ui-autocomplete-item {
    margin: 0;
    padding: 6px 20px;
    line-height: 1;
    border-radius: 0;
}

body .ui-button {
	background: none;
    background-color: #2ea59f;
    border: 0;
    border: 1px solid transparent;
    box-shadow: none;
	color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 100;
    margin-right: .1em;
    overflow: visible;
    padding: 2px 0px;
    position: relative;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.3s;
    zoom: 1;
}

body .ui-button.ui-state-active {
    background-color: #237d79;
    border-color: #237d79;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

body .ui-buttonset .ui-button:first-child {
    border-radius: 0px;
	border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

body .ui-buttonset .ui-button {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 0px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    color: #212529;
    transition: border-color 0.3s, background-color 0.3s;
}

body .ui-buttonset .ui-button.ui-state-active, body .ui-buttonset .ui-button.ui-state-active.ui-state-hover {
    background-color: #2ea59f;
    color: #ffffff;
    border-color: #28918c;
}

body .ui-buttonset .ui-button.ui-state-hover {
    background-color: #e6e6e6;
    border-color: #adadad;
    box-shadow: none;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active {
    border: 1px solid #2ea59f;
	background-color: #2ea59f;
	color: #ffffff;
	box-shadow: none;
}

body.filter-panel .ui-chkbox, body.filter-panel .ui-selectoneradio {
    color: #777;
    font-size: 14px;
}

body .ui-chkbox .ui-chkbox-box {
    border: 1px solid #cccccc;
    background-color: #ffffff;
    width: 20px;
    height: 20px;
    text-align: center;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check {
    background: none;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
        font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-indent: 0px !important;
    text-align: center;
    font-size: 16px;
}

body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon {
    display: inline-block;
}

body .ui-chkbox .ui-chkbox-box.ui-state-active {
    color:  #ffffff;
}
body .ui-state-active, body .ui-state-highlight {
    color: #ffffff;
}


body .ui-chkbox .ui-chkbox-box .ui-chkbox-icon.ui-icon-check::before {
    content: "\f00c";
    font-family: FontAwesome;
}

body .ui-corner-all {
    border-radius: 4px;
}

body .ui-datatable a:hover {
	color: #2ea59f;
}

body .ui-datatable-header {
	display: none;	
}

body .ui-datatable thead th, body .ui-datatable tfoot td {
	color: #777;
	padding: 10px 15px;
	text-align: left;
}

body .ui-dataview .ui-dataview-header {
	background: none;
	border: 0 none;
    padding: 10px 15px;
}

body .ui-dataview .ui-paginator {
    padding: 10px 15px;
}

body .ui-icon {
    width: 16px;
    font-size: 14px;
}

body .ui-inputfield {
	color: #212529;
	font-size: 14px;
	background:#ffffff;
	padding: 6px 12px;
	padding-right: 12px;
	border: 1px solid #cccccc;
	transition: box-shadow 0.3s, border-color 0.3s;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    appearance: none;
}

body .ui-paginator .ui-paginator-first::before,
body .ui-paginator .ui-paginator-prev::before,
body .ui-paginator .ui-paginator-next::before,
body .ui-paginator .ui-paginator-last::before {
    position: relative;
}

body .ui-paginator .ui-paginator-first::before {
    content: '';
    line-height: 28px;
}

body .ui-paginator .ui-paginator-prev::before {
    content: '';
	line-height: 28px;
}

body .ui-paginator .ui-paginator-next::before {
    content: '';
    line-height: 28px;
}

body .ui-paginator .ui-paginator-last::before {
	content: '';
	line-height: 28px;
}

body .ui-paginator .ui-paginator-first,
body .ui-paginator .ui-paginator-prev,
body .ui-paginator .ui-paginator-next,
body .ui-paginator .ui-paginator-last {
    border: 1px solid #dddddd;
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    color: #2ea59f;
    cursor: pointer;
	margin: 0;
	min-width: 34px;
    min-height: 34px;
    vertical-align: top;
}

body .ui-paginator .ui-paginator-first {
    background: none;
    background-color: #ffffff;
    border-left: 1px solid #dddddd;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    color: #2ea59f;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-align: center;
    text-indent: 0px !important;
    text-rendering: auto;
}

body .ui-paginator .ui-paginator-prev {
    background: none;
    background-color: #ffffff;
    border-right: 1px solid #dddddd;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    text-indent: 0px !important;
    text-align: center;
    transform: rotate(180deg);
}

body .ui-paginator .ui-paginator-last {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-right: 0;
    color: #2ea59f;
    border-radius: 0;
    margin-right: 0;
    margin-left: 0;
    min-height: 34px;
    min-width: 34px;
	padding: 7px 12px;
}

body .ui-paginator .ui-paginator-page:hover,
body .ui-paginator .ui-paginator-next:hover,
body .ui-paginator .ui-paginator-last:hover,
body .ui-paginator .ui-paginator-first:hover,
body .ui-paginator .ui-paginator-prev:hover,
body .ui-paginator .ui-paginator-pages .ui-paginator-page:hover {
	box-shadow: none;
}

body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-active {
    background-color: #2ea59f;
    border-color: #2ea59f;
    color: #ffffff;
}

body .ui-paginator .ui-paginator-next {
    background: none;
    background-color: #ffffff;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    text-indent: 0px !important;
    text-align: center;
}

body .ui-paginator .ui-paginator-last {
    background: none;
    background-color: #ffffff;
    border-right: 1px solid #dddddd;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    text-indent: 0px !important;
    text-align: center;
}

body .ui-paginator .ui-paginator-page.ui-state-hover,
body .ui-paginator .ui-paginator-next.ui-state-hover,
body .ui-paginator .ui-paginator-last.ui-state-hover,
body .ui-paginator .ui-paginator-first.ui-state-hover,
body .ui-paginator .ui-paginator-prev.ui-state-hover,
body .ui-paginator .ui-paginator-pages .ui-paginator-page.ui-state-hover {
    background-color: #f5f5f5;
}


body .ui-paginator .ui-paginator-first.ui-state-disabled,
body .ui-paginator .ui-paginator-prev.ui-state-disabled,
body .ui-paginator .ui-paginator-next.ui-state-disabled,
body .ui-paginator .ui-paginator-last.ui-state-disabled {
    background-color: #eeeeee;
    filter: alpha(opacity=100);
	opacity: 1;
}

body .ui-paginator .ui-paginator-first span,
body .ui-paginator .ui-paginator-prev span,
body .ui-paginator .ui-paginator-next span,
body .ui-paginator .ui-paginator-last span {
    display: none;
}

body .ui-paginator .ui-paginator-pages {
    padding: 0;
    vertical-align: middle;
    display: inline-block;
    margin: 0;
}

body .ui-paginator .ui-paginator-rpp-options {
    border-color: #dddddd;
    border-radius: 4px;
	height: 34px;
	min-width: 45px;
    padding: 5px;
    vertical-align: bottom;
}

body .ui-panel {
    padding: 0;
    border: 0 none;
}

body .ui-panel .ui-panel-titlebar {
    border: 1px solid #dddddd;
    padding: 10px 15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

body .ui-panelgrid.ui-panelgrid-blank .ui-grid-responsive .ui-grid-row {
	border: 0 none;
}

body .ui-radiobutton {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    width: auto;
    height: auto;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
    border: 1px solid #2ea59f;
}

body .ui-radiobutton .ui-radiobutton-box {
    border: 1px solid #cccccc;
    background-color: #ffffff;
	width: 20px;
	height: 20px;
	line-height: 18px;
	text-align: center;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color 0.3s, box-shadow 0.3s;
    border-radius: 50%;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-radiobutton-icon {
	background: none;
	background-color: #2ea59f;
	text-shadow: none;
}
body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon {
    width: 10px;
    height: 10px;
    margin-left: 0;
    background-color: transparent;
    display: inline-block;
    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

body .ui-shadow {
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
}

body .ui-slider.ui-widget-content {
    background-color: #e5e5e5;
	border-color: #e5e5e5;
	box-shadow: none;
}

body .ui-slider .ui-slider-range {
    background: #65d4ce;
    box-shadow: none;
}

body .ui-slider.ui-slider-horizontal .ui-slider-handle {
    top: -0.2em;
}

body .ui-slider .ui-slider-handle {
    background-color: #2ea59f;
    transition: background-color 0.3s;
    border: 0 none;
    border-radius: 50%;
}

body .ui-slider .ui-slider-handle:hover,
body .ui-slider .ui-slider-handle:focus {
    background-color: #28918c;
	transition: box-shadow 0.3s;
	border-color: #8bd6d2;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 3px 0 #8bd6d2;
    border: 0 none;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
	background: none;
}

body .ui-state-highlight, body .ui-widget-content .ui-state-highlight {
	background: none;
	background-color: #2ea59f;
	color: #ffffff;
	text-shadow: none;
}

body .ui-inputfield.ui-state-focus,
body .ui-state-active, body .ui-state-default, body .ui-state-focus, body .ui-state-hover,
body .ui-widget-header .ui-state-active,
body .ui-widget-header .ui-state-default,
body .ui-widget-header .ui-state-focus,
body .ui-widget-header .ui-state-hover {
    box-shadow: none;
}

body .ui-state-disabled {
    cursor: default !important;
    pointer-events: none;
}

body .ui-tabs.ui-widget-content {
	background-color: transparent;
	border: 0;
	padding: 0;
}

body .ui-tabs .ui-tabs-nav {
	background: none;
	border: 0;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav {
	padding: 0;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li {
	background-color: #f9f9f9; /* #2C7A84; #ff6e00; */
	border: 0;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	text-shadow: none;
	transition: background-color 0.3s ease;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li:hover {
	background-color: #2ea59f; /* #2C7A84; #ff6e00; */
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li a {
	color: #777;
	text-shadow: none;
	transition: color 0.3s ease;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li:hover a {
	color: #fff;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-selected {
	background-color: #fff;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-selected:hover {
	background-color: #fff;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-selected a {
	color: #777;
}

body .ui-tabs.ui-tabs-top > .ui-tabs-nav li.ui-tabs-selected:hover a {
	color: #777;
}

body .ui-tabs .ui-tabs-panel {
	background-color: #fff;
	border: solid 0px #a8a8a8;
	border-radius: 4px;
	border-top-left-radius: 0px;
	padding-left: 0;
	padding-right: 0;
}

body .ui-widget, body .ui-widget .ui-widget {
    box-sizing: border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
}

body .ui-widget.ui-outputpanel-loading, body .ui-widget .ui-widget.ui-outputpanel-loading {
	margin: 0 auto;
}

body .ui-widget-content {
    background-color: #ffffff;
    border-color: #dddddd;
}

body tr.ui-widget-content, tbody.ui-widget-content {
    border: 0;
}

body tr.ui-widget-content.ui-datatable-even {
    background-color: #f9f9f9;
}

body .ui-widget-content th.ui-state-default {
    border: 0;
}

body tr.ui-widget-content td {
    border: 0;
	color: #777;
	padding: 10px 15px;
}

body .ui-widget-header {
    background: #f5f5f5;
    border: 1px solid #dddddd;
    color: #292B2C;
    font-weight: bold;
}
    
body .ui-widget-header.ui-paginator {
    background-color: #ffffff;
    border: 0;
    border-color: #dddddd;
    border-radius: 0px;
}



/*======= Filter Panel =======*/
body.filter-panel .site-wrapper {
	background-color: #f4f4f4;
}

body .filter-wrapper {
	background-color: #ffffff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
	line-height: 40px;
	margin-bottom: 0px;
	z-index: 120;
	position: relative;
	transition: all 0.5s ease;
}

body .filter-wrapper.scrolling {
	position: fixed;
	top: 100px;
	width: 100%;
}

div#filter-trigger {
	background-color: #fff;
	-webkit-transition: background-color 0.5s ease, width 0.5s ease;
	-moz-transition: background-color 0.5s ease, width 0.5s ease;
	-o-transition: background-color 0.5s ease, width 0.5s ease;
	transition: background-color 0.5s ease, width 0.5s ease;
	width: 150px;
}

.active div#filter-trigger {
	width: 250px;
}

div#filter-trigger.active {
	background-color: #237d79;
}

div#filter-trigger.active a {
	color: #fff;
}

div#filter-trigger a {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-left: 20px;
	font-weight: bold;
	font-size: 1em;
}

div#filter-trigger a:hover span {
	transform: rotate(360deg);
	transition: transform 0.5s ease;
	color: #ff6e00;
}

div#filter-trigger a.close {
	background-color: rgba(255, 255, 255, 0.1);
	float: right;
	display: none;
	letter-spacing: normal;
	text-transform: lowercase;
	padding: 0 10px;
	width: 80px;
}

div#filter-trigger a.close:hover {
	background-color: #ff6e00;
}

div#filter-trigger a.close span {
	transform: rotate(0deg);
	transition: transform 0.5s ease;
}

div#filter-trigger a.close:hover span {
	transform: rotate(360deg);
	transition: transform 0.5s ease;
	color: #fff;
}

.filter-sidenav {
	position: absolute;
	left: -250px;
	/* box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.1); */
	background-color: #f4f4f4;;
	float: left;
	/* overflow-x: hidden;
  overflow-y: scroll; */
	padding: 0 0 0 0;
	transition: 0.5s;
	box-shadow: inset 0px 0px 10px #e0dddd;
	z-index: 100;
	border-left: solid 2px #e0dddd; border-right : solid 2px #e0dddd;
	border-bottom: solid 2px #e0dddd;
	border-right: solid 2px #e0dddd;
	border-bottom: 0;
	box-shadow: none;
	width: 250px;
}

.filter-sidenav>.p-grid {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
}

.filter-sidenav .filter-loop-wrapper {
	max-height: 1000px;
	overflow-y: auto;
}

.filter-sidenav .filter-loop-wrapper.scrolling {
	margin-top: 14px;
}

.filter-sidenav .ui-button.ui-button-error {
	background-color: #ff6e00;
}

.filter-sidenav .filter-buttons {
	text-align: center;
	position: sticky;
	z-index: 1000;
	top: 140px;
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #e0dddd;
	padding: 0 0 0 0;
	border-bottom: solid 2px #e0dddd;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.filter-sidenav .filter-buttons button.ui-button {
	border-radius: 0;
	margin-bottom: -2px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 0;
	margin-right: -2px;
	margin-left: -2px;
	float: left;
	background-color: #237d79;
	background-color: #ff6e00b4;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: 0.8em;
	font-weight: bold;
	text-align: left;
	width: 170px;
}

.filter-sidenav .filter-buttons button.ui-button>span.ui-button-icon-left {
	-webkit-transition: all 1s;
	transition: all 1s;
	width: 36px;
	color: #fff;
	padding-left: 10px;
}

.filter-sidenav .filter-buttons button.ui-button:hover>span.ui-button-icon-left
	{
	width: 36px;
	/* color: #42f263; */
}

.filter-sidenav .filter-buttons button.ui-button>span.ui-button-text {
	padding-left: 26px;
}

.filter-sidenav .filter-buttons .ui-link-error {
	color: #ff6e00;
	margin-right: 10px;
	margin-top: 9px;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 10px;
	float: right;
	padding: 2px;
	display: inline-block;
	/*
	background-color: #e6e4e4;
	box-shadow: 0px 0px 40px 8px #e0dddd4d; */
}

.filter-sidenav .ui-link-error:hover {
	color: #fb862d;
}

.filter-sidenav .filter-buttons button.ui-button:hover {
	background-color: #ff6e00;
}

.filter-sidenav p {
	color: #aaa;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.1em;
	margin-bottom: 8px;
	margin-top: 30px;
}

.filter-sidenav .ui-chkbox .ui-chkbox-label {
	margin-top: 2px;
}

.filter-sidenav p.filter-category {
	color: #333;
	font-size: 0.9em;
	margin-bottom: -20px;
	border-bottom: solid 1px #ccc;
	padding-bottom: 5px;
	margin-top: 0;
}

.filter-sidenav div.filter-category-box {
	padding-left: 0px;
	margin-bottom: 50px;
}

.filter-sidenav div.filter-category-box>div.p-grid {
	width: 100%;
	margin: 0;
}

.filter-sidenav div.filter-category-box>div.p-grid>div.p-col,
	.filter-sidenav div.p-grid>div.p-col {
	min-width: 100%;
}

.active-filter {
	margin-left: 250px;
}

nav.active-filter {
	margin-left: 0px;
}

header.active-filter {
	margin-left: 0px;
}

footer.active-filter {
	margin-left: 250px;
	width: calc(100% - 250px);
}

.filter-panel form#form.scrolling div.card {
	padding-top: 56px;
}

.filter-panel form#form.active-filter.scrolling div.card {
	padding-top: 16px;
}

body .landing-wrapper footer.active-filter {
	width: 100%;
}

.filter-sidenav p a.any-filter, .filter-sidenav p a.any-filter-active {
	color: #aaa;
	text-transform: lowercase;
	float: right;
	transition: 0.3s;
	font-size: 9px;
	border-bottom: dashed 1px #aaa;
}

.filter-sidenav p.filter-category a.any-filter, .filter-sidenav p.filter-category a.any-filter a.any-filter-active
	{
	color: #828282;
	font-size: 10px;
	border-bottom: dashed 1px #828282;
	padding-top: 2px;
}

.filter-sidenav p a.any-filter:hover, .filter-sidenav p.filter-category a.any-filter:hover
	{
	color: #2C7A84;
	border-bottom-color: #2C7A84;
}

.filter-sidenav p a.any-filter-active {
	color: #2C7A84;
	border-bottom-color: #2C7A84;
}

.filter-sidenav p a.any-filter-active:hover, .filter-sidenav p.filter-category a.any-filter-active:hover
	{
	color: #B2525E;
	border-bottom-color: #B2525E;
}

.filter-sidenav p a.any-filter span {
	font-size: 8px;
}

.filter-sidenav p.filter-category a.any-filter span {
	font-size: 8px;
}

.filter-sidenav .filter-radio .ui-g-12.ui-md-12 {
	padding: 0;
}

.filter-sidenav .ui-selectbooleancheckbox {
	display: block;
}

.filter-sidenav .p-grid.range .p-col {
	padding-right: 10px;
	padding-left: 10px;
}

.filter-sidenav .range p {
	margin-top: 25px;
}

.filter-sidenav .range .rangeLabel {
	display: block;
	font-size: 12px;
	height: 25px;
}

.filter-sidenav .range .rangeLabel input {
	display: inline;
	border: none;
	width: 40px;
	background: none;
	padding: 0 5px;
	text-align: center;
	border-radius: 4px;
	margin: 0 3px;
}

.filter-sidenav .range .rangeLabel input:hover {
	background-color: #fcfcfc;
	background: none;
}

.filter-sidenav .range .rangeLabel input:focus, .filter-sidenav .range .rangeLabel input:active
	{
	background-color: #fff;
	background: none;
}


/*======= Coadd-Download-Button =======*/
.coadd-download-button p {
	color: #2C7A84;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 20px 10%;
	line-height: 2.7;
	text-align: center;
}

/*
.coadd-download-button p.ps-data { color: #842c49; }
.coadd-download-button p.ps-data a {
 	color: #842c49;
 	border-color: #842c49;
}
.coadd-download-button p.ps-data a::after { background-color: #842c49; }

.coadd-download-button p.hc-data { color: #3d842c; }
.coadd-download-button p.hc-data a {
 	color: #3d842c;
 	border-color: #3d842c;
}
.coadd-download-button p.hc-data a::after { background-color: #3d842c; }
*/
.coadd-download-button p a.sdf {
	color: #842c49;
	border-color: #842c49;
}

.coadd-download-button p a {
	border: solid 1px #2c7a84aa;
	border-right: 0;
	padding: 8px 0px 8px 15px;
	border-radius: 12px 4px;
	white-space: nowrap;
}

.coadd-download-button p a.sdf {
	border-right: solid 1px;
	border-left: 0;
	padding-left: 0;
	padding-right: 15px;
	transition: margin-right 0.5s ease;
}

.coadd-download-button p a.csv::after, .coadd-download-button p a.sdf::before {
	content: '\f019  CSV';
	font-family: FontAwesome;
	background-color: #2C7A84;
	color: #fff;
	padding: 10px 15px 9px 15px;
	font-weight: normal;
	margin-left: 15px;
	border-radius: 12px 4px;
	transition: margin-left 0.5s ease, padding-right 0.5s ease;
}

.coadd-download-button p a.sdf::before {
	content: '\f019  SDF';
	background-color: #842c49;
	padding: 10px 15px 9px 15px;
	margin-left: 0px;
	margin-right: 15px;
	transition: margin-right 0.5s ease, padding-left 0.5s ease;
}

.coadd-download-button p a.sdf::before {
	content: '\f019  SDF';
	position: sticky;
}

.coadd-download-button p a:hover {
	color: #ff6e00;
	border-color: #ff6e00aa;
}

.coadd-download-button p a.csv:hover::after, .coadd-download-button p a.sdf:hover::before {
	background-color: #ff6e00;
	margin-left: -60px;
	padding-right: 90px;
}

.coadd-download-button p a.sdf:hover {
}

.coadd-download-button p a.sdf:hover::before {
	margin-left: 0px;
	margin-right: -60px;
	padding-right: 15px;
	padding-left: 90px;
	z-index: 100;
}


.coadd-download-button p a.sdf.deactivated {
	border-color: #ddd;
	color: #ddd;
	cursor: not-allowed;
}

.coadd-download-button p a.sdf.deactivated::before {
	background-color: #ddd;
}

.coadd-download-button p a.sdf.deactivated:hover {
	border-color: #ddd;
	color: #ccc;
}

.coadd-download-button p a.sdf.deactivated:hover::before {
	background-color: #ccc;
}



/**********************
  Active box
***********************/


.active-box::after {
	line-height: 2.9;
}

.active-box::after {
	background-color: #2C7A84;
	border: solid 1px #2C7A84;
	color: #fff;
	padding: 7px 5px 4px 5px;
	font-weight: normal;
	font-size: 10px;
	margin-left: 5px;
	border-radius: 8px 2px;
	white-space: nowrap;
}

.active-box.small::after {
    border: solid 1px;
    display: inline-block;
    font-size: 0.6em;
    line-height: normal;
    margin: 1px 4px 1px 0px;
    padding: 2px 5px 2px 5px;
}

.ui-tooltip .active-box::after {
	border-color: #fff !important;
}

.active-box.sa::after {
	content: "SA";
	background-color: #f5cc18;
	border-color: #f5cc18;
}

.active-box.ec::after {
	content: "EC";
	background-color: #164ba8;
	border-color: #164ba8;
}

.active-box.kp::after {
	content: "KP";
	background-color: #2566de;
	border-color: #2566de;
}

.active-box.pa::after {
	content: "PA";
	background-color: #6895d9;
	border-color: #6895d9;
}

.active-box.pa5d::after {
	content: "PA5∆";
	background-color: #b0c8ed;
	border-color: #b0c8ed;
}

.active-box.ab::after {
	content: "AB";
	background-color: #19abc2;
	border-color: #19abc2;
}

.active-box.ca::after {
	content: "CA";
	background-color: #146606;
	border-color: #146606;
}

.active-box.cn::after {
	content: "CN";
	background-color: #32b521;
	border-color: #32b521;
}

.active-box.hek::after {
	content: "HEK";
	background-color: #ed1380;
	border-color: #ed1380;
}

.active-box.hrbc::after {
	content: "hRBC";
	background-color: #a6052d;
	border-color: #a6052d;
}


.active-box {
	white-space: nowrap;
}

.active-box.inactive::after,
.active-box.inactive.sa::after, .active-box.inactive.ec::after,
.active-box.inactive.kp::after, .active-box.inactive.pa::after,
.active-box.inactive.pa5d::after, .active-box.inactive.ab::after,
.active-box.inactive.ca::after, .active-box.inactive.cn::after,
.active-box.inactive.hek::after, .active-box.inactive.hrbc::after {
    background-color: #eee;
    color: #666;
	border-style: dotted;
	border-color: #999;
}

.active-box.notTested::after,
.active-box.notTested.sa::after, .active-box.notTested.ec::after,
.active-box.notTested.kp::after, .active-box.notTested.pa::after,
.active-box.notTested.pa5d::after, .active-box.notTested.ab::after,
.active-box.notTested.ca::after, .active-box.notTested.cn::after,
.active-box.notTested.hek::after, .active-box.notTested.hrbc::after {
    background-color: #eee;
    color: #666;
	border-style: dotted;
	border-color: #999;
	opacity: 0.4;
}

.active-box.inactive.sa::after {
	border-color: #f5cc18;
}

.active-box.inactive.ec::after {
	border-color: #164ba8;
}

.active-box.inactive.kp::after {
	border-color: #2566de;
}

.active-box.inactive.pa::after {
	border-color: #6895d9;
}

.active-box.inactive.pa5d::after {
	border-color: #b0c8ed;
}

.active-box.inactive.ab::after {
	border-color: #19abc2;
}

.active-box.inactive.ca::after {
	border-color: #146606;
}

.active-box.inactive.cn::after {
	border-color: #32b521;
}

.active-box.inactive.hek::after {
	border-color: #ed1380;
}

.active-box.inactive.hrbc::after {
	border-color: #a6052d;
}



/**********************
  Special cases
***********************/

.activity-profile {
    text-align: center;
}

.cc-message {
	text-shadow: 2px 2px 3px #1e4d53;
}

.clearfix:after {
	content: " ";
	display: block;
	clear: both;
}

/*======= Compound =======*/

img.notActive {
	color: #ff6e00;
	font-size: 2em;
	font-style: oblique;
	margin-top: 15px;
}

.compoundGridPanel .ui-panel-title .subheading {
	display: block;
	font-size: 0.7em;
	font-weight: normal;
	letter-spacing: 1px;
	line-height: 1.3;
}

.compoundGridPanel img {
	margin: 0 auto;
}

.compoundGridPanel .structure,
.compoundListPanel .structure {

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 260px;

}

.compoundListPanel .structure {
	background-position: center bottom;
	min-width: 243px;
}

.compoundGridPanel.ui-panel .ui-panel-title {
    margin: 0;
}

.compoundGridPanel .compoundData {
	margin-top: 0px;
	width: 100%;
}

.compoundGridPanel .compoundData td, .compoundListPanel .compoundDetails td {
	vertical-align: top;
}

.compoundGridPanel .compoundData .value {
	font-weight: bold;
}

.compoundListPanel {
	border-bottom: solid 1px #ddd;
	padding-bottom: 5px;
	padding-top: 10px;
}

.compoundListPanel .compoundData {
	min-width: 242px;
}


.compoundListPanel p.caption {
    font-weight: bold;
    margin-bottom: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.logo-wrapper {
	display: inline-block;
	vertical-align: middle;
}

.nopad {
	padding: 0;
}

.nopad .ui-panel-content {
	padding: 0;
}

noscript p span {
	padding-left: 10px;
	padding-right: 10px;
}

.oddRow {
    background-color: #f9f9f9;
}

#pleaseWaitDialog {
	display: none;
}

#pleaseWaitDialog_content {
	overflow: hidden;
}

.vertical-align-containers {
	height: 100%;
	width: 100%;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

.vertical-align-containers .position-center::before,
	.vertical-align-containers .position-left::before,
	.vertical-align-containers .position-right::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

.vertical-align-containers .position-left {
	float: left;
	height: 100%;
}

.vertical-align-containers .position-right {
	float: right;
	height: 100%;
	text-align: right;
}

.vertical-align-containers .position-center-inner,
	.vertical-align-containers .position-left-inner,
	.vertical-align-containers .position-right-inner {
	vertical-align: middle;
	display: inline-block;
}

.vertical-align-containers .position-right-inner {
	height: 100%;
}

#form\:projectTable > div.ui-dataview-header,
#form\:compoundTabView\:hcDetailcompoundTable > div.ui-dataview-header,
#form\:compoundTabView\:psDetailcompoundTable > div.ui-dataview-header {
	display: none;
}

#form\:projectTable .ui-widget-header,
#form\:projectTable .ui-widget-content,
#form\:compoundTabView\:hcDetailcompoundTable .ui-widget-header,
#form\:compoundTabView\:hcDetailcompoundTable .ui-widget-content,
#form\:compoundTabView\:psDetailcompoundTable .ui-widget-header,
#form\:compoundTabView\:psDetailcompoundTable .ui-widget-content {
	border: 0;
}

#form\:compoundTabView\:psDetailcompoundTable_content,
#form\:compoundTabView\:hcDetailcompoundTable_content {
	padding-left: 0.5em;
	padding-right: 0.5em;
}


#form\:compoundTabView\:psSummarycompoundTable th,
#form\:compoundTabView\:hcSummarycompoundTable th {
	width: 70px;
}


/* ==== Overview boxes ==== */

article > div.overview-boxes {
	padding-left: calc(2vw - 0.5em);
	padding-right: calc(2vw - 0.5em);
    width: 100%;
}

article > div.overview-boxes > div {
	text-align: left;
}

.overview-boxes .overview-box {
    background-color: #2c7a84;
	border-radius: 4px;
    color: #ffffff;
    padding: 10px 20px;
}

.overview-boxes .overview-box.orange {
    background-color: #ff6e00;
}

.overview-boxes .overview-box .overview-box-stats .highlight {
    font-weight: bold;
}

.overview-boxes .overview-box .overview-box-title {
    font-weight: bold;
    width: 100%;
}

.overview-boxes .overview-box .overview-box-title i {
    vertical-align: middle;
    font-size: 24px;
}

.overview-boxes .overview-box .overview-box-title span {
    vertical-align: middle;
}

.overview-boxes .overview-box .overview-box-count {
    color: #ffffff;
    font-size: 24px;
    width: 100%;
    display: block;
    padding: 8px 0;
}


/* ==== Compound pages ==== */


.heading-border-bottom {
	border-bottom: solid 1px #777;
	margin: 0;
	padding: 0;
	font-size: 7px;
}

div.heading-border-bottom {
	border-bottom: solid 1px #ddd;
	padding-bottom: 5px;
	padding-top: 10px;
}

.psHcStatus {
    width: 50px;
    padding-left: 0.5em;
	vertical-align: top;
}

.psHcLabel, .psHcValue {
    font-size: 14px;
}

.psHcValue {
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

p.activity-header {
    background: none;
	border: none;
    display: inline;
    margin: 0px;
    margin-bottom: 0px;
}

.psHcStatus span.activity-header, .psHcValue span.activity-header, .psHcLabel span.activity-header, p.activity-header {
    border-bottom: solid 1px #777;
    border-radius: 0;
    display: block;
    font-size: 0.9em;
    font-style: oblique;
    font-weight: normal;
    height: 20px;
    margin-bottom: 8px;
    padding-left: 0;
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
    width: 100%;
}

.compoundGridPanel .heading-border-bottom {
	margin-bottom: -1em;
}

.compoundListPanel {
	border-bottom: solid 1px #dddddd;
}

.compoundListPanel .subheading {
    font-style: oblique;
    color: #938a8a;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-left: 0px;
    font-size: 12px;
}

.compoundListPanel table {
	width: 100%;
}


/* ==== Project pages ==== */


.projectGridPanel.ui-panel {
	background: #2c7a84;
	background: linear-gradient(328deg, rgba(0,0,0,1) 0%, rgba(44,122,132,1) 84%);
	box-shadow: 5px 5px 5px 0px rgba(221,221,221,1);
	transition: all 1s ease;
}

.projectGridPanel.ui-panel:hover {
	background: #000;
	background: linear-gradient(350deg, rgba(0,0,0,1) 0%, rgba(44,122,132,1) 84%);
}

.projectGridPanel.ui-panel * {
	color: #fff;
}

.projectGridPanel.ui-panel > div.ui-panel-content {
	padding: 0;
}

.projectGridPanel.ui-panel > div.ui-panel-content > div.p-grid {
	margin: 0;
}

.projectGridPanel a {
	display: block;
	padding-bottom: 10vh;
	width: 100%;
}

.projectGridPanel.ui-panel:hover .grid-icon::before {
	content: '\e964';
}

.projectGridPanel .grid-icon {
	font-size: 4vw;
	margin: 4vh 0;
	text-align: center;
	width: 100%;
}

.projectGridPanel .coaddId {
	display: block;
	font-size: 2vw;
	margin: 0 0 2vh 0;
	text-align: center;
	width: 100%;
}

.projectGridPanel .subheading {
	display: block;
	font-size: 1.6vw;
	font-style: oblique;
	margin: 0 0 5vh 0;
	min-height: 4vw;
	text-align: center;
	width: 100%;
}

.projectGridPanel .subheading.projectName {
	margin-bottom: 1vh;
}

.projectGridPanel .subheading.projectProp {
	font-size: 1.4vw;
	margin-bottom: 1vh;
}

.projectGridPanel .status {
	background-color: #ff6e00;
	border: solid 1px #ff6e00;
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
	box-shadow: 0px 2px #532b0d;
	display: block;
	font-size: 1vw;
	margin: 0 auto auto -3px;
	padding: 1% 3%;
	text-shadow: 1px 1px #989897;
	transition: background-color 0.3s ease;
	width: 90%;
}

.projectGridPanel:hover .status {
	background-color: #ff7915;
}

.sup {
    font-size: 8px;
    position: relative;
    top: -7px;
}


/**********************
  Animations
***********************/
@keyframes fadeInDown {
	from {
		opacity:0;
		transform: translate3d(0, -20px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeOutUp {
	from {
		opacity:1;
	}

	to {
		opacity: 0;
		transform: translate3d(0, -20px, 0);
	}
}

@keyframes opacityOn {
	from {
		opacity:0;
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes rotate3x {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(1080deg);
	}
}



/**********************
  Media Queries
***********************/

@media (min-width: 1900px) {
	header .flip-card-back {
		margin-top: -160px !important;
	}
	
	#loginForm h2 span {
		top: 20px;
	}
}
@media (max-height: 720px) {
	header .flip-card-back {
		margin-top: -85px;
	}
}
@media ( max-width: 1217px ) {
	header {
		padding-left: 1em;
		padding-right: 1em;
	}
	
	header.thin-header {
		padding-left: 2vw;
		padding-right: 2vw;
	}

	header button::before {
		font-size: 27px;
	}

	header button {
		font-size: 0.95em;
		letter-spacing: 0px;
	}

	header button span {
		font-size: 0.9em;
	}

/*
	header ul {
		float: none;
		position: absolute;
		left: 50%;
		margin-left: -150px;
		top: 150px;
	}
*/
	header ul li {
		font-size: 16px;
		margin-left: 16px;
	}
	
	header p {
		font-size: 14px;
	}

	header .sign-up-buttonpane {
		float: none;
		left: 50%;
		margin-left: -76px;
		position: absolute;
		top: 200px;
	}

	header .header-content {
		padding-top: 8vh;
		padding: 8vh 20px 10vh 20px;
		width: 100%;
	}

	article div.features > div {
		width: 100%;
	}

	nav .grid {
		width: 100%;
	}
	
	footer > div.p-grid {
	    padding-left: 0;
	    padding-right: 0;
		text-align: left;
		width: 100%;
	}

	footer > div ul {
		display: block;
	}
	
	footer > div .social-icons {
		text-align: center;
	}

	footer > div a.wellcome-logo img {
		width: 10vw;
	}

	footer > div a.uq-logo img {
		width: 15vw;
	}

	.compoundGridPanel .structure {
		height: 196px;
	}
}

@media ( max-width: 1080px ) {
	nav .position-right ul > li {
		font-size: 1.6vw;
	}

	nav .position-right ul > li > a {
		font-weight: bold;
	}
}

@media ( max-width: 970px ) {
	header button::before {
		font-size: 22px;
		margin-left: 6px;
	}

	header button {
		font-size: 0.9em;
	}

	nav .position-right ul > li {
		font-size: 1.4vw;
	}
}

@media ( max-width: 870px ) {
	body {
		overflow-x: hidden;
	}

	header {
		height: calc(100vh - 29vw + 5px);
		margin-top: calc(29vw - 5px);
	}

	header.thin-header {
		border-top: solid 5px #ddd;
	}

	.filter-panel header, .filter-panel header.thin-header {
		margin-top: calc(29vw - 5px + 40px);
	}

	header .back {
		margin-top: -12px;
	}

	header > .p-grid > .p-col-6 {
		width: 100%;
	}

	header .header-content h1 {
		font-size: 7vw;
	}
	
	header .flip-card-back {
		/*margin-top: -100px;*/
	}
	
	nav {
		height: 25vw;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		padding-top: 10px;
		top: calc(5px - 29vw);
	}

	nav.sticky {
		height: 170px;
	}

	.filter-panel nav.sticky {
		top: 40px;
	}

	nav.sticky.active-filter {
		position: static;
	}

	nav .vertical-align-containers .position-left {
		float: none;	
	}
	
	nav .vertical-align-containers .position-left .logo-wrapper a img {
		width: 90vw;
		height: auto;
	}
	
	nav .vertical-align-containers .position-right {
		position: relative;
		background-color: #2C7A84;
		background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(44,122,132,1) 23%);
		float: none;
		height: auto;
		text-align: inherit;
		width: 100%;
	}
	
	nav .position-right-inner {
		width: 90%;
		margin: 0 auto;
		position: relative;
		left: 50%;
	}

	nav .position-right ul {
		margin: 0;
		padding: 0;
		position: relative;
		left: -50%;
		width: 100%;
	}

	nav .position-left ul {
		font-size: 3vw;
		margin-left: 9vw;
		margin-top: 6vw;
	}

	nav .position-right ul > li {
		height: 4vw;
	}

	nav .position-right ul > li > a {
		color: #fff;
		font-size: 2.8vw;
		padding-top: 2px;
		padding-bottom: 2px;
		transition: background-color 0.3s ease-out;
	}
	
	nav .position-right ul > li > a:hover {
		background-color: #ff6e00;
		color: #fff;
	}

	nav .position-right ul > li > a::after {
		border-width: 0;
	}

	nav .position-right ul > li > a:hover::after {
	}

	.vertical-align-containers .position-center-inner, .vertical-align-containers .position-left-inner, .vertical-align-containers .position-right-inner {
	    vertical-align: top;
	}
	
	.vertical-align-containers .position-center::before, .vertical-align-containers .position-left::before, .vertical-align-containers .position-right::before {
	    display: inline;
	}

	footer {
		height: 260px;
	}

	footer > div {
		text-align: inherit;
	}

	footer > div > div.p-col-3 {
		width: 40%;
	}

	footer > div > div.p-col-2 {
		width: 30%;
	}
	
	footer .landing-menu {
		padding-left: 0px;
	}

	footer > div a.wellcome-logo img {
		width: 17vw;
	}
	
	footer > div a.uq-logo img {
		width: 24vw;
	}

	body .filter-wrapper, body .filter-wrapper.scrolling {
		background-color: #2C7A84;
		position: fixed;
		top: 0px;
		width: 100%;
		z-index: 160;
	}

	.active div#filter-trigger {
		width: 100%;
	}
	.filter-sidenav .filter-buttons.active button.ui-button {
		width: calc(100% - 78px);
	}
	.filter-sidenav .filter-buttons.scrolling {
		position: fixed;
		top: 40px;
	}
	.filter-sidenav {
		left: -900px;
		width: 100%;
	}
	.filter-sidenav {
		position: fixed;
		top: 40px;
		z-index: 160;
	}
	body .filter-wrapper.active {
		background-color: #2C7A84;
	}
	.filter-sidenav .filter-loop-wrapper {
	    height: calc(100vh - 78px);
	}
	.filter-sidenav .filter-loop-wrapper.scrolling {
		margin-top: 40px;
	}

	.active-filter {
		margin-left: 0px;
		-webkit-filter: blur(2px);
		-moz-filter: blur(2px);
		-o-filter: blur(2px);
		-ms-filter: blur(2px);
		filter: blur(2px);
	}

	body footer.active-filter {
		width: 100%;
	}
	
	.filter-panel form#form.scrolling div.card {
		padding-top: 16px;
	}
	.compoundGridPanel .structure {
		height: 127px;
	}
}

@media ( max-width: 620px ) {
	/*---------- All pages ----------*/
	header {
		height: calc(100vh - 125px);
		margin-top: calc(125px + 4vw);
	}

	header.thin-header {
		margin-top: calc(120px - 5px);
	}

	.filter-panel header.thin-header {
		margin-top: calc(120px - 5px + 40px + 4vw);
	}

	nav {
		height: 120px;
		top: calc(5px - 4vw - 120px);
	}
	
	nav.sticky {
		height: 120px;
	}

	header h1 {
		font-size: 14px;
	}

	header p {
		font-size: 12px;
	}

	header .p-grid > .p-col-6 {
		width: 100%;
	}
	
	header .flip-card-back {
		margin-top: -80px;
	}

	#loginForm h2 span {
		margin-bottom: 10px;
	}

	nav .position-left ul {
		margin-left: 5.5vw;
		margin-top: 1.5vw;
	}

	nav .position-left ul > li > a {
		font-size: 0.9em;
	}

	nav .position-right ul > li > a {
		font-size: 2.5vw;
		padding-top: 4px;
	}

	footer {
		height: auto;
		text-align: center;
		position: static;
	}
	
	article {
		padding-bottom: 0px;
	}
	
	footer > div > div.p-col-3,
	footer > div > div.p-col-2 {
		float: none;
		margin: 10px auto;
		text-align: center;
		width: 100%;
	}
	
	footer > div > div {
	}
	
	footer > div > div.p-col-2.social-icons {
		width: auto;
	}
	
	footer > div .landing-menu {
		margin: 0 auto;
		padding: 0 0 0 5vw;
		width: 40vw;
	}

	footer > div > div.p-col-2.social-icons .p-col {
		padding-left: 5px;
		padding-right: 5px;
	}

	footer > div img,
	footer > div a.wellcome-logo img,
	footer > div a.uq-logo img {
		width: 30vw;
	}

	.compoundListPanel .structure {
		height: 196px;
	}
}

@media ( max-width: 450px ) {
	nav.sticky {
		height: 105px;
	}
	
	nav .position-left ul {
		margin-top: 0;
		margin-left: 0;
	}

	nav .position-left ul > li > a {
	}

	nav .position-right ul > li > a {
		font-size: 2.2vw;
		padding-bottom: 4px;
		padding-top: 6px;
	}
}



/**********************
  IE 10 and above, without Edge
***********************/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.flip-card-back, .flip-card-front {
		transform: none;
	}
	
	.flip-card-back {
		display: none;
		position: static;
	}
	
	header > .p-grid > .p-col-6 .flip-card-inner.flip {
		transform: rotateY(360deg);
	}
	
	header > .p-grid > .p-col-6 .flip-card-inner.flip .flip-card-back {
		display: block;
	}
	
	header > .p-grid > .p-col-6 .flip-card-inner.flip .flip-card-front {
		display: none;
	}
}
}