@import url('https://fonts.googleapis.com/css2?family=Klee+One&family=Noto+Sans+JP&family=Noto+Serif+JP&display=swap');

@page {
  margin: 0em;
}

html.cert-page {
  --font-serif: 'Noto Serif JP', 'Noto Sans JP', sans-serif;
  --font-sans-serif: 'Noto Sans JP', sans-serif;
  --font-handwritten: 'Klee One', 'Noto Sans JP', sans-serif;
  --zindex-draggable-dragging: 10000000;
}

.cert-page > body > section:not([hidden]) {
  display: grid;
}
.cert-page > body > section {
  grid-template: "header     header" min-content
                 "controller sheets" /
                 38em auto;
  width: 100%;
  height: 100vh;
  margin: 0;
}

@media (max-width: 70em) {
  .cert-page > body > section {
    grid-template: "header" min-content
                   "sheets"
                   "controller" 20em;
  }
}

.cert-page > body > section > header:not([hidden]) {
  margin: 0;
}

.cert-page #controller {
  grid-area: controller;
  margin: 0;
  padding: 0;
  background: white;
  color: black;
  overflow: auto;
}

.cert-page #controller > details {
  margin: 0;
}

.cert-page #controller > details > summary {
  margin: 0;
  padding: .3em;
}

.cert-page #controller > details > .create-description {
  margin: 0 .6em;
  padding: 0;
}

.cert-page #base-image-editor > media-upload > form {
  margin: 0 .3em;
  padding: .3em;
}

.cert-page #controller > details > form:not([hidden]) {
  display: grid;
}

.cert-page #controller > details > form {
  grid-template:
    "menu          main main"   1fr
    "menu-buttons  size footer" min-content
   / 10em          2fr  1fr;
  margin: 0 .3em;
  max-height: calc(100vh - 5rem);
  overflow: auto;
}

.cert-page #controller p {
  grid-area: size;
}

.cert-page #controller rb-item-editable-list:not([hidden]),
.cert-page #controller rb-item-editable-list > list-container:not([hidden]) {
  display: contents;
}

.cert-page #controller rb-item-editable-list > list-container > list-main {
  grid-area: menu;
  overflow: auto;
}

.cert-page #controller rb-item-editable-list > list-container > .buttons {
  grid-area: menu-buttons;
  text-align: left;
}

.cert-page #controller rb-edit-form {
  grid-area: main;
  overflow: auto;
}

.cert-page #controller label {
  white-space: nowrap;
}

.cert-page #controller .config:first-child {
  margin-top: 0;
}

.cert-page #controller .config th:not([hidden]),
.cert-page #controller .config td:not([hidden]) {
  display: block;
}

.cert-page #controller .config th {
  padding: 0;
  font-weight: bolder;
}

.cert-page #controller .config tr:not(:first-child) th {
  margin-top: .3em;
}

.cert-page #controller form > .edit-footer {
  grid-area: footer;
  margin: 0;
  text-align: right;
}

.cert-page tbody:not([data-current-field^="mp."]):not([data-current-field^="r."]) .marked_point-editor {
  display: none;
}
.cert-page tbody:not([data-current-field^="rt."]):not([data-current-field^="r."]) .ranking_type-editor {
  display: none;
}
.cert-page tbody:not([data-current-field="r.c"]):not([data-current-field="r.e"]):not([data-current-field="r.l"]) .format-editor {
  display: none;
}

.cert-page tbody[data-current-field="r.c"] .format-editor option:not(.timestamp-editor) {
  display: none;
}
.cert-page tbody[data-current-field="r.e"] .format-editor option:not(.duration-editor),
.cert-page tbody[data-current-field="r.l"] .format-editor option:not(.duration-editor) {
  display: none;
}

.cert-page .team-selector {
  margin: 0 .3em .3em .3em;
  padding: .3em;
  background: #f2f2f2;
  color: black;
}

.cert-page .team-selector > list-main:not([hidden]) {
  display: block;
}

.cert-page .team-selector > list-main {
  height: calc(100vh - 5rem - 6rem);
  overflow: auto;
}

.cert-page .team-selector list-item:not([hidden]) {
  display: flex;
}

.cert-page .team-selector list-item > label {
  flex: 1;
  cursor: pointer;
}

.cert-page .team-selector list-item {
  margin-top: 1px;
  border-top: 1px solid var(--borderColor-mediumGray);
  padding: 1px;
}

.cert-page .team-selector bdi:not([hidden]) {
  display: -webkit-inline-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  vertical-align: middle;
}

.cert-page .team-selector .current-status {
  max-width: 50%;
}

.current-status .current-status-finished,
.current-status .current-status-printed {
  color: var(--ok-color);
  background-color: var(--ok-background-color);
}

.current-status.finished-true:not(.printed-true) .current-status-finished {
  font-weight: bolder;
}

.current-status .current-status-printed::before {
  content: "✔ ";
}

.cert-page #teams-editor .buttons:not([hidden]) {
  display: flex;
}

.cert-page #teams-editor .buttons {
  margin: .3em;
}

.cert-page .print-button {
  min-width: 8em;
  font-size: 120%;
}

.cert-page .data-info {
  flex: 1;
  margin-left: .3rem;
  font-size: 70%;
}

.cert-page .data-info data {
  font-size: 160%;
  font-weight: bolder;
}

.cert-page rb-datetime-item:not([hidden]) {
  display: inline-block;
}

.cert-page .data-info info-line {
  font-size: 160%;
  font-weight: bolder;
  color: inherit;
  background: transparent;
}

#sheet-container-outer {
  grid-area: sheets;
  position: relative;
  background: gray;
  color: white;
  overflow: auto;
}

#sheet-container {
  margin: 0 auto;
  padding: 1em;
  width: max-content;
}

#sheet-container:empty::before {
  display: none;
}

section.sheet {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  background: white;
  color: black;
  page-break-inside: avoid;
  page-break-after: always;
}

section.sheet:not(:first-child) {
  margin-top: 1em;
}

.base-sheet {
  user-select: none;
}

/* .a4p */
section.sheet, .base-sheet { width: 210mm; height: 297mm }
section.sheet[data-paper-size=a4l],
.sheet[data-paper-size=a4l] .base-sheet { width: 297mm; height: calc(210mm - 1mm) }
section.sheet[data-paper-size=a5p],
.sheet[data-paper-size=a5p] .base-sheet { width: 148mm; height: calc(210mm - 1mm) }
section.sheet[data-paper-size=a5l],
.sheet[data-paper-size=a5l] .base-sheet { width: 210mm; height: calc(148mm - 1mm) }
section.sheet[data-paper-size=b5p],
.sheet[data-paper-size=b5p] .base-sheet { width: 182mm; height: calc(257mm - 1mm) }
section.sheet[data-paper-size=b5l],
.sheet[data-paper-size=b5l] .base-sheet { width: 257mm; height: 182mm }
section.sheet[data-paper-size=hy],
.sheet[data-paper-size=hy] .base-sheet { width: 148mm; height: calc(100mm - 1mm) }
section.sheet[data-paper-size=ht],
.sheet[data-paper-size=ht] .base-sheet { width: 100mm; height: 148mm }

print-textbox:not([hidden]) {
  display: inline-flex;
}

print-textbox {
  position: absolute;
  outline: 1px dotted blue;
  overflow: auto;
  resize: both;
  background: white;
  color: black;
  line-height: 1.0;
}

print-textbox:empty::before {
  content: "(空)";
  background-color: red;
  color: white;
}

print-textbox unit-number {
  pointer-events: none;
}

#global-status {
  position: fixed;
  z-index: 1000000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  color: black;
}

rb-drop-area:not([hidden]) {
  display: block;
  position: absolute;
}

#global-status:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

#global-status action-status-message {
  font-size: 300%;
}

footer {
  position: absolute;
  display: block;
  bottom: 1em;
  right: 1em;
  line-height: 1.0;
  color: transparent;
  background: transparent;
}

code {
  font-size: 100%;
}
code::before { content: "<" }
code::after { content: ">" }

time {
  --timejs-serialization: dtsjp1;
}