@charset "UTF-8";
/* 全般 */
* { box-sizing: border-box; margin: 0; }
:root {
  --border-color: DarkGray;
  --overlay-vertical-margin:   32px;
  --overlay-horizontal-margin: 32px;
}
.nowrap   { white-space: nowrap; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table { width: max-content; border-collapse: collapse; border: none; }
/* input { font-size: medium; } */
input[type="radio"   ] { margin-right: 0.4em; }
input[type="checkbox"] { margin-right: 0.4em; }
button { padding: 0.5em 1em; margin-right: 1em; }
button:not(:disabled) { cursor: pointer; }
button.thin { padding: 0.2em 1em;  }
i.button { vertical-align: middle; cursor: pointer; }
/* section('content') */
div.content { margin: 0 1em; }
/* 入力フォーム */
tr.disabled { color: Gray; }
.formRow { padding-bottom: 0.5em; }
th.cap, td.cap { text-align: right; vertical-align: top; padding-right: 0.5em; } /* cap: caption */
p.caution, p.comment { font-size: 0.8rem; }
.caution  { color: Red; }
.comment  { color: DarkOliveGreen; }
div.commands,
 td.commands { display: flex; justify-content: flex-start; padding: 1em 0; }
/* 入力必須項目 */
.required, .requiredDesc { color: Crimson; }
.required {
  width: 1%;
  padding-left:  0.2em;
  padding-right: 0.2em;
}
td.required { vertical-align: top; }
/* ユーザ情報入力フォーム */
label.lName { display: inline-block; width: 2em; font-size: smaller; text-align: right; }
.lBirthday /* , .lEmail, .lTel, .lAddress, .lMembershipNo, .lGroupName */ { font-size: 1em; }
input.fEmail, input.fAddress, input.fGroupName,
textarea.fNotes, textarea.fComment  { width: 100%; }
input.fName         { width:  25%; }
input.fBirthday2    { width:  2em; }
input.fBirthday4, input.fPostalCode,
input.fTel          { width:  4em; }
input.fTelAll       { width: 12em; }
input.fMunicipality { width:  8em; }
input.fMembershipNo { width: 10em; }
input.id { width: 12em; }
input.date { width: 7em; /* background: #fff !important; */ cursor: pointer; }
input.date { text-align: center; }
div.btnGender {
  display: inline-block; width: 64px;
  font-size: small; text-align: center; letter-spacing: 1pt;
  color: DarkSlateGray; background: LightCyan;
  border: 1px solid Gray; border-radius: 8px;
  margin: 0; margin-right: 0.5em;
  padding: 2px;
  cursor: pointer;
}
div.btnGender.checked { background: LightGreen; cursor: default; }
/* pagination */
nav.pagination.show { padding: 1em 0em; }
nav.pagination ul {
  display: flex;
  padding-left: 0; list-style: none;
  border-radius: 0.2em;
}
nav.pagination a { text-decoration: none; padding: 0.2em 0.75em; border: 1px solid var(--border-color); cursor: pointer; }
nav.pagination a.disabled  { color: DarkGray; cursor: default; }
nav.pagination li { width: max-content; }
nav.pagination li.active a { color: White; background-color: DodgerBlue; }
div.paginationEmpty { height: 1em; }
/* 検索結果表示 */
.findResult th,
.findResult td { border: 1px solid var(--border-color); }
.findResult th.hidden,
.findResult td.hidden { display: none; }
.findResult th { padding: 0     0.5em; background: LightGray; }
.findResult td { padding: 0.3em 0.5em; }
.findResult td.tal { text-align: left; }
.findResult td.tac { text-align: center; }
.findResult td.tar { text-align: right; }
.findResult td.vat { vertical-align: top; }
.findResult td.vam { vertical-align: middle; }
.findResult td.vab { vertical-align: bottom; }
.findResult button { margin: 0 0.5em; padding: 0.2em 1em;  }
/* オーバレイ */
div.overlayBg { display: none;
  position: fixed; left: 0; top:  0; width: 100%; height: 100%;
  background: #000; opacity: 0.5;
}
div.overlayBg.show { display: block; }
div.overlayFg { display: none; overflow: auto;
  position: fixed; left: 0; top: 0; height: max-content;
  max-height: calc(100vh - var(--overlay-vertical-margin) * 2);
       width: calc(100vw - var(--overlay-horizontal-margin) * 2);
  margin: var(--overlay-vertical-margin) var(--overlay-horizontal-margin);
  opacity: 0; transition: all 0.5s;
}
div.overlayFg.show { display: block; opacity: 1; }
div.overlayContent {
  position: relative; width: fit-content; /* width: 100%; */
  background: #fff; padding: 1em;
}
div#loadingDiv { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2000; }
/* 仮置き */
header h1, footer h1  { font-size: larger; color: DarkGray; background-color: LightGray; }
div#content > h2      { font-size: larger; color: White;    background-color: Brown;     padding: 0.5em; margin: 0 0 1em; }
div.overlayContent h3 { font-size: larger; color: White;    background-color: SeaGreen;  padding: 0.5em; margin: 0 0 1em; }
/* datepicker */
select.ui-datepicker-year, select.ui-datepicker-month { width: unset !important; }
table.ui-datepicker-calendar th.ui-datepicker-week-end > span.sun { color: Red; }
table.ui-datepicker-calendar th.ui-datepicker-week-end > span.sat { color: Blue; }
table.ui-datepicker-calendar td > a.sun { color: Red; }
table.ui-datepicker-calendar td > a.sat { color: Blue; }
/* 開発用 */
   .debug { font-size: small; color: Navy; margin: 0; padding: 0.2em; }
   .debug button { padding: 0 4px; }
pre.debug        { background: Yellow; }
pre.sql          { background: Gold; }
  p.debug.fvp    { background: GoldenRod; }
pre.debug.fvp    { background: PeachPuff; }
  p.debug.footer { background: GreenYellow; }
  p.debug.hItems,
  table.debug    { background: LightGoldenRodYellow; }