.g-daily-records-header,
#daily-records-index-page,
#daily-records-create-page,
#daily-records-min5-page,
#daily-records-min15-page,
#daily-records-min30-page,
#daily-records-sickness-page {
    --primary-color-dark: #03b988;
    --primary-color-light: #7fc7b4;
}

#daily-records-min5-page {
    --format-theme-color-dark: #ee776d;
    --format-theme-color-light: #edbfbb;
}

#daily-records-min15-page {
    --format-theme-color-dark: #96c51b;
    --format-theme-color-light: #d5e5ac;
}

#daily-records-min30-page {
    --format-theme-color-dark: #27b7cf;
    --format-theme-color-light: #d4eff4;
}

#daily-records-sickness-page {
    --format-theme-color-dark: #d82ebe;
    --format-theme-color-light: #eda4e2;
}

.g-daily-records-details-page {
    --daily-records-details-header-height: 7.8rem;
}



/*
    ----------------------------------------------
    日計表一覧
    ----------------------------------------------
*/

/*
    バッジ
*/

#daily-records-index-page .badge-button {
    width: 14rem;
    height: 5rem;

    border-radius: 3rem;

    color: white;
}

#daily-records-index-page .badge-button small {
    margin-bottom: 0.4rem;

    font-size: 2rem;
    font-weight: bold;
}

#daily-records-index-page .badge-button strong {
    font-size: 2.8rem;
    font-weight: bold;
}

#daily-records-index-page .badge-button[data-format="5min"] {
    background: #ee776d;
}

#daily-records-index-page .badge-button[data-format="15min"] {
    background: #96c51b;
}

#daily-records-index-page .badge-button[data-format="30min"] {
    background: #27b7cf;
}

#daily-records-index-page .badge-button[data-format="sickness"] {
    background: #d82ebe;
}

#daily-records-index-page .badge-button[data-format="sickness"] strong {
    letter-spacing: 0.8rem;
    text-indent: 0.8rem;
}

#daily-records-index-page .badge-button {
    filter: brightness(0.5);
}
#daily-records-index-page .badge-button[aria-checked="true"] {
    filter: unset;
}

/*
    リスト
*/

#daily-records-index-page .list {
    padding: 3rem;
    gap: 3rem;
}

#daily-records-index-page .header-cell,
#daily-records-index-page .row,
#daily-records-index-page .data-cell,
#daily-records-index-page .row > .row-main > .data-cell {
    /* フレックスボックスの大きさによらず拡縮しない。 */
    flex: 0 0 auto;
}

#daily-records-index-page .header-row,
#daily-records-index-page .row {
    padding-right: 2.4rem;
}

#daily-records-index-page .header-row {
    margin: 3rem 0 0.8rem 5rem;
    gap: 1.6rem;

    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color-light);
}

#daily-records-index-page .header-cell {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    text-align: start;
    gap: 0.8rem;
}

#daily-records-index-page .row {
    height: 9rem;

    background-color: white;
    border-radius: 1rem;
    box-shadow: 0px 3px 6px #00000029;
}

#daily-records-index-page .row-main {
    flex: 1;
    align-self: stretch;

    padding: 0 3.6rem;
    gap: 1.6rem;
}

#daily-records-index-page a {
    text-decoration: none;
}

#daily-records-index-page .header-row .marker,
#daily-records-index-page .row .marker {
    width: 2.5rem;
}

#daily-records-index-page .header-row .date,
#daily-records-index-page .header-row .name,
#daily-records-index-page .header-row .home,
#daily-records-index-page .row .date,
#daily-records-index-page .row .name,
#daily-records-index-page .row .home {
    width: 24rem;
    line-height: 1.2;
}

#daily-records-index-page .header-row .age,
#daily-records-index-page .row .age,
#daily-records-index-page .header-row .updated-at,
#daily-records-index-page .row .updated-at {
    width: 15rem;
}

#daily-records-index-page .row .marker {
    align-self: stretch;
    border-radius: 1rem 0 0 1rem;
}

#daily-records-index-page .row[data-format="5min"] .marker {
    background-color: #ee776d;
}

#daily-records-index-page .row[data-format="15min"] .marker {
    background-color: #96c51b;
}

#daily-records-index-page .row[data-format="30min"] .marker {
    background-color: #27b7cf;
}

#daily-records-index-page .row[data-format="sickness"] .marker {
    background-color: #d82ebe;
}

#daily-records-index-page .row .date,
#daily-records-index-page .row .name,
#daily-records-index-page .row .age,
#daily-records-index-page .row .home {
    font-size: 3rem;
    font-weight: bold;
}

#daily-records-index-page .row .date,
#daily-records-index-page .row .updated-at,
#daily-records-index-page .row .pdf-button {
    color: #1b1b1b;
}

#daily-records-index-page .row .name,
#daily-records-index-page .row .age,
#daily-records-index-page .row .home {
    color: #4d4d4d;
}

#daily-records-index-page .row .updated-at {
    white-space: pre-line;
    text-align: center;

    font-size: 2.5rem;
}

#daily-records-index-page .row .pdf-button {
    width: 25rem;
    height: 5rem;
    margin-right: 1.6rem;

    border-radius: 3rem;
    background-color: #ffc834;

    font-size: 2.5rem;
    font-weight: bold;
}



/* PDFまとめて出力 */

#pdf-batch-menu-contents {
    min-width: 172rem;
}

#pdf-batch-menu-contents .g-bullet-panel {
    gap: 0.3rem 0;
}

#pdf-batch-menu-contents .g-bullet-heading {
    font-size: 2rem;
}

#pdf-batch-menu-contents .g-month-picker-wrapper .react-datepicker__input-container > input {
    width: 30rem;
    height: 7rem;
}

#pdf-batch-menu-contents .g-radio:not([aria-selected="true"]) .radio-label {
    color: white;
}



/*
    ----------------------------------------------
    日計表詳細
    ----------------------------------------------
*/

/* header */

#daily-records-details-header {
    height: var(--daily-records-details-header-height);
}

.g-daily-records-header {
    position: sticky;
    left: 0;
    right: 0;
    z-index: 3;
}

.g-daily-records-header > .header-item,
.g-daily-records-header > .menu-grip,
.g-daily-records-header > .login-user-display {
    margin-top: var(--x16);
}

.g-daily-records-header > .menu-grip {
    margin-top: 0;

    /* 縮尺の関係でmenu-gripが大きすぎるのでマージンを減らして調整する。 */
    margin-bottom: 0;
}

.g-daily-records-header .child-selection,
.g-daily-records-header .home-selection .g-flex-row {
    gap: 1.6rem;
}

.g-daily-records-header .child-selection {
    /* font-size: var(--x50); */
    font-weight: bold;
}

.g-daily-records-header .home-selection {
    /* font-size: var(--x25); */
    font-weight: bold;

    color: #4d4d4d;
}

.g-use-header-fixed #daily-records-details-header {
    /* #fixedHeader
    テーブルの横スクロールと粘着ヘッダーを併用できない問題の対策として、
    ページ全体の横幅を固定することで横スクロールを強制する。
    その際にヘッダーがスクロールに追従しないようにfixedにしておく。
    */
    position: fixed;
    height: var(--daily-records-details-header-height);
    z-index: 4;
}

.g-use-header-fixed .g-daily-records-details-body {
    position: relative;
    top: var(--daily-records-details-header-height);
}



/* body */

.g-daily-records-details-body {
    background-color: #ededed;

    display: flex;
    flex-flow: column;
    gap: var(--x50);
}



/* data-table */

.g-daily-records-details-body .data-table {
    width: var(--data-table-total-width);
    height: var(--data-table-total-height);

    line-height: 1.1;
    background-color: white;

    cursor: pointer;
}



/* logo */

.g-daily-records-details-body .data-table .logo-container {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.g-daily-records-details-body .data-table .logo {
    min-width: 8.03rem;
    gap: 0.4rem;

    background: white;
    border-radius: 0 3rem 3rem 0;

    font-size: var(--x35);
    text-align: right;
}

.g-daily-records-details-body .data-table .logo {
    color: var(--format-theme-color-dark);
}

.g-daily-records-details-body .data-table .logo .suffix {
    display: flex;
    flex-flow: column nowrap;

    font-size: var(--x15);
    text-align: left;
}



/* head */

.g-daily-records-details-body .data-head {
    position: sticky;
    top: var(--daily-records-details-header-height);
    z-index: 3;

    width: var(--data-table-total-width);
    height: var(--data-head-height);

    display: flex;
    background-color: var(--format-theme-color-dark);

    cursor: default;
}

.g-daily-records-details-body .data-head .heading-cell {
    height: var(--data-head-height);
    border-right: 0.05rem solid var(--format-theme-color-light);
}

.g-daily-records-details-body .data-head .heading-cell-common {
    color: white;
    font-size: 1.8rem;
    font-weight: bold;

    /* ミルク・牛乳の折り返しのため */
    text-align: center;
    white-space: pre-line;
}

.g-daily-records-details-body .data-head .heading-cell:last-child {
    border-right: none;
}



/* body */

.g-daily-records-details-body .data-body {
    width: var(--data-table-total-width);
    height: var(--data-body-height);

    display: grid;
    grid-template-rows: var(--data-body-grid-template-rows);
    grid-template-columns: var(--data-body-grid-template-columns);
}

.g-daily-records-details-body .data-body-hour-row {
    grid-row: 1;
    grid-column: var(--data-body-hour-row-grid-column);

    position: sticky;
    top: calc(var(--daily-records-details-header-height) + var(--data-head-height));
    z-index: 2;

    height: var(--data-body-hour-row-height);
    padding: 0.2rem 0.8rem;
    background-color: #ededed;

    /* font-size: var(--x25); */
    font-size: 2rem;
    font-weight: bold;
    color: #03b988;

    cursor: default;
}



/* row */

.g-daily-records-details-body .data-row-heading-minute {
    position: sticky;
    left: 0.4rem;
    z-index: 1;

    margin-top: 0.4rem;
    width: max-content;
    height: max-content;
    border-radius: 1rem;
    background-color: white;

    grid-column: 1;

    /* font-size: var(--x25); */
    font-size: 1.8rem;
    font-weight: bold;
    color: #03b988;
}



/* cell */

.data-cell-recorder,
.data-cell-hour-schedule,
.data-cell-assistive-device,
.data-cell-breathed,
.data-cell-sleep,
.data-cell-posture,
.data-cell-cry,
.data-cell-cough,
.data-cell-nose,
.data-cell-temperature,
.data-cell-respiratory-rate,
.data-cell-pulse-rate,
.data-cell-vomit,
.data-cell-excretion,
.data-cell-drink,
.data-cell-meal,
.data-cell-other-text,
.data-cell-temperature-min30,
.data-cell-other-text-min30 {
    position: relative;

    /* 境界線のぶんだけクライアント領域を狭める。 */
    border-top: 0.05rem solid transparent;
    border-right: 0.05rem solid transparent;

    overflow: clip;
}

.g-daily-records-details-body .data-cell-recorder {
    height: var(--data-cell-height);
    padding: 0 0.4rem;

    margin-left: 6rem;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;

    /* font-size: var(--x20); */
    font-weight: bold;
}

.g-daily-records-details-body .data-cell-hour-schedule {
    grid-row: var(--data-cell-hour-schedule-grid-row);
    padding: 0.4rem;

    font-size: 1.8rem;
    white-space: pre-wrap;
}

.g-daily-records-details-body .data-cell-breathed {
    height: var(--data-cell-height);

    font-size: 3rem;
    font-weight: bold;
}

.g-daily-records-details-body .data-cell-assistive-device,
.g-daily-records-details-body .data-cell-nose,
.g-daily-records-details-body .data-cell-excretion,
.g-daily-records-details-body .data-cell-meal,
.g-daily-records-details-body .data-cell-other-text {
    height: var(--data-cell-height);
    padding: 0.4rem;

    font-size: 2.2rem;
    font-weight: bold;
    white-space: pre-wrap;
}

.g-daily-records-details-body .data-cell-sleep,
.g-daily-records-details-body .data-cell-posture,
.g-daily-records-details-body .data-cell-cry {
    height: var(--data-cell-height);
    padding: 0.4rem;

    /* font-size: var(--x25); */
    font-weight: bold;
}

.g-daily-records-details-body .data-cell-cough,
.g-daily-records-details-body .data-cell-vomit {
    height: var(--data-cell-height);
    padding: 0.4rem;
}

.g-daily-records-details-body .data-cell-temperature,
.g-daily-records-details-body .data-cell-respiratory-rate,
.g-daily-records-details-body .data-cell-pulse-rate {
    height: var(--data-cell-height);
    padding: 0.4rem;

    /* font-size: var(--x25); */
    font-size: 2.2rem;
    font-weight: bold;
    color: #4d4d4d;
}

.g-daily-records-details-body .data-cell-drink {
    height: var(--data-cell-height);
    padding: 0.4rem;
}

.g-daily-records-details-body .data-cell-drink-1,
.g-daily-records-details-body .data-cell-drink-2 {
    display: grid;
    grid-template-columns: auto auto;
    place-content: center;
    gap: 0.4rem;

    /* font-size: var(--x20); */
    font-size: 1.8rem;
}

.g-daily-records-details-body .data-cell-drink-3,
.g-daily-records-details-body .data-cell-drink-4 {
    display: grid;
    grid-template-columns: repeat(4, auto);
    place-content: center;
    gap: 0.4rem;

    font-size: 1.4rem;
}

.g-daily-records-details-body .data-cell-temperature-min30 {
    padding: 0.2rem 0;
    justify-self: center;

    font-size: 1.8rem;
    font-weight: bold;
    color: #4d4d4d;
}
.g-daily-records-details-body .data-cell-temperature-min30[data-place="bottom"] {
    align-self: end;
}
.g-daily-records-details-body .data-cell-temperature-min30[data-single="true"] {
    font-size: 2.2rem;
    padding: 0;
}

.g-daily-records-details-body .data-cell-other-text-min30 {
    height: calc(var(--data-cell-height) / 2);
    padding: 0.2rem;

    font-weight: bold;
    white-space: pre-wrap;
    text-overflow: ellipsis;
}
.g-daily-records-details-body .data-cell-other-text-min30[data-place="bottom"] {
    align-self: end;
}

.g-daily-records-details-body .data-cell-temperature-fever-1 {
    color: blue;
}
.g-daily-records-details-body .data-cell-temperature-fever-2 {
    color: red;
}

.g-daily-records-details-body .data-cell-excretion .excretion-code[data-informing="before"] {
    color: red;
}
.g-daily-records-details-body .data-cell-excretion .excretion-code[data-informing="after"] {
    color: blue;
}

.g-daily-records-details-body .data-cell-selected {
    position: relative;
    background-color: #ffc83433;
}

.g-daily-records-details-body .data-cell-selected::after {
    content: " ";
    background-image: url("/static/images/multiselect-icon-filled.svg");

    /* この位置調整のため、(data-cell-*) には position: relative をつけること。 */
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;

    width: 3rem;
    height: 3rem;
    background-size: 3rem 3rem;
}



/*
    モーダル
*/

.g-template-edit-dialog .g-form-dialog-contents {
    width: 140rem;
}

.g-template-edit-dialog-panel {
    max-height: 50vh;
    max-height: calc(100vh - 35rem);

    margin-top: 2rem;
    padding: 5rem 12rem;

    align-items: center;
}

/* 補装具ダイアログのスタイル */

.g-assistive-device-edit-dialog .row {
    align-items: flex-end;
}

.g-assistive-device-edit-dialog select {
    margin-right: 5rem;
}

.g-assistive-device-edit-dialog .button-delete {
    /* #modal_delete */
    margin-left: 2rem;
    margin-bottom: 1rem;
}

/* 脈拍ダイアログなどのスタイル */

.g-respiratory-rate-edit-dialog .g-spin-button,
.g-pulse-rate-edit-dialog .g-spin-button,
.g-temperature-edit-dialog .g-spin-button {
    width: 43.1rem;
    height: 10rem;
}

/* 睡眠ダイアログなどのスタイル */

.g-sleep-edit-dialog .checkbox-grid,
.g-cough-edit-dialog .radio-grid,
.g-nose-edit-dialog .checkbox-grid,
.g-posture-edit-dialog .radio-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 5rem;
}

/* 嘔吐ダイアログのスタイル */

.g-vomit-edit-dialog .button-delete {
    /* #modal_delete */
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.g-assistive-device-edit-dialog .g-template-edit-dialog-panel,
.g-excretion-edit-dialog .g-template-edit-dialog-panel,
.g-vomit-edit-dialog .g-template-edit-dialog-panel {
    /* 高さをmax-heightと同じ値に固定する。コンテンツの変化の際にダイアログの位置が動くのを防ぐため */
    height: calc(100vh - 35rem);
}

/* 排泄ダイアログのスタイル */

.g-excretion-edit-dialog .excretion-panel {
    border-radius: 1rem;
}

.g-excretion-edit-dialog .excretion-panel-heading {
    background: #9d9d9d;
    border-radius: 1rem 1rem 0 0;

    padding: 0.8rem 3rem;
}

.g-excretion-edit-dialog .excretion-panel-body {
    padding: 5rem 3rem;
}

/* 水分ダイアログのスタイル */

.g-water-edit-dialog .g-spin-button {
    width: 42rem;
    height: 10rem;
}

/*
    食事ダイアログ
*/

.g-meal-edit-dialog .meal-display {
    width: 14rem;
    height: 10rem;
    margin-left: 1.3rem; /* 3.3rem - 2rem(gap) */
}

.g-meal-edit-dialog .meal-display[data-active="true"] {
    border-color: #1eda9b;
}

.g-meal-edit-dialog .meal-display-value {
    width: 5.4rem;

    display: block;
    position: relative;
    left: 1rem;
    top: 1rem;
    text-align: right;

    font-size: 4rem;
    font-weight: bold;
    color: #ededed;
}

.g-meal-edit-dialog .meal-display[data-active="true"] .meal-display-value {
    color: #1eda9b;
}

.g-meal-edit-dialog .meal-display-label {
    display: block;
    position: relative;
    right: 1rem;
    bottom: 1rem;
    text-align: right;

    font-size: 3rem;
    font-weight: bold;
}



/* スライダー */

.slider {
    width: 65rem; /* 60rem + 2 * 2.5rem(margin) */

    display: grid;
    grid-template-columns: auto 1fr auto;
}

.slider-label {
    width: 5rem;

    font-size: 3rem;
    font-weight: bold;
    color: #4d4d4d;

    text-align: center;
}

.slider-label[data-value="0"] {
    grid-column: 1;
}

.slider-label[data-value="5"] {
    grid-column: 2;
    margin: 0 auto;
}

.slider-label[data-value="10"] {
    grid-column: 3;
}

.slider-bar {
    grid-column: 1 / 4;

    margin: 1rem 2.5rem;
}

.slider-bar,
.slider-bar-blank,
.slider-bar-filled {
    position: relative;

    height: 2rem;

    background-color: #d8d8d8;
    border-radius: 1rem;
}

.slider-bar-blank {
    width: 100%;
}

.slider-bar-filled {
    top: -100%;
}

.slider-grip {
    position: relative;
    top: -5.5rem;

    width: 5rem;
    height: 5rem;
    border-radius: 5rem;
    background-color: #d8d8d8;
}

.slider[data-active="true"] .slider-bar-filled,
.slider[data-active="true"] .slider-grip {
    background-color: #1eda9b;
}



/*
    書式選択ダイアログ
*/

#format-select-modal .format-select-button {
    appearance: unset;
    border-radius: 0 3rem 3rem 0;
    border: 0.2rem solid #d8d8d8;
    background-color: white;
    padding: 0 2rem 0 2rem;
    cursor: pointer;
}

#format-select-modal .format-suffix {
    font-size: 2.5rem;
}



/*
    集計
*/

.g-daily-records-details-body .g-summary-table {
    width: 99.95%;

    border-radius: 1rem 1rem 0 0;
    border-collapse: collapse;
}

.g-daily-records-details-body .g-summary-table[data-loading="true"] {
    filter: brightness(0.8);
}

.g-daily-records-details-body .g-summary-table .title-row > th {
    padding: 1.85rem 0 var(--x16) 1.35rem;

    letter-spacing: 2.7rem;
    text-indent: 2.7rem;
    font-size: var(--x35);
    font-weight: bold;
}

.g-daily-records-details-body .g-summary-table .header-row,
.g-daily-records-details-body .g-summary-table .body-row {
    font-size: var(--x30);
}

.g-daily-records-details-body .g-summary-table .title-row,
.g-daily-records-details-body .g-summary-table .header-row {
    background: #03b988;
    color: white;
}

.g-daily-records-details-body .g-summary-table .header-row > th,
.g-daily-records-details-body .g-summary-table .body-row > td {
    padding: var(--x30) var(--x10);

    border-left: 0.2rem solid #d8d8d8;
    border-right: 0.2rem solid #d8d8d8;
}

.g-daily-records-details-body .g-summary-table .body-row > td {
    /* 100/6 */
    width: 16.5%;

    border-bottom: 0.2rem solid #d8d8d8;
    background-color: white;

    text-align: center;
}

.g-daily-records-details-body .g-summary-table .body-row > .bath-cell {
    position: relative;
    padding: 0;
}

.g-daily-records-details-body .g-summary-table .bath-button {
    appearance: unset;
    position: absolute;
    top: 0;

    display: block;
    padding: 0;
    width: 100%;
    height: 100%;

    background: transparent;
    border: none;
    cursor: pointer;
}

.g-daily-records-details-body .g-summary-table .milk-grid,
.g-daily-records-details-body .g-summary-table .water-grid {
    display: grid;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 0.8rem;
}

.g-daily-records-details-body .g-summary-table .milk-grid {
    grid-template-columns: repeat(3, auto);
}

.g-daily-records-details-body .g-summary-table .water-grid {
    grid-template-columns: repeat(6, auto);
}

.g-daily-records-details-body .g-summary-table .water-grid .label:nth-of-type(2n) {
    margin-left: var(--x10);
}

.g-daily-records-details-body .g-summary-table .label,
.g-daily-records-details-body .g-summary-table .unit {
    color: #9d9d9d;
    font-weight: bold;
}

.g-daily-records-details-body .g-summary-table .label {
    letter-spacing: -0.2rem;
}

.g-daily-records-details-body .g-summary-table .intake {
    font-weight: bold;
}



/*
    1日の様子のリスト
*/

.g-daily-records-details-body .g-daily-states-list {
    padding-bottom: var(--x50);

    display: grid;
    grid-template-rows: 24rem 30rem 14rem;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--x50);
}

.g-daily-records-details-body .g-daily-states-list .card-heading {
    height: 6.16rem;
    padding-inline: var(--x16);

    background-color: #03b988;
    border-radius: 1rem 1rem 0 0;
}

.g-daily-records-details-body .g-daily-states-list .card[data-dirty="true"] .card-heading {
    filter: brightness(1.3);
}

.g-daily-records-details-body .g-daily-states-list .card-body {
    flex: 1;
    padding: var(--x24);
    border: none;
    outline-offset: -2px;
    resize: none;

    font-size: var(--x25);
}

.g-daily-records-details-body .g-daily-states-list .card[data-prop="message"] {
    grid-row: 2 / 4;
    grid-column: 2;
}