:root {
  --text-primary: #d6d6d6;
  --text-secondary: #999999;
  --text-tertiary: #7c818c;
  --text-link: #5294e2;
  --text-link-hover: #7c818c;

  --background-primary: #333333;
  --background-secondary: #333333;

  --border-primary: #5294e2;
  --border-secondary: #999999;
  --border-radius: 4px;

  --border-blue: #2196f3;
  --border-yellow: #dddd88;
  --border-orange: #e45735;
  --border-green: #dddd88;
  --border-gray: #4b5162;
  --border-gray-hover: #7c818c;

  --label-level-1: #F66151;
  --label-level-2: #FFBE6F;
  --label-level-3: #8FF0A4;
  --label-level-4: #99C1F1;
  --label-level-5: #d6d6d6;  
}


html,body {
  background: var(--background-primary);
  font-size: 16px;
}


h1,h2,h3,h4,h5,h6{
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
}
h1{font-size: 2.5rem; margin: 5.0rem 0 1.0rem 0;}
h2{font-size: 2.1rem; margin: 5.0rem 0 1.0rem 0;}
h3{font-size: 1.7rem; margin: 4.0rem 0 1.0rem 0;}
h4{font-size: 1.3rem; margin: 3.0rem 0 1.0rem 0;}

p, ul, ol{
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
  font-size: 1.0rem;
  line-height: 1.4rem;
}
ul, ol {
  list-style-position: outside;
  list-style-type: square;
  margin-left: 0;
}
p + ul {
  margin-top: -1.0rem;
}


a{
  color: var(--text-link);
  text-decoration:none;
  -webkit-transition:all 0.2s ease;
  -moz-transition:all 0.2s ease;
  -o-transition:all 0.2s ease;
}
a:hover{
  color: var(--text-link-hover);
  text-decoration:none;
}


b, strong{
  color: var(--text-secondary);
  font-weight: 400;
  font-style: normal;
}


hr{
  border: none;
  color: var(--border-primary);
  background-color: var(--border-primary);
  height: 1px;
}


blockquote{
  padding-left: 1rem;
  margin: 0 0 0.5rem 0;
  border-left: 4px solid var(--border-orange);
}
blockquote p {
  color: var(--text-secondary);
}


/* ----------  main page ---------- */

.menu_list_blue, .menu_list_orange, .menu_list_yellow, .draft_page {
  padding-left: 1rem;
  margin: 0 0 0.5rem 0;
}
.menu_list_blue{  border-left: 4px solid var(--border-blue); }
.menu_list_yellow{border-left: 4px solid var(--border-yellow);}
.menu_list_orange{border-left: 4px solid var(--border-orange);}
.draft_page{      border-left: 4px solid var(--border-orange);
  color: var(--border-yellow);
}

.menu_link{
  text-decoration:none;
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
  font-size: 1.8rem;
}
.menu_link:hover{
  color: var(--text-primary);
}


/* ----------  list page ---------- */

.toc_list_grey{
  border-left: 4px solid var(--border-gray);
  padding-left: 0.5rem;
  margin: 0 0 0.5rem 0;
  -webkit-transition:all 0.4s ease;
  -moz-transition:all 0.4s ease;
  -o-transition:all 0.4s ease;
}
.toc_list_grey:hover{
  border-left: 4px solid var(--border-gray-hover);
  padding-left: 1rem;
}
.toc_link{
  text-decoration:none;
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  color: var(--text-primary);
  font-size: 1.1rem;
}
.toc_link:hover{
  color: var(--text-primary);
}
.draft_mark{
  color: var(--border-orange);
}

/* ----------  single page ---------- */

/* ============= navigation ================ */

.obj_name{
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  color: var(--text-tertiary);
  font-size: 0.85rem;
}
nav{
  text-align: left;
  /* margin: 1rem 0 3rem 0; */
  color: var(--text-secondary);
}
nav ul {
  list-style-type: none;
  font-family: 'Comfortaa';
  font-style: normal;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.2rem;
}

footer{
  border-top: 1px solid var(--border-secondary);
  text-align: left;
  margin: 3rem 0 0 0;
  padding: 1rem 0 1rem 0;
  color: var(--text-secondary);
}

/* ============= code ================ */

pre, .map{
  border-color: transparent;
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  border-radius: var(--border-radius);
}
pre{
  width: 96%;
  font-size: 0.8rem;
  padding: 0.5rem;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.map{
  width: 100%;
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}


/* ============= family-tree graph ================ */

#SVG-Container {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  /* overflow: auto; */
  background-color: rgb(51,51,51);
  /*background-color: rgba(51,51,51,0.98);*/
  background-color: rgba(51,51,51,1.0);
}
#close {
  color: #aaa;
  position: fixed;
  right: 2rem;
  top: 1rem;
  font-size: 36px;
  font-weight: bold;
}
#close:hover, #close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* --------  nodes  ---------- */
.label{
  font-size: 1.0rem;
  /*text-anchor: middle;*/
  dominant-baseline: middle;
  fill: var(--text-primary);
}
.label-level-1{ fill: var(--label-level-1) }
.label-level-2{ fill: var(--label-level-2) }
.label-level-3{ fill: var(--label-level-3) }
.label-level-4{ fill: var(--label-level-4) }

.label_date{
  font-size: 0.7rem;
  /*text-anchor: middle;*/
  dominant-baseline: middle;
  font-weight: normal;
}
.label_date_death{ fill: var(--text-secondary); font-weight: normal }
.label_date_live{ fill: var(--text-primary); font-weight: bold }


/* --------  edges  ---------- */
.edge{
  stroke: var(--border-secondary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-opacity: 0.6;
  fill: none;
  -webkit-filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 2px 2px 2px rgba(0, 0, 0, .7));
}
.edge-hide{ stroke: rgba(51,51,51,0.0); stroke-width: 0 }
.edge-level-1{ stroke: var(--label-level-1); stroke-width: 3 }
.edge-level-2{ stroke: var(--label-level-2); stroke-width: 1 }
.edge-level-3{ stroke: var(--label-level-3); stroke-width: 1 }
.edge-level-4{ stroke: var(--label-level-4); stroke-width: 1 }
.edge-level-5{ stroke: var(--label-level-5); stroke-width: 2; stroke-dasharray: 10 }

.selected-to{
  stroke: var(--border-yellow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-opacity: 0.8;
  fill: none;
}
.selected-from{
  stroke: var(--border-blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-opacity: 0.8;
  fill: none;
/*  
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  -o-transition:all 0.3s ease;
*/  
}


/* --------  header  ---------- */
.head_numbers{
  fill: var(--border-green);
  stroke: var(--border-green);
  stroke-width: 0;
}


/* --------- leaflet.js grayscale map ------------ */
.leaflet-tile-pane {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}