/* ----- MEDIA ----- */
@media (max-width: @screen-xs-max) {
    .text-xs-left { text-align: left; }
    .text-xs-right { text-align: right; }
    .text-xs-center { text-align: center; }
    .text-xs-justify { text-align: justify; }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: @screen-md-min)  and (max-width: @screen-md-max) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: @screen-lg-min) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}

.rotate90 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.text-justify { text-align: justify; }
html, body {
    /*#2C3539; #D3D3D3; 353a40; 4C4646; 6D7B8D; D3D3D3; 428bca; 483C32; 797f84  797f84 708090 */
    background-color:#ffffff;  
    /*background-image:url("/images/background.png");
    background-attachment: fixed;*/
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;

    position:relative;
    display: inline-table;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    padding-bottom: 0px; 
    font-family: "Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,"Helvetica Neue",Arial, sans-serif;
}


.seqFocus{
    background-color: red !important;
}

/* ----- MAX WIDTH OF ELEMENT ----- */
.maxWitdh {
    max-width: 1700px;
}

/* ----- ALIGNMENT ----- */
.centered {
    margin-left: auto !important;
    margin-right: auto !important;
}

.centeredPadding {
    padding-left: auto !important;
    padding-right: auto !important;
}

.middle, .middle table, .middle thead, .middle tbody, .middle th, .middle td, .middle div {
    margin-top: auto !important;
    margin-bottom: auto !important;
    padding-top: auto !important;
    padding-bottom: auto !important;
    vertical-align:middle!important; 
    text-align:center!important;
}

.middled {
    margin-top: auto !important;
    padding-top: auto !important;
    margin-right: auto !important;
    padding-right: auto !important;
    margin-bottom: auto !important;
    padding-bottom: auto !important;
    margin-left: auto !important;
    padding-left: auto !important;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

.container-fixed {
    margin: auto !important;
    /*width: 970px;
    max-width: none !important;*/
    max-width: 1700px;
}

.justify{
    text-align: justify;
    text-justify: inter-word;
}

.text-center > thead > tr > th {
  text-align: center;
}

/* ----- MARGIN ----- */
.margin-0 {margin:  0px !important;}
.margin-xs{margin:  5px !important;}
.margin-sm{margin: 10px !important;}
.margin-md{margin: 15px !important;}
.margin-lg{margin: 20px !important;}
.margin-xl{margin: 25px !important;}
.margin-top-0 {margin-top:  0px;}
.margin-top-xs{margin-top:  5px;}
.margin-top-sm{margin-top: 10px;}
.margin-top-md{margin-top: 15px;}
.margin-top-lg{margin-top: 20px;}
.margin-top-xl{margin-top: 25px;}
.margin-bottom-0 {margin-bottom:  0px;}
.margin-bottom-xs{margin-bottom:  5px;}
.margin-bottom-sm{margin-bottom: 10px;}
.margin-bottom-md{margin-bottom: 15px;}
.margin-bottom-lg{margin-bottom: 20px;}
.margin-bottom-xl{margin-bottom: 25px;}
.margin-bottom-xxl{margin-bottom: 200px;}
.margin-left-0 {margin-left:  0px;}
.margin-left-xs{margin-left:  5px;}
.margin-left-sm{margin-left: 10px;}
.margin-left-md{margin-left: 15px;}
.margin-left-lg{margin-left: 20px;}
.margin-left-xl{margin-left: 25px;}
.margin-right-0 {margin-right:  0px;}
.margin-right-xs{margin-right:  5px;}
.margin-right-sm{margin-right: 10px;}
.margin-right-md{margin-right: 15px;}
.margin-right-lg{margin-right: 20px;}
.margin-right-xl{margin-right: 25px;}

/* ----- PADDING ----- */
.padding-0 {padding:  0px !important;}
.padding-xs{padding:  5px !important;}
.padding-sm{padding: 10px !important;}
.padding-md{padding: 15px !important;}
.padding-lg{padding: 20px !important;}
.padding-xl{padding: 25px !important;}
.padding-top-0 {padding-top:  0px;}
.padding-top-xs{padding-top:  5px;}
.padding-top-sm{padding-top: 10px;}
.padding-top-md{padding-top: 15px;}
.padding-top-lg{padding-top: 20px;}
.padding-top-xl{padding-top: 25px;}
.padding-bottom-0 {padding-bottom:  0px;}
.padding-bottom-xs{padding-bottom:  5px;}
.padding-bottom-sm{padding-bottom: 10px;}
.padding-bottom-md{padding-bottom: 15px;}
.padding-bottom-lg{padding-bottom: 20px;}
.padding-bottom-xl{padding-bottom: 25px;}
.padding-left-0 {padding-left:  0px;}
.padding-left-xs{padding-left:  5px;}
.padding-left-sm{padding-left: 10px;}
.padding-left-md{padding-left: 15px;}
.padding-left-lg{padding-left: 20px;}
.padding-left-xl{padding-left: 25px;}
.padding-right-0 {padding-right:  0px;}
.padding-right-xs{padding-right:  5px;}
.padding-right-sm{padding-right: 10px;}
.padding-right-md{padding-right: 15px;}
.padding-right-lg{padding-right: 20px;}
.padding-right-xl{padding-right: 25px;}

/* ----- Specific DIV ----- */
.full-width-div {
    width: 100vw;;
}

strong {
   font-weight: bold;
}


.redimensionnable {
    resize: both;
    overflow: scroll;
}

.size0 {
    height: 0%;
    width: 0%;
}

textarea { 
    resize: none; 
}


.container {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.content {
    text-align: center;
    display: inline-block;
}

.title {
    font-size: 96px;
    margin-bottom: 40px;
}

.quote {
    font-size: 24px;
}

.homestring {
    font-size: 96px;
    margin-bottom: 40px;
    text-align: center;
}

/*Selec2 aria-disabled*/
[aria-disabled] {
    color: #B0B0B0 !important;
    font-weight: bold;
}

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
    /* inline-block space fix */
    /*margin-right:-4px;*/
}

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    text-align:left;
    /* margin-left: auto; margin-right: auto; */
}

.has-error.select2 {
    border: 1px solid #a94442;
    border-radius: 4px;
}

/* ----- HEADER ----- */
header, header .navbar.navbar-static-top.navbar-inverse {
  width: 100%;
  min-height: 50px;
  margin: 0;
}

@media screen and (min-width: 768px) and (max-width: 845px){
  .textSPE {
    font-size: 0 !important;
  }
}


/*
@media screen and (min-width: 950px){
  #navBar {
      min-width: 70% !important;
  }
}
*/
/*
#navBar ul li a span{
  font-size: 1.8rem !important;
}
.textSPE {
  font-size: 1.5rem !important;
}


@media screen and (min-width: 768px) and (max-width: 860px){
  #navBar ul li a span{
    font-size: 1.4rem !important;
  }
  .textSPE {
    font-size: 0 !important;
  }
}

@media screen and (min-width: 861px) and (max-width: 950px){
  #navBar ul li a span{
    font-size: 1.5rem !important;
  }
  .textSPE {
    font-size: 1rem !important;
  }
}

@media screen and (min-width: 951px) and (max-width: 991px){
  #navBar ul li a span{
    font-size: 1.5rem !important;
  }
  .textSPE {
    font-size: 1rem !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px){
  #navBar ul li a span{
    font-size: 1.2rem !important;
  }
  .textSPE {
    font-size: 1rem !important;
  }
}

nav ul.dropdown-menu {
  width: 100%;
  color:black;
  font-size: 1em !important;
}
*/


/* ----- CAROUSEL ----- */
.carousel-inner > .item {
  height: 350px;
  background-color: #970000;
}

.carousel-caption p {
  margin-bottom: 40px;
  font-size: 21px;
  line-height: 1.4;
}

.carousel {
  height: 350px;
  margin-bottom: 30px;
}

.carousel-control {
  z-index: 1;
}



/* ----- BODY BAND ----- */
#bodyBand {
  background-color: #970000;
  width: 100%;
  height: 60px !important;
  
  margin-bottom: 15px;
  padding-top: 15px;
  
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 2rem !important;
  text-align: left;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}


/* ----- FOOTER ----- */
footer {
    position:absolute;
    height: 80px !important;
    max-height: 120px !important;
    width:  100%;
    margin: 0px;
    padding: 0px;
    left: 0px; 
    right: 0px;
    bottom: 0px;
}

.footer {
    margin: 0px;
    padding: 0px;
    left: 0px; 
    right: 0px;
}


/* ----- BODY CONTENT ----- */

#bodyContent {
  /*max-width: 1700px;*/
  margin-top: 30px !important; /*20px;*/
  margin-bottom: 110px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#navigation {
    background-color:#F5F5F5;
}

#navigation a { 
    color: black; 
}

#navigation a:hover { 
    background-color:#56739A;
    font-size:100%;
}

.img-circle:hover {
  -moz-box-shadow: 0 0 10px #CCC;
  -webkit-box-shadow: 0 0 10px #CCC;
  box-shadow: 0 0 10px #CCC;
}

.btn-circle {
  text-align: center;
  padding: 2rem;
  line-height: 1.428571429;
  border-radius: 5rem;
}
.btn-circle.btn-md {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  line-height: 1.33;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}
.btn-circle.btn-home {
  width: 10rem;
  height: 10rem;
  padding: auto !important;
  padding-top: 2rem !important;
  font-size: 5rem;
  border-radius: 25rem;
  background-color: #F2F2F2;
  color: #22BBEA;
}

.btn-circle.btn-home:hover {
  -moz-box-shadow: 0 0 10px #CCC;
  -webkit-box-shadow: 0 0 10px #CCC;
  box-shadow: 0 0 10px #CCC;
}

/* PANEL */

.panel-dark {
  border-color: #cdcdcd;
}
.panel-dark > .panel-heading {
  color:  #2C3539 !important;
  text-shadow: 0 1px 2px rgba(255,255,255, 1);
  background-color: #cdcdcd;
  border-color: #cdcdcd;
  border-image-outset:0px;
  border-image-repeat:stretch;
  border-image-slice:100%;
  border-image-source:none;
  border-image-width:1;
}
.panel-dark > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #cdcdcd;
}
.panel-dark > .panel-heading .badge {
  color: #cdcdcd;
  background-color: #fff;
}
.panel-dark > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #cdcdcd;
}


/* ----- POPOVER ----- */
.popover {
  min-width : 280px !important;
  max-width : 500px !important;
  color : black;
}

.popover-title {
    background-color:#00457c;
    color: white;
    font-size:80%;
}
.popoverUL {
    font-size:80%;
    font-family: "Courier New";
    color: black;
    padding-left: 10%;
    white-space:nowrap;
}


a[aria-expanded=true] .glyphicon-collapse-down {
   display: none;
}
a[aria-expanded=false] .glyphicon-collapse-up {
   display: none;
}

/* ----- Div Loader ----- */
.container-loading-background{
  background-image: url("/images/loading1.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.container-loading{
  
  /*background-color:#d3d3d3;*/
  background-color:rgba(204, 204, 204, 0.4);
  background-image:
    -webkit-linear-gradient(
    -45deg,
    rgba(200, 204, 204, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(200, 204, 204, 0.4) 50%,
    rgba(200, 204, 204, 0.4) 75%,
    transparent 75%,
    transparent
  );
  background-image:
    -moz-linear-gradient(
    -45deg,
    rgba(200, 204, 204, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(200, 204, 204, 0.4) 50%,
    rgba(200, 204, 204, 0.4) 75%,
    transparent 75%,
    transparent
  );
  background-image:
    -ms-linear-gradient(
    -45deg,
    rgba(200, 204, 204, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(200, 204, 204, 0.4) 50%,
    rgba(200, 204, 204, 0.4) 75%,
    transparent 75%,
    transparent
  );
  background-image:
    linear-gradient(
    -45deg,
    rgba(200, 204, 204, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(200, 204, 204, 0.4) 50%,
    rgba(200, 204, 204, 0.4) 75%,
    transparent 75%,
    transparent
  );

  -webkit-background-size:20% 20%;
  -moz-background-size:20% 20%;
  -ms-background-size:20% 20%;
  background-size:20% 20%;
  -webkit-animation:move 2s linear infinite;
  -moz-animation:move 2s linear infinite;
  -ms-animation:move 2s linear infinite;
  animation:move 2s linear infinite;

  overflow: hidden;
  -webkit-box-shadow:inset 0 5% 0 rgba(255,255,255,.2);
  -moz-box-shadow:inset 0 5% 0 rgba(255,255,255,.2);
  -ms-box-shadow:inset 0 5% 0 rgba(255,255,255,.2);
  box-shadow:inset 0 5% 0 rgba(255,255,255,.2);
}

/* ----- Spinners Loader ----- */
.loader {
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ----- SEQ VIEWER ----- */
#sequence-viewer div.fastaSeq * {
  font-family: "Courier New";
}

.sequence {
  font-family:Courier, monospace !important; 
  white-space:nowrap !important;
}


@include media-breakpoint-up(sm) {
  .sequence {
    font-size: 16px !important;
  }
}

@include media-breakpoint-up(md) {
  .sequence {
    font-size: 20px !important;
  }
}

@include media-breakpoint-up(lg) {
  .sequence {
    font-size: 28px !important;
  }
}


/* ----- TABLE ----- */
.break-all-td {
  width:100px; 
  word-wrap: break-word;
  word-break: break-all;
}

.break-all {
  word-break: break-all;
  word-wrap: break-word !important;
}

.nowarp {
  white-space:nowrap !important;
}

table, th, td, tr {
    text-align: center;
    vertical-align: middle;
}


table.dataSentTable *{
    text-align: left;
}

table.subTableMatches, table.subTableMatches th, table.subTableMatches td{
  border:1px solid #ddd !important;
  vertical-align: middle !important;
  text-align: center !important;
}

table.results_table *,
table.results_table_sub * {
  color: black;
}

table.results_table th,
table.results_table tr,
table.results_table td,
table.results_table_sub th,
table.results_table_sub tr,
table.results_table_sub td {
  border:1px solid #ddd !important;
  vertical-align: middle !important;
  text-align: center !important;
  color: black;
}


table.results_table thead>tr:first-child>th:first-child,
table.results_table tbody>tr>td:first-child,
table.results_table_sub thead th:first-child,
table.results_table_sub tbody td:first-child {
  width: 10px !important;
}

/*
table.results_table th > span,
table.results_table_sub th> span {
  padding-left: 5px;
}
*/

.divSubTable, .results_table_sub {
  padding: 0px !important;
  margin: 0px !important;
}
.divSubTable{
  padding-left: 3em !important;
}

.child, .subTable {
  margin: 0px !important;
  padding: 0px !important;
  border: 0px !important;
}


.oddTable *{
  background-color: #FAFAFA !important;
}

.evenTable *{
  background-color: white !important;
}