@charset "utf-8";
body {
	background-color: #ffffff;
}

.text-lg
{
  color: #808080;

}

.txt-collapsable  {
   transition: all 0.05s;
}

.txt-collapsable.collapse:not(.show) {
   display: inline-block;
   height: 7.5em !important;
   overflow: hidden;
}

.txt-collapsable.collapsing {
   height: 7.5em !important;
}

.img-responsive  {

   object-fit: contain;
   max-width:100%;
   height: auto;
   max-height: 120%
}




th.seq-filter :hover  {

   background-image: url("/static/img/table_bg.svg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   cursor: pointer;
}

th.seq-filter > div :hover {
   background-image: none;
}

.motif-crop  {
   overflow: hidden;
   padding-left: 0;
   padding-right: 0;
   padding-bottom: -5px;
}

.motif-crop > img {
   margin: -5px -5px -5px -5px;
   height: 35px;
}

.overlay {
   height: 0%;
   width: 100%;
   position: fixed; /* Stay in place */
   z-index: 2000; /* Sit on top */
   left: 0;
   top: 0;
   background-color: rgb(0,0,0); /* Black fallback color */
   background-color: rgba(0,0,0,0.7); /* Black w/opacity */
   overflow-x: hidden; /* Disable horizontal scroll */
   transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the close button (top right corner) */
.btnOverlay {
   position: absolute;
   top: 0px;
   right: 10px;
   cursor: pointer;
}


.overlay-button  {
  	color: #818181;
   font-size: 50px;
}
.overlay-button:hover, .overlay-button:focus {
   color: #606060;
	text-decoration: none;
}

/* Position the content inside the overlay */
.overlay-content {
   position: relative;
   top: 15%;
   border-radius: 25px;
   background-color: white;
   padding-top: 5em;
   padding-bottom: 5em;
   text-align: center;
   margin-top: 15%;
}


#overlay-main  {
   font-size: 24px;
}



.text-small  {

	font-size: 75%;
}

.text-med  {
	font-size: 90%;
}

.text-large  {

	font-size: 150%;
}


.kinase-table  {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.col-pad-left  {
   padding:0 15px;
}

.motif-checkbox  {
   cursor: pointer;
}
/*
.motif-yes  {
   width: 10px;
   height: 10px;
	cursor: pointer;
	background-image:  url('images/circle.png');
   background-repeat: no-repeat;
   background-position: center;
}

.motif-no  {
   width: 10px;
   height: 10px;
	cursor: pointer;
	background-image:  url('images/circleNo.png');
   background-repeat: no-repeat;
   background-position: center;
}
*/


.vertical-high {
  min-height: 60%;
  min-height: 60vh;

  display: flex;
  align-items: center;
}

.img-link  {
   cursor:pointer;
}


@keyframes fadeInOut  {
   0%   {  opacity:1;  }
   20%  {  opacity:1;  }
   80%  {  opacity:0;  }
   100% {  opacity:0;  }
}

@keyframes fadeInOutFast  {
   0%   {  opacity:1;  }
   40%  {  opacity:1;  }
   60%  {  opacity:0;  }
   100% {  opacity:0;  }
}

.img-bounce  {
  margin: 0 auto;
  position: relative;
}

.img-bounce img  {
  width: 100%;
  height: auto;
  left: 0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}


.img-bounce img.img-bounce-top {
   animation-name: fadeInOut;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-duration: 3s;
   animation-direction: alternate;
}