a {
  color: rgb(0,102,204);
  text-decoration: none;
}
a:hover {
  color: rgba(0,102,204,0.5);
}

entrydiv, input, canvas {
  box-sizing: border-box
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
/*  overflow: hidden;*/
}

.header__div {
  flex-shrink: 0;
  padding-left: 5px;
  padding-top: 5px;
}

html {
  height: 100%;
}

* {
  font-family: 'Roboto mono', monospace;
  font-size: 12px;
}

h4 {
  margin-bottom: 3px;
  margin-left: 0;
  margin-top: 3px
}

.logo_with_text__img {
  height: 37px
}
		
label {
    color: dimgray;
    font-size: 12px;
    font-weight: 800
}

/* Style fonts awesome icons*/
.fa-solid { 
  color: rgb(0,102,204);
  text-decoration: none
}

/* Style placeholder inside inputs to be italic */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: silver;
  font-style: italic
}
::-moz-placeholder { /* Firefox 19+ */
  color: silver;
  font-style: italic
}
:-ms-input-placeholder { /* IE 10+ */
  color: silver;
  font-style: italic;
}
:-moz-placeholder { /* Firefox 18- */
  color: silver;
  font-style: italic
}

/* Style placeholder inside inputs to be italic */
:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: darkgray
}
:focus::-moz-placeholder { /* Firefox 19+ */
  font-style: italic;
  color: darkgray
}
:focus:-ms-input-placeholder { /* IE 10+ */
  color: darkgray
}
:focus:-moz-placeholder { /* Firefox 18- */
  color: darkgray
}

.grid_header__div {
	align-items: start;
	display: grid;
  gap: 0;
  grid-template-areas:
    'logo login';
  grid-template-columns: 300px auto;
  padding: 0
}
.item1__div {
  grid-area: logo;
	padding-left: 0;
	text-align: left
}
.item2__div {
  grid-area: login;
	margin: 0;
	padding: 0;
	text-align: left
}
.grid_user__div {
  display: grid;
  gap: 0;
  grid-template-areas:
    'points username'
    'donate logout';
  grid-template-columns: 135px 125px;
  grid-template-rows: auto auto;
}
.item2_points__div {
	border-right: 2px dashed lightgray;
  grid-area: points;
	padding-bottom: 0;
	padding-right: 10px;
	padding-top: 0;
}
.item2_donate__div {
  border-bottom: 2px dashed lightgray;
	border-right: 2px dashed lightgray;
	border-top: 2px dashed lightgray;
	grid-area: donate;
	padding-bottom: 0;
	padding-right: 10px;
	padding-top: 0;
}
.item2_username__div {
  grid-area: username;
  padding-bottom: 0;
	padding-left: 5px;
	padding-right: 10px;
	padding-top: 0;
}
.item2_logout__div {
	border-bottom: 2px dashed lightgray;
	border-top: 2px dashed lightgray;
  grid-area: logout;
	padding-bottom: 0;
	padding-left: 5px;
	padding-right: 10px;
	padding-top: 0;
	position: relative;
}
.logout__a {
  position: absolute;
	right: 0;
  top: 5px
}					 

.grid_auth__div {
  display: grid;
  gap: 0;
  grid-template-areas:
    'login signup'
    'rules1 rules2';
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'login signup'
    'rules1 rules2';
  padding-right: 5px;
  padding-top: 5px;
}
.item3__div {
  border-right: 2px solid  lightgray;
  grid-area: login;
	grid-row-end: 3;
	padding-left: 5px;
	text-align: left
}
.item4__div {
	border-right: 2px solid  lightgray;
  grid-area: rules1;
	padding-left: 5px;
	text-align: left  
}
.item5__div {
  grid-area: signup;
	padding-left: 5px;
	text-align: left
}
.item6__div {
  grid-area: rules2;
	padding-left: 5px;
	text-align: left
}

div.error_message__div, div.info_message__div {
  padding-left: 11px;
  text-align: left
}

div.recover_username__div, div.reset_password__div, div.change_password__div {
  border-top: 2px solid  lightgray;
  padding-top: 5px
}

/* Exclude dummy input from this rule */
div.item3__div input:not(.dummy__input) {
  display: block
}

/* Use dummy input to prevent autofilling with wrong value */
.dummy__input {
  display: none
}

div.item5__div input {
  display: block
}

#login_username, #login_password, #signup_fullname, #signup_username, #signup_email, #signup_password, #recover_username_email, #reset_password_email_or_username, #change_password_password {
  border: 1px solid lightgray;
  border-radius: 4px;
  margin-bottom: 16px;
  margin-top: 6px;
  padding: 5px;
  width: 300px
}

#login_submit, #change_password_submit, #recover_username_submit, #reset_password_submit, #signup_submit, #search_submit {
  background-color: rgb(0,102,204);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  margin-bottom: 16px;
  margin-top: 6px;
  padding: 5px;
  width: 100px;
}

#login_submit:disabled, #change_password_submit:disabled, #recover_username_submit:disabled, #reset_password_submit:disabled, #signup_submit:disabled, #search_submit:disabled {
	background-color: rgba(0,102,204,0.5);
  pointer-events: none
}

div.password {
  position: relative
}

/* Style password eye */
span[id='toggle_login_password'], span[id='toggle_signup_password'], span[id='toggle_change_password_password'] {
  color: rgb(0,102,204);
  cursor: pointer;
  left: 276px;
  position: absolute;
  top: 8px
}

#signup_fullname_message, #signup_username_message, #signup_email_message, #signup_password_message, #change_password_message {
  display: none;
}
#signup_fullname_message p, #signup_username_message p, #signup_email_message p, #signup_password_message p, #change_password_message p {
  margin: 0;
  padding-left: 10px
}

#search_name_person_message, #search_name_third_person_message, #search_name_father_message, #search_name_mother_message, #search_name_partner_message, #search_start_year_message, #search_end_year_message {
  display: none
}
#search_name_person_message p, #search_name_third_person_message p, #search_name_father_message p, #search_name_mother_message p, #search_name_partner_message p, #search_start_year_message p, #search_end_year_message p {
  margin: 0;
  padding-left: 10px
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: rgb(102, 204, 0);
}

 input.valid {
  color: black
}

p.valid:before {
  content: "\2714";
  left: -5px;
  position: relative
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: rgb(204,0,102);
}

input:not(:placeholder-shown).invalid {
  color: rgb(204,0,102);
}

input:not(:placeholder-shown).valid {
  color: black
}

input:placeholder-shown {
  color: black
}

p.invalid:before {
  content: "\2716"; 
  left: -5px;
  position: relative
}

input[type=hidden] {
  display: none
}
.nav__div {
  flex-shrink: 0;
  padding-left: 0;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-top: 5px
}
.nav_submit__input {
  display: none
}
.include_checkbox__input {
  accent-color: rgb(0,102,204);
  color: dimgray ;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  width: 10.3833px
}
.search_name__input {
  border: none;
  border-bottom: 1px solid silver;
  display: block;
  height: 16px;
  margin: 0;
  outline: none;
  padding: 0;
  text-indent: 2px;
  width: 260px
}
.search_year__input {
  border: none;
  border-bottom: 1px solid silver;
  display: block;
  height: 16px;
  margin: 0;
  outline: none;
  padding: 0;
  text-indent: 2px;
  width: 80px
}
.search_name__input:focus, .search_year__input:focus {
  border-bottom: 1px solid black
}
.search_name__input.invalid, .search_year__input.invalid {
  border-bottom: 1px solid rgb(204,0,102);
}

.search__div {
	background-color: #e0e0e0;
	padding-bottom: 0px;
	padding-left: 5px;
	padding-top: 15px;
  width: 100%;
}
.search_form__div {
	position: relative
}
.clergy_option__label {
  display: block
}
.search_clergy_option__radio {
  accent-color: rgb(0,102,204);
}
.search__canvas {
  position: absolute;
	top: 0;
	left: 0;
	border: none
}
.nav_path__ul {
  list-style: none;
  padding: 0;
  margin: 0
}
.nav_path__li {
  display: inline-block
}
.nav_path__ul .nav_path__li:before {
  content: '\271A';
  display: inline-block;
  margin: 0
}
.nav_path__label, .nav_folder__label {
  color: rgb(0,102,204);
  cursor: pointer;
  white-space: nowrap;
}
.nav_image_go_to_page__li {
  display: inline-block;
  margin-bottom: 0;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 0;
}
.nav_image_go_to_page__input {
  border-radius: 4px;
  background-color: #e0e0e0; 
  border: none;
  padding: 0;
  padding-right: 10px;
  outline-color: rgb(0, 102, 204);
  text-align: center;
  width: 10ch;
}
.nav_image_go_to_page__input:valid {
  color: rgb(0, 102, 204);
}
.nav_image_go_to_page__input:invalid {
  color: rgb(204,0,102);
}
.warning {
  color: rgb(204,0,102);
  white-space: pre;
}
.blinks {
  animation: 0.5s blink linear infinite;
}
.blinks_slow {
  animation: 2s blink linear infinite;
}
@keyframes blink {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1
  }
}
/*.blinks:before {
  content: '\26A0';
  margin: 0
}*/
.nav_folder__ul {
  list-style: none;
	margin-block-start: 5px;
  padding-left: 20px
}
.nav_folder_checkbox__ul {
  list-style: none;
	margin-block-start: 5px;
  padding-left: 20px
}
.nav_folder__ul li:before {
  content: '\271A';
  margin: 0
}
.search_details__ul {
  list-style: none;
  padding: 0;
	margin: 5px;
  white-space: pre-wrap;
}
.search_details__li {
 margin: 0;
}
.search_details_document__li {
 margin-top: 5px;
}
.details_relatives__button {
  background-color: inherit;
  border: none;
  color: rgb(0,102,204);
  cursor: pointer
}

.search_results__div {
 width: 100%;
}
.search_results__table {
  border-collapse: collapse;
  color: #757575;
}
.search_results_header_entry__th {
  border-right: 2px solid #e0e0e0;
  text-align: right;
  vertical-align: bottom;
  width: 35px;
}
.search_results_header_year__th {
  border-right: 2px solid #e0e0e0;
  text-align: right;
  vertical-align: bottom;
  width: 40px;
}
.search_results_header_type__th {
  border-right: 2px solid #e0e0e0;
  text-align: left;
  vertical-align: bottom;
  width: 45px;
}
.search_results_header_record__th {
  border-right: 2px solid #e0e0e0;
  text-align: right;
  vertical-align: bottom;
  width: 30px;
}
.search_results_header_image__th {
  border-right: 2px solid #e0e0e0;
  text-align: center;
  vertical-align: bottom;
  width: 25px;
}
.search_results_header_details__th {
  border-right: 2px solid #e0e0e0;
  text-align: center;
  vertical-align: bottom;
  width: 25px;
}
.search_results_header_main_info__th {
  border-right: 2px solid #e0e0e0;
  vertical-align: bottom;
}
.search_results_header_tree__th {
  text-align: left;
  vertical-align: bottom;
}
/*------------------*/
.search_results_header_main_info__table {
  width: 100%;
}
.search_results_main_info_person__th {
  border-bottom: 1px dashed #a0a0a0;
  text-align: center;
  vertical-align: bottom;
  width: 50%
}
.search_results_main_info_partner__th {
  border-bottom: 1px dashed #a0a0a0;
  text-align: center;
  vertical-align: bottom;
  width: 50%
}
.search_results_main_info_father__th {
  border-bottom: 1px dashed #a0a0a0;
  text-align: center;
  vertical-align: bottom;
  width: 50%
}
.search_results_main_info_mother__th {
  border-bottom: 1px dashed #a0a0a0;
  text-align: center;
  vertical-align: bottom;
  width: 50%;
}
.search_results_main_info_locality__th {
  text-align: center;
  vertical-align:bottom;
}
/*------------------*/
.search_results_row__tr:hover {
  color: #000000;
}
.search_results_row_entry__td {
  border-right: 2px solid;
  text-align: right;
  padding-top: 10px;
  vertical-align: top;
}
.search_results_row_year__td {
  border-right: 2px solid;
  padding-top: 10px;
  text-align: right;
  vertical-align: top;
}
.search_results_row_type__td {
  border-right: 2px solid;
  padding-top: 10px;
  text-align: left;
  vertical-align: top;
}
.search_results_row_record__td {
  border-right: 2px solid;
  padding-top: 10px;
  text-align: right;
  vertical-align: top;
}
.search_results_row_image__td {
  border-right: 2px solid;
  padding-top: 8px;
  text-align: center;
  vertical-align: top;
}
.search_results_row_details__td {
  border-right: 2px solid;
  padding-top: 12px;
  text-align: center;
  vertical-align: top;
}
.search_results_row_main_info__td {
  border-right: 2px solid;
  padding-bottom: 10px;
  padding-top: 10px;
}
.search_results_row_tree__td {
  /* colresizable changes these parameters
  padding-left: 10px;
  padding-right: 10px;*/
  padding-top: 5px;
  border-right: 2px solid;
  vertical-align: top
}
/*------------------*/
.search_results_row_details__button {
  background-color: inherit;
  border: none;
  color: rgb(0,102,204);
  cursor: pointer
}
.search_results_row_image__button {
  background-color: inherit;
  border: none;
  color: rgb(0,102,204);
  cursor: pointer
}
/*------------------*/
.search_results_main_info__table {
  border-collapse: collapse;
  width: 100%;
}
.search_results_main_info_person__td {
  border-bottom: 1px dashed #a0a0a0;
  cursor: pointer;
  padding-left: 5px;
  vertical-align: top; 
  width: 50%;
}
.search_results_main_info_partner__td {
  border-bottom: 1px dashed #a0a0a0;
  cursor: pointer;
  padding-left: 0;
  vertical-align: top; 
  width: 50%;
}
.search_results_main_info_partner__td:before, .search_results_main_info_partner__th:before {
  content: "\26AD\00A0 ";
}
.search_results_main_info_father__td, .search_results_main_info_father_empty__td {
  border-bottom: 1px dashed #a0a0a0;
  cursor: pointer;
  padding-left: 5px;
  vertical-align: top; 
  width: 50%;
}
.search_results_main_info_father__td:before, .search_results_main_info_father__th:before {
  content: '\25FC\00A0 ';
  color: rgb(159,213,235);
}
.search_results_main_info_mother__td {
  border-bottom: 1px dashed #a0a0a0;
  cursor: pointer;
  padding-left: 5px;
  vertical-align: top; 
  width: 50%;
}
.search_results_main_info_mother__td:before, .search_results_main_info_mother__th:before {
  content: '\25CF\00A0 ';
  color: rgb(245,184,219);
}
.search_results_main_info_locality__td {
  cursor: pointer;
  padding-left: 5px;
}
.search_results_locality__span {
  font-style: italic;
}
.search_results_tree_arrow__span {
  font-size: 60px;
  font-weight: bold;
}
/* Tree canvas*/
.details_row_tree__div {
  box-sizing: content-box;
  margin-bottom: 5px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 7px;
}
.even {
  background-color: #e0e0e0;
  border-color: #ffffff;
}
.odd {
  background-color: #ffffff;
  border-color: #e0e0e0;
}
/* Search relationshop (select) */
.option_group {
  color: rgb(0,102,204);
  font-style: italic;
}

/* Previous searches */
.previous_searches_container__div {
  background-color: #e0e0e0;
  padding-left: 5px;
}
.previous_searches__div {
  border-bottom: 2px dashed darkgray;
  border-left: 2px dashed darkgray;
  border-top: 2px dashed darkgray;
  border-radius: 5px 0 0 5px;
}
.previous_search_links__div {
  display: none;
  max-height: 200px;
  overflow: auto;
}
.search_load_previous__ul {
  list-style: none; /* Remove default bullets */
  padding-inline-start: 50px;
}
.search_previous__button {
  background-color: #e0e0e0;
  border: none;
  color: rgb(0,102,204);
  cursor: pointer;
  position: relative;
  top: -10px;
  /*left: 17px;*/
}
.search_load_previous__button {
  background-color: inherit;
  border: none;
  color: rgb(0,102,204);
  cursor: pointer;
  padding-left: 20px;
}
/* Previous images */
.previous_images__div {
  background-color: #ffffff;
  border-bottom: 2px solid #808080;
  border-left: 2px solid #808080;
  border-top: 2px solid #808080;
  border-radius: 5px 0 0 5px;
  margin-top: 8px
}
.image_previous__button {
  background-color: #ffffff;
  border: none;
  color: rgb(0,102,204);
  cursor: pointer;
  position: relative;
  top: -10px;
  /*left: 17px;*/
}
.free .paid {
  white-space: pre;
}
.free::before {
  content: '$';  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: rgb(4,170,109); /* Change the color */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
.paid::before {
  content: '$';  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #f6ac00; /* Change the color */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.search_name_check__div, .search_year_check__div {
  padding-bottom: 35px;
}
#openseadragon {
  background-color: black;
  flex-grow: 1;
	border: none;
} 
@keyframes fade_in {  
   from {
       opacity: 0;
   }
   to {
       opacity: 0.8;
   }  
}
@keyframes fade_out {  
   from {
       opacity: 0.8;
   }
   to {  
       opacity: 0;  
   }  
}

/*Footer div*/
.footer__div {
  border-top: 2px solid lightgray;
  padding-left: 5px;
  padding-top: 20px;
}

/* The Overlay for terms of use(background) */
.terms_of_use__div {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 0;
  width: 100%;
  padding-left: 10px;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  bottom: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(224,225,224, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: height 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.terms_of_use_content__div {
	border: 2px solid dimgray;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-right: 20px;
  margin-top: 10px;  
  position: relative;
  top: 10%; /* 15% from the top */
}

.terms_of_use__div > ol {
  color: dimgray;
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.terms_of_use__div .close_overlay__a {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 40px;
}

.search_instructions__div .close_overlay__a {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 40px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .terms_of_use__div a {font-size: 20px}
  .terms_of_use__div .close_overlay__a {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.terms_of_use_2__ol {
  list-style-type: upper-alpha;
}

.terms_of_use_1__ol > li {
  color: black;
}

.terms_of_use_2__ol > li {
  color: dimgray;
}

.footer_nav_title__p {
  padding-left: 20px;
}

.footer_nav__div {
  display: flex;
  padding-top: 20px;
}

.footer_nav__span {
  color: rgb(0,102,204);
  cursor: pointer;
}

.footer_copyright__div {
  padding-top: 20px;
}

.copyright__span {
  color: gray;
  font-family: Roboto;
  font-style: italic;
  margin-bottom: 10px;
  margin-top: 10px;
}

.motto__span {
  display: block;
  font-size: 15px;
  font-weight: bolder;
  margin-top: 10px;
  text-align: center;
}

/* The Overlay window for search instructions */
.search_instructions__div {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  background-color: rgba(224,225,224, 0.9); /* Black w/opacity */
  bottom: 0;
  height: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-left: 10px;
  position: fixed;
  right: 0; /* remove */
  overscroll-behavior: contain;
  transition: height 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  z-index: 1; /* Sit on top */
}

/* Used for "Instruções de busca"*/
.search_instructions__span {
  color: rgb(0,102,204);
  cursor: pointer;
	font-size: 16px;
  position:absolute;
}

.advertisement {
  color: rgb(204,0,102);
  display: flex;
  justify-content: center;
}