/* memiescape v2.0  
   contact : quentin.lobbe@iscpif.fr */

/* fonts */

@font-face {
  font-family: 'Inter-Regular';
  font-style:  normal;
  font-weight: 400;
  src: url("./fonts/Inter-Regular.woff2") format("woff2"),
       url("./fonts/Inter-Regular.woff") format("woff");
}

@font-face {
  font-family: 'Inter-Bold';
  font-style:  normal;
  font-weight: 700;
  src: url("./fonts/Inter-Bold.woff2") format("woff2"),
       url("./fonts/Inter-Bold.woff") format("woff");
}
 
/* grid */

body {
  font-family: "Inter-Regular";
  font-size: 16px;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: 2% 7% 7% auto 1%;
  grid-gap: 10px;
  height: calc(100vh - 20px);
  color: #0d1824;
}

/* ---- row 1 ---- */

.phylo-title {
  grid-row: 1;
  grid-column: 1 / 2;
  align-items: center;
  text-align: right;
  margin-top: 0.5px;
}

.phylo-folder {
  grid-row: 1;
  grid-column: 2 / 16;
  align-items: center;
}

/* -------------------- */

.phylo-corpus {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  /*background : #3E75B3;*/
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: right; 
}

.phylo-phylo {
  grid-row: 3 / 4;
  grid-column: 1 / 2;
  font-size: 14px;
  display: flex;
  align-items: center; 
  justify-content: right;
}

.phylo-corpus-info {
  grid-row: 2 / 3;
  grid-column: 2 / 4; 
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.phylo-phylo-info {
  grid-row: 3 / 4;
  grid-column: 2 / 4; 
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

.phylo-how {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: right; 
}

.phylo-isoline {
  grid-row: 2 / 4;
  grid-column: 3 / 15;
  /*background: rgba(223,216,200,0.25);  */
}

.phylo-isoline-info {
  grid-row: 2 / 4;
  grid-column: 15 / 16;  
  padding-top: 20%;
  padding-bottom: 20%;
  padding-left: 15px;
}

/* -------------------- */

.phylo-scape {
  grid-row: 4; 
  grid-column: 1 / 15;  
  /*background: #FFCC73;*/
}

.phylo-timeline {
  grid-row: 4; 
  grid-column: 1 / 2; 
}

.phylo-graph {
  grid-row: 4; 
  grid-column: 15 / 16;  
  /*background: #FFCC73;*/
}

/* -------------------- */

.phylo-footer {
  grid-row: 5;
  grid-column: 2 / 16;
}


/* classes */


/* ---------- icons ---------- */

a { 
  color: inherit; 
  cursor: pointer;
}

.how {
  cursor: pointer;
  position: relative;
}

.tooltip {
  font-family: "Inter-Regular";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
} 

i.how span {
    position: absolute;
    width:300px;
    color: #FFFFFF;
    background: #0d1824;
    height: 30px;
    line-height: 30px;
    text-align: center;
    visibility: hidden;
    border-radius: 6px;
}

i.how span:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -8px;
    width: 0; height: 0;
    border-right: 8px solid #0d1824;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}

i.how:hover span {
    visibility: visible;
    left: 100%;
    top: 50%;
    margin-top: -15px;
    margin-left: 15px;
    z-index: 999;
}

.switch > .far + .fa,
.switch:hover > .far {
  display: none;
}
.switch:hover > .far + .fa {
  display: inherit;
  color: #0d1824;
}



/* ---------- fonts ---------- */


.font-bold {
  font-family: "Inter-Bold";
  text-transform: uppercase;
}

.font-small {
  color: #0d1824;
  font-size: 12px;
}

.header {
  /*font-weight: bold;*/
  /*text-transform: uppercase;*/
  font-weight: 500;
  cursor: pointer;
}

.header:hover {
  font-weight: bold;
}

/* ---------- input ---------- */

.button {
  background-color: white;
  border: 1.5px solid #0d1824;
  cursor: pointer;   
}

.button:hover {
  background-color: #0d1824;
  color: white;
}

.btn-group button{
  margin-top: 1px;
  margin-bottom: 1px;
  display: block;
  width: 40px;
}

.draw {
  display: none;
}

.phylo-focus {
  fill: #f8381f;
  color: #f8381f;
}

.reset {
  visibility: hidden;
}

.label {
  visibility: hidden;
}

.heading {
  visibility: hidden;
}

.export {
  visibility: hidden;
}

.headed {
  background-color: #0d1824;
  color: white;  
}

.labeled {
  background-color: #0d1824;
  color: white;
}

.input-file {
  display: inline-block;
  cursor: pointer; 
}

.input-file:hover {
  border-bottom: 1.5px solid #0d1824;
}

.input-name {
  font-style: italic;
  opacity: 0.7;
  font-size: 14px;   
  padding-left: 6px; 
  padding-right: 6px;
}

/* ---------- axis ---------- */

.x-axis path {
  stroke: #EBE4DD;
  stroke-width: 1.5px;
}

.y-axis path {
  stroke: #EBE4DD;
  stroke-width: 1.5px;
}

.y-highlight {
  stroke: #f3be54;  
  stroke-width: 1.5px;  
}

.x-mark {
  fill: #4A5C70;
  stroke-width: 1px;
  stroke: #fff;
}

.x-mark-over {
  fill: #f3be54;
}

.x-mark-focus {
  fill: #f8381f;
}

.tick text {
  font-family: "Inter-Regular";
}

.tick text:hover {
  cursor: pointer;
}

.y-label {
  font-size: 10px;
  font-family: "Inter-Regular";
  font-weight: normal;
}

.y-label-bold {
  font-size: 12px;
  font-family: "Inter-Bold";
  font-weight: bold;
}

.y-mark-year-inner {
  fill: #4A5C70;
}

.y-mark-year-inner-highlight {
  fill: #f3be54;
}

.y-mark-year-outer {
  fill: #fff;
  stroke: #4A5C70;
  stroke-width: 1px;
}

.y-mark-year-outer-highlight {
  fill: #fff;
  stroke: #f3be54;
  stroke-width: 3px;
}

.y-mark-month {
  fill: #4A5C70;
}

/* ---------- group ---------- */

.group-outer {
  stroke-width: 0.8px;
  stroke: #fff;
  fill: #fff;
}

.group-inner {
  stroke-width: 0.8px;
  stroke: #0d1824;
  fill: #0d1824;
  /*cursor: pointer;*/ 
  z-index: 10;
}

.group-heading {
  fill: #fff;
  stroke: #B5B5B5;
}

.group-focus {
  stroke: #f8381f;
}

.source-focus {
  stroke: #67a9cf;
}

.group-unfocus {
  stroke: #A9A9A9;
}

.group-path {
  cursor: pointer; 
}

/* ---------- labels ---------- */

.ngrams {
  visibility:  hidden;
}

.term {
  cursor: pointer;
}

.term:hover {
  font-weight: bold;
  fill: #f8381f;  
}

.term-unfocus {
  /*fill: #A9A9A9;*/
}

.term-focus {
  /*fill: black;*/
}

.term-path {
  fill: none;
  stroke: #F0684D;
  stroke-width: 1.5px;
}

.emerging {
  /*text-decoration: underline #F0684D;*/
  /*fill:#5AA350;*/
  /*fill: #5AA350;*/
  fill: #F8381F;
}

.decreasing {
  /*text-decoration: underline #74B5FF;*/
  fill: #11638F;
}

.path-focus {
  fill: none;
  stroke: #F0684D;
  stroke-width: 1.5px;
}

.path-unfocus {
  stroke: #A9A9A9;
}

.path-heading {
  stroke: #B5B5B5;
}

/* ---------- phylo ---------- */

.branch-hover {
  fill: #f3be54;
  opacity: 0.5;
}

/* elements */

#file-path {
  display:  none;
}


/* axis */

.axisRight {
  font-family: "Inter-Regular";
  font-size: 10px;  
}

/* isoline */

.peak {
  stroke: white;
  stroke-width: 1px;
  font-family: "Inter-Regular";
  font-size: 14px;
  text-anchor: middle;
  visibility: visible;
}

.peak-over {
  font-size: 18px;
  stroke-width: 2px;
  cursor: pointer;
  stroke: #f3be54;
  z-index: 100;
}

.peak-focus {
  font-size: 18px;
  stroke-width: 2px;
  stroke: #F0684D;
}

.peak-focus-source {
  font-size: 18px;
  stroke-width: 2px;
  stroke: #67a9cf; 
}


.peak-label {
  text-align: center;
  font-family: "Inter-Regular";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  color: #FFFFFF;
  border-radius: 3px;
  border-style: solid;
  border-width: 2px;
  border-color: white;
  background: #0d1824;
  padding: 5px;
  z-index: 10;
  position: absolute;
  visibility: hidden;
}

.word-cloud {
  font-family: "Inter-Regular";
  font-size: 12px;
}

.search {
  margin-left: 10px;
  visibility: hidden;
  position: absolute;
  z-index: 7;
  font-size: 14px;
  background-color: transparent;
  outline: 0;
  border-width: 0 0 2px;
  border-color: #0d1824
}

.search-label {
  visibility: hidden;
  margin-left: 5px;
}

.search:focus {
  border-color: #F0684D
}

.autocomplete {
  margin-left: 10px;
  visibility: hidden;
  position: absolute;
  z-index: 7;
  font-size: 14px;
  background-color: transparent;  
  color: silver;
  z-index: 1; 
  border: none;
}

.loading {
  visibility: hidden;
}

.phylo-name {
  visibility:hidden;
  text-transform: capitalize;
  font-weight: bold;
}

.select-source {
  margin-left: 10px;
  display: none;

  border: 1.5px solid #0d1824;
  cursor: pointer;   
  outline: 0;
  background: transparent;
  border-image: none;
  outline-offset: -2px;

  outline-color: transparent;
  box-shadow: none;
  -webkit-appearance: none;  
}

option {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}