/* GENERAL */

a         {  text-decoration:none; border:0px; }
a:hover   {  text-decoration:underline }
a:visited {  color:blue }
a img     {  border:0px; }

body {
    font-family: Circular, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.72857;
    color: #3c3b3f;
    /*background-color: #97CAEF;*/
    background: #9FAE95; /* #B8B8B8; */
}

/* HEADER */

.header, .blur {
  padding: 5px 5px 5px 5px;
  top: 0px;
  left: 0px;
  position: fixed;
  background: #5F6040; /* #474633; */
  /*background-color: #659DBD;*/
  width: 100%;
  border-bottom: 1px solid darkgrey;
  opacity: 0.95;
}
.header {
  z-index: 1000;
  display: flex;
  justify-content: flex-start;
  align-content: space-around;
  flex-wrap: wrap;
  margin: 0px;
}
.header>* {
  margin: 5px;
}
.blur {
  height: 50px;
  z-index: 1;
  filter: blur(20px);
}
.header button.active {
  background-color: #9FAE95;
}
.header button {
  background-color: #CFCEC2;
}

/* BODY */ 

#main {
  display: flex;
  flex-direction: row; 
  margin-top: 75px;
  z-index: 0;
  width: 100%
}

div#content
{
  margin-left: 10px;
  padding: 5px;
}



/* OPTIONS */
.background {
  display: none;
}
.background.show {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  opacity: 0;
  z-index: 100;
}
.header > div.options-group {
  display: flex;
  justify-content: flex-end;
  margin-left: auto;
}
.popup {
  display: none;
}
.popup.show {
  z-index: 300; 
  position: absolute;
  top:50px;
  right: 0px;
  box-shadow: 2px 2px 10px #333333;
  opacity: 1;
}
div#options
{
  background: #9FAE95;  /* #8F9E86;#BFBFBF; */
}

div.menu
{
  width:100%;
}

table.sidebar
{
  /*width:100%;*/
  border: 1px solid #555;
  min-width: 200px;
}

table.sidebar td
{
  background: #8F9E86; /* #A0A0A0; */
  padding: 5px;
}

table.sidebar th
{
  background: #5F6040; /* #A0A0A0; */
  color: #E0CB8B;
  padding: 2px;
}

table.generations td
{
  padding:0;
}


/* FICHE */

div.fiche
{
  background:#CFCEC2; /* #ddd; */ /* #BFBFBF; */
  padding: 5px;
  border: 1px solid black;
  box-shadow: 2px 2px 10px #333333;
  /*background-color: #CAFAFE;*/
  margin: 10px;

  border: 1px solid #777;
  width:550px;
}

hr
{
  border:2px solid black;
}

div.individual,
div.parents,
div.child
{
}

div.parents,
div.family
{
  background:#B7BEAB; /* #9FAE95; */ /* #C5C5C5; */
  border: 1px solid #aaa;
  box-shadow: 1px 1px 5px #333333;
  /*background-color: #C5F5F9;*/
  margin: 5px;
  margin-top: 10px;
  padding: 7px;
}

table.head,
table.individual,
table.parents,
table.spouse,
table.children
{
  width:100%
}

table.head td
{
  font-variant:small-caps;
  font-weight:bold;
  font-size:x-large;
}

table.head td.head-fiche
{
  text-align:left;
}
table.head td.head-name
{
  text-align:right;
}


table.individual th,
table.parents th,
table.spouse th
{
  width:15%;
  text-align:left;
}
table.children th
{
  width:5%;
  text-align:right;
}

table.individual td,
table.individual th,
table.parents td,
table.parents th,
table.spouse td,
table.spouse th,
table.children td,
table.children th
{
  border-bottom: 1px solid #aaa;
}


/* LIST */

div#list {
  padding: 5px;
  border: 1px solid black;
  box-shadow: 2px 2px 10px #333333;
  /*background-color: #CAFAFE;*/
}

table.individuals
{
  border-collapse:collapse;
/*   border: 1px solid #aaa; */
}

table.individuals td
{ 
  background:#CFCEC2; /* #ddd; */ /* #BFBFBF; */  
}

table.individuals th,
table.individuals td
{
/*   border-bottom: 1px solid #555; */
/*   border-right: 1px solid #555; */

  margin:0px;
  border:0px;
  padding:0;
  padding-left:3px;
  padding-right:3px;
/*   border-top: 1px solid #aaa; */
  border-bottom: 1px solid #aaa;
}



/* ANNIVERSARIES */

#calendar
{
  width: 100%
}

table.calendar
{
  width:80%;
}

div.month {
  padding: 5px;
  border: 1px solid black;
  box-shadow: 2px 2px 10px #333333; 
  background:#CFCEC2; 
  /*background-color: #CAFAFE;*/
  margin: 10px;
}

table.month
{
  width:100%;
  background:#B7BEAB;
  border-collapse: separate;
  border-spacing: 2px 2px;
}

div.month-title
{
  font-weight:bold;
}

table.month .day
{
  width:4%;
}

tr.names-line {
  margin: 5px;
}
td.names {
  background-color: #CFCEC2;
  /*background-color: #3FEEE6;*/
}
table.month td.names
{
  /*background:#CFCEC2;*/
  padding: 1px;
  padding-left:3px;
}



/* GRAPHS */

#graph
{ 
/*   position:relative; */
/*   top:0px; */
/*   left:0px; */
/*   bottom: 5px; */
/*   right: 5px; */
  width:100%;
  /*height:100%;*/
  /*background:#CFCEC2;*/
  border:1px solid #333;
  box-shadow: 2px 2px 10px #333333;
}

div.caption
{
  font-weight: bold;
  font-size: large;
  position: fixed;
  left: 20px;
  top: 75px;
  border: 1px solid black;
  box-shadow: 2px 2px 10px #333333;
  background-color: #eee;
  padding: 5px;
}

.download-button {
  background-color: #007bff;
  color: black;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.download-button:hover {
  background-color: #FFFFFE;
}

.download-button i {
  margin-right: 5px;
}