#sea-table {

}

#sea-input {
  padding: 2px 4px 2px 4px;
  border: var(--sea-input-border-width) var(--sea-input-border-style) var(--sea-input-border-color);
  border-radius: var(--sea-input-border-radius);
  font-family: var(--sea-input-font-family);
  font-size: 0.75em;
  font-weight: normal;
  background-color: var(--sea-input-background-color);
}

#sea-button {
  border: var(--sea-button-border-width) var(--sea-button-border-style) var(--sea-button-border-color);
  border-radius: var(--sea-button-border-radius);
  font-family: var(--sea-button-font-family);
  font-size: 1em;
  font-weight: var(--sea-button-font-weight);
  color: var(--sea-button-color);
  background-color: var(--sea-button-background-color);
  text-decoration: none;
  cursor: pointer;
}

#sea-reset-button {
  border: var(--sea-reset-button-border-width) var(--sea-reset-button-border-style) var(--sea-reset-button-border-color);
  border-radius: var(--sea-reset-button-border-radius);
  font-family: var(--sea-reset-button-font-family);
  font-size: 1em;
  font-weight: var(--sea-reset-button-font-weight);
  color: var(--sea-reset-button-color);
  background-color: var(--sea-reset-button-background-color);
  text-decoration: none;
  cursor: pointer;
}

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

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

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

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

.sea-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;
}

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

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

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

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

.sea-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;
}

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

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

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

.sea-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;
}

.sea-lineage-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;
}

.sea-button {
  display: inline-block;
  font-weight: bold;
  text-align: center;
  color: rgb(255,0,0);
  background-color: transparent;
  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;
}