.lin-person-placeholder-1 { grid-area: pp-1; background-color: var(--lin-person-placeholder-background-color); border-width: var(--lin-person-placeholder-border-width); border-style: var(--lin-person-placeholder-border-style); border-color: var(--lin-person-placeholder-border-color); border-radius: var(--lin-person-placeholder-border-radius); cursor: default; }
.lin-person-placeholder-2 { grid-area: pp-2; background-color: var(--lin-person-placeholder-background-color); border-width: var(--lin-person-placeholder-border-width); border-style: var(--lin-person-placeholder-border-style); border-color: var(--lin-person-placeholder-border-color); border-radius: var(--lin-person-placeholder-border-radius); cursor: default; }

.lin-couple-placeholder   { grid-area: cp  ; background-color: var(--lin-couple-placeholder-background-color); border-width: var(--lin-couple-placeholder-border-width); border-style: var(--lin-couple-placeholder-border-style); border-color: var(--lin-couple-placeholder-border-color); border-radius: var(--lin-couple-placeholder-border-radius); cursor: default; }

.lin-gap-1-1 { grid-area: gp-1-1; background-color: var(--lin-gap-background-color); }
.lin-gap-1-2 { grid-area: gp-1-2; background-color: var(--lin-gap-background-color); }
.lin-gap-1-3 { grid-area: gp-1-3; background-color: var(--lin-gap-background-color); }
.lin-gap-2   { grid-area: gp-2;   background-color: var(--lin-gap-background-color); }
.lin-gap-3-1 { grid-area: gp-3-1; background-color: var(--lin-gap-background-color); }
.lin-gap-3-2 { grid-area: gp-3-2; background-color: var(--lin-gap-background-color); }

.lin-generation-placeholder { grid-area: gen-pl; font-weight: var(--lin-generation-font-weight); background-color: var(--lin-generation-background-color); border-width: var(--lin-generation-border-width); border-style: var(--lin-generation-border-style); border-color: var(--lin-generation-border-color); border-radius: var(--lin-generation-border-radius); cursor: default; }

.lin-grid-container {
  display: grid;
  grid-template-columns: repeat(57, 1fr);
  grid-template-areas:
    'gen-pl gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 gp-1-1 pp-1 pp-1 pp-1 pp-1 pp-1 pp-1 pp-1 pp-1 pp-1 pp-1 pp-1 pp-1 pp-1 gp-1-2 pp-2 pp-2 pp-2 pp-2 pp-2 pp-2 pp-2 pp-2 pp-2 pp-2 pp-2 pp-2 pp-2 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3 gp-1-3'
    'gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2   gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2 gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2   gp-2'
    'm-7    gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 gp-3-1 cp   cp   cp   cp   cp   cp   cp   cp   cp   cp   cp   cp   cp   cp     cp   cp   cp   cp   cp   cp   cp   cp   cp   cp   cp   cp   cp   gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2 gp-3-2';
  gap: 0px;
  padding: 0px;
}

.lin-grid-container > div {
  text-align: center;
  padding: 0.5em 0.5em;
  font-size: 0.75em;
}

.lin-proband-person-placeholder { grid-area: pr-pp; background-color: var(--lin-person-placeholder-background-color); border-width: var(--lin-person-placeholder-border-width); border-style: var(--lin-person-placeholder-border-style); border-color: var(--lin-person-placeholder-border-color); border-radius: var(--lin-person-placeholder-border-radius); cursor: default; }

.lin-proband-gap-1-1 { grid-area: pr-gp-1-1; background-color: var(--lin-gap-background-color); }
.lin-proband-gap-1-2 { grid-area: pr-gp-1-2; background-color: var(--lin-gap-background-color); }

.lin-proband-generation-placeholder { grid-area: pr-gen-pl; font-weight: var(--lin-generation-font-weight); background-color: var(--lin-generation-background-color); border-width: var(--lin-generation-border-width); border-style: var(--lin-generation-border-style); border-color: var(--lin-generation-border-color); border-radius: var(--lin-generation-border-radius); cursor: default; }

.lin-proband-grid-container {
  display: grid;
  grid-template-columns: repeat(57, 1fr);
  grid-template-areas:
    'pr-gen-pl pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-gp-1-1 pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-pp pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2 pr-gp-1-2';
  gap: 0px;
  padding: 0px;
}

.lin-proband-grid-container > div {
  text-align: center;
  padding: 0.5em 0.5em;
  font-size: 0.75em;
}

.lin-age-at-marriage {
  color: var(--lin-age-at-marriage-color);
}

.lin-age-at-death {
  color: var(--lin-age-at-death-color);
}

.lin-individual-personal-details-button {
  display: inline-block;
  font-weight: bold;
  text-align: center;
  color: rgb(255,0,0);
  background-color: var(--website-background-color);
  border: 1px solid rgb(0,0,0);
  border-radius: 8px;
  padding: 0.1em 0.1em 0.1em 0.1em;
  cursor: pointer;
  position: relative;
  top: -0.2em;
  right: -0.2em;
}