table{
	font-size: 0.8rem;
	font-weight: 600;
}

td{
	padding: 0.25rem 0.5rem;
	border: solid #d2d2d2 1px;
}

#scroll-menu{
	position: relative;
	margin-right: 20px;
}

#menu{
	position: sticky;
	position: -webkit-sticky;
	margin-top: 2rem;
	top: 2rem;
	font-size: 0.75rem;
	line-height: 2;
	border: solid #d2d2d2 1px;
	padding: 10px;
	box-shadow: 0px 2px 5px #D2D2D2;
	border-top: solid gray 3px;
	padding: 20px 30px 10px 25px;
	background-color: #f5f5f5;
	width: 210px;
}

#scroll-menu ol {
  list-style: none;
  padding-left: 0px;
  /*margin: 0px;*/
}

#scroll-menu ol > li a{
    display: flex;
    align-items: center;
    border-bottom: none;
    color: #333;
    opacity: 0.8;
    transition: 0.1s;
}

#scroll-menu .fa-square{
	margin-right: 8px;
	font-size: 0.6rem;
}

li.scroll-nav__item.scroll-nav__item--active .fa, li.scroll-nav__item.scroll-nav__item:hover .fa{
    color: #65aa30;
}

li.scroll-nav__item.scroll-nav__item--active a, li.scroll-nav__item.scroll-nav__item a:hover{
    opacity: 1 !important;
    font-weight: bold;
    font-size: 0.8rem;
}

#top{
	grid-template-rows: auto;
	grid-template-columns: minmax(350px, auto) minmax(350px, 400px);
	grid-template-areas: "a b";
}

@media (width < 768px){
	.container{
		max-width: 95dvw;
	}

	#top{
		grid-template-rows: auto auto;
		grid-template-columns: 1fr;
		grid-template-areas: "b" "a";
	}
}

#compound_img{
	/*max-width: 450px;*/
	/*min-width: 400px;*/
}

#flags .values{
	overflow-y: unset;
}

#flags .values img, #flags .values .fa{
	height: 40px;
	width: 100%;
	font-size: 30px;
	padding: 5px;
	color: white;
}

.flag{
	border-radius: 3px;
	background-color: gray;
	width: 40px;
	height: 40px;
	text-align: center;
}

.flag + .flag{
	margin-left: 3px;
}

.flag .fa-bullseye{
	opacity: 0.4;
	position: relative;
	bottom: -2px;
	left: -2px;
}

.flag .number{
	position: absolute;
	top: 0px;
	right: 2px;
	color: white;
	font-weight: bold;
	font-size: 1.1rem;
}

#right_wrapper{
	position: sticky;
	position: -webkit-sticky;
	top: 2rem;
}

#compound_view > .bottom{
	width: 95%;
}

.description{
	line-height: 1.5;
	text-align: justify;
}

.description + .description{
	margin-top: 10px;
}

#compound_view .structure{
	max-width: 70dvw;
	padding: 10px;
	overflow: auto;
	max-height: 150px;
	font-family: "UbuntuMono";
	font-weight: normal;
}

#molblock .structure{
	white-space: pre;
}

.subsection .heading{
	font-size: 0.8rem;
	border-bottom: solid #D2D2D2 1px;
}

.subsection + .subsection{
	margin-top: 10px;
}

#compound_view .section{
	max-width: 100%;
}

.sections{
	/*display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	min-width: 300px;*/
}

/*.sections > .section{
	width: 49%;
	min-width: 300px;
}*/

.section > .values{
	font-size: 0.8rem;
	border: solid #d2d2d2 1px;
	border-top: none;
	padding: 10px;
	box-shadow: 0px 2px 5px #D2D2D2;
	max-height: 500px;
	overflow-y: auto;
}

.pd-row .value{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	line-height: 1.5;
}

#structure_formats{
	font-weight: bold;
}

.structure_format{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 3px 5px;
	background-color: #F5F5F5;
	position: relative;
}

.structure_format img{
	height: 40px;
	margin-right: 10px;
}

#similarity_form, #scaffolds_form{
	padding: 10px;
	background-color: #F5F5F5;
	border: solid #D2D2D2 1px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

#similarity_form > .options > *, #scaffolds_form > .options > *{
	margin-right: 10px;
}

#similar_compounds_div > form{
	display: flex;
}

#similarity_form > .options, #scaffolds_form > .options{
	display: flex;
	justify-content: space-between;
	width: 220px;
}

#standard_siblings .compound{
	border-bottom: solid gray 2px;
}

#similarity_treshold, #scaffold_count{
	width: 50px;
	text-align: center;
}

#probe_targets .target{
	background-color: #444;
	font-weight: bold;
	padding: 0px 3px 0px 5px;
	color: white;
	border-radius: 3px;
	margin: 2px;
}

#probe_targets .target_info{
	background-color: #65aa30;
	margin-left: 3px;
}

#scores > div + div{
	border-top: solid #d2d2d2 1px;
}

#scores{
	border-top: solid gray 2px;
}

#scores .icon{
	width: 40px;
	margin-right: 3px;
	display: flex;
	justify-content: center;
	filter: grayscale(1);
}

#scores .icon img{
	height: 1.5rem;
}

#scores .value{
	justify-content: flex-end;
	width: 120px;
	max-width: 120px;
	z-index: 10;
}

#scores .bar-value{
	font-size: 0.8rem;
}

#scores .pctg{
	margin-right: 5px;
}

#scores .original{
	font-weight: normal;
}

.targets{
	position: relative;
}

.targets .count{
	background-color: gray;
	color: white;
}

.targets[data-view='default'] .activities .value, .cell_line .value, .organism .value{
	min-width: 120px;
	max-width: 120px;
}

.target.header{
	position: sticky;
    top: -10px;
    border: solid #D2D2D2 1px !important;
    z-index: 10;
}

.source{
	font-weight: bold;
}

.subheader{
	display: flex;
	align-items: center;
	padding: 15px 0px 10px 0px;
	margin-left: 15px;
}

#pdid{
	background-color: #444;
    color: white;
    padding: 2px 7px;
    border-radius: 2px;
    font-weight: bold;
}

#pdps_detailed img{
	height: 35px;
	padding: 5px;
}

/*#pdps_detailed .param{
	width: 14%;
	background-color: gray;
	border-radius: 2px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}*/

#pdps_detailed .param .score-value{
	background-color: #333;
	color: white;
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: bold;
	width: 100%;
	padding: 3px;
	display: flex;
	justify-content: center;
}

#targets .targets{
	max-width: none;
}

#targets .target{
	font-size: 100%;
}

#targets .target .db{
	width: 60px;
}

.structure_filter{
	margin: 10px;
	text-align: center;
	width: 300px;
}

.structure_filter > .name{
	padding: 5 0 5 0;
	font-weight: bold;
}

.structure_filter > .smarts{
	padding: 5 0 5 0;
	font-size: small;
	word-break: break-word;
	max-height: 50px;
	overflow: auto;

}

.structure_filter > .type{
	padding: 0 0 5 0;
	color: gray;
	font-size: smaller;
}

#attributes .values, #cells .values, #organisms .values{
	max-height: 300px;
}

#properties .value{
	background-color: #D2D2D2;
	border-radius: 3px;
	width: 60px;
	font-weight: bold;
}

.fa.clipboard{
	padding: 7px;
	border-radius: 2px;
	background-color: #444;
	font-size: 1rem;
	color: white;
}

.fa.tooltip_clipboard{
	padding: 5px;
	font-size: large;
}

.circle-spacer{
	font-size: 0.4rem;
	margin: 0px 6px;
}

.tooltip {
  pointer-events: none;
}

.msg{
	font-weight: bold;
	font-size: 1.2rem;
	padding: 0.5rem;
}

@media (max-width: 1200px) {


}