#fhcs_hcs { margin: 0 0 0 0; vertical-align: middle; background-color:white; font-family: Arial; font-size:10pt }
#fhcs_content { width: 820px; text-align: left; margin: 0 auto; background-color:white; font-size:10pt }
.fhcs_progresser { 20px; font-size:6pt }
#fhcs_content-centre { width: 820px; text-align:center; margin: 0 auto; background-color:white; font-size:10pt }
.fhcs_menu { width: 820px; text-align:center; margin: 0 auto; background-color:white; font-size: 10pt; border-collapse:collapse; border:0 }
.fhcs_menuRow { border-collapse: collapse}
.fhcs_menuItem { color:white; text-align:center; background-color: #D3741C; border-collapse:collapse; border: 0; cursor:pointer }
.fhcs_menuItem:hover { color:#FFF; text-align:center; background-color:#464C0F; border-collapse:collapse; border:0 }
.fhcs_description { color:white; text-align:center; background-color: #464C0F; font-size:10pt; border-collapse:collapse; border: 1px solid #AAA; padding:8px}
.fhcs_rowLabel { color:white; text-align:right; background-color: #D3741C }
.fhcs_rowLabel-small { color:white; text-align:right; background-color: #D3741C; font-size:8pt }

.fhcs_topbuffer { margin-top: 10px; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_forceup { position:relative; top:-1px }

.fhcs_button-green { color: white; background: #128b40; font-size: 11pt; font-family: arial;cursor:pointer}
.fhcs_button-red { color: white; background: #CA3C3C; font-size: 11pt; font-family: arial;cursor:pointer}
.fhcs_button-blue { color: white; background: #0B6CD5; font-size: 11pt; font-family: arial;cursor:pointer}
.fhcs_button-brown { color: white; background: #D3741C; font-size: 11pt; font-family: arial;cursor:pointer}

.fhcs_div-centre { text-align:center; padding-top:10px; padding-bottom:10px;	width:100% }
.fhcs_dash { color:lightgray; text-align:center; vertical-align: middle; font-size:8pt }
.fhcs_header { background:#FFF }
.fhcs_errorMessage { background: #F00; text-align:center; color:#FFF}

.fhcs_searchDescription { color: black; font-size: 10pt; font-style: italic; text-align: center; background-color: #FFB15E }
.fhcs_searchLabel { color: black; text-align: right }
.fhcs_searchRow { background-color:#FFB15E }

.fhcs_yellow { background-color:#FFFF00}
.fhcs_underline { text-decoration: underline}
.fhcs_bold { font-weight:bold}

.fhcs_textbox { border:0; padding-left:8px; height: 100%; font-size: 11pt; font-family:arial }
.fhcs_dropdown { border:0; padding-left:8px; height: 100%; font-size: 11pt; font-family:arial }

// table, th, td { border-collapse:collapse; border: 1px solid #AAA; padding:8px }

.fhcs_rad { padding: 0;padding-right:12px; font-size: 11pt; font-family: arial; color:black }
.fhcs_rad td { border-style: none; }
.fhcs_radcell { padding: 0;padding-left:8px; }

.fhcs_centre { text-align:center }
.fhcs_noresize { resize:none }

.fhcs_detailLabelHorsBold { background-color:#404155; color:white; font-weight:bold; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelBold { background-color:#D3741C; color:white; font-weight:bold; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelPBold { background-color:#D3741C; color:white; font-weight:bold; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelABold { background-color:#516d9b; color:white; font-weight:bold; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelBBold { background-color:#65956e; color:white; font-weight:bold; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelHors { background-color:#404155; color:white; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelP { background-color:#D3741C; color:white; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelA { background-color:#516d9b; color:white; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelB { background-color:#65956e; color:white; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabel { background-color:#D3741C; color:white; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelCol {
  background-color: var(--label-color, #D3741C); /* fallback color */
  color: white;
  border-collapse: collapse;
  border: 1px solid #AAA;
  padding: 8px;
}
.fhcs_detailLabelColBold {
  background-color: var(--label-color, #D3741C); /* fallback color */
  color: white;
  font-weight:bold;
  border-collapse: collapse;
  border: 1px solid #AAA;
  padding: 8px;
}
.fhcs_detailLabelChangeable { background-color:#D3741C; color:white; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailLabelHeader { background-color:#D3741C; color:white; padding-top:2px; padding-bottom:2px; text-align:center; border-collapse:collapse; border: 1px solid #AAA }
.fhcs_detailStandard { background-color:white; color:black; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailStandardCentre { background-color:white; color:black; text-align:center; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailStandardBlue { background-color:white; color:blue; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailBold { background-color:white; color:black; font-weight:bold; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailBoldBlue { background-color:white; color:blue; font-weight:bold; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailBGred { background-color:red; color:black; border-collapse:collapse; border: 1px solid #AAA; padding:8px }
.fhcs_detailBGgreen { background-color:green; color:black; border-collapse:collapse; border: 1px solid #AAA; padding:8px }

.fhcs_catalogueBold { background-color:white; color:black; font-weight: bold; border: 0; padding:0 }
.fhcs_catalogueStandard { background-color:white; color: black; border: 0; padding:0 }
.fhcs_catalogueContainer { width:520px; margin: 0 auto; text-align:left }
.fhcs_catalogueSmaller { background-color:white; color:black; font-size: 8pt; border: 0; padding:0 }

.fhcs_genealogyTable { border: 2px solid #D3741C; padding:0 }
.fhcs_genealogyCell { border:0; padding:3px }
.fhcs_genealogyMasterCell { border:0 }

.fhcs_grayfont { color:Gray }
.fhcs_graynote { color:Gray; font-size:8pt; padding:0; margin:0 }
.fhcs_whitenote { color:White; font-size:8pt; padding:0; margin:0 }

.fhcs_gridView { font-size:10pt; font-family:arial; background-color:white }
.fhcs_gridViewHeader { background-color:#D3741C; color:white; text-align:center; text-decoration:none}
.fhcs_gridViewHeader a { color: white; }
.fhcs_gridViewHeader a:hover { color: white; }

.fhcs_borderless { border-collapse:collapse; border: 0; padding:0 }
.fhcs_borderless-padded { border-collapse:collapse; border:0; padding: 3px }
.fhcs_border-bottom { border-width:0 0 1px 0}

.fhcs_width48 { width:48px}
.fhcs_width120 { width:120px}

.fhcs_line { width:100%; padding:8px }
.fhcs_data { background-color:white; color: black; }

.fhcs_backPedigree { border:0; border-color:white }

.fhcs_imagebutton { color: white; border-radius:12px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); background:#D3741C; padding:12px; margin:5px 5px 0 5px; }
.fhcs_imagebutton:hover { background:#FF8D30 }
.fhcs_imagebutton-footer { color:Gray; font-size:8pt; width:68px; display:inline-block; padding:0 2px 12px 2px; margin: 0 5px 5px 5px; vertical-align:top; }

.fhcs_loginFail { color:Red }
.fhcs_loginFailSmall { color:Red; font-size:8pt }

.fhcs_footer { font-size:8pt; color:#A7A7A7 }
.fhcs_footer a:link { color:#CECECE }
.fhcs_footer a:visited { color:#CECECE }
.fhcs_footer a:hover  { color:#878787 }

.fhcs_reg-warning { background: yellow; color: black; font-weight: bold;height: 48px;vertical-align: middle;}
.instructions { background-color:#F0E68C; font-size: 9pt; text-align:center}
.fhcs_msg-success { background-color:#98FB98; font-size: 9pt; text-align: center}
.fhcs_msg-pending { background-color:yellow; font-size:9pt; text-align: center}
.fhcs_msg-warning { background-color:yellow; font-size:9pt; text-align: center}
.fhcs_msg-failure { background-color:red; color: white; font-size:9pt; text-align: center}
.fhcs_again { font-size: 12pt; font-weight: bold; text-align: center; padding-top:24px}

.fhcs_operationCell { border-collapse:collapse; border: 0 solid #AAA; padding: 8px 8px 0 8px; text-align: center}

.fhcs_inline {
  display: inline;
}

.fhcs_link-button {
  background: none;
  border: none;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}
.fhcs_link-button:focus {
  outline: none;
}
.fhcs_link-button:link {
  color:white;
}
.fhcs_link-button:visited {
  color:white;
}
.fhcs_link-button:hover {
  color:white;
}
.fhcs_link-button:active {
  color:white;
}

sup.fhcs_source {
  /* visual look */
  background: #b68b43;        /* fhcs background */
  color: #fff;             /* white text for contrast */

  /* make the background form a box */
  padding: 0 0.25em;       /* space left & right of the digit/letter */
  border-radius: 3px;      /* optional: rounded corners */

  /* keep normal superscript position after we change display type */
  display: inline-block;   /* lets padding work in all directions */
  vertical-align: super;   /* pushes the box back up */

  /* typical size for a superscript */
  font-size: 0.75em;       /* 75 % of surrounding text */
  line-height: 1;          /* keeps the box tight */
}



.fhcs-tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
}

.fhcs-tooltip .fhcs-tooltip-text {
      visibility: hidden;
      width: 160px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%; /* position above text */
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
}

.fhcs-tooltip:hover .fhcs-tooltip-text {
      visibility: visible;
      opacity: 1;
}


/* Overlay base styles – hidden by default */
#fhcs_edit_modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;          /* hidden by default */
  z-index: 9999;
  padding: 0;
  margin: 0;
}

/* When we want it visible + centered */
#fhcs_edit_modal.fhcs-show {
  display: flex;                  /* turn on flexbox */
  align-items: center;            /* vertical center */
  justify-content: center;        /* horizontal center */
}

/* Modal box */
#fhcs_edit_modal_content {
  background: #fff;
  width: 80vw;   /* 80% viewport width */
  max-width: 80vw;   /* 80% viewport width */
  height: 80vh;  /* 80% viewport height */
  max-height: 80vh;  /* 80% viewport height */
  /* overflow-y: auto; */
  overflow: hidden;
  padding: 20px; 
  border-radius: 10px;
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); */
  box-sizing: border-box;
  /* box-sizing: content-box; */
}



.fhcs_membership_item {
  cursor: pointer;
  color: #0073aa;
  text-decoration: underline;
}
.fhcs_membership_item:hover {
  color: #005177;
}


.fhcs_small_btn {
    margin-left: 10px;
    margin-top: 10px;
    padding: 2px 6px;
    font-size: 0.7em;
    cursor: pointer;
}

/* slider */
/* Container */
.fhcs_switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 34px;
}

/* Hide the default checkbox */
.fhcs_switch .fhcs_checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider background */
.fhcs_slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: red;   /* OFF = red */
  transition: 0.4s;
  border-radius: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  font-size: 12px;
  font-family: sans-serif;
  font-weight: bold;
  color: white;
}

/* Labels */
.fhcs_label {
  z-index: 1; /* keep labels above the knob */
  pointer-events: none; /* click passes through */
}

/* The circle knob */
.fhcs_slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Checked state = ON */
.fhcs_checkbox:checked + .fhcs_slider {
  background-color: green;
}

/* Move knob to right when ON */
.fhcs_checkbox:checked + .fhcs_slider:before {
  transform: translateX(36px);
}


/* red button */
.fhcs-red-button {
    background-color: red !important;
    color: white !important;       /* makes the text readable */
    border: none;       /* optional: removes border */
    padding: 10px 20px; /* optional: makes it bigger */
    cursor: pointer;    /* pointer cursor on hover */
}

.fhcs-red-button:hover {
    background-color: darkred !important; /* darker red on hover */
}





/* sticky table headers */
/* Sticky table wrapper - no extra scroll */
.fhcs-sticky-wrapper {
  position: relative;
  overflow-x: visible !important;
}

/* Optional z-index base for sticky cells */
.fhcs-sticky-wrapper table td,
.fhcs-sticky-wrapper table th {
  z-index: 1;
}

body .fhcs-sticky-wrapper ~ .wrapper {
  overflow-y: visible !important;
}

#wrapper:has(.fhcs-sticky-wrapper) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}



/* --- FHCS Image Gallery + Lightbox --- */

.fhcs_photo_cell {
  display: flex;            /* horizontal layout */
  flex-wrap: wrap;          /* allow wrapping */
  gap: 8px;
  justify-content: center;  /* <-- center the images horizontally */
  align-items: flex-start;  /* aligns figures at top of row */
}

.fhcs_photo_cell figure {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers image vertically inside figure */
  align-items: center;
  width: 256px;
  height: 430px;           /* fixed height for vertical centering */
  margin: 0;
  text-align: center;
}

.fhcs_photo_cell img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.fhcs_photo_cell figcaption {
  font-size: 0.9em;
  color: #555;
  margin-top: 4px;
}


/* --- FHCS Image Gallery + Lightbox --- */