/* 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;
}

.alert-banner {
    color: var(--ncats-purple);
    font-size: larger;
    background-color: white;
    text-align: center;
    align-content: center;
    padding: 15px;
}

.alert-banner button {
    font-size: revert;
    color: white;
    background-color: var(--ncats-purple);
}

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;
}