/* color variables */
:root {
--ncats-purple: #662E6B;
--ncats-purple-50: #B196B4;
--ncats-purple-15: #662E6B15;
--ncats-gray: #656569;
--ncats-green: #007564;
--ncats-green-lightened: #009982;
--bootstrap-blue: #337AB7;
--body-gray: #F1F1F1;
--header-light-gray: #F8F8F8;
--dark-gray: #333;
--absolute-green: #5CB85C;
--racemic-teal: #5BC0DE;
--mixed-gray: #777;
--epimeric-orange: #F0AD4E;
--unknown-red: #D9534F;
--admin-red: #BC1310;
--admin-dark-red: #9e0000;
--bootstrap-code-red: #c7254e;
};
span.second-header {
/* color: purple; */
size: large;
font-size: 25px;
/* font-weight: bolder; */
vertical-align: middle;
}
span.logo-header {
color: var(--ncats-gray);
vertical-align: middle;
}
#ncatsRibbon {
height: 30px;
width: 100%;
background-color: var(--ncats-purple);
color: white;
}
#ncatsRibbon a{
color: white;
}
button.btn.btn-primary.label-offset {
background-color: white;
color: var(--ncats-purple);
border: 2px solid var(--ncats-purple);
border-radius: 20px;
white-space: initial;
max-width: 100%;
}
button.btn.btn-primary.label-offset:hover {
background-color: var(--ncats-purple-15);
color: rgb(100, 47, 108);
cursor:pointer;
}
button.btn.btn-primary.label-offset:focus {
outline:0;
}
button.btn.btn-primary.label-offset .badge{
display:none;
}
button.btn.btn-primary.label-offset.collapsed .badge{
display:inline-block;
color: white;
background-color: var(--ncats-purple);
}
.navbar-brand{
height:70px;
padding-top: 7px;
padding-bottom: 7px;
}
.navbar-brand .logo-header {
font-size: 55px;
margin-left: 20px;
}
.ncats-logo {
height: 55px;
display: inline-block;
}
body{
background-color: var(--body-gray);
}
.sidebar{
padding:0px;
width: 26%;
}
.sidebar-inner{
margin-right:30px;
margin-left: 16px;
background: white;
border-radius: 4px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
color: var(--ncats-purple);
background-color: var(--ncats-purple-15);
font-weight: bolder;
}
nav#breadcrumb {
padding-bottom: 10rem;
/* margin-top: 10px; */
}
/*
.list-group-item.active>.badge, .nav-pills>.active>a>.badge {
color: white;
background-color: var(--mixed-gray);
}
*/
#version{
position:fixed;
z-index:999999;
bottom:0px;
left:0px;
}
.menu-button a{
margin:0px;
margin-top: 7px;
}
/* DEPRECATED
#submenu {
position: absolute;
right: 0;
z-index: 99999;
top: -65px;
font-size: 20px;
box-shadow: 10px 10px 10px rgba(140, 140, 140, 0.50);
border: var(--ncats-purple-50) 1px solid;
background-color: var(--header-light-gray);
}
#submenu a{
color: var(--ncats-purple);
}
#submenu a:hover{
background-color: var(--ncats-purple-15);
}
#submenu li:not(:last-child):after {
border-bottom: var(--ncats-purple-50) 1px solid;
content: '';
width: 80%;
position: absolute;
right: 10%;
left: 10%;
}
*/
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
background-color: var(--header-light-gray);
}
.container{
position:relative;
}
.purple {
background-color: var(--ncats-purple) !important;
}
.width95 {
width: 95%;
margin: auto;
}
.main-text-block {
padding:20px;
font-size: medium;
}
.section-bar {
background-color: var(--header-light-gray);
color: var(--ncats-purple);
font-size: 24px;
margin-top: 15px;
padding: 12px;
}
.section-bar a {
color: var(--ncats-purple);
}
.badge-wrap {
width: 100px;
display: inline-block;
text-align: right;
vertical-align: middle;
padding-right: 10px;
}
.badge-wrap-sources {
display: inline-block;
text-align: right;
padding-right: 5px;
padding-left: 5px;
}
.badge-sources-start {
width: 75px;
}
/* ensure sources counts appear inline with names */
.badge-wrap-sources .badge {
padding: 5px 7px;
}
.source-row {
display: flex;
flex-direction: row;
}
.source-version-info {
color: #777;
padding-left: 30px;
margin-bottom: 10px;
}
.source-label {
padding-left: 10px;
}
.counts {
text-transform: uppercase;
}
.counts a {
font-size: 16px;
}
/*
.counts .badge {
font-size: 18px;
margin-top: -8px;
}
.counts>div {
padding-top: 5px;
}
*/
a#hamburger{
padding: 5px 0px 5px 5px;
/*font-size: 40px;*/
color: var(--ncats-purple);
margin-left: 10px;
}
#menubar a.loupe,
#menubar a.close-loupe
{
padding: 8px 0px 5px 5px;
font-size: 32px;
color: var(--ncats-purple);
margin-left: 10px;
margin-right: 15px;
}
.navbar-collapse{
padding-right:0px;
padding-left:0px;
}
.navbar{
margin-bottom: 0px;
min-height: 72px;
}
.tree-list .label{
display: inline-block;
max-width: 200px;
white-space: normal;
text-align: left;
overflow: hidden;
margin-top: 2px;
}
.tree-view>span{
vertical-align: top;
}
.tree-view{
min-width:400px;
}
.filtertoggle{
width:100%;
}
span.logo-header.subsection {
color: var(--ncats-purple);
display:inline-block;
margin-left: 10px;
}
.navbar-nav>li{
float: left;
}
.navbar-header{
float:left;
}
.card-content{
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 20px;
/*prevent the popovers
from being cut off*/
overflow-x: visible;
}
.sidebar-inner .card-content {
padding: 0px;
}
.tree-view table td{
position:relative;
}
.tree-view table td .tree-toggle{
position:absolute;
top:0px;
}
.input-group-btn{
width:auto;
}
.panel.additional{
border:none;
margin-bottom: 0px;
-webkit-box-shadow:none;
box-shadow:none;
}
.panel.additional .panel-heading{
padding-left:0px;
color:var(--ncats-purple);
border-bottom: 2px solid var(--ncats-purple-50);
background-color: inherit;
padding-bottom:5px;
margin-bottom:5px;
}
.paper-header {
/* font-size: 1.2rem; */
font-weight: bold;
padding-bottom: 5px;
}
.paper-authors {
padding-bottom: 10px;
/* font-size: 1.1rem; */
}
.paper-journal {
padding-bottom: 5px;
/* font-size: 1.1rem; */
}
blockquote.paper {
font-size: 14px;
}
/* font awesome is not affected by the bold tag */
b > .fa {
font-weight: bold;
}
.tree-view table tbody td {
padding: 0px 0px !important;
}
.tree-view td:first-child {
padding: 8px 10px !important;
}
#search-restrict{
display:none;
}
/* limit body width to avoid mangled menu */
body{
min-width: 680px;
}
.popover{
color:black;
}
.info-rancho{
color: var(--ncats-green-lightened) !important;
margin-left: 5px;
vertical-align: middle;
}
.info-rancho i.fa{
color: var(--ncats-green-lightened) !important;
}
/* DEPRECATED: fa-icons for rancho tabular data
uib-tab-heading i.fa {
margin-right: 5px;
vertical-align: middle;
color: #b73333;
}
*/
/*
.facet-val .label{
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
padding: .3em .6em .3em;
}*/
#sidebar-menu-separator{
border-bottom: 1px solid var(--ncats-purple);
}
#sidebar-menu-header{
font-size: x-large;
color: white;
padding-left: 15px;
padding-right: 5px;
padding-bottom: 10px;
padding-top: 10px;
background: var(--ncats-purple);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* prevent popover from being covered by the menu */
div#sidebar-menu-header .popover {
z-index: 2500;
}
#substance-detail-header{
font-size: x-large;
color: white;
padding-left: 15px;
padding-right: 5px;
padding-bottom: 10px;
padding-top: 10px;
background: var(--ncats-purple);
border-radius: 4px;
margin-bottom: 10px;
margin-left: 1px;
}
#sidebar-substance-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-bottom: 10px;
}
#breadcrumb .nav-pills>li>a{
border-radius:0px !important;
}
#sidebar-substance-name:hover {
white-space: unset;
overflow: visible;
overflow-wrap: break-word;
text-overflow: unset;
}
/* unii in sidebar menu */
#sidebar-substance-unii {
font-family: monospace;
font-size: 90%;
margin-bottom: 5px;
}
/* for IE */
.ie #sidebar-substance-unii {
font-size: 80%;
}
/* approval status in sidebar menu */
.sidebar-substance-status {
font-family: monospace;
font-size: 80%;
}
#sidebar-devstatus{
margin-bottom: 3px;
}
/* for IE */
.ie .sidebar-substance-status {
font-size: 80%;
}
/* make approval status icon white
and by default 3px top margin*/
.sidebar-substance-status #icon-status .fa {
color: white;
padding-top: 3px;
}
/* usd and h-square need additional top margin */
.sidebar-substance-status #icon-status .fa.fa-usd,
.sidebar-substance-status #icon-status .fa.fa-h-square {
padding-top: 4px;
}
/* usd and h-square need additional top margin */
#commonlistdetails-status #icon-status .fa.fa-usd,
#commonlistdetails-status #icon-status .fa.fa-h-square {
padding-top: 2px;
}
/* make info-pop icon white and limit its font size to large */
.sidebar-substance-status i {
color: white;
font-size: large;
}
.fixedpos .container {
padding:0px;
}
.fixedpos {
position: absolute;
}
#sidebar-menu-item {
margin-top: 0px;
margin-left: 0px;
font-size: large;
}
#sidebar-menu-item a{
color: var(--ncats-purple);
}
#sidebar-menu-item a:hover {
color: var(--ncats-purple);
background-color: var(--ncats-purple-15);
}
#sidebar-menu-item a:focus {
background-color: white;
outline: 0;
}
.panel-default.sub-list>.panel-heading {
border:none;
background-color: white;
}
.title-name {
color: var(--ncats-purple);
}
.panel-default.sub-list>.panel-heading .title-name{
font-weight: bold;
}
.panel-title{
outline:0;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
.pref-check{
color: var(--ncats-green-lightened);
}
table.info-wrapper td {
padding: 0px !important;
vertical-align: top;
}
.gsrs-datatable th {
white-space: nowrap;
}
/* has to be !important, as the original rule is too detailed */
table.gsrs-datatable.dataTable>tbody>tr>td {
vertical-align: top !important;
}
/* ensure table is not assigned 0 width (reason unknown) */
table.gsrs-datatable.dataTable {
width: 100% !important;
}
/* ensure header is not assigned 100 px width (reason unknown) */
.dataTables_scrollHeadInner {
width: 100% !important;
}
.navbar-brand a:hover,
.navbar-brand a:focus{
text-decoration:none;
}
.pagination-section-name{
font-weight: bold;
}
#showingnumber-pagination-sort {
padding: 0;
}
div.highcharts-button span {
pointer-events: none;
font-size: 20px !important;
}
div.info-popup-container {
max-height: 200px;
min-width: 150px;
overflow: auto;
}
/* this is to ensure no overflow in datatable
*/
.gsrs-datatable td {
word-break: break-word;
}
/* this is to show full drug name on-hover*/
.col-md-7 .title-name:hover,
.col-md-9 .title-name:hover {
white-space: unset;
overflow: visible;
overflow-wrap: break-word;
text-overflow: unset;
}
#no-word-break{
word-break: keep-all;
}
/* sidebar menu items are stored as tables,
and below are their td's properties */
#sidebar-menu-item-chevron{
padding-right: 10px;
}
#sidebar-menu-item-name{
width: 100%;
padding-right: 10px;
}
/* necessary to resolve issue on default load
in a full-width page, esp. with long sidebar menu
has to be !important as element is auto-generated;
UPDATE: original value cuts off drug names;
*/
.flickity-viewport {
/*height: 250px !important;*/
min-height: 250px !important;
}
/* ensure separation between carousel elements */
#substancescar .carousel-cell div {
max-width: 200px;
}
/* dot colors on cards in commonlist */
#label-primary {
color: var(--bootstrap-blue);
}
#label-achiral {
color: var(--dark-gray);
}
#label-absolute {
color: var(--absolute-green);
}
#label-racemic {
color: var(--racemic-teal);
}
#label-mixed {
color: var(--mixed-gray);
}
#label-epimeric {
color: var(--epimeric-orange);
}
#label-unknown {
color: var(--unknown-red);
}
/* do the same for badge colors */
#badge-primary {
background-color: var(--bootstrap-blue);
}
#badge-achiral {
background-color: var(--dark-gray);
}
#badge-absolute {
background-color: var(--absolute-green);
}
#badge-racemic {
background-color: var(--racemic-teal);
}
#badge-mixed {
background-color: var(--mixed-gray);
}
#badge-epimeric {
background-color: var(--epimeric-orange);
}
#badge-unknown {
background-color: var(--unknown-red);
}
/* need a padding div at the bottom
to ensure menu scrolls to the last element */
.bottom-padding{
height:100px;
}
/* decoration of pagination elements*/
#showingnumber-export {
padding: 0;
}
#showingnumber-export h4 {
float: left;
}
#export-button {
margin: 5px 0px 5px 20px;
}
/* export menu formatting */
#includePrivateDataCbox{
margin: 3px 5px 5px 20px;
width: 15px;
height: 15px;
float: left;
}
#includePrivateData-li {
font-weight: bold;
margin-top: 5px;
}
/* show deprecated checkbox */
#ShowDeprecated{
margin: 0px 5px 5px 15px;
width: 15px;
height: 15px;
float: left;
}
/* admin and profile settings */
/*
#profile-button {
font-size: 20px;
background: none;
border: none;
padding: 10px 15px;
font-weight: bold;
color: var(--mixed-gray) !important;
}
*/
#profile-button:hover {
color: var(--dark-gray) !important;
}
#admin-button {
/*
font-size: 20px;
background: none;
border: none;
padding: 10px 15px;
*/
color: var(--admin-red) !important;
}
#admin-button:hover {
color: var(--admin-dark-red) !important;
}
/* structure and moiety table*/
#moiety-table td{
border:none;
}
/* maximize usable space
to avoid scroll bar */
#moiety-table td:first-child {
padding-right: 0;
}
/* only background of label-primary
is defined by default in labels.less */
a.label.label-primary.loader{
color: var(--bootstrap-blue);
border: 1px solid var(--bootstrap-blue);
padding-bottom: 7px;
padding-top: 4px;
background-color: white;
}
/* no color change on hover in case anchor is a faceting label*/
a.label.label-primary.loader:hover {
color: white;
background-color: var(--bootstrap-blue);
}
a.label.label-primary.loader .badge{
color: white;
background-color: var(--bootstrap-blue);
padding: 5px 7px 3px 7px;
margin-top: 2px;
}
/* no color change on hover in case anchor is a faceting label*/
a.label.label-primary.loader:hover .badge {
color: var(--bootstrap-blue);
background-color: white;
}
/* monospace div */
.font-monospace {
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
.monospace{
word-break: break-all;
font-family: monospace;
color: var(--ncats-gray);
font-size: 16px;
}
.monospace-code{
word-break: break-all;
font-family: monospace;
color: var(--bootstrap-code-red);
font-size: 16px;
}
/*list styling for about page*/
.about-list li{
padding-bottom: 5px;
line-height: 2em;
}
.about-list{
padding-left: 10px;
}
/* content details property titles */
#additional-details-title{
float: right;
font-weight: bold;
text-align: right;
}
#additional-details-separator{
margin-top: 10px;
margin-bottom: 10px;
}
#landing-counts {
margin: 0 0 15px 20px;
}
#landing-counts td:first-child{
border-top: 1px solid #eee;
}
#landing-counts td{
padding: 7px;
border-bottom: 1px solid #eee;
}
div#otherinformation {
display: none;
}
.inline-middle {
display: inline-block;
vertical-align: middle;
}
/* alter substance reference image render
for representation in record details card */
#subref-record-details .text-center{
text-align: left;
padding: 0;
}
#subref-record-details img{
margin: 0;
}
/* reference table popup column separation */
#referenceTable .ng-binding {
margin-left: 10px;
}
#about-blockquote{
font-size: 14px;
font-style: italic;
}
/* footer styling */
.inxight-footer {
margin-top: 30px;
background: white;
color: white;
padding: 30px;
}
.inxight-footer .container {
text-align: center;
}
.inxight-footer .item, .item-last {
display: inline-block;
font-weight: bold;
color: var(--bootstrap-blue);
font-size: 17px;
}
.inxight-footer .statement {
color: var(--dark-gray);
margin-top: 20px;
text-align: center;
font-size: 15px;
line-height: 25px;
}
.inxight-footer .item, .item-last {
display: inline-block;
font-weight: bold;
color: var(--bootstrap-blue);
font-size: 17px;
}
.inxight-footer .container .item::after {
content: '|';
margin: 0 10px 0 10px;
}
/* hiding/showing smiles and inchi */
#smiles-inchi {
display:none;
}
.smiles-inchi {
padding: 8px;
}
/* decoration of logo inside anchor */
a.ixlogo:hover {
text-decoration: none;
}
#rancho-logo {
height: 30px;
}
#fda-logo {
height: 33px;
padding-bottom: 10px;
}
/* need this to prevent filter overflow on screen resize */
#filter-checkbox-wrapper {
margin-left: -15px;
}
/* ensure no overlap between menu subsection and search box */
.navbar-brand, .navbar > .container-fluid .navbar-brand {
padding-right: 0;
}
/* menu in the matches */
#matches-menu {
padding-top: 0;
padding-bottom: 0;
}
/* 'matches' menu sections' headers*/
#matches-section-header {
background-color: var(--ncats-purple-15);
border-bottom: white solid 2px;
}
#matches-section-header label {
color: var(--ncats-purple);
margin-bottom: 0;
cursor: pointer;
}
#matches-section-header a {
padding: 7px 0 7px 0;
}
/* matches menu section subheaders (exact/approximate) */
#matches-section-subheader {
margin-top: 5px;
}
#matches-section-subheader label {
font-weight: normal;
font-style: italic;
color: var(--ncats-purple);
}
/* prevent overflow for each element of the matches menu */
#matches-menu-element {
width: 170px;
overflow: visible;
overflow-wrap: break-word;
white-space: normal;
padding-left: 10px;
}
/* search alert text line height -- to allow for 'matches'
button height if the text goes onto second line */
#search-alert {
line-height: 1.7em;
}
/* fix overflow in facet-val labels used in col-md-4 context */
.col-md-4 .facet-val-text {
max-width: 130px;
}
/* fix overflow in tables used in col-md-5 context */
.col-md-5 #moiety-table {
max-width: 278px;
}
#sectionsmenu {
position: absolute;
left: 440px;
z-index: 99999;
top: -65px;
box-shadow: 10px 10px 10px rgba(140, 140, 140, 0.50);
border: var(--ncats-purple-50) 1px solid;
background-color: var(--header-light-gray);
width:250px;
}
#sectionsmenu a{
color: var(--ncats-purple);
}
#sectionsmenu a:hover{
background-color: var(--ncats-purple-15);
}
#sectionsmenu .subsection {
margin-top: -10px;
}
#sectionsmenu li:first-child a{
line-height: 65px;
padding: 0 10px 0 0;
font-size: 40px;
}
#sectionsmenu li:not(:first-child) a{
padding-left: 20px;
font-size: 20px;
}
/* add menu separators */
#sectionsmenu li:not(:last-child):after {
border-bottom: var(--ncats-purple-50) 1px solid;
content: '';
width: 80%;
position: absolute;
right:10%;
left:10%;
}
.navbar-header .fa-caret-down {
font-size: 25px;
}
.bottom-padded {
padding-bottom: 10px !important;
}
/* generic card to avoid container in container problem */
.card-generic {
background: white;
border: 1px solid rgb(218, 218, 218);
border-radius: 4px;
padding: 0 20px 20px 20px;
}
.padded-header {
padding-top: 10px;
padding-bottom: 5px;
}
.nostyle-padded {
list-style: none;
padding: 10px 0 0 0;
margin: 0;
}
.nostyle-padded dd {
padding-bottom: 10px;
padding-left: 20px
}
/* avoid resizing of the menubar on window resize */
#menu .navbar-header{
margin-left: 0;
margin-right: 0;
}
/* controlling the size of the top ribbon image elements */
.ncats-ribbon{
height: 30px;
width: 21px;
}
/* have to specify width for IE */
.ie .ncats-ribbon{
width: 21px;
}
.hhs-logo{
padding: 2px 0 2px 0;
}
.nih-logo{
padding: 5px 0 5px 1px;
}
/* approval status icons */
#icon-status{
font-size: 18px;
vertical-align: top;
position: absolute;
margin-left: 15px;
left: 0;
}
.sidebar-substance-status span#icon-status {
margin-left: 32px;
}
#label-status {
margin-left: 20px;
}
.sidebar-substance-status span#label-status {
margin-left: 23px;
}
/*
#icon-status .fa-thumbs-up{
color: #4caf50;
}
#icon-status .fa-usd{
color: #ff0000;
}
#icon-status .fa-h-square{
color: var(--bootstrap-blue);
}
#icon-status .fa-hospital-symbol{
color: var(--bootstrap-blue);
}
#icon-status .fa-ban{
color: #FF6347;
}
*/
#icon-status .fa {
color: var(--ncats-gray);
}
.bold-inline{
font-weight: 700 !important;
display: inline !important;
}
/* allow peeking into collapsed drug synonyms */
span.nowrap-list:hover {
white-space: unset;
overflow: visible;
overflow-wrap: break-word;
text-overflow: unset;
}
/* remove outline on info-button click */
info-button span:focus {
outline: none;
}
#selected-filter-container {
overflow: hidden;
margin-bottom: 0;
background-color: white;
border-color: #ddd;
}
#selected-filter-container-inner {
overflow: auto;
width:100%;
height:100%;
}
/* change appearance of filter buttons */
#selected-filter-container-inner .btn-primary {
color: var(--bootstrap-blue);
background-color: white;
border: 2px solid var(--bootstrap-blue);
}
#selected-filter-container-inner .btn-primary .badge {
color: white;
background-color: var(--bootstrap-blue);
}
#selected-filter-container-inner .btn-primary:hover {
color: white;
background-color: var(--bootstrap-blue);
border: 2px solid var(--bootstrap-blue);
}
#selected-filter-container-inner .btn-primary:hover .badge {
color: var(--bootstrap-blue);
background-color: white;
}
/* change input placeholder properties*/
input::-webkit-input-placeholder {
color: #999 !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: #999 !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: #999 !important;
}
input:-ms-input-placeholder {
color: #999 !important;
}
/* change facet search input box */
#facet-search {
border-color: #bbb;
border-left: 0;
border-right: 0;
border-top: 0;
border-radius: 0;
margin-left: auto;
margin-right: auto;
width: 85%;
padding: 3px 10px;
margin-bottom: 15px;
}
#facet-search:focus {
border-color: #bbb !important;
}
#facet-search input::placeholder {
font-weight: normal !important;
color: #999 !important;
}
/* change search input box in datatables */
.dataTables_filter input {
border-color: #bbb;
border-left: 0;
border-right: 0;
border-top: 0;
border-radius: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
font-weight: normal !important;
color: var(--dark-gray) !important;
}
.dataTables_filter:focus {
border-color: #bbb !important;
}
.dataTables_filter input::placeholder {
font-weight: normal !important;
color: #999 !important;
}
/* adjust all input boxes behavior */
input {
-webkit-box-shadow: inset 0 0 0 !important;
box-shadow: inset 0 0 0 !important;
}
/* adjust all input boxes on focus behavior */
input:focus {
border-color: #c2c2c2 !important;
-webkit-box-shadow: inset 0 0 0 !important;
box-shadow: inset 0 0 0 !important;
}
/* facet header color */
#facet-heading {
background-color: white;
color: var(--bootstrap-blue);
padding-bottom: 13px;
border-radius: 3px;
width: 99%;
margin-left: 1px;
}
/* facet body */
#facet-body {
margin-top: 10px;
}
/*
highest-level facet div
*/
#facet-show-button {
outline: 0;
margin-left: 25px;
background-color: unset;
}
#filter-label {
padding-left: 10px;
padding-right: 10px;
}
/* all tooltip-related below make facet tooltips look like popover
because popovers don't work for some reason */
.tooltip.facetTooltip.in {
opacity: 1;
filter:alpha(opacity=100);
width: 300px;
max-width: 300px;
z-index: 2100;
}
/*.tooltip.facetTooltip.top.in {
padding-bottom:10px;
}
.tooltip.facetTooltip.bottom.in {
padding-top:10px;
}*/
.tooltip.facetTooltip .tooltip-inner {
padding: 10px 15px;
text-align: left;
width: 300px;
max-width: 300px;
color: black;
background-color: white;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: white;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tooltip-inner .info-popup-container {
max-height: 300px;
}
.tooltip.facetTooltip .tooltip-arrow {
display:none;
}
/*.tooltip.facetTooltip.top .tooltip-arrow {
border-width: 13px;
border-top-color: white;
border-bottom-width: 0;
border-style: solid;
}
.tooltip.facetTooltip.bottom .tooltip-arrow {
border-width: 13px;
border-bottom-color: white;
border-top-width: 0;
border-style: solid;
}
*/
.facet-title{
display:inline-block;
font-weight: bold;
}
.facet-title .fa-caret-right,
.facet-title .fa-caret-down {
margin-right: 5px;
}
#filter-bool-section {
padding-bottom: 5px;
}
/* a line to separate checkboxes from boolean selectors */
#filter-bool-separator {
padding: 10px 0 15px 0;
}
#filter-bool-separator::before {
border-bottom: #bbb 1px solid;
content: '';
width: 80%;
position: absolute;
left: 10%;
}
/* increase size of checkboxes in the filter sections */
input[type=checkbox] {
-ms-transform: scale(1.2); /* IE */
-moz-transform: scale(1.2); /* FF */
-webkit-transform: scale(1.2); /* Safari and Chrome */
-o-transform: scale(1.2); /* Opera */
}
#filter-bool-section input[type=checkbox] {
-ms-transform: scale(1.3); /* IE */
-moz-transform: scale(1.3); /* FF */
-webkit-transform: scale(1.3); /* Safari and Chrome */
-o-transform: scale(1.3); /* Opera */
}
#filter-bool-section input[type=radio] {
-ms-transform: scale(1.3); /* IE */
-moz-transform: scale(1.3); /* FF */
-webkit-transform: scale(1.3); /* Safari and Chrome */
-o-transform: scale(1.3); /* Opera */
}
#filter-bool-section .subtle-label {
font-weight: bold;
}
#resolverButton {
margin-top: 10px;
}
#search-btn {
margin-top: 10px;
}
#tanimoto-box {
width: 60px;
padding-right: 0;
}
#tanimoto-slider {
padding: 0;
width: 90%;
}
#apply-structure-button {
margin: 10px;
}
#apply-structure-box {
border: 1px solid #BFBFBF;
}
#tanimoto-row label {
border: 0;
box-shadow: none;
margin: 0;
}
#tanimoto-row .col-md-2 {
padding: 0;
}
#tanimoto-row .col-md-4 {
padding: 0;
}
.pop-sub-val a {
font-size: small;
}
#sketcher-container {
width: 615px;
margin-left: 15px;
margin-right: 0;
display: inline-block;
}
#sketcher-row {
width: 690px;
}
/* prevent border around car content on small screens */
.col-md-12.table-responsive.card-content.in.collapse {
border: 0;
}
.nopadding {
padding: 0 !important;
}
form#main-menu-search {
vertical-align: middle;
height: 50px;
display: table-cell;
}
/* search within results */
#search-within {
margin-top: 5px;
}
@media (min-width: 1200px) {
#search-within form .input-group {
width: 450px;
}
}
#search-within form .input-group {
max-width: 400px;
min-width: 240px;
}
.flexbox {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* for fval labels followed by infopops */
#one-line .info-pop {
margin-left: 2px;
}
.sidebar-substance-status .info-pop {
margin-left: 0;
}
.sidebar-substance-status span {
margin-right: 6px;
max-width: 200px; /* to avoid infopopup being pushed to the very right */
}
/* this is to remove width constraint on small screens */
.hidden-lg .sidebar-substance-status span {
max-width: unset;
}
.dataTables_filter label {
margin-right: 7px;
}
/* remove on-focus outline from filters buttons */
#filters-buttons-group .btn:focus {
outline: 0;
}
/* set tooltip width for filters' buttons -- to avoid flicker */
#filters-buttons-group .tooltip {
width: 60px;
}
/* 'clear' button padding */
#filters-buttons-group .btn-url {
padding: 6px 0;
}
/* 'apply' button margin */
#filters-buttons-group .btn-primary {
margin-left: 10px;
}
#loading-suggest {
display: table-cell;
vertical-align: middle;
padding-right: 10px;
opacity: 1;
visibility: visible;
}
/* stylize the little loading circle in front of search box */
#menubar #loading-suggest {
height: 50px;
}
/* stylize the little loading circle in front of search box */
#loading-suggest i{
font-size: 1.5em;
color: var(--ncats-purple);
}
/* stylize the little loading circle in front of search box */
#loading-suggest.ng-hide:not(.ng-hide-animate) {
visibility: hidden !important;
opacity: 0 !important;
transition: visibility 0.5s, opacity 0.5s linear;
display: table-cell !important;
}
#search-within form {
display: table-cell;
}
/* remove ugly blue outline from all button-y elements on focus */
[role="button"]:focus {
outline: 0;
}
/* have to adjust pencil/search/etc. button size here,
because if it's done on fa icon, tooltip is rendered in wrong place */
.tools a{
font-size: 2em;
}
/* this is to mask some elements that are supposed to be reactive,
but aren't at the moment */
.autocursor div {
cursor: auto;
}
#subunit-search .tooltip {
width: 200px;
}
#subunit-search {
padding-bottom: 10px;
}
#split-button-main {
background-color: var(--ncats-purple);
border-color: var(--ncats-purple);
}
#split-button-main:focus {
outline: 0;
}
#split-button-main .fa {
color: white;
background-color: var(--ncats-purple);
}
@media (min-width:1200px) {
#search-bar {
width: 400px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#search-bar {
width: 600px;
}
}
@media (max-width: 767px) {
#search-bar {
width: 580px;
}
}
#main-menu-search .input-group-btn {
width: 30px; /*somehow default auto-width results in area larger than button */
}
/*these media statements are to ensure that elements are hidden/shown
as needed at borderline window widths of 991 and 1200px
*/
@media (max-width: 992px){
#left-menu .hidden-sm {
display: none !important;
}
}
@media (min-width: 992px){
#left-menu .hidden-sm {
display: unset !important;
}
}
@media (min-width: 992px) and (max-width: 1200px){
#left-menu .hidden-lg {
display: none !important;
}
}
@media (max-width: 992px){
#h-menu .hidden-sm {
display: none !important;
}
}
@media (min-width: 992px){
#h-menu .hidden-sm {
display: unset !important;
}
}
@media (min-width: 992px) and (max-width: 1200px){
#h-menu .hidden-lg {
display: none !important;
}
}
/* DEPRECATED
a.go2substance {
color: white;
font-family: monospace;
border: 1pt solid #c7254e;
background-color: #c7254e;
width: fit-content;
padding: 3px 6px;
font-weight: bold;
font-size: 14px;
border-radius: 5px;
margin-top: 5px;
text-decoration: none;
}
a.go2substance:hover {
text-decoration: none;
color: white;
background-color: #9a1d3c;
border-color: #9a1d3c;
}
*/
.prop-title {
margin-top: 10px;
}
/* count of found records */
#showingnumber-pagination-sort .label {
background-color: var(--ncats-gray);
}
/* active button in pagination element */
#showingnumber-pagination-sort .active > a,
#showingnumber-pagination-sort .active > a:hover {
background-color: var(--ncats-gray);
border-color: var(--ncats-gray);
}
/* badge color in filters */
#facet-body .badge {
background-color: var(--ncats-gray);
}
/* badge color in sidebar menu */
#sidebar-menu-item-count .badge {
background-color: var(--ncats-gray);
}
/* badge color in structure table */
#moiety-table .badge {
background-color: var(--ncats-gray);
}
/* change color of facet-heading infopop */
#facet-heading .info-pop {
color: var(--bootstrap-blue) !important;
}
.btn-url {
font-weight: bold;
padding: 0;
background: unset;
color: var(--bootstrap-blue);
outline: 0;
}
.btn-url:active,
.btn-url.active.focus,
.btn-url.active:focus,
.btn-url.focus,
.btn-url:active.focus,
.btn-url:active:focus,
.btn-url:focus {
-webkit-box-shadow: unset;
box-shadow:unset;
font-weight: bold;
padding: 0;
background: unset;
outline: 0;
}
.btn-url:hover {
color: var(--dark-gray);
}
#h-menu {
background-color: white;
z-index: 1000;
height: 50px;
}
#h-menu > div > ul > li > a,
#h-menu > div > ul > li > ul > li > a{
color: var(--ncats-purple);
font-size: 16px;
}
/* separate size for first-level child */
#h-menu > div > ul > li > a{
font-size: 18px;
font-weight: bold;
}
/* active button on horizontal menu same color as bg */
#h-menu > div > ul > li.active > a{
background-color: white;
}
#h-menu > div > ul > li > a:not(.loupe,.close-loupe):hover,
#h-menu > div > ul > li > ul > li > a:not(.loupe,.close-loupe):hover
{
background-color: var(--ncats-purple-15);
}
/* open dropdown menu */
#h-menu .dropdown.open>a {
background-color: var(--ncats-purple-15);
}
/* fix horizontal menu to top */
.fix2top {
position: fixed;
left: 50%;
top: 0%;
transform: translateX(-50%);
box-shadow: 0px 4px 10px 0 rgba(140, 140, 140, 0.7);
}
#menu {
/*border-bottom: var(--ncats-purple) 1px solid;*/
background-color: white;
}
/* avoid problems related to small screens */
@media (max-width: 768px){
.fix2top{
left:unset;
transform:unset;
width:100%;
min-width: 500px;
}
}
.landing-counts {
font-weight: bold;
}
#hide-filters {
margin-bottom: 10px;
}
#h-menu #menubar {
display: none;
}
#h-menu #main-menu-search {
vertical-align: unset;
height: unset;
}
#h-menu #loading-suggest {
height: unset;
}
#h-menu #search-bar {
min-width: 240px;
}
@media (max-width: 574px) {
#h-menu #search-bar {
width: 390px;
}
}
@media (min-width: 575px) and (max-width: 630px) {
#h-menu #search-bar {
width: 450px;
}
}
@media (min-width: 631px) and (max-width: 705px) {
#h-menu #search-bar {
width: 500px;
}
}
.fix2top#h-menu a.loupe,
.fix2top#h-menu a.close-loupe
{
padding: 5px 10px 5px 10px;
font-size: 24px;
margin: 0;
}
/* do not allow margin adjustment in IE */
@supports not (-ms-high-contrast: none) {
#h-menu #menubar ul{
margin: 7.5px 0;
}
}
@media (min-width: 768px){
.ie #h-menu #menubar ul .hidden-md{
margin: 7.5px 0;
}
}
/* drop-down menu content */
#hmenu-butt-wrap .dropdown-menu {
position: absolute;
background: white;
box-shadow: 0px 4px 10px 0 rgba(140, 140, 140, .7);
}
/* make the buttons span all the way to the bottom of the menu */
#hmenu-butt-wrap .navbar-nav {
margin-bottom: 0;
}
#search {
min-width: 240px;
}
a#card-title.button,
a#card-title:focus,
a#card-title:hover {
text-decoration: none;
outline:0;
}
#devstatus {
margin-bottom:5px;
}
.rancho-datatable uib-tab-heading {
color: var(--ncats-purple);
/* font-weight: normal; */
font-size: 16px;
}
.rancho-datatable .nav-tabs>li.active>a,
.rancho-datatable .nav-tabs>li.active>a:focus,
.rancho-datatable .nav-tabs>li.active>a:hover{
border: 2px solid var(--ncats-purple-50);
border-bottom-color: transparent;
background-color: white;
}
.rancho-datatable .nav-tabs {
border-bottom: 2px solid var(--ncats-purple-50);
}
.rancho-datatable .nav-tabs>li {
margin-bottom: -2px;
}
.rancho-datatable .nav-tabs>li>a:hover {
border-color: var(--ncats-purple-15);
/* border-bottom-color: var(--ncats-purple-50); */
}
.rancho-datatable .nav>li>a:focus,
.rancho-datatable .nav>li>a:hover {
background-color: var(--ncats-purple-15);
}
/* main content pagination button text color */
.pagination > li > a,
.pagination > li > a:hover {
color: var(--dark-gray);
}
/* datatables in substance details pagination style */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
color: var(--dark-gray) !important;
border: 1px solid #979797 !important;
background: white !important;
}
#content .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
color: var(--dark-gray) !important;
border: 1px solid #eee;
background: #eee;
}
#content .dataTables_wrapper .dataTables_paginate .paginate_button:active{
box-shadow: none;
}
.min200 {
min-width: 200px;
}
/*
* this is to ensure correct rendering of datatables
* that are narrower than the width of the card
*/
.table.dataTable {
width: 100% !important;
}
/* this is for the modifications card titles */
#modifications-title-wrapper {
width: fit-content;
margin-bottom: 20px;
}
div#modifications-title-wrapper:not(:first-child) {
margin-top: 30px;
}
.dataTables_length>label {
font-weight: normal;
}
/* moved from ginas.css */
.custom-popup-wrapper {
position: absolute;
top: 100%;
left: 0;
z-index: 3000;
display: none;
background-color: white;
width: 150% !important;
box-shadow: 0px 4px 10px 0 rgba(140, 140, 140, 0.7);
/* this is to overlap typeahead with search box */
margin-top: -5px;
margin-left: -5px;
}
/* moved from ginas.css */
.list-item {
padding-top: 15px;
padding-bottom: 15px;
}
/* moved from ginas.css */
.list-group-item.row {
border: none;
padding-bottom: 0;
padding-top: 0;
margin-top:5px;
width: 99%;
margin-left: 0;
padding: 0;
}
select#SortBy {
border: 1px solid #ccc;
box-shadow: none;
}
/* This is to prevent popups from being covered by the datatable headers */
.dataTables_scrollBody{
overflow: initial !important;
}
.panel-body.additional-data {
overflow: visible;
}
/* PAY ATTENTION -- COLOR VARIABLES ARE AT THE TOP OF THIS DOC! */
.condensed-word {
letter-spacing: -6px;
}
.infopop-sources a{
padding-left: 20px;
}
.infopop-sources {
white-space: nowrap;
max-width: 350px;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: normal;
}
.infopop-line-value {
font-weight: bold;
}
.infopop-padded {
padding-left: 20px;
padding-bottom: 10px;
}
.collapsible {
cursor: pointer;
}
.collapsible.active > .section-bar,
.collapsible:hover > .section-bar {
background-color: var(--ncats-purple-15);
}
.content {
display: none;
}
.collapsible > .section-bar::after {
content: '\002B';
font-weight: bold;
float: right;
margin-left: 5px;
}
.collapsible.active > .section-bar::after {
content: "\2212";
}
.margin-top-15 {
margin-top: 15px;
}
.page-title {
color: var(--ncats-purple);
}
.page-intro-text {
padding-bottom: 20px;
font-size: medium;
}
.nostyle-padded a:focus, .nostyle-padded a:hover {
text-decoration: none !important;
}
