/*Cookie Consent Begin*/
#cookieConsent {
	background-color: #f9f9f9;
    color: rgb(0, 0, 0);
	border-color: rgb(85, 85, 85);
	border-radius: 4px;
	bottom: 4.15em;
	left: 1em;
    flex-direction: column;
    max-width: 24em;
	padding: 1.5em;	
	border-width: 1px;
	border-style: solid;
    border-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
    font-family: inherit;
    font-size: 16px;
	line-height: 1.5em;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    overflow: hidden;
    position: fixed;
    transition: all 10s ease;
	z-index: 9999;
	opacity: 1;
}
#cookieConsent a {
    color: #666;
	opacity: 1;
	/*display:inline !important;*/
	font-weight: bold;
}
#closeCookieConsent {
    
    display: inline-block;
    cursor: pointer;
    height: 30px;
    width: 30px;
    margin: -10px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #666;
}
#cookieConsent a.cookieConsentOK {
	color:  rgb(246, 246, 246);
	background-color: rgb(85, 85, 85);
	display: block;
    font-size: .9em;
    font-weight: 700;
    padding: .4em .8em;
    text-align: center;
    white-space: nowrap;	
	cursor: pointer;	
}

#cookieConsent a.cookieConsentOK:hover {
    background-color: #a12900;
}
/*Cookie Consent End*/

/* Feature summary */

.item {

	height: 580px;
	overflow: hidden;
}

.carousel-fade .carousel-inner .item {
	-webkit-transition-property: opacity;
	transition-property: opacity;
  }
  .carousel-fade .carousel-inner .item,
  .carousel-fade .carousel-inner .active.left,
  .carousel-fade .carousel-inner .active.right {
	opacity: 0;
  }
  .carousel-fade .carousel-inner .active,
  .carousel-fade .carousel-inner .next.left,
  .carousel-fade .carousel-inner .prev.right {
	opacity: 1;
  }
  .carousel-fade .carousel-inner .next,
  .carousel-fade .carousel-inner .prev,
  .carousel-fade .carousel-inner .active.left,
  .carousel-fade .carousel-inner .active.right {
	left: 0;
	-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-control {
	z-index: 2;
  }
  
  /*
  Fade content bs-carousel with hero headers
  Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
  Image credits: unsplash.com
  */
  
  /********************************/
  /*       Fade Bs-carousel       */
  /********************************/
  .fade-carousel {
	  position: relative;
	  height: 100vh;
  }
  .fade-carousel .carousel-inner .item {
	  height: 100vh;
  }
  .fade-carousel .carousel-indicators > li {
	  margin: 0 2px;
	  background-color: #f39c12;
	  border-color: #f39c12;
	  opacity: .7;
  }
  .fade-carousel .carousel-indicators > li.active {
	width: 10px;
	height: 10px;
	opacity: 1;
  }
  .carousel-control.left, .carousel-control.right {
	background-image:none !important;
	filter:none !important;
 }

  /********************************/
  /*          Hero Headers        */
  /********************************/
  .hero {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  z-index: 3;
	  color: #fff;
	  text-align: center;
	  text-transform: uppercase;
	  text-shadow: 1px 1px 0 rgba(0,0,0,.75);
		-webkit-transform: translate3d(-50%,-50%,0);
		   -moz-transform: translate3d(-50%,-50%,0);
			-ms-transform: translate3d(-50%,-50%,0);
			 -o-transform: translate3d(-50%,-50%,0);
				transform: translate3d(-50%,-50%,0);
  }
  .hero h1 {
	  font-size: 6em;    
	  font-weight: bold;
	  margin: 0;
	  padding: 0;
  }
  
  
  .fade-carousel .carousel-inner .item .hero {
	  opacity: 0;
	  -webkit-transition: 2s all ease-in-out 5s;
		 -moz-transition: 2s all ease-in-out 5s; 
		  -ms-transition: 2s all ease-in-out 5s; 
		   -o-transition: 2s all ease-in-out 5s; 
			  transition: 2s all ease-in-out 5s; 
  }
  .fade-carousel .carousel-inner .item.active .hero {
	  opacity: 1;
	  -webkit-transition: 2s all ease-in-out 5s;
		 -moz-transition: 2s all ease-in-out 5s; 
		  -ms-transition: 2s all ease-in-out 5s; 
		   -o-transition: 2s all ease-in-out 5s; 
			  transition: 2s all ease-in-out 5s;    
  }
  
  /********************************/
  /*            Overlay           */
  /********************************/
  .overlay {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  z-index: 2;
	  background-color: #080d15;
	  opacity: .7;
  }
  
  /********************************/
  /*          Custom Buttons      */
  /********************************/
  .btn.btn-lg {padding: 10px 40px;}
  .btn.btn-hero,
  .btn.btn-hero:hover,
  .btn.btn-hero:focus {
	  color: #f5f5f5;
	  background-color: #1abc9c;
	  border-color: #1abc9c;
	  outline: none;
	  margin: 20px auto;
  }
  
  /********************************/
  /*       Slides backgrounds     */
  /********************************/
  .fade-carousel .slides .slide-1, 
  .fade-carousel .slides .slide-2,
  .fade-carousel .slides .slide-3 {
	height: 100vh;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
  }
  .fade-carousel .slides .slide-1 {
	background-image: url(""); 
  }
  .fade-carousel .slides .slide-2 {
	background-image: url("");
  }
  .fade-carousel .slides .slide-3 {
	background-image: url("");
  }
  
  /********************************/
  /*          Media Queries       */
  /********************************/
  @media screen and (min-width: 980px){
	  .hero { width: 980px; }    
  }
  @media screen and (max-width: 640px){
	  .hero h1 { font-size: 4em; }    
  }

/* Custom CSS for rankplot tabs */
#ndtps-list {
	display:none;
}

/* Custom CSS Directives for Bootstrap optimization */
.glyphicon.fast-right-spinner {
    -webkit-animation: glyphicon-spin-r 1s infinite linear;
    animation: glyphicon-spin-r 1s infinite linear;
}

@-webkit-keyframes glyphicon-spin-r {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes glyphicon-spin-r {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}


#orphan-selection {

	display:none;

}
.dg-1 {
	background-color:#D2222D;
}
.dg-2 {
	background-color:#FFBF00;
}
.dg-3 {
	background-color:#007000;
}

.dg-4 {
	background-color:#007000;
}

.dg-5 {
	background-color:#007000;
}

.bib-tooltip { 
	position: absolute;     
	text-align: center;               
	padding: 5px;       
	font: 12px sans-serif;    
	background: #CCC; 
	border: 0px;    
	border-radius: 8px;     
	pointer-events: none;     
  }
  .sub-ref:hover {
	opacity: 0.8;
  }
  .main-ref:hover {
	opacity: 0.8;
  }


@font-face {
    font-family: "Concert";
    src: url("/fonts/Romanica.ttf") format("truetype");
}

.mol-table {
 margin-right:20px;
}

#myScrollspy .nav li a {

	padding: 5px 15px;

}

#table-of-contents::-webkit-scrollbar-thumb
{
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #CCC;
	
}

#table-of-contents::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	border-radius: 10px;
	background-color: #F5F5F5;
	opacity:0.2
	
}

#table-of-contents::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
	opacity:0.2
	
}

.li-sub-child {

	padding: 5px 15px 5px 50px !important;

}

.btn-molport {

	background-color: #f53e00;
	color: #FFF;
}

.btn-molport:hover {

	background-color: #a12900;
	color: #FFF;
}

#molpic-network {

  float:left; 
  height:202px; 
  width:202px;   
  position:relative; 
  z-index: 1000; 
  margin-bottom:-300px; 
  top:90px; 
  right: 130px; 
  opacity: 0.7; 
  border:1px solid #CCC;  
  background-color: white;
  display:none;
  
}

.toggle-mol-icon:before{

  background: url("/static/images/drugs_icon.png") no-repeat scroll / 100% auto rgba(0, 0, 0, 0);
  background-position: 60% 60% !important;
  content: "";
  display: inline-block;
  color: #fff;
  top:2px;
  height: 30px;
  position: relative;
  top: -2px;
  vertical-align: middle;
  width: 30px;
  line-height: 30px;
  padding: 0 10px;    

}

#toggle-mol{

  padding: 1px 5px !important;
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;

}

#toggle-mol:focus{

  outline:0;

}

.toggle-mol-icon:before{

  background: url("/static/images/drugs_icon.png") no-repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
  content: "";
  display: inline-block;
  color: #fff;
  height: 30px;
  position: relative;
  top: -2px;
  vertical-align: middle;
  width: 30px;
  line-height: 30px;
  padding: 0 10px;  

}

.viewmode.view {

  color : #31708f;
  font-size:120%;

}

.viewmode.conceal {

  color : #CCC;
  font-size:120%;

}

.viewmode.hidex {

  color : #a94442;
  font-size:120%;

}


h5 {

  font-weight: bold;
  font-size:110%;
  display:block;

}

h6 {

  font-weight: bold;
  font-size:102%;
  display:block;
  color:#666;

}

.druggable {
  
  stroke: #FFF;
  stroke-width: 1pt;
  transition: opacity 0.2s;
  
}

.druggable:hover {

  opacity: 0.5;

}

.druggable.clicked {

  stroke: #666;

}

.plot-a{

  fill:#a6cee3;

} 

.plot-b {

  fill:#1f78b4;

} 

.plot-c {

  fill:#b2df8a;

}

.plot-d {

  fill:#33a02c;

  
}

.weight text {
  fill: #fff;
  font: 10px sans-serif;
}

.plot-d:hover, plot-a:hover, plot-b:hover, plot-c:hover {

  opacity: 0.8;

  
}

.bordered-text {

  
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white
}

.loading-summary img {

  position:relative;
  top:75px;

}

.td-middle {

  text-align: center;

}

th.main {

  background-color: #cbcbcb;
  border-top: 3px #cbcbcb, solid;
}

th.left,td.left {

  border-left: 3px #cbcbcb solid;

}

th.right,td.right {

  border-right: 3px #cbcbcb solid;

}

.species {

  font-style: italic;

} 

.loading-glyph {

  display: inline-block;
  color:steelblue;

}

#datasummary th {

  vertical-align: middle;
  /*border-top: 3px #CCC solid;*/

} 

#datasummary td {

  vertical-align: middle;
  
}

#datasummary {
	border-bottom:3px #ccc solid;
}

#summary-container {

  /*overflow-x:scroll;*/
  width:100%;

}

.lead {

  font-family: "Concert";

}

.sub-lead {

  font-size: 15px !important;
  font-family: "Concert";

}

.about-panel {
  padding:10px;
  /*height: 420px;*/
  overflow: hidden;
  overflow-y:auto;

}

#citing {

height: 150px;
background:url("/static/images/quote.png");
background-position: right;
background-repeat: no-repeat;
background-size: 10%;
background-position: 95%;

}


#highlights{

  font-family: "Concert", Verdana, Tahoma;

}

#drugtarget-container {

background:url("/static/images/drugtarget-bg-alpha03.png");
background-position: right;
background-repeat: no-repeat;
background-position: 125% -30%;
width:100%
}

#drugtarget-nav{

height: 450px;


}

.panel-heading {

  cursor:pointer;

}

.panel-title {

  margin: auto 10px;
  display: inline-block;


}

#drugtarget-nav svg {

  position:relative;
  top: 15%;
  left: 25%;

}

th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
  bottom:51px;
  position: relative;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(25px, 51px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
    width: 30px;
}
th.rotate > div > span {
  /*border-bottom: 1px solid #ccc;*/
  padding: 5px 15px;
}

#spacer {

  display:block;
  min-height:70px;
  

}

.featuring-banner-img {

  height:75px;
  transition: transform 1s; /* Animation */

}

.featuring-banner-img:hover {

  transform: scale(1.2);
}

.featuring-banner-p {

  height: 30px;
  font-family: "Arial";
  margin:25px auto;
  font-weight: bold;
  font-size:250%; 
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);

}

.featuring-banner-p-sub {

  height: 20px;
  font-family: "Arial";
  margin:25px auto;
  font-weight: bold;
  font-size:120%; 

}

.table-scroll {

  max-height:300px !important;
  overflow: auto !important;


}

.table-scroll td {

  vertical-align:middle;


}

.panel-body-scroll{

  max-height:500px !important;
  overflow: auto !important;

}

.panel-body-scroll-modal {


  max-height:300px !important;
  overflow: auto !important;

}

footer {

  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:70px;
  background-color:#f9f9f9;
  /*background-color:#141414;*/
  padding-top: 10px;
  color:#b7b7b7;
  font-size:90%;
  text-align:center;
  z-index:999;

} 

.sub-foo{

  min-height:60px;

  vertical-align:middle;

}

footer a {

  color:#3d3d3d;

}


.simple-form {
  display: flex;
  padding-bottom: 1.25rem;
}
.simple-form input {
  
  width: 180px;
  border: 1px solid #eee;
  border-left: 3px solid;
  border-radius: 5px;
  transition: border-color .5s ease-out;
}
.simple-form input:optional {
  border-left-color: #999;
}
.simple-form input:required {
  border-left-color: palegreen;
}
.simple-form input:invalid {
  border-left-color: salmon;
}

.input-margin {

	margin: 5px 0 5px 0;
}

.help-block{

	padding:5px;
	margin:5px;
	margin:auto;
}


.input-inlabel {

  width:250px;
  line-height: 20px;
}

.form-control input {

    
  width:100%;

}

.checkbox-label {

  display:block;


  /* test */

    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    
    color: #555;

    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px 4px 0 0px;


}

.checkbox-group {

  background-color: #FFF;
  border-radius: 0 0 4px 4px;
  border-top:0;
  padding: 6px 12px;
  margin-bottom: 0px;

}

.inline-label{
  display:inline;
  line-height: 2;
  
}


.checkbox-group input {

  margin:5px 5px 5px 10px;

}

.select-op {

    float:left;
    width:70px;
    height: 34px;
    padding: 6px 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;


}

.select-input {
    
    float:left;    
    width:25%;
    margin-bottom: 0;  
    float:left;   
    height: 34px;
    padding: 6px 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;    
    border-left:0;
    margin-bottom: 0;
    border-radius: 0 4px 4px 0px;

}

.form-tooltip{

  font-size:15px; 
  width:34px;
  height: 34px;
  text-align: center;

}

.sm-select{

  float:left;
  width:15%;
  height: 34px;
  padding: 6px 6px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0px;
  

}

.sm-select-left{

  border-radius: 4px 0 0 4px;

}

.sm-select-left{

  border-radius: 0 4px 4px 0;

}


.input-border {

  border: 1px solid #ccc;
  border-radius: 4px

}

.input-group-checkbox{

  width: 25px;
  margin: 20px 100px;
  position: relative;

}

.input-group-checkbox-label {
  
  display:block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;   
  color: #555;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0px;

}

.medium-select{

  float:left;
  width:30%;
  height: 34px;
  padding: 6px 6px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0;

}

.medium-select-right{

  float:left;
  width:30%;
  height: 34px;
  padding: 6px 6px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;

}

.large-select{

  float:left;
  width:100%;
  height: 34px;
  padding: 6px 6px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0;

}

.large-select-right{

  float:left;
  width:100%;
  height: 34px;
  padding: 6px 6px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;

}

.panel-success-sub {

  background-color:#3cb371;
  color:#FFF;

}

.checkbox-search{

  vertical-align: middle;
  padding:0.2;
  margin:0.2;
  position:relative;
  float:right;
  margin-right:15px;
  top:4px;

}

.isphy {
  float:left;
}

.sm-select-left{
  border-radius: 4px 0 0 4px;
}


#floating-search .panel{

  margin:0;
  padding:0;

}

#floating-search{

  margin:0 0 20px 0;
  padding:0;
  word-break: break-all;

}

#search_alert, #multistepform{

  word-break: keep-all;
}

#floating-search .col-md-4{

  margin:0 !important;
  padding:0 !important;

}

.checkbox-group table{

  font-size:0.7em;

}

.input-inlabel-sm{
  width:300px;
}

#search_params_div{
  padding:0;
  margin:0;
}

.inline-button-sq {
  padding: 8px 25px 8px 12px !important;  
}

.select-input-norad {
    
    float:left;    
    width:25%;
    margin-bottom: 0;  
    float:left;   
    height: 34px;
    padding: 6px 6px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;    
    border-left:0;
    margin-bottom: 0;

}

.smallinput{

  width:50px !important;

}

.inline-radio {
  line-height: 14px;padding: 10px;border: 1px #CCC solid; border-radius:4px;
}

.noresize {
  resize: none;
}

.hasop {
  width:auto;
}

iframe{
    overflow:hidden !important;
}

.powered{
  float:right;
  width: 50%;
  height: 50%;
}

.btn-margin{

  margin:5px 5px;

}

/* manual adding bootstrap 4.0 */

.list-group-flush{

  border-left: 0 !important;
  border-right: 0 !important;

}
.inline-badge {

    display: inline;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
    margin: auto 5px;

}

.mol-view {

  margin:30px;
  padding:30px;

}

.img-overlay {
  float:right;
  position: relative;  
  margin: -1px 60px 0 0;
  
  
}

.modal-header-info {
    padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #cce6ff;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
 }

 .notification {
  clear:none;
  position:relative;
  top: 25px;
  left: 40px;
  background-color:#e24f51!important; 
  font-size:70%;
  z-index:99;

 }

 /* NETWORK RELATED CSS */

 .node text {
  pointer-events: none;
  font: 10px sans-serif;  
}

text.svg-shadow {
  stroke: #fff;
  stroke-width: 4px;
}

text.svg-tooltip {
  stroke: black;
  stroke-width: 0.5; 
}

.detail-row{

  font-size: 70%;
  font-family: sans-serif;
  line-height: 70%;
  border-bottom: solid #666 2px;
  border-top: solid #666 2px;
  

}

.network-tooltip{
opacity:0.5; 
background-color:#666;
z-index:99;  
float:right;
position:relative;
bottom: 160px;
left: 10px;
padding:10px;
margin:1px;
clear:both;

}

#searchNodeInput {

  width:300px;

}

.button-tooltip{

  color:#FFF;

}

.button-tooltip:hover{

  color:#CCC;

}

#network-footnav{

  overflow: auto;
  display: inline;
}


.summary-btn{

float:left;
position:relative;
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;

}

.summary-btn:hover{

  background: #666;
  color:#FFF;

}

.summary-ul{

  width:100%;
  margin:-1px 0 0 0;
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;  
  opacity: 0.9;

}

.summary-item{

  width: 100%;

}

.li-text {

  width: 85%;
  display: inline-block;
}

.li-num {

  width: 20%;
  margin:auto;
  display:inline-block;

}

.li-num-fullrow{

  width: 17%;
  margin:auto;
  display:inline-block;

}

.borderless td, .borderless th {
    border: 0 !important;
    vertical-align: middle !important;
}

.inli-table {

  font-size:80%;
  padding-bottom:0 !important;
  margin-bottom:0 !important;

}

.smiles {

  font-family:"Lucida Console", Monaco, monospace;

}

.about-li {

  cursor:pointer;

}

about-li:hover {

  background-color: #CCC;

}


/* Additional badge colors */

.badge-error {
  background-color: #b94a48;
}
.badge-error:hover {
  background-color: #953b39;
}
.badge-warning {
  background-color: #f89406;
}
.badge-warning:hover {
  background-color: #c67605;
}
.badge-success {
  background-color: #468847;
}
.badge-success:hover {
  background-color: #356635;
}
.badge-info {
  background-color: #3a87ad;
}
.badge-info:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}