/* . => class # => id */

/* Font used for the pages */
@font-face {
  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
  font-family:'AmstelvarAlpha';
  font-style: normal;
}

/* if the page is less than 790px */
@media screen and (max-width: 790px) {
  ul.collapsable {
   position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #faecfabf;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    list-style: none;
  }

  a.head span.text {
    display: block;

  }
  a.ddown span.text {
    display: block;
  }
  span.flagdb-margin {
    margin-right: 12px;
  }


  .hamburger-icn {
    display: block;
  }



}


/* if the page is over than 790px */
@media screen and (min-width: 790px) {
  ul.collapsable {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
  }

  .hamburger-icn {
    display: none;
  }
}


/* if the page is under 1300px */
@media screen and (max-width: 1300px) {
  /* show foot icons and disable foot text */
  a.foot span.text {
    display: none;
  }
  a.foot span.icon {
    display: block;
  }

  a.head span.text {
    display: none;
  }
  a.ddown span.text {
    display: none;
  }
  span.flagdb-margin {
    margin-right: 12px;
  }



  /* font for this page */
  a,button,label {
    font-size: 8pt ;
  }

  .mi_container {
    width: calc( 100% -  var(--div-margin));
  }


}


/* if the page is over 1300px */
@media screen and (min-width: 1300px) {

  .navbar-nav .nav-link {
      padding-right: 0.5rem;
      padding-left: 0.5rem;
  }

  /* show foot text and disable foot icons */
  a.foot span.text {
    display: block;
  }
  a.foot span.icon {
    display: none;
  }

  a.head span.text {
      margin-right: 12px;
  }

  span.flagdb-margin {
      margin-right: 5px;
  }


  /* font for this page */
  a,button,label {
    font-size: 9pt ;
  }

  .mi_container {
    width: calc( 49% -  var(--div-margin));
  }



}


/* if the page is over 1280px
   the media order is very important
*/
@media screen and (min-width: 1500px) {

  a,button,label {
    font-size: 12pt ;
  }


}


/* Define global variables
*/
:root { 
  --footer-height:  35px;
  --header-height:  45px;
  --div-padding:    10px;
  --div-margin:     10px;
  --info-height:    50px;
  --title-height:   15px;
}





/* header variables */
:root,
:root.pink {
  --body-bg-color: #fff8fa;

  --header-bg-color: #FAECFA;
  --header-text-color: #E7F1FE;

  --container-title-bg: #D27893;
  --container-title-fg: #FFF4F4;

  --mi-title-bg: #FFF4F4;
  --mi-title-fg: #215968;

  --mi-container-border: #DBA1E6;

  --mi-main-container-bg: white;

  --mi-content-fg: #FEFF27;

  --tooltip-bg: #fcf2fc;

  --a-color: #BC2778;
  --icn-filter: invert(17%) sepia(89%) saturate(2827%) hue-rotate(287deg) brightness(94%) contrast(83%);

  --accordion-title-bg: #BC2778;
  --accordion-title-fg: white;

  --content-bg: #ffffff;
  --axis-background: #fff8fe;
  --footer-bg-color: #FAECFA;
  --domain-background: #fceff5;
}


:root.green {
  --body-bg-color: #fff8fa;

  --header-bg-color: #eefad5;
  --header-text-color: #E7F1FE;

  --container-title-bg: #b5d470;
  --container-title-fg: #e5f4c6;

  --mi_title-bg: #fff4f4;
  --mi-title-fg: #195969;

  --mi-container-border: #629500;

  --mi-main-container-bg: white;

  --mi-content-fg: #ffff00;

  --tooltip-bg: #dcf5c6;


  --a-color: #629500;
  --icn-filter: invert(50%) sepia(30%) saturate(6104%) hue-rotate(52deg) brightness(85%) contrast(103%);

  --accordion-title-bg: #629500;
  --accordion-title-fg: #f0f7e0;

  --content-bg: #ffffff;

  --axis-background: #f8fffc;
  --footer-bg-color: #eefad5;
  --domain-background: #f3fdea;
}


:root.orange {
    --body-bg-color: #fffcf8;

  --header-bg-color: #ffe7da;
  --header-text-color: #E7F1FE;

  --container-title-bg: #e4a27b;
  --container-title-fg: #e5f4c6;

  --mi_title-bg: #fff4f4;
  --mi-title-fg: #195969;

  --mi-container-border: #efc7af;

  --mi-main-container-bg: white;

  --mi-content-fg: #ffff00;

  --tooltip-bg: #fff4f4;

  --a-color: #eb711b;
  --icn-filter: invert(42%) sepia(87%) saturate(594%) hue-rotate(346deg) brightness(90%) contrast(96%);

  --accordion-title-bg: #eb711b;
  --accordion-title-fg: #f0f7e0;

  --content-bg: #ffffff;

  --axis-background: #fffcf8;
  
  --footer-bg-color: #ffe7da;
  --domain-background: #fdf5ea;
}



:root.blue {
  --body-bg-color: #f8f8ff;

  --header-bg-color: #d5d8fa;
  --header-text-color: #7073d4;

  --container-title-bg: #7073d4;
  --container-title-fg: white;

  --mi-title-bg: #f4f4ff;
  --mi-title-fg: #221969;

  --mi-container-border: #1e0095;

  --mi-main-container-bg: white;

  --mi-content-fg: white;

  --tooltip-bg: #d5d8fa;


  --a-color: #2c31db;
  --icn-filter: invert(18%) sepia(87%) saturate(7326%) hue-rotate(244deg) brightness(88%) contrast(95%);

  --accordion-title-bg: #090095;
  --accordion-title-fg: #f0f7e0;

  --content-bg: #ffffff;

  --axis-background: #f8ffff;

  --footer-bg-color: #d5d8fa;
  --domain-background: #eceafd;
}



/* pour les axes couleur de fond. */
path.domain {
  fill: var(--domain-background);
}
/* axe pour la recherche de motif sur le genome
*/

g#statsaxis path.domain {
  fill: none;
}



.sequence {
  font-size: 12px  !important;
}



.mi_container .container-title {
  color: var(--mi-content-fg) !important;
}


/* for all flagdb icons */
.flagdb-icons {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  filter: var(--icn-filter) ;
  transition: all 0.25s;
}



.flagdb-green {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  filter:   invert(50%) sepia(30%) saturate(6104%) hue-rotate(52deg) brightness(85%) contrast(103%);
  transition: all 0.25s;
}
.flagdb-pink {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  filter:   invert(17%) sepia(89%) saturate(2827%) hue-rotate(287deg) brightness(94%) contrast(83%);
  transition: all 0.25s;
}
.flagdb-blue {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  filter:    invert(18%) sepia(87%) saturate(7326%) hue-rotate(244deg) brightness(88%) contrast(95%);
  transition: all 0.25s;
}
.flagdb-orange {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  filter:  invert(42%) sepia(87%) saturate(594%) hue-rotate(346deg) brightness(90%) contrast(96%);
  transition: all 0.25s;
}

/* for all flagdb icons */
.check-icons {
  position: absolute;
    width: 22px;
    height: 22px;
    filter: invert(18%) sepia(57%) saturate(7288%) hue-rotate(356deg) brightness(108%) contrast(120%);
}

.check-unsel {
  display: none;
}

.check-sel {
  display: block;
}


/* Margin for non dropdownable menu */
.flagdb-margin{
  margin-right: 12px;
}
/* over flagdb-icon turn the svg */
.flagdb-icons:hover  {
    -ms-transform: rotate(17deg); /* IE 9 */
    -webkit-transform: rotate(17deg); /* Chrome, Safari, Opera */
    transform: rotate(17deg);
}

/* lamme icon specific size and position */
.footer-icn {
  height: 50px;
  position: fixed;
  bottom: 4px;
}

/* flagdb app icon */
.app-icn  {
  width: 100px;
  margin-right:10px;
  margin-left: 20px;
  filter: drop-shadow(0px 0px 12px #808088)
;}

/* INRAE icon */
.copyright-icn {
  width: 35px;
  filter: none;
}
/* END: ICONS */


/* HTML page definition
*/
html{
  height: 100%;
  margin: 0px;
  overflow:hidden;
}

/* Body Page Definition
the body position start after the header but
finish after the footer !!!
so calculate the height ... 100% - header
*/

body.zoom {
  padding: 10px;

}

body {
  height: -webkit-calc(100% - var(--header-height) - var(--div-margin));  /* Chrome */
  height: -moz-calc(100% - var(--header-height) - var(--div-margin)); /* Firefox */
  height: calc(100% - var(--header-height) - var(--div-margin));     /* native */
  margin: 0px;
  background-color: var(--body-bg-color);
  font-family: sans-serif;
}

/* Header definitions
fixed position to the top.
*/
header {
  position: fixed;
  width: 100%;
  height: var(--header-height);
  min-height: var(--header-height);
  top: 0;
  left: 0;
  background-color: var(--header-bg-color);
  color: white;
  vertical-align: middle;
}






/* CSS for Menus */
.header-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* UL element that used for a navbar
*/
ul.navbar {

    list-style: none;
    padding-right: .5rem;
    padding-left: .5rem;
}

input.form-control {
    padding: .375rem .75rem;
    line-height: 1.5;
    border: 1px solid #a6a6a6;;
    appearance: none;
    border-radius: .25rem;
    margin: 3px;
}

select.form-select {
  padding: .375rem .75rem;
  line-height: 1.5;
  border: 1px solid #a6a6a6;;
  appearance: none;
  border-radius: .25rem;
  margin: 3px;
}



textarea.form-control {
  padding: .375rem .75rem;
  line-height: 1.5;
  border: 1px solid #a6a6a6;;
  appearance: none;
  border-radius: .25rem;
  margin: 3px;
  font-size: 10px;
}
/* Menus
*/

/* little arrow for dropdown menu
*/

.ddown::after {
      display: inline-block;
      vertical-align: .255em;
      content: "";
      margin-right: 8px;
      border-top: .3em solid;
      border-right: .3em solid transparent;
      border-bottom: 0;
      border-left: .3em solid transparent;
}


ul.ddown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    padding: .5rem .5em;
    list-style: none;
    background-color: #fff;
    /*border: 1px solid var(--accordion-title-bg);*/
    border-radius: .25rem;
    box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 54%);
}

ul.show {
  display: block;
}

a.ddown-item  {
  display: block;
  width: 100%;
  padding: .25rem 0;
  white-space: nowrap;
  background-color: transparent;
  color: black;
  border: 0;
}

a.ddown-item:hover {
    color: #1e2125;
    background-color: yellow; /* #e9ecef; */
}

/* for submenu decal on the rigth */
.ddown-menu .ddown-menu  {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
/* Little arrow for sub-menus
*/
.ddown-submenu::after {
  display: block;
  left: 100%;
  float: right;
  content: "";
  border-color: transparent;
  border-left-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #4e4e4e;
  box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 54%);
  /* margin-right: -10px; */
  margin-top: 5px;
}

.context-submenu::after {
  display: block;
  left: 100%;
  float: right;
  content: "";
  border-color: transparent;
  border-left-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #4e4e4e;
  /* margin-right: -10px; */
  margin-top: 5px;
}
ul.context-linkmenu {
  position: absolute;
  display: none;
  margin-left: 66px;
  margin-top: -8px;
  text-align: center;
  padding: 2px;
  font: 14px sans-serif;
  background: #bec3f5;
  border-radius: 8px;
  z-index: 9200;
  filter: brightness(110%);
}


button.header-btn {
    border: 0;
    -webkit-box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
    margin: 5px;
    padding: .375rem .75rem;
    cursor: pointer;
  /*  background-color: transparent;*/
    border-radius: .25rem;
}

button.header-btn:hover {
  background-color: #77d06a;
}
button.cancel:hover {
  background-color: #fcacb1;
}

a.edit {
  color: #fc3d4a;
  stroke: #ff3f4c;
}

/* Main contener
set a margin top to be under the header and
set the height to 100%-footer -header - Margin
*/
.main_container {
    background-color: #c7c7c5;
    /* border-color: var(--mi-container-border); */
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-radius: 10px 5px 10px 5px; */
    /* box-shadow: 3px 3px 3px black; */
    margin-top: calc( var(--header-height));
    /* margin-left: 10px; */
    /* margin-right: 10px; */
    /* margin-bottom: 10px; */
    /* margin-top: calc( var(--header-height)); */
    padding: 5px;
    min-height: calc(100% - ( var(--footer-height) +var(--div-margin) ) + 10px);
    height: calc(100% - ( var(--footer-height) + var(--div-margin) ) + 10px);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
/*
.main_container {
  background-color: #f8f9fa;

  border-color: var(--mi-container-border) ;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px 5px 10px 5px;
  box-shadow: 3px 3px 3px black;

  margin-top: calc( 10px + var(--header-height));
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  min-height: calc(100% -
    ( var(--footer-height) +
      var(--header-height) - var(--div-margin)
    ));
  height: calc(100% -
      ( var(--footer-height) +
        var(--header-height) - var(--div-margin)
      ));

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
*/


.zoom_main_container {
  background-color: #f8f9fa;
/*  border-color: var(--mi-container-border) ;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px 5px 10px 5px;
  box-shadow: 3px 3px 3px black;
*/
  margin-top: 10px;
/*  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;


 margin-top: calc( var(--header-height));*/
/*  padding: 10px;
*/
  min-height: 100%;
  height: 100%;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


.container {
  background-color: white;
  /* border-color: var(--mi-container-border); */
  /* border-width: 1px; */
  /* border-style: solid; */
  border-radius: 5px 5px 5px 5px;
}

.container_title {
  border-radius: 5px 5px 0 0;
  padding: 0.15rem 0.15rem;
  background-color: var(--container-title-bg) ;
  color: var(--container-title-fg);
  /*display: flex;*/
  text-align:center;
  height: var(--title-height);
  justify-content: space-around;
  align-items: center;
}

/* MOREINFO*/
.mi_main_container {
    background-color: var(--mi-main-container-bg);
    border-color: var(--mi-container-border);
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-radius: 5px 5px 5px 5px; */
    /* box-shadow: 3px 3px 3px black; */
    margin-top: calc( var(--header-height));
    /* margin-left: 4px; */
    /* margin-right: 4px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: calc( var(--header-height)); */
    /* padding: 10px; */
    min-height: calc(100% - ( var(--footer-height) + var(--header-height) ));
    height: calc(100% - ( var(--footer-height) ));
}
/*
  background-color: var(--mi-main-container-bg);
  border-color: var(--mi-container-border) ;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 3px 3px 3px black;
  margin-top: calc( 10px + var(--header-height));
  margin-left: 4px;
  margin-right: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  min-height: calc(100% -
      ( var(--footer-height) +
        var(--header-height) - var(--div-margin)
      ));

  height: calc(100% -
     ( var(--footer-height) +
       var(--header-height) - var(--div-margin)
    ));
}
*/

.mi_main_body_container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.mi_main_title_container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mi_title {
  font-family: sans-serif;
  font-size: 12pt ;
  background-color: var(--mi-title-bg);
  color: var(--mi-title-fg);
  padding: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.mi_body {
  font-family: sans-serif;
  font-size: 12pt ;
  line-height: 1.5;
  font-weight: normal;
  font-style : normal;
  text-anchor: middle;
  background-color: #fffff4;
  color: #2390b4;
  padding: 10px;
  margin-bottom: 10px;
  align-items: center;
}

.mi_container {
  border-color: var(--mi-container-border) ;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 3px 3px 3px #cccccc;
  margin: var(--div-margin);
  background-color: #fffff4;
}

.mi_container-title {
  width: 450px;
  background-color: var(--mi-title-bg);
  border-color: var(--mi-container-border) ;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px 5px 10px 5px;
  box-shadow: 3px 3px 3px #a7a7a7;
  margin: 10px;
}

.mi_container-list-title {
  width: 800px;
  background-color: #f6ffb3;
  border-color: var(--mi-container-border) ;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px 5px 10px 5px;
  box-shadow: 3px 3px 3px #a7a7a7;
  margin: 10px;
}


.mi_container-title-body {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.mi_container td {
  vertical-align: top;
}
td.trot{
    border-left: 1px solid #ccc;
    height:20px;
}
th.rotate {
  /* Something you can count on */
  height: 140px;
  white-space: nowrap;
}

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

tr.highlight {
  color: red;
  background-color: #e9c1c1 !important;
}

.header-fixed {
    width: 100%
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block; 

}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;

}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {

    float: left;
}


/* Clean up the lists styles */
ul.accordion {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}


div.content {
  background-color: var(--content-bg);
   border-color: var(--mi-container-border);
 /*  border-style: solid;
    border-width: 1px;
*/
}

/* Hide the radio buttons */
/* These are what allow us to toggle content panes */
ul.accordion label + input[type='checkbox'] {
    display: none;
}
/* Show the content boxes when the radio buttons are checked */
ul.accordion label + input[type='checkbox']:checked + div.content {
    display: flex;
}

/* Give each content pane some styles */
ul.accordion li {
    background-color: #b18ab2;
    border-bottom: 1px solid #DDDDDD;
}

/* Make the main tab look more clickable  */
ul.accordion label {
    background-color: var(--accordion-title-bg);
    color: var(--accordion-title-fg);
    display: block;
    padding: 10px;
}

ul.accordion label:hover {
    cursor: pointer;
}

/* Set up the div that will show and hide */
ul.accordion div.content {
    overflow: hidden;
    flex-direction: row;
    flex-wrap: wrap;
    display: none;

}


.header-fixed tbody tr:nth-child(even)
{
  background: #fdfff3;
}

.header-fixed  tbody tr:nth-child(odd)
{
  background: #fcf2fc;
}

.header-fixed  tbody tr:hover {
  background: #fdcfad;
  font-size: larger;
}


/* END MOREINFO*/

/* physical map container */
.physical {
  width: calc(100% * 3 / 4 - 10px);
  height: calc(100% - var(--info-height) ); /* - var(--div-margin));*/
}

/* genome map container   */
.genome {
  width: calc(100% * 1 / 4 - 5px);
  height: calc(100% - var(--info-height) ); /* - var(--div-margin));*/
}

/* Zoom View */
.zoom {
  width: calc(100% - 20px);
  height: calc(100% - var(--info-height) ); /* - var(--div-margin));*/
}
div#ZoomViewer rect.cadre {
  fill: rgb(255, 255, 209);
  stroke: lightblue;
}

div#ZoomViewer rect.cadreRev {
  fill: rgb(209, 209, 255);
  stroke: lightblue;
}

div#ZoomViewer {
  width: 100%;
  height: calc(100% - 30px - var(--title-height) - 10px);
  z-index: 3000;

}

.zoom #zoom {
  height: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
}
/* END Zomm View*/

/* info panel container
  size define in root varable minux div margin
*/
.info {
  width:  calc(100% - 20px);
  height:  var(--info-height)  - var(--div-margin);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


.find_window {

  height: 100%;
  margin: 0px;
  background-color: var(--body-bg-color);
  font-family: sans-serif;
}


.find_main_container {
  background-color: #f8f9fa;
  border-color: var(--mi-container-border);
  border-style: solid;
  border-width: 1px;
  border-radius: 10px 5px 10px 5px;
  box-shadow: 3px 3px 3px  #a7a7a7;
  padding: 10px;
  /*min-height: calc(100% - ( var(--div-margin) -15px ));
  */
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}



.findPanel {
  width:  calc(100% - 20px);
  height: 45px;

  display: flex;
  flex-direction: row;
  align-items: center;
  /*justify-content: center;*/
  margin-bottom: 10px;
}

.label {
  margin-left: 10px;
}

.nav_container {
  padding: 10px;
}

/* footer container */
.footer {
    /* border-color: var(--mi-container-border); */
    /* border-style: solid; */
    /* border-width: 1px; */
    /* border-radius: 10px 5px 10px 5px; */
    /* box-shadow: 3px 3px 3px black; */
    background-color: var(--footer-bg-color);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(var(--footer-height) );
    /* margin: var(--div-margin); */
}

/* Links */
a:link {
  text-decoration: none;
}
a {

  color: var(--a-color);
}
a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
    background-color:#fef3f3;
    color: #ffcbcb ;
}
a.a-over:hover {
  color: #0069d2;
}


/* For genome and physical map to activate the scrollbars */
 .scallable {
   overflow-y: auto;
   overflow-x: auto;
 }

/* Tooltips window */
 div.tooltip {
   position: absolute;
   margin: 0;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
   letter-spacing: normal;
   word-break: normal;
   word-spacing: normal;
   white-space: normal;
   line-break: auto;
   word-wrap: break-word;
   text-align: center;
   padding: 2px;
   font: 14px sans-serif;
   background: var(--tooltip-bg);
   border: 5px;
   border-color: red;
   border-radius: 8px;
   pointer-events: none;
   z-index: 9200;
}
ul.tooltip {
  position: absolute;
  margin: 0;
  text-align: center;
  padding: 2px;
  font: 14px sans-serif;
  background: var(--tooltip-bg);
  border-radius: 8px;
  z-index: 9200;
  filter: brightness(110%);
}

ul.show {
  display: block;
}



span.context-title {
  text-align: center;
}
div.tooltip .flagdb-icons {
  float: right;
  padding: 3px;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    filter: invert(3%) sepia(59%) saturate(287%) hue-rotate(166deg) brightness(94%) contrast(83%);
    transition: all 0.25s;
}
div.container_title > .flagdb-icons {
  float: right;
  padding: 3px;
    width: 10px;
    height: 10px;
    vertical-align: middle;
    filter: invert(3%) sepia(59%) saturate(287%) hue-rotate(166deg) brightness(94%) contrast(83%);
    transition: all 0.25s;
}


#context-menu {
  opacity:0;
}

/* Windows */
.modalWindow {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  opacity:0;
  pointer-events: none;
}
.modalWaitWindow {

  z-index: 99999;
 
}

#sizeModal > div {
  width: 200px;
}

#speciesModal > div,
#genreModal > div {
  width: 250px;
}

#featureModal > div {
  width: 300px;
}

#findModal > div {
  width: 280px;
}


#getSequenceModal > div {
  width: 350px;
}


#userModal > div  {
  width: 400px;
}

#uploadModal > div {
  width: 650px;
}

#blastModal > div {
  width: 700px;
}

#geneListModal > div {
  width: 350px;
}

#alertModal > div {
  width: 400px;
}
#waitModal > div {
  width: 200px;
}
#logoModal > div {
  width: 800px;
}

#densityModal > div {
  width: 700px;

}

#densityModal .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    height: 800px;
}

#densityBody {
  width: 100%;
  height: 100%;
}

#PFAMKeywordModal > div {
  width: 300px;
}

#patternModal > div {
    width: 500px;
}
.singleLetter {
  background-color: #f5b1b1;
}
.doubleLetter {
  background-color: #d1d0ff;
}
.trippleLetter {
  background-color: #d0ffd2;
}
.fullLetter {
  background-color: #ffffc7;
}

.aLetter {
  background-color: #00d400;
}
.cLetter {
  background-color: #53a5ff;
}
.tLetter {
  background-color: #ff8888;
}
.gLetter {
  background-color: #ffce73;
}



.logoDoubleLetter {
    fill: none;
    stroke: #b0afdc;
    stroke-linecap: round;
    stroke-width: 4;
}

.logoTrippleLetter {
    fill: none;
    stroke: #7ee582;
    stroke-linecap: round;
    stroke-width: 4;
}

.logoFullLetter {
    fill: none;
    stroke: #e5e5b2;
    stroke-linecap: round;
    stroke-width: 4;
}

/* Pour les motifs degeneres */
.genomestrand {
  stroke: #534e67;
}
.genomereverse {
  stroke: #ff8c02;
}
.strand {
  stroke-width: 3px;
  color: #534e67;
  fill: #ffffff;
  stroke: #534e67;
}
.reverse {
  stroke-width: 3px;
  color: #ff8c02;
  fill: #ffffff;
  stroke: #ff8c02;
}

div#featurelist{
  height: 400px;
  overflow-y: auto;
}


/* Sequence Window */



#sequenceModal .modal-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

span.sequence {
  height: 400px;
  width: 100%;
  overflow-y: auto;
}

.sequence {
  font-family: "Lucida Console", Courier, monospace !important;
  font-style : normal;
  text-align: left;
  word-break: keep-all;
}
div#sequencebutton {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  align-items: center;
}

.modalWindow > div {
  position: relative;
  margin: 10% auto;
  box-shadow: 3px 3px 3px  #a7a7a7;
  background: white;
  background-color: transparent;
}

.modalWindow .modal-body {
  background-color: white;
  padding: 10px;
  line-height: 1.4em;
}

.modal-footer {
  background-color: var(--footer-bg-color);
  display: flex;
  justify-content: right;
  border-radius: 0 0 10px 5px;
  height: 45px;

}



.attention {
  color: red;
  stroke: red;
}

/* Group Window */
#groupModal > div {
    width: 100%;
}
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; background-color: white; }

.find_body_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: calc(100% - 90px);
}


div#tableGroup {
    display: inline-block;
    overflow: scroll;
    height: calc(100% - 90px);
    width: 100%;
}

div#tableGroup > .maintable {
  width : 900px;
}

#tableGroup tbody tr:nth-child(even)
{
  background: #fdfff3;
}
#tableGroup tbody tr:nth-child(odd)
{
  background: #fcf2fc;
}

#tableGroup tbody tr:hover {
  background: #fdcfad;
}

.right-align {
  text-align: right;
}

.center-align {
  text-align: center;
}

/* Phylogenetic */
.none {
  background-color: white;
}
.eudi {
  background-color: lightgreen;
  title: ""
}
.plants {
  background-color: darkgreen;
}
.fungi {
  background-color: yellow;
}
.mamm {
  background-color: magenta ;
}
.insect {
  background-color: red ;
}
.euc {
  background-color: orange;
}
.eub {
  background-color: maroon;
}
.arc {
  background-color: black;
}
.phylo  {
  border-width: 1 ;
}
/* Group Window END */

.updown{
  float: right;
}

.updown .flagdb-icons {
  filter: invert(100%) sepia(6%) saturate(243%) hue-rotate(214deg) brightness(116%) contrast(100%) !important;
}

.N{
  fill: none;
  stroke: black;
  stroke-linecap: round;
  stroke-width: 4;
}

.A{
  fill: green;
  stroke: green;
  stroke-linecap: round;
  stroke-width: 4;

}
.G{
  stroke: orange;
  stroke-linecap: round;
  stroke-width: 4;
  fill: white;

}
.C{
  stroke: blue;
  stroke-linecap: round;
  stroke-width: 4;
  fill: white;
}
.T{
  fill: red;
  stroke: red;
  stroke-linecap: round;
  stroke-width: 4;

}


.Aa{
  fill: none;
  stroke: green;
  color: green;
  stroke-linecap: round;
}

.Ga{
  stroke: #e19c18;
  stroke-linecap: round;
  color:#e19c18;
  fill: none;

}
.Ca{
  stroke: blue;
  stroke-linecap: round;
  color: blue;
  fill: none;
}
.Ta{
  fill: red;
  color:red;
  stroke: red;
  stroke-linecap: round;
}

/* Desactiver le enter dans le menu du haut */
.fauxinput {
  display:none !important;
}




/* Set up the div that will show and hide */
div.content {
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
  display: none;

}



div.SaveButton {
  float: right;
}

button.save-title-btn {
  border: 0;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
  margin: 0px;
  padding: 2px;
  border-radius: 0.25rem;
}

.save-title-btn .flagdb-icons {
  width: 10px;
  height: 10px;
  vertical-align: middle;
  filter: var(--icn-filter);
  transition: all 0.25s;
}


/* Waiting icon tha move without blocking the windows
*/
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid rgb(107, 216, 224);
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: rgb(245, 119, 119) transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.65s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.40s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.30s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


span.menu-margin {
  margin-right: 12px;
}

tr.clickable {
  cursor : pointer;
}
polyline.veryhigh, .CDS .veryhigh ,td.veryhigh {
  stroke: #ff0000;
  fill: #ff0000;
  color: #ff0000;
}


polyline.high, .CDS .high, td.high {
  stroke: #ea00ff;
  fill: #ea00ff;
  color: #ea00ff;
}

polyline.middle, .CDS .middle, td.middle {
  stroke: #00ff48;
  fill: #00ff48;
  color: #00ff48;
}


polyline.low, .CDS .low, td.low {

  stroke: #0000ff;
  fill: #2200ff;
  color: #2200ff;
}


polyline.verylow, .CDS .verylow, td.verylow {

  stroke: #060101;
  fill: #060101;
  color: #060101;

}

polyline.highlight {

  stroke: #ff0000;
  fill: #f3af4a;
  color: #f3af4a;
  stroke-width: 3;
  opacity : .8;

}


th.up:after { 
  display: inline-block;
  vertical-align: 0.255em;
  content: "";
  margin-right: 8px;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}

th.down:after { 
  display: inline-block;
  vertical-align: 0.255em;
  content: "";
  margin-right: 8px;
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em  solid;
  border-left: 0.3em solid transparent;
}

div#CompareContainer {
  width:100%;
  height:100%;
}

g#Blast g text {  /* resultat blast */
  font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .6em;
    stroke-width: 0px;

}

.spanright {
  position: absolute;
  right: 6px;
}

.sequenceButton {
  background-color: #b4e7b4;
}

.wrappernews {
  position: fixed;
  top: 50px;
  right: -470px;
  max-width: 345px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 15px 25px 22px;
  transition: right 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrappernews.show {
  right: 20px;
}


.wrapper {
  position: fixed;
  bottom: 50px;
  right: -470px;
  max-width: 345px;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 15px 25px 22px;
  transition: right 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.wrapper.show {
  right: 20px;
}

div.header h2 {
  color: var(--a-color);
}
div.header h4 {
  color: var(--a-color);
}
.wrapper .data {
  margin-top: 16px;
  color: var(--a-color);
}

.wrapper .buttons {
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}