@charset "UTF-8";
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-body-bg: #f0eeec;
  --color-scrollbar-track: var(--color-set-glay-05);
  --color-scrollbar-thumb: var(--color-set-glay-03);
  --color-text: var(--color-set-glay-09);
  --color-input-error-text: #ff4400;
  --color-border: var(--color-glay-03);
  --color-border-focus: var(--color-glay-05);
  /* Glay */
  --color-set-glay-01: #F4F5F6;
  --color-set-glay-02: #E9ECEF;
  --color-set-glay-03: #DEE2E6;
  --color-set-glay-04: #CED4DA;
  --color-set-glay-05: #ADB5BD;
  --color-set-glay-06: #6C757D;
  --color-set-glay-07: #495057;
  --color-set-glay-08: #343A40;
  --color-set-glay-09: #212529;
  --color-set-glay-10: #121216;
  /* Light Glay */
  --color-set-light-glay-01: #F2F2F2;
  --color-set-light-glay-02: #DFDFDF;
  --color-set-light-glay-03: #CCCCCC;
  --color-set-light-glay-04: #B9B9B9;
  --color-set-light-glay-05: #A5A5A5;
  --color-set-light-glay-06: #9C9C9C;
  --color-set-light-glay-07: #929292;
  --color-set-light-glay-08: #7F7F7F;
  --color-set-light-glay-09: #6C6C6C;
  --color-set-light-glay-10: #595959;
  /* Gold */
  --color-set-gold-01: #EDEA54;
  --color-set-gold-02: #EBDD4E;
  --color-set-gold-03: #E9D048;
  --color-set-gold-04: #E7C343;
  --color-set-gold-05: #E5B63D;
  --color-set-gold-06: #E2A837;
  --color-set-gold-07: #E09B31;
  --color-set-gold-08: #DE8E2C;
  --color-set-gold-09: #DC8126;
  --color-set-gold-10: #DA7420;
  /* Caramel */
  --color-set-caramel-01: #FFDCC2;
  --color-set-caramel-02: #FFD1AD;
  --color-set-caramel-03: #FFC599;
  --color-set-caramel-04: #EDA268;
  --color-set-caramel-05: #DA7E37;
  --color-set-caramel-06: #C06722;
  --color-set-caramel-07: #A85311;
  --color-set-caramel-08: #8F3E00;
  --color-set-caramel-09: #713200;
  --color-set-caramel-10: #522500;
  /* Sand */
  --color-set-sand-01: #EBCFBC;
  --color-set-sand-02: #E4C3AF;
  --color-set-sand-03: #DCB9A1;
  --color-set-sand-04: #D4AF96;
  --color-set-sand-05: #CBA48B;
  --color-set-sand-06: #AE8F7A;
  --color-set-sand-07: #A48470;
  --color-set-sand-08: #997A66;
  --color-set-sand-09: #8F705B;
  --color-set-sand-10: #846552;
  /* Coffee */
  --color-set-coffee-01: #F9F5F3;
  --color-set-coffee-02: #F0E5E1;
  --color-set-coffee-03: #E6D5CE;
  --color-set-coffee-04: #D3B6AB;
  --color-set-coffee-05: #AA8B7E;
  --color-set-coffee-06: #815F51;
  --color-set-coffee-07: #644234;
  --color-set-coffee-08: #4D3328;
  --color-set-coffee-09: #422C22;
  --color-set-coffee-10: #36241C;
  /* Brown */
  --color-set-brown-01: #FFEDD8;
  --color-set-brown-02: #F3D5B5;
  --color-set-brown-03: #E7BC91;
  --color-set-brown-04: #D4A276;
  --color-set-brown-05: #BC8A5F;
  --color-set-brown-06: #A47148;
  --color-set-brown-07: #8B5E34;
  --color-set-brown-08: #6F4518;
  --color-set-brown-09: #603808;
  --color-set-brown-10: #583101;
  /* Red Brown */
  --color-set-red-brown-01: #FFB950;
  --color-set-red-brown-02: #FFAD33;
  --color-set-red-brown-03: #FF7E33;
  --color-set-red-brown-04: #FF7E33;
  --color-set-red-brown-05: #FA5E1F;
  --color-set-red-brown-06: #EC3F13;
  --color-set-red-brown-07: #B81702;
  --color-set-red-brown-08: #A50104;
  --color-set-red-brown-09: #8E0103;
  --color-set-red-brown-10: #7A0103;
  /* Orange */
  --color-set-orange-01: #ffea00;
  --color-set-orange-02: #ffdd00;
  --color-set-orange-03: #ffd000;
  --color-set-orange-04: #ffc300;
  --color-set-orange-05: #FFB700;
  --color-set-orange-06: #FFAA00;
  --color-set-orange-07: #FFA200;
  --color-set-orange-08: #FF9500;
  --color-set-orange-09: #FF8800;
  --color-set-orange-10: #FF7B00;
  /* Yellow Green */
  --color-set-yellow-green-01: #FFFF3F;
  --color-set-yellow-green-02: #EEEF20;
  --color-set-yellow-green-03: #DDDF00;
  --color-set-yellow-green-04: #D4D700;
  --color-set-yellow-green-05: #BFD200;
  --color-set-yellow-green-06: #AACC00;
  --color-set-yellow-green-07: #80B918;
  --color-set-yellow-green-08: #55A630;
  --color-set-yellow-green-09: #2B9348;
  --color-set-yellow-green-10: #007F5F;
  /* Green */
  --color-set-green-01: #B7EFC5;
  --color-set-green-02: #92E6A7;
  --color-set-green-03: #6EDE8A;
  --color-set-green-04: #4AD66D;
  --color-set-green-05: #2DC653;
  --color-set-green-06: #25A244;
  --color-set-green-07: #208B3A;
  --color-set-green-08: #1A7431;
  --color-set-green-09: #155D27;
  --color-set-green-10: #10451D;
  /* Mint */
  --color-set-mint-01: #99E2B4;
  --color-set-mint-02: #88D4AB;
  --color-set-mint-03: #78C6A3;
  --color-set-mint-04: #67B99A;
  --color-set-mint-05: #56AB91;
  --color-set-mint-06: #469D89;
  --color-set-mint-07: #358F80;
  --color-set-mint-08: #248277;
  --color-set-mint-09: #14746F;
  --color-set-mint-10: #036666;
  /* Emerald */
  --color-set-emerald-01: #C4FFF9;
  --color-set-emerald-02: #B0F5F4;
  --color-set-emerald-03: #9CEAEF;
  --color-set-emerald-04: #3DCCC7;
  --color-set-emerald-05: #07BEB8;
  --color-set-emerald-06: #07B6B0;
  --color-set-emerald-07: #06ADA7;
  --color-set-emerald-08: #059D98;
  --color-set-emerald-09: #058F8A;
  --color-set-emerald-10: #05827D;
  /* Emerald Indigo */
  --color-set-emerald-indigo-01: #D9ED92;
  --color-set-emerald-indigo-02: #B5E48C;
  --color-set-emerald-indigo-03: #99D98C;
  --color-set-emerald-indigo-04: #76C893;
  --color-set-emerald-indigo-05: #52B69A;
  --color-set-emerald-indigo-06: #34A0A4;
  --color-set-emerald-indigo-07: #168AAD;
  --color-set-emerald-indigo-08: #1A759F;
  --color-set-emerald-indigo-09: #1E6091;
  --color-set-emerald-indigo-10: #184E77;
  /* Indigo */
  --color-set-indigo-01: #A9D6E5;
  --color-set-indigo-02: #89C2D9;
  --color-set-indigo-03: #61A5C2;
  --color-set-indigo-04: #468FAF;
  --color-set-indigo-05: #2C7DA0;
  --color-set-indigo-06: #2A6F97;
  --color-set-indigo-07: #014F86;
  --color-set-indigo-08: #01497C;
  --color-set-indigo-09: #013A63;
  --color-set-indigo-10: #012A4A;
  /* Aqua */
  --color-set-aqua-01: #DAF0F8;
  --color-set-aqua-02: #CAF0F8;
  --color-set-aqua-03: #ADE8F4;
  --color-set-aqua-04: #90E0EF;
  --color-set-aqua-05: #48CAE4;
  --color-set-aqua-06: #00B4D8;
  --color-set-aqua-07: #0096C7;
  --color-set-aqua-08: #0077B6;
  --color-set-aqua-09: #023E8A;
  --color-set-aqua-10: #03045E;
  /* Alice Blue */
  --color-set-alice-blue-01: #EDF2FB;
  --color-set-alice-blue-02: #E2EAFC;
  --color-set-alice-blue-03: #CCDBFD;
  --color-set-alice-blue-04: #B6CCFE;
  --color-set-alice-blue-05: #A0BBFF;
  --color-set-alice-blue-06: #88AAFF;
  --color-set-alice-blue-07: #7099FF;
  --color-set-alice-blue-08: #5E8CFF;
  --color-set-alice-blue-09: #4C7FFF;
  --color-set-alice-blue-10: #4877ED;
  /* Lavender */
  --color-set-lavender-01: #E0C3FC;
  --color-set-lavender-02: #DDBDFC;
  --color-set-lavender-03: #DAB6FC;
  --color-set-lavender-04: #CBB2FE;
  --color-set-lavender-05: #BBADFF;
  --color-set-lavender-06: #ADA7FF;
  --color-set-lavender-07: #9FA0FF;
  --color-set-lavender-08: #8E94F2;
  --color-set-lavender-09: #8187DC;
  --color-set-lavender-10: #757BC8;
  /* Rose */
  --color-set-rose-01: #FFF0F3;
  --color-set-rose-02: #FFCCD5;
  --color-set-rose-03: #FFB3C1;
  --color-set-rose-04: #FF8FA3;
  --color-set-rose-05: #FF758F;
  --color-set-rose-06: #FF4D6D;
  --color-set-rose-07: #C9184A;
  --color-set-rose-08: #A4133C;
  --color-set-rose-09: #800F2F;
  --color-set-rose-10: #590D22;
  /* Violet */
  --color-set-violet-01: #E0AAFF;
  --color-set-violet-02: #C77DFF;
  --color-set-violet-03: #9D4EDD;
  --color-set-violet-04: #8833cc;
  --color-set-violet-05: #7B2CBF;
  --color-set-violet-06: #5A189A;
  --color-set-violet-07: #4A1277;
  --color-set-violet-08: #3C096C;
  --color-set-violet-09: #240046;
  --color-set-violet-10: #10002B;
  /* HigLabo */
  --color-set-higlabo-01: #F8F9FA;
  --color-set-higlabo-02: #E9ECEF;
  --color-set-higlabo-03: #DEE2E6;
  --color-set-higlabo-04: #CED4DA;
  --color-set-higlabo-05: #ADB5BD;
  --color-set-higlabo-06: #6C757D;
  --color-set-higlabo-07: #495057;
  --color-set-higlabo-08: #6F4518;
  --color-set-higlabo-09: #343A40;
  --color-set-higlabo-10: #212529;
  /* Blue */
  --color-set-blue-01: #DBF3FF;
  --color-set-blue-02: #BDE5FF;
  --color-set-blue-03: #94CEFF;
  --color-set-blue-04: #6CB5FF;
  --color-set-blue-05: #248EFF;
  --color-set-blue-06: #0066DF;
  --color-set-blue-07: #0050AF;
  --color-set-blue-08: #003D8C;
  --color-set-blue-09: #00306D;
  --color-set-blue-10: #002155;
}

html {
  font-size: 14px;
}

@media (min-width: 640px) {
  html {
    font-size: 16px;
  }
}
@keyframes blinking {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
*:focus-visible {
  outline: none;
}

::-webkit-input-placeholder {
  color: var(--color-placeholder);
}

:-ms-input-placeholder {
  color: var(--color-placeholder);
}

::placeholder {
  color: var(--color-placeholder);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px var(--color-scrollbar-track);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 4px;
}

html {
  overflow: hidden;
}

body {
  font-family: "Noto Sans JP", "Roboto", "Inconsolata", Helvetica Neue, Helvetica, San Francisco, 游ゴシック体, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", FontAwesome, sans-serif;
  font-weight: 400;
  font-feature-settings: "pkna";
  word-break: break-all;
  touch-action: manipulation;
}

body {
  background-color: var(--color-body-bg);
  color: var(--color-text);
}

table {
  border-collapse: collapse;
  table-layout: fixed;
}
table thead tr th {
  text-align: left;
}
th.checkbox, td.checkbox {
  width: 40px;
}
th.date, td.date {
  width: 100px;
}
th.create-time, th.update-time, th.execute-time, td.create-time, td.update-time, td.execute-time {
  width: 140px;
}
th.state, td.state {
  width: 80px;
}
th.icon-cell, td.icon-cell {
  width: 40px;
}

img[src=""] {
  display: none;
}

input[type=text],
input[type=password] {
  border-radius: 8px;
  padding: 4px 8px;
}
input[type=text].border-radius-4,
input[type=password].border-radius-4 {
  border-radius: 4px;
}
input[type=text].border-radius-8,
input[type=password].border-radius-8 {
  border-radius: 8px;
}
input[type=text].border-radius-16,
input[type=password].border-radius-16 {
  border-radius: 16px;
}
input[type=text].border-radius-100vmax,
input[type=password].border-radius-100vmax {
  border-radius: 100vmax;
}
input[type=text].color,
input[type=password].color {
  width: 100px;
  border-radius: unset;
}
input[type=text].hour-minute,
input[type=password].hour-minute {
  width: 60px;
}
input[type=text]::placeholder,
input[type=password]::placeholder {
  font-size: 15px;
}

input[type=text][name=SearchText] {
  font-size: 14px;
  height: 28px;
  padding: 2px 8px;
  width: 100%;
}

textarea {
  width: 100%;
  border-radius: 8px;
  padding: 4px 8px;
}

input[type=checkbox] {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

[contenteditable=true],
.body-html-panel {
  font-size: 17px;
  container-type: inline-size;
}
[contenteditable=true] > div,
.body-html-panel > div {
  min-height: 24px;
}
[contenteditable=true] > div.text-type-callout, [contenteditable=true] > div.text-type-quote,
.body-html-panel > div.text-type-callout,
.body-html-panel > div.text-type-quote {
  min-height: 28px;
}
[contenteditable=true] img,
.body-html-panel img {
  max-width: 100%;
}

.body-html-panel .link-record-panel,
.body-html-panel .blob-file-panel {
  margin-bottom: 12px;
}

.text-type-h1 {
  font-size: 24px;
}

.text-type-h2 {
  font-size: 20px;
}

.text-type-h3 {
  font-size: 18px;
}

.text-type-h4 {
  font-size: 16px;
}

.text-type-callout {
  color: var(--color-block-information-panel-text);
  background-color: var(--color-block-information-panel-bg);
  padding: 4px 8px;
  box-sizing: border-box;
}

.text-type-quote {
  color: var(--color-block-information-panel-text);
  background-color: var(--color-block-information-panel-bg);
  border-left: solid 3px var(--color-set-glay-05);
  padding: 4px 8px;
  min-height: 28px;
  box-sizing: border-box;
}

dialog {
  padding: 0;
}

ul {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 20px;
}

label {
  cursor: pointer;
}

blockquote {
  border-left: solid 4px var(--color-set-glay-05);
  padding-left: 8px;
}

time {
  color: var(--color-set-glay-05);
}

a.a-reset {
  color: var(--color-text);
  text-decoration: none;
}
a.a-reset:hover {
  color: var(--color-text);
  text-decoration: none;
}
a.a-reset:visited {
  color: var(--color-text);
  text-decoration: none;
}
a.a-reset:active {
  color: var(--color-text);
  text-decoration: none;
}

a, .link, a.link {
  cursor: pointer;
  text-decoration: none;
}
a:hover, .link:hover, a.link:hover {
  text-decoration: underline;
}
a:hover.button, a:hover.large-button, .link:hover.button, .link:hover.large-button, a.link:hover.button, a.link:hover.large-button {
  text-decoration: none !important;
}
a.button:visited, a.button-radius-4:visited, a.large-button:visited, .link.button:visited, .link.button-radius-4:visited, .link.large-button:visited, a.link.button:visited, a.link.button-radius-4:visited, a.link.large-button:visited {
  color: var(--color-button-text);
}
a.button:active, a.button-radius-4:active, a.large-button:active, .link.button:active, .link.button-radius-4:active, .link.large-button:active, a.link.button:active, a.link.button-radius-4:active, a.link.large-button:active {
  color: var(--color-button-text);
}
a:focus, .link:focus, a.link:focus {
  text-decoration: underline;
}

.menu-link {
  display: flex;
  align-items: center;
}
.menu-link .link {
  display: block;
  width: 100%;
  padding: 4px;
  color: unset;
}
.menu-link .link:hover {
  text-decoration: none;
}
.menu-link .link.display-flex {
  display: flex;
}

.menu-button {
  display: inline-grid;
  place-items: center;
  border-radius: 4px;
  cursor: pointer;
}
.menu-button .text {
  padding: 4px 8px;
}

a.link-button:hover {
  text-decoration: none;
}
a.link-button:hover.button, a.link-button:hover.large-button {
  text-decoration: none !important;
}

button .loading-panel {
  display: none;
}
button[disabled] {
  opacity: 0.4;
}
button[disabled] .loading-panel {
  display: initial;
}
button[disabled] .text {
  display: none;
}

a.link-no-color,
.link-no-color {
  cursor: pointer;
  color: var(--color-text);
  text-decoration: none;
}
a.link-no-color:hover, a.link-no-color:focus, a.link-no-color:visited,
.link-no-color:hover,
.link-no-color:focus,
.link-no-color:visited {
  color: var(--color-text);
  text-decoration: underline;
}

.icon-circle-panel {
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 100vmax;
}

.position-relative {
  position: relative;
}

.position-sticky-top0 {
  position: sticky;
  top: 0;
}

.overflow-y-auto {
  overflow-y: auto;
}

.x-scroll-panel {
  width: 100%;
  overflow-x: auto;
}

.border {
  border: solid 1px var(--color-border);
}

.border-none {
  border: none;
}

.textbox-no-border,
input[type=text].textbox-no-border,
input[type=password].textbox-no-border,
textarea.textbox-no-border {
  border: none;
  border-radius: initial;
  background-color: transparent;
}
.textbox-no-border:hover,
input[type=text].textbox-no-border:hover,
input[type=password].textbox-no-border:hover,
textarea.textbox-no-border:hover {
  background-color: var(--color-form-element-bg);
}
.textbox-no-border:focus,
input[type=text].textbox-no-border:focus,
input[type=password].textbox-no-border:focus,
textarea.textbox-no-border:focus {
  background-color: var(--color-form-element-bg);
}

.illustration-image {
  max-width: 100%;
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-image {
  /* Spinner size and color */
  width: 24px;
  height: 24px;
  border-top-color: var(--color-text-02);
  border-left-color: var(--color-text-02);
  /* Additional spinner styles */
  animation: spinner 400ms linear infinite;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
}
.loading-image.large {
  width: 64px;
  height: 64px;
  border-width: 6px;
}
.loading-image.slow {
  animation: spinner 1s linear infinite;
}

.image-portrait-360 {
  width: 240px;
  height: 360px;
}

.image-landscape {
  width: 360px;
  height: 240px;
}

.object-fit-cover {
  object-fit: cover;
}

.object-fit-contain {
  object-fit: contain;
}

.indicator {
  display: none;
  transition: opacity 500ms ease-in;
}

.htmx-request .indicator {
  display: initial;
}

.htmx-request.indicator {
  display: initial;
}

.time-yyyyMMdd-HHmmss {
  width: 110px;
  flex: 0 0 110px;
}

.time-yyyyMMdd-HHmm {
  width: 90px;
  flex: 0 0 90px;
}

.time-HHmm {
  width: 40px;
  flex: 0 0 40px;
}

.time-HHmmss {
  width: 60px;
  flex: 0 0 60px;
}

.color-square-panel {
  display: inline-block;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.flex-right-panel {
  margin-left: auto;
}

/*----------------------------------------------------------
PopupPanel
----------------------------------------------------------*/
.right-popup-panel {
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  width: 500px;
  max-width: 100dvw;
  height: 100svh;
  overflow: hidden;
  background-color: var(--color-panel-bg);
  display: grid;
  grid-template-rows: calc(100svh - 60px) 60px;
}
.right-popup-panel > .content-panel {
  height: calc(100svh - 60px);
  overflow-y: auto;
}
.right-popup-panel > .content-panel .data-record-panel {
  width: 100%;
}
.right-popup-panel > .content-panel .quill-body-html-panel .quill-textbox .ql-editor {
  max-height: 80dvh;
}
.right-popup-panel > .footer-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  background-color: var(--color-panel-menu-bg);
}
.right-popup-panel [save-button],
.right-popup-panel [delete-button] {
  display: none;
}
.right-popup-panel:not([save-api-path=""]) [save-button] {
  display: unset;
}
.right-popup-panel:not([delete-api-path=""]) [delete-button] {
  display: unset;
}
.right-popup-panel:has(.tenant-search-index-update-panel) {
  width: 1024px;
}
.right-popup-panel:has(.web-access-log-info-panel) {
  width: 1024px;
}
.right-popup-panel:has(.error-log-info-panel) {
  width: 1024px;
}
.right-popup-panel:has(.edit-record-panel) {
  width: 720px;
}
@media screen and (min-width: 1024px) {
  .right-popup-panel:has(.task-info-panel) {
    width: 50dvw;
  }
}
.right-popup-panel:has(.m365-event-info-panel) {
  width: 600px;
}
.right-popup-panel:has(.agent-mail-log-info-panel) {
  width: 1024px;
}
.right-popup-panel:has(.book-page-link-edit-panel) {
  width: 800px;
}
.right-popup-panel:has(.book-page-link-vector-text-edit-panel) {
  width: 800px;
}
.right-popup-panel:has(.book-page-file-image-list-panel) {
  width: 1024px;
}
@media screen and (min-width: 1024px) {
  .right-popup-panel:has(.data-record-file-info-panel) {
    width: 50dvw;
  }
}
.right-popup-panel:has(.invoice-info-panel) {
  width: 600px;
}

.data-record-panel {
  padding: 4px;
}

.data-record-popup-panel > .content-panel > .record-list-panel > .data-record-panel {
  cursor: pointer;
}
.data-record-popup-panel > .content-panel > .record-list-panel .data-record-popup-panel-display-none {
  display: none;
}

.book-page-data-record-panel {
  cursor: pointer;
}
.book-page-data-record-panel:hover {
  background-color: var(--color-item-hover);
}

.full-size-image-popup-panel {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-body-bg);
}
.full-size-image-popup-panel .image-panel {
  width: 100vw;
  height: calc(100dvh - 48px);
  overflow: scroll;
}
.full-size-image-popup-panel .image-panel img {
  margin: 0 auto;
}
.full-size-image-popup-panel .footer-panel {
  height: 48px;
  padding: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
.full-size-image-popup-panel .footer-panel .setting-panel {
  display: flex;
  align-items: center;
}
.full-size-image-popup-panel .footer-panel .setting-panel .image-size {
  flex: 0 0 60px;
  margin: 0 10px;
}
.full-size-image-popup-panel .footer-panel .setting-panel .image-size-slider {
  width: calc(100dvw - 200px);
}
.full-size-image-popup-panel .footer-panel .button-panel {
  flex: 0 0 80px;
  margin: 0 4px 0 auto;
}
.full-size-image-popup-panel .footer-panel .button-panel .button {
  display: inline-block;
}

.select-text-type-popup-panel {
  position: absolute;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  width: 200px;
  height: 400px;
  overflow-y: auto;
}
.select-text-type-popup-panel .text-type {
  padding: 8px;
  cursor: pointer;
}
.select-text-type-popup-panel .text-type:hover, .select-text-type-popup-panel .text-type.current {
  background-color: var(--color-item-hover);
}

.select-color-popup-panel {
  position: absolute;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  width: 330px;
}
.select-color-popup-panel .scroll-container-panel {
  height: 320px;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
}
.select-color-popup-panel .scroll-container-panel .color {
  width: 32px;
  height: 32px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

.notification-popup-panel {
  position: absolute;
  top: 40px;
  right: 0;
  width: 300px;
  height: calc(100dvh - 40px);
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  display: grid;
  grid-template-rows: max-content 1fr;
}
.notification-popup-panel > .header-panel {
  padding: 4px;
  border-bottom: solid 1px var(--color-border);
  box-sizing: border-box;
}
.notification-popup-panel > .content-panel {
  overflow-y: auto;
}

.user-setting-popup-panel {
  position: absolute;
  top: 40px;
  right: 0;
  width: 300px;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
}
.user-setting-popup-panel .header-panel {
  display: flex;
  align-items: flex-start;
  border-bottom: solid 1px var(--color-border);
}
.user-setting-popup-panel .header-panel .image-panel {
  margin-right: 8px;
}
.user-setting-popup-panel .header-panel .display-name {
  font-size: 18px;
  font-weight: bold;
}
.user-setting-popup-panel .header-panel .mail-address {
  font-size: 12px;
}
.user-setting-popup-panel .menu-link {
  padding: 8px;
  cursor: pointer;
}

.user-service-menu-popup-panel {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 300px;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  display: flex;
  flex-wrap: wrap;
}
.user-service-menu-popup-panel .service-icon-panel {
  height: 96px;
  flex: 0 0 96px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.user-service-menu-popup-panel .service-icon-panel .service-icon {
  width: 64px;
  height: 64px;
}
.user-service-menu-popup-panel .service-icon-panel:hover {
  background-color: var(--color-item-hover);
}

#chat-channel-right-popup-panel {
  position: absolute;
  top: 40px;
  right: 0;
  width: 600px;
  max-width: 100dvw;
  height: calc(100dvh - 40px);
  background-color: var(--color-body-bg);
  border: solid 1px var(--color-border);
  display: grid;
  grid-template-rows: 40px calc(100% - 40px);
}
#chat-channel-right-popup-panel .content-panel {
  overflow-y: auto;
}
#chat-channel-right-popup-panel .card-panel {
  background-color: var(--color-panel-bg);
  padding: 4px;
}

.select-chat-reaction-popup-panel {
  position: absolute;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  width: 410px;
}
.select-chat-reaction-popup-panel .scroll-container-panel {
  height: 100%;
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
}
.select-chat-reaction-popup-panel .scroll-container-panel .header-panel {
  font-weight: bold;
  padding: 4px;
}
.select-chat-reaction-popup-panel .scroll-container-panel .reaction-list-panel {
  display: flex;
  flex-wrap: wrap;
  border-bottom: solid 1px var(--color-border);
}
.select-chat-reaction-popup-panel .scroll-container-panel .reaction-list-panel .icon-panel {
  flex: 0 0 40px;
  padding: 4px;
}
.select-chat-reaction-popup-panel .scroll-container-panel .reaction-list-panel .icon-panel:hover {
  background-color: var(--color-item-hover);
}
.select-chat-reaction-popup-panel .scroll-container-panel .reaction-list-panel .icon-panel img {
  width: 32px;
  height: 32px;
}

.recipe-version-update-panel {
  position: absolute;
  top: 8px;
  left: auto;
  right: 16px;
  width: calc(100% - 24px);
  height: 120px;
  background-color: var(--color-panel-bg);
  display: grid;
  grid-template-rows: calc(100% - 48px) 48px;
}

[drag=true] {
  cursor: move;
}
[drag=true][draging=true] {
  position: absolute;
  z-index: 200;
}

[drop-zone-panel=true][draging=true] {
  background-color: var(--color-drop-target-bg);
}

.file-drop-panel {
  display: grid;
  place-items: center;
  padding: 20px;
  background-color: var(--color-item-bg0);
  border: solid 1px var(--color-border);
}

[ordinal-panel] {
  cursor: move;
}
[ordinal-panel][drop-mouse-over] [ordinal-panel-drop-zone-panel] {
  display: block;
  height: 24px;
}
[ordinal-panel][draging=true] {
  position: absolute;
  z-index: 200;
}
[ordinal-panel][draging=true] [ordinal-panel-drop-zone-panel] {
  display: none;
}
[ordinal-panel] [ordinal-panel-drop-zone-panel] {
  background-color: var(--color-drop-target-bg);
  height: 0;
}

/*----------------------------------------------------------
Layout
----------------------------------------------------------*/
.layout-header {
  display: grid;
  grid-template-rows: 40px 1fr;
  position: relative;
}
.layout-header > header {
  display: flex;
  align-items: center;
}
.layout-header > header a {
  color: var(--color-white);
}
.layout-header > header a:visited {
  color: var(--color-white);
}
.layout-header > header .show-navi-icon-panel {
  display: none;
  height: 40px;
  cursor: pointer;
}
.layout-header > header .show-navi-icon-panel .icon-panel {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.layout-header > header .show-navi-icon-panel .text {
  padding-right: 8px;
}
.layout-header > header .show-navi-icon-panel:hover {
  opacity: 0.7;
}
.layout-header > header .logo-text {
  padding: 0 4px;
}

.layout-header-footer {
  display: grid;
  grid-template-rows: 40px calc(100dvh - 80px) 40px;
}
.layout-header-footer > header {
  display: flex;
  align-items: center;
}
.layout-header-footer > header .logo-text {
  padding: 0 4px;
}
.layout-header-footer > header a {
  color: var(--color-white);
  text-decoration: none;
}
.layout-header-footer > content {
  display: block;
  overflow-y: auto;
}
.layout-header-footer > footer {
  display: flex;
  align-items: center;
  height: 40px;
  border-top: solid 1px var(--color-set-glay-06);
  background-color: var(--color-panel-menu-bg);
}
.layout-header-footer > footer > div {
  padding-left: 8px;
}
.layout-header-footer[domain-name="www.kondate-ru.com"] > header, .layout-header-footer[domain-name="localhost:7030"] > header {
  background-color: #ff9e2b;
}
.layout-header-footer[domain-name="www.kondate-ru.com"] > footer, .layout-header-footer[domain-name="localhost:7030"] > footer {
  background-color: #ff9e2b;
  border: none 0;
}

.layout-higlabo {
  display: grid;
  grid-template-rows: 40px var(--height-page-content) 0fr;
  position: relative;
}
.layout-higlabo > header {
  display: flex;
  align-items: center;
}
.layout-higlabo > header a {
  color: var(--color-white);
}
.layout-higlabo > header a:visited {
  color: var(--color-white);
}
.layout-higlabo > header .logo-text {
  display: flex;
  align-items: center;
  padding: 0 4px;
  cursor: pointer;
}
.layout-higlabo > header .logo-text .icon {
  width: 28px;
  height: 28px;
  margin-right: 4px;
}
.layout-higlabo > header .bell-icon-panel:hover {
  background-color: #444444;
}
.layout-higlabo > header .header-user-name-panel {
  display: flex;
  align-items: center;
  height: 40px;
  width: 140px;
  cursor: pointer;
}
.layout-higlabo > header .header-user-name-panel:hover {
  background-color: #444444;
}
.layout-higlabo > header .header-user-name-panel .display-name {
  margin-left: 4px;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.layout-higlabo > content {
  display: grid;
  grid-template-columns: 60px 1fr;
  height: var(--height-page-content);
}
.layout-higlabo > content > .service-list-panel {
  display: block;
  width: 60px;
  height: var(--height-page-content);
  overflow-y: auto;
}
.layout-higlabo > content > .service-list-panel::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
.layout-higlabo > content > .service-list-panel::-webkit-scrollbar-thumb {
  background: var(--color-nav-service-list-panel-bg);
  opacity: 0.5;
}
.layout-higlabo > content > .service-list-panel .service-icon-panel {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  cursor: pointer;
}
.layout-higlabo > content > .service-list-panel .service-icon-panel .service-icon {
  width: 32px;
  height: 32px;
}
.layout-higlabo > content > .service-list-panel .service-icon-panel .service-icon[toggle-state] {
  display: none;
}
.layout-higlabo > content > main {
  height: var(--height-page-content);
}
.layout-higlabo > footer {
  display: none;
}
.layout-higlabo .show-navi-icon-panel {
  display: none;
  cursor: pointer;
  width: 64px;
  height: 64px;
  border-radius: 100vmax;
  background-color: var(--color-panel-menu-bg);
  border: solid 1px var(--color-border);
}
.layout-higlabo .show-navi-icon-panel .icon-panel {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  opacity: 0.7;
}
.layout-higlabo .show-navi-icon-panel:hover {
  opacity: 1;
}
@media screen and (max-width: 640px) {
  .layout-higlabo {
    grid-template-rows: 40px calc(100dvh - 100px) 60px;
    overflow-y: hidden;
  }
  .layout-higlabo [mobile-screen] > .nav-panel {
    display: none;
    width: 100dvw;
  }
  .layout-higlabo .service-icon[toggle-state] {
    display: none;
  }
  .layout-higlabo[mobile-screen-menu-state=Nav] [mobile-screen] > .nav-panel {
    display: block;
  }
  .layout-higlabo[mobile-screen-menu-state=Nav] [mobile-screen] > .main-panel {
    display: none;
  }
  .layout-higlabo[mobile-screen-menu-state=Nav] .service-icon[toggle-state=Left] {
    display: inline;
  }
  .layout-higlabo[mobile-screen-menu-state=Main] [mobile-screen] > .nav-panel {
    display: none;
  }
  .layout-higlabo[mobile-screen-menu-state=Main] [mobile-screen] > .main-panel {
    display: block;
  }
  .layout-higlabo[mobile-screen-menu-state=Main] .service-icon[toggle-state=Right] {
    display: inline;
  }
  .layout-higlabo > content {
    grid-template-columns: 0fr 1fr;
    height: var(--height-page-content);
  }
  .layout-higlabo > content > .service-list-panel {
    display: none;
  }
  .layout-higlabo > content > main {
    width: 100vw;
  }
  .layout-higlabo > content > main > [mobile-screen] > [mobile-screen-position=left] {
    display: none;
  }
  .layout-higlabo > footer {
    display: flex;
    align-items: center;
    z-index: 111;
  }
  .layout-higlabo > footer > .service-list-panel {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: calc(100dvw - 120px);
    height: 60px;
    overflow: hidden;
  }
  .layout-higlabo > footer .service-icon-panel {
    flex: 0 0 60px;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    cursor: pointer;
  }
  .layout-higlabo > footer .service-icon-panel .service-icon {
    width: 32px;
    height: 32px;
  }
  .layout-higlabo > footer .service-icon-panel[toggle-mobile-menu] {
    position: sticky;
    left: 0;
    top: 0;
  }
  .layout-higlabo .show-navi-icon-panel {
    /*            display: flex;*/
    place-items: center;
    position: absolute;
    right: 12px;
    bottom: 72px;
  }
}

.layout-recipe {
  background-color: #FBF3E8;
  height: 100svh;
  display: grid;
  grid-template-rows: calc(100svh - 80px) 80px;
  position: relative;
}
.layout-recipe > content > main > .recipe-scroll-container-panel {
  width: 100dvw;
  height: calc(100svh - 80px);
  overflow-y: scroll;
}
.layout-recipe > footer .recipe-menu-list-panel {
  display: flex;
  align-items: center;
  height: 80px;
  background: linear-gradient(to bottom, #e4c51e, #ff9e2b 70%);
}
.layout-recipe > footer .recipe-menu-list-panel .menu-panel {
  height: 80px;
  flex: 0 0 25%;
  cursor: pointer;
  text-align: center;
  padding: 4px 0;
  line-height: 1;
  color: var(--color-white);
}
.layout-recipe > footer .recipe-menu-list-panel .menu-panel .text {
  margin-top: 4px;
  display: block;
}
.layout-recipe > footer .recipe-menu-list-panel .menu-panel:hover {
  background: linear-gradient(to bottom, #e4c51e, #ff8a00 70%);
}
.layout-recipe > footer .recipe-menu-list-panel .menu-panel.current {
  background: linear-gradient(to bottom, #e4c51e, #fc6a15 70%);
}
.layout-recipe .card-panel {
  border: none;
}
.layout-recipe .button,
.layout-recipe .button-radius-4,
.layout-recipe .large-button {
  background: linear-gradient(to bottom, #e4c51e, #c0431e 84%, #BF462C);
}
@media screen and (max-width: 1024px) {
  .layout-recipe .menu-panel .icon-48 {
    width: 36px;
    height: 36px;
    margin: 6px 0;
  }
}
@media screen and (min-width: 1024px) {
  .layout-recipe .full-window-popup-panel {
    width: 1024px;
  }
  .layout-recipe .message-popup-panel {
    width: 1024px;
    left: calc(50dvw - 512px);
  }
  .layout-recipe > content {
    width: 1024px;
    margin: 0 auto;
  }
  .layout-recipe > content > main > .recipe-scroll-container-panel {
    width: 100%;
  }
  .layout-recipe > footer {
    width: 1024px;
    margin: 0 auto;
  }
}

.layout-2column {
  display: grid;
  grid-template-rows: 40px 1fr;
  position: relative;
}
.layout-2column > header {
  display: flex;
  align-items: center;
}
.layout-2column > header a {
  color: var(--color-white);
}
.layout-2column > header a:visited {
  color: var(--color-white);
}
.layout-2column > header .show-navi-icon-panel {
  display: none;
  height: 40px;
  cursor: pointer;
}
.layout-2column > header .show-navi-icon-panel .icon-panel {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.layout-2column > header .show-navi-icon-panel .text {
  padding-right: 8px;
}
.layout-2column > header .show-navi-icon-panel:hover {
  opacity: 0.7;
}
.layout-2column > header .logo-text {
  padding: 0 4px;
}
.layout-2column > content {
  display: grid;
  grid-template-columns: minmax(20%, 240px) 80%;
}
.layout-2column > content > nav {
  height: calc(100dvh - 40px);
}
.layout-2column > content > nav a:visited {
  color: var(--color-text);
}
.layout-2column > content > main {
  height: var(--height-page-content);
  overflow-y: auto;
}
@media screen and (max-width: 640px) {
  .layout-2column > header .show-navi-icon-panel {
    display: flex;
    place-items: center;
  }
  .layout-2column > header .logo-text {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  [mobile-screen] {
    overflow-x: scroll;
    overflow-y: hidden;
    grid-template-columns: 1fr 1fr !important;
  }
  [mobile-screen] [mobile-screen-position=left] {
    width: 80vw;
  }
  [mobile-screen] [mobile-screen-position=right] {
    width: 100vw;
  }
}
/*----------------------------------------------------------
Common Panel
----------------------------------------------------------*/
.nav-content-panel {
  display: grid;
  grid-template-columns: minmax(20%, 240px) 1fr;
}
.nav-content-panel[service-name=Calendar] {
  grid-template-columns: 200px 1fr;
}
@media screen and (min-width: 1024px) {
  .nav-content-panel[service-name=Calendar] {
    grid-template-columns: 300px 1fr;
  }
}
.nav-content-panel[service-name=Blog] {
  grid-template-columns: 160px 1fr;
}
.nav-content-panel[service-name=DataInterface] {
  grid-template-columns: 20% calc(1fr - 20%);
}
@media screen and (min-width: 1024px) {
  .nav-content-panel[service-name=DataInterface] {
    grid-template-columns: 240px 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .nav-content-panel[service-name=Book] {
    grid-template-columns: 25% 1fr;
  }
}
.nav-content-panel > .nav-panel {
  height: var(--height-page-content);
  overflow-y: auto;
}
.nav-content-panel > .nav-panel:has(.tab-container-panel) {
  display: grid;
  grid-template-rows: 40px calc(100% - 40px);
  overflow: hidden;
}
.nav-content-panel > .nav-panel .tab-content-container-panel {
  overflow-y: auto;
}
.nav-content-panel > .nav-panel .search-container-panel {
  position: sticky;
  top: 0;
}
.nav-content-panel > .nav-panel a.menu-link {
  color: var(--color-text);
}
.nav-content-panel > .nav-panel a.menu-link:hover {
  text-decoration: none;
}
.nav-content-panel > .nav-panel a.menu-link:visited {
  color: var(--color-text);
}
.nav-content-panel > .nav-panel a.menu-link:active {
  color: var(--color-text);
}
.nav-content-panel > .nav-panel .menu-link[current=true] {
  background-color: var(--color-nav-panel-current);
}
.nav-content-panel > .main-panel {
  height: var(--height-page-content);
  overflow-y: auto;
}

.nav-panel .accordion-panel > .header-panel {
  padding: 4px;
}
.nav-panel .accordion-panel > .header-panel:hover {
  background-color: var(--color-menu-link-hover);
}

.calendar-nav-panel .alert-icon {
  visibility: hidden;
}
.calendar-nav-panel .menu-link[token-expired=true] .alert-icon {
  visibility: visible;
}

.tab-container-panel {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: var(--color-tab-bg);
  border-bottom: solid 1px var(--color-tab-border);
}
.tab-container-panel .tab-panel {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 8px;
  cursor: pointer;
  border-bottom: solid 1px var(--color-tab-border);
  text-decoration: none;
}
.tab-container-panel .tab-panel:hover {
  background-color: var(--color-tab-hover);
}
.tab-container-panel .tab-panel.current {
  border-bottom-width: 4px;
}

.progress-container-panel {
  display: flex;
  align-items: center;
  height: 40px;
  background-color: var(--color-tab-bg);
  border-bottom: solid 1px var(--color-tab-border);
}
.progress-container-panel .progress-panel {
  display: grid;
  place-items: center;
  height: 40px;
  padding: 0 8px;
  cursor: pointer;
  color: var(--color-progress-panel-text);
  border-bottom: solid 1px var(--color-tab-border);
  text-decoration: none;
}
.progress-container-panel .progress-panel:hover {
  background-color: var(--color-tab-hover);
}
.progress-container-panel .progress-panel.current {
  color: var(--color-progress-panel-current);
}
.progress-container-panel .progress-icon {
  margin: auto 4px;
}

.site-path {
  background-color: var(--color-panel-menu-bg);
  padding: 4px;
  height: 40px;
}
.site-path a {
  color: var(--color-text);
  margin-right: 8px;
}
.site-path a:focus {
  color: var(--color-text);
}
.site-path a:hover {
  color: var(--color-text);
}
.site-path a:visited {
  color: var(--color-text);
}
.site-path img {
  margin-right: 8px;
}

.filter-container-panel {
  background-color: var(--color-panel-menu-bg);
  height: 40px;
}
.filter-container-panel input[type=text] {
  height: 40px;
  font-size: 20px;
}
.filter-container-panel input[type=text].date {
  width: 120px;
}
.filter-container-panel .icon-panel {
  width: 40px;
  height: 40px;
}
.filter-container-panel .icon-panel:hover {
  background-color: var(--color-filter-condition-panel-hover);
}

.filter-condition-panel {
  border-radius: 4px;
  background-color: var(--color-filter-condition-panel);
  border: var(--color-border);
  cursor: pointer;
}
.filter-condition-panel .header-panel {
  display: flex;
  align-items: center;
}
.filter-condition-panel .header-panel .text {
  padding: 4px 8px;
}
.filter-condition-panel .header-panel .icon-panel {
  margin-left: 4px;
  width: 24px;
}
.filter-condition-panel .header-panel .data-record-panel {
  min-width: 120px;
}
.filter-condition-panel .header-panel .data-record-panel .flex-right-panel {
  display: none;
}
.filter-condition-panel:hover {
  background-color: var(--color-filter-condition-panel-hover);
}

.filter-condition-popup-panel {
  position: absolute;
  top: 2px;
  left: 0;
  min-width: 240px;
  background-color: var(--color-popup-panel-bg);
}
.filter-condition-popup-panel .menu-link {
  display: flex;
  align-items: center;
  padding: 4px;
}
.filter-condition-popup-panel .menu-link:hover {
  background-color: var(--color-item-hover);
}
.filter-condition-popup-panel .menu-link .checkbox-panel {
  width: 100%;
}
.filter-condition-popup-panel .menu-link .checkbox-panel > label {
  width: 100%;
}
.filter-condition-popup-panel .menu-link .checkbox-panel > label > .text-panel:hover {
  text-decoration: none;
}

.record-list-table {
  width: 100%;
}
.record-list-table thead tr th, .record-list-table thead tr td {
  background-color: var(--color-table-header-bg);
  color: var(--color-table-header-text);
}
.record-list-table thead tr th.setting {
  width: 28px;
}
.record-list-table tbody tr td {
  padding: 4px;
}

.record-list-table-container-panel {
  background-color: var(--color-panel-bg);
  border-radius: 16px;
  width: fit-content;
  padding: 12px;
  margin-bottom: 10px;
}
.record-list-table-container-panel .record-list-table {
  width: 100%;
}
.record-list-table-container-panel .record-list-table thead tr th {
  background-color: transparent;
  color: var(--color-text);
  border-bottom: solid 1px var(--color-glay-04);
}
.record-list-table-container-panel .record-list-table thead.back-color tr th, .record-list-table-container-panel .record-list-table thead.back-color tr td {
  background-color: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  padding: 4px;
  border: none 0 transparent;
}

.table-border-container-panel table td {
  border: solid 1px var(--color-border);
}

.edit-record-panel {
  padding: 8px;
  margin-left: auto;
  margin-right: auto;
}
.edit-record-panel .field-panel {
  margin-bottom: 12px;
}
.edit-record-panel .field-panel input[type=text]:not(.time),
.edit-record-panel .field-panel input[type=password] {
  width: 100%;
}
.edit-record-panel .field-panel input[type=text]:not(.time).date,
.edit-record-panel .field-panel input[type=password].date {
  width: 100px;
}
.edit-record-panel .field-panel input[type=text]:not(.time).hour-minute,
.edit-record-panel .field-panel input[type=password].hour-minute {
  width: 60px;
}
.edit-record-panel .field-panel input[type=text]:not(.time) .color,
.edit-record-panel .field-panel input[type=password] .color {
  width: 100px;
}
.edit-record-panel .field-panel .message-text {
  font-size: 13px;
  color: var(--color-text-02);
}
.edit-record-panel .footer-panel {
  margin-top: 40px;
}
.edit-record-panel .footer-panel .button-panel {
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit-record-panel .footer-panel .button-panel button {
  margin: auto 4px;
}

.body-html,
.body-html-panel {
  white-space: pre-wrap;
  word-break: break-all;
}
.body-html > p,
.body-html-panel > p {
  min-height: 24px;
}
.body-html table td,
.body-html-panel table td {
  border: solid 1px var(--color-border);
}

[file-upload-api-path].drag-over {
  background-color: var(--color-drop-target-bg) !important;
}
[file-upload-api-path].drag-over table {
  background-color: var(--color-drop-target-bg) !important;
}

.ql-toolbar {
  background-color: var(--color-set-glay-02);
}

.quill-body-html-panel {
  position: relative;
}
.quill-body-html-panel [contenteditable], .quill-body-html-panel .body-html-panel {
  min-height: 120px;
}
.quill-body-html-panel .icon-circle-panel {
  display: none;
  position: absolute;
  right: 12px;
  top: 4px;
  opacity: 0;
}
.quill-body-html-panel .icon-circle-panel .edit-icon {
  width: 20px;
  height: 20px;
}
.quill-body-html-panel:hover .icon-circle-panel {
  transition: opacity 500ms ease-in;
  opacity: 1;
}
.quill-body-html-panel .button-list-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.quill-body-html-panel[display-mode=BodyHtml] .icon-circle-panel {
  display: grid;
}
.quill-body-html-panel[display-mode=BodyHtml] .body-textbox-panel {
  display: none;
}
.quill-body-html-panel[display-mode=InputText] .body-html-panel {
  display: none;
}

.input-text-body-html-panel textarea, .input-text-body-html-panel .body-html-panel {
  min-height: 120px;
}
.input-text-body-html-panel .body-html-panel:hover {
  background-color: var(--color-form-element-bg);
}
.input-text-body-html-panel[display-mode=InputText] textarea {
  display: none;
}
.input-text-body-html-panel[display-mode=BodyHtml] .body-html-panel {
  display: none;
}

.flex-field-panel {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 32px;
}
.flex-field-panel .field-name {
  flex: 0 0 120px;
}
.flex-field-panel ::placeholder {
  font-size: 12px;
  vertical-align: middle;
}
.flex-field-panel .field-content-panel {
  flex: 0 0 calc(100% - 120px);
}
.flex-field-panel .input-error {
  flex: 0 0 100%;
}

.input-record .record-list-panel {
  max-height: calc(var(--height-page-content) - 140px);
  min-height: 200px;
  overflow-y: auto;
}

[hx-trigger=record-selected] {
  cursor: pointer;
}

.data-record-panel .icon {
  width: 24px;
  height: 24px;
}
.data-record-panel [delete-record] {
  cursor: pointer;
}

.link-record-panel {
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: max-content 1fr 32px;
  background-color: var(--color-panel-bg);
  line-height: 1;
  height: 200px;
  container-type: inline-size;
}
.link-record-panel .title {
  grid-row: 1;
  grid-column: 1;
  font-weight: bold;
  padding: 4px;
  line-height: 1.5;
}
.link-record-panel .description {
  grid-row: 2;
  grid-column: 1;
  place-items: start;
  font-size: 12px;
  color: var(--color-text-02);
  padding: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.5;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}
.link-record-panel .site-name-panel {
  grid-row: 3;
  grid-column: 1;
  display: flex;
  align-items: center;
}
.link-record-panel .site-name-panel .icon-url {
  width: 20px;
  height: 20px;
  margin-left: 4px;
}
.link-record-panel .site-name-panel .site-name {
  margin-left: 4px;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-height: 1.5;
}
.link-record-panel .image-url {
  display: grid;
  place-items: center;
  grid-row: 1/4;
  grid-column: 2;
}
.link-record-panel .image-url img {
  max-height: 200px;
}
@container (max-width: 600px) {
  .link-record-panel {
    grid-template-columns: none;
    grid-template-rows: max-content max-content 1fr 28px;
    max-height: unset;
    height: unset;
  }
  .link-record-panel .title {
    grid-row: 1;
    grid-column: 1;
  }
  .link-record-panel .image-url {
    grid-row: 2;
    grid-column: 1;
  }
  .link-record-panel .image-url img {
    width: 100%;
    max-height: unset;
  }
  .link-record-panel .description {
    grid-row: 3;
    grid-column: 1;
  }
  .link-record-panel .site-name-panel {
    grid-row: 4;
    grid-column: 1;
  }
}

.og-panel .site-name-panel {
  display: flex;
  align-items: center;
}
.og-panel .site-name-panel .icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}
.og-panel .title {
  font-weight: bold;
}
.og-panel .title-panel {
  display: block;
}
.og-panel > .image-container-panel {
  display: block;
  width: 100%;
}
.og-panel .image-panel {
  display: inline-block;
  overflow: hidden;
  height: 300px;
}
.og-panel .image-panel img {
  max-width: 100%;
  max-height: 300px;
}

.card-panel-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.card-panel {
  padding: 12px;
  border-radius: 8px;
}
.card-panel.box-shadow {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.16);
}

.input-card-panel {
  padding: 32px;
  border: solid 1px var(--color-border);
  border-radius: 8px;
}

.stack-container-panel {
  padding: 12px;
}
.stack-container-panel .card-panel-title {
  margin: 0 auto 8px auto;
}
.stack-container-panel .card-panel,
.stack-container-panel .input-card-panel {
  margin: 0 auto 20px auto;
}

.record-menu-list-panel {
  padding: 0;
}
.record-menu-list-panel .menu-link {
  margin: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--color-text);
}
.record-menu-list-panel .menu-link:hover {
  background-color: var(--color-record-menu-link-hover);
  text-decoration: none;
}

.record-menu-icon-list-panel {
  display: flex;
  align-items: center;
  border: solid 1px var(--color-border);
  border-radius: 8px;
}
.record-menu-icon-list-panel .icon-panel {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
.record-menu-icon-list-panel .icon-panel .icon {
  width: 24px;
  height: 24px;
}
.record-menu-icon-list-panel .icon-panel:hover {
  background-color: var(--color-record-menu-link-hover);
}

.grid-template-rows-40px-panel {
  display: grid;
  grid-template-rows: 40px calc(100% - 40px);
  height: var(--height-page-content);
}
.grid-template-rows-40px-panel .header-panel {
  height: 40px;
}
.grid-template-rows-40px-panel .content-panel {
  height: 100%;
}
.grid-template-rows-40px-panel .content-panel .cli-panel {
  height: 100%;
  overflow-y: auto;
}

.row-3-panel {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
}
.row-3-panel > .header-panel h2 {
  height: 100%;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.row-3-panel > .main-panel {
  overflow-y: auto;
}
.field-hint-panel {
  font-size: 12px;
}

.block-container-panel .block-text-panel,
.block-container-panel .block-quote-panel,
.block-container-panel .block-information-panel {
  margin-bottom: 12px;
}

.block-text-panel {
  font-size: 16px;
  line-height: 1.5;
}

.block-quote-panel {
  font-size: 16px;
  line-height: 1.5;
  border-left: solid 4px var(--color-set-glay-05);
}

.block-information-panel {
  font-size: 16px;
  line-height: 1.5;
  word-break: break-all;
}

.cli-panel {
  display: none;
  background-color: var(--color-black);
  color: var(--color-white);
  font-size: 12px;
}
.cli-panel:not(:empty) {
  display: block;
}

.http-method {
  font-size: 11px;
  display: inline-block;
  padding: 1px 4px;
  margin-right: 2px;
  color: var(--color-white);
}
.http-method.get {
  background-color: #0080f0;
}
.http-method.post {
  background-color: #33f033;
}
.http-method.error {
  background-color: #ff2200;
}

.pwa-install-panel {
  display: none;
}
.pwa-install-panel .image-panel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pwa-install-panel .image-panel > div {
  flex: 0 0 calc(50% - 4px);
}
.pwa-install-panel .image-panel > div img {
  width: 100%;
}

body[is-pwa=false] .pwa-install-panel,
body[user-agent*=iPhone] .pwa-install-panel {
  display: block;
}

body[is-pwa=true] .pwa-install-panel {
  display: none;
}

/*----------------------------------------------------------
Panel
----------------------------------------------------------*/
@keyframes bell-ringing {
  0% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}
.dark-mode-checkbox-panel {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
  --background: #73b1d3;
  --background-night: #28096b;
}
.dark-mode-checkbox-panel > input {
  opacity: 0;
  width: 0;
  height: 0;
}
.dark-mode-checkbox-panel > .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background);
  transition: 0.5s;
  border-radius: 30px;
}
.dark-mode-checkbox-panel > .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  border-radius: 50%;
  left: 10%;
  bottom: 3px;
  box-shadow: inset 15px -4px 0px 15px #ffc000;
  transition: 0.5s;
}
.dark-mode-checkbox-panel > input:checked + .slider {
  background-color: var(--background-night);
}
.dark-mode-checkbox-panel > input:checked + .slider:before {
  transform: translateX(112%) rotateY(180deg);
  box-shadow: inset 6px -4px 0px 0px #fff000;
}

.bell-icon.ringing {
  animation: bell-ringing 0.5s infinite ease-in-out;
}

body[signalr-enable=true] .signalr-connection-panel {
  display: none;
}

body[signalr-enable=false] .bell-icon {
  animation: bell-ringing 0.5s infinite ease-in-out;
}

.higlabo-trial-container-panel {
  color: var(--color-text);
  background-color: var(--color-panel-bg);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: stretch;
  height: auto;
  min-height: 400px;
  margin-bottom: 100px;
  container-type: inline-size;
}
.higlabo-trial-container-panel .flex-left-panel {
  flex: 0 0 60%;
  padding: 36px;
}
.higlabo-trial-container-panel .flex-left-panel .header-panel {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 20px;
}
.higlabo-trial-container-panel .flex-left-panel .text {
  font-size: 20px;
  color: var(--color-set-glay-06);
  margin-bottom: 20px;
  white-space: pre-wrap;
  word-break: break-all;
}
.higlabo-trial-container-panel .flex-left-panel .textbox {
  font-size: 24px;
  line-height: 24px;
  width: 60%;
  height: 48px;
}
.higlabo-trial-container-panel .flex-left-panel .textbox::placeholder {
  font-size: 24px;
}
.higlabo-trial-container-panel .flex-left-panel .price {
  font-size: 32px;
  font-weight: bold;
}
.higlabo-trial-container-panel .flex-left-panel .currency {
  font-size: 14px;
}
.higlabo-trial-container-panel .flex-left-panel .button-radius-4,
.higlabo-trial-container-panel .flex-left-panel .large-button {
  font-size: 24px;
  line-height: 24px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  padding: 0 20px;
}
.higlabo-trial-container-panel .flex-right-panel {
  flex: 0 0 40%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background-position: center;
  background-size: cover;
}
@container (max-width: 840px) {
  .higlabo-trial-container-panel .flex-left-panel {
    flex: 0 0 70%;
  }
  .higlabo-trial-container-panel .flex-left-panel .header-panel {
    font-size: 24px;
  }
  .higlabo-trial-container-panel .flex-left-panel .text {
    font-size: 16px;
  }
  .higlabo-trial-container-panel .flex-left-panel .textbox {
    font-size: 16px;
    line-height: 16px;
    width: 60%;
    height: 32px;
  }
  .higlabo-trial-container-panel .flex-left-panel .textbox::placeholder {
    font-size: 18px;
  }
  .higlabo-trial-container-panel .flex-left-panel .button-radius-4,
  .higlabo-trial-container-panel .flex-left-panel .large-button {
    font-size: 16px;
    line-height: 16px;
    height: 32px;
    padding: 4px 12px;
  }
  .higlabo-trial-container-panel .flex-right-panel {
    flex: 0 0 30%;
  }
}
@container (max-width: 600px) {
  .higlabo-trial-container-panel .flex-left-panel {
    flex: 0 0 100%;
  }
  .higlabo-trial-container-panel .flex-right-panel {
    display: none;
  }
}

.higlabo-concept-container-panel {
  margin-bottom: 100px;
  container-type: inline-size;
}
.higlabo-concept-container-panel .title-panel {
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}
.higlabo-concept-container-panel .description-panel {
  width: 100%;
  max-width: 800px;
  margin: auto;
  text-align: center;
  color: var(--color-set-glay-06);
  margin-bottom: 40px;
}
.higlabo-concept-container-panel .content-panel {
  display: flex;
  align-items: stretch;
  gap: 20px;
}
.higlabo-concept-container-panel .content-panel .concept-panel {
  color: var(--color-text);
  background-color: var(--color-panel-bg);
  flex: 0 0 calc((100% - 40px) / 3);
  text-align: center;
  border-radius: 12px;
  padding: 24px;
}
.higlabo-concept-container-panel .content-panel .concept-panel .title {
  margin-top: 12px;
}
.higlabo-concept-container-panel .content-panel .concept-panel .text {
  margin-top: 8px;
}
@container (max-width: 720px) {
  .higlabo-concept-container-panel .content-panel {
    display: block;
  }
  .higlabo-concept-container-panel .content-panel .concept-panel {
    margin-bottom: 12px;
  }
}

.higlabo-service-container-panel .title-panel {
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}
.higlabo-service-container-panel .description-panel {
  width: 100%;
  max-width: 800px;
  margin: auto;
  text-align: center;
  color: var(--color-set-glay-06);
  margin-bottom: 40px;
}
.higlabo-service-container-panel .content-panel {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
}
.higlabo-service-container-panel .content-panel .service-panel {
  display: flex;
  align-items: flex-start;
  flex: 0 0 calc((100% - 10px) / 2);
  margin-bottom: 40px;
}
.higlabo-service-container-panel .content-panel .service-panel .image-panel {
  flex: 0 0 96px;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 100vmax;
  margin-right: 12px;
  background-color: var(--color-white);
}
.higlabo-service-container-panel .content-panel .service-panel .image-panel img {
  width: 64px;
  height: 64px;
}
.higlabo-service-container-panel .content-panel .service-panel .flex-right-panel .text {
  margin-top: 8px;
}
@media screen and (max-width: 480px) {
  .higlabo-service-container-panel .content-panel {
    display: block;
  }
}

.signup-panel {
  max-width: 400px;
  width: 100%;
}
.signup-panel .button-radius-4 {
  width: 100%;
}

.signup-service-list-panel .service-panel {
  margin-bottom: 8px;
  padding: 8px;
  border: solid 1px var(--color-border);
}
.signup-service-list-panel .service-panel .header-panel {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.signup-service-list-panel .service-panel .header-panel input {
  margin-right: 4px;
}
.signup-service-list-panel .service-panel .content-panel {
  display: flex;
}
.signup-service-list-panel .service-panel .content-panel .image-panel {
  margin-right: 8px;
}
.signup-service-list-panel .service-panel .content-panel .image-panel img {
  width: 64px;
  height: 64px;
}

.blob-file-panel {
  display: inline-flex;
  align-items: center;
  padding: 10px;
  margin-right: 6px;
  cursor: pointer;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
}
.blob-file-panel .icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}
.blob-file-panel .file-name {
  font-weight: bold;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.blob-file-panel .file-size {
  display: block;
  font-size: 13px;
  color: var(--color-text-01);
}
.blob-file-panel:hover {
  background-color: var(--color-panel-menu-hover);
}

.tenant-record-panel {
  display: flex;
  align-items: center;
  border-bottom: solid 1px #cccccc;
  padding: 4px;
}

.body-html {
  container-type: inline-size;
}
.body-html img {
  max-width: 100%;
}
.body-html .thumbnail-image-panel {
  display: block;
  height: 360px;
}
.body-html .thumbnail-image-panel img {
  max-width: 100%;
}
.body-html .link-record-panel {
  margin-bottom: 8px;
}

.higlabo-concept-panel {
  padding: 16px;
  max-width: 1280px;
}

.app-store-panel {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  padding: 16px;
}
.app-store-panel .card-panel {
  flex: 0 0 calc(50% - 16px);
  margin: 8px;
}
.app-store-panel .card-panel > .row-3-panel > .main-panel {
  height: 160px;
}
.app-store-panel .card-panel > .row-3-panel > .footer-panel .unavalilable-text {
  color: var(--color-text-02);
}
@container (max-width: 640px) {
  .app-store-panel {
    display: block;
    padding: 8px;
  }
  .app-store-panel .card-panel {
    margin-bottom: 16px;
  }
}
@container (min-width: 1200px) {
  .app-store-panel .card-panel {
    flex: 0 0 calc(33% - 16px);
  }
}
@container (min-width: 1600px) {
  .app-store-panel .card-panel {
    flex: 0 0 360px;
  }
}

.data-scheme-column-data-record-panel {
  padding: 2px 4px;
}
.data-scheme-column-data-record-panel .header-panel .display-name {
  flex: 0 1 calc(100% - 120px);
}
.data-scheme-column-data-record-panel .header-panel .data-type {
  flex: 0 0 112px;
  width: 112px;
  margin: 0 4px;
}
.data-scheme-column-data-record-panel .header-panel .icon-panel {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}
.data-scheme-column-data-record-panel .field-panel {
  margin-bottom: 0;
}
.data-scheme-column-data-record-panel [hig-property-type][name=ColumnList] > .record-list-panel {
  display: none;
  padding: 0;
  min-height: auto;
}
.data-scheme-column-data-record-panel [hig-property-type=Array][name=ColumnList] > .record-list-panel {
  display: block;
}
.data-scheme-column-data-record-panel [hig-property-type=Array][name=ColumnList] > .record-list-panel:has(.item) {
  padding: 4px;
  display: block;
}

.calendar-week-table,
.calendar-day-of-week-table {
  width: 100%;
  min-width: 800px;
  height: 40px;
}
.calendar-week-table thead th,
.calendar-day-of-week-table thead th {
  background-color: var(--color-body-bg);
}
.calendar-week-table thead th .day-of-week-text,
.calendar-day-of-week-table thead th .day-of-week-text {
  font-size: 14px;
  line-height: 1;
  text-align: center;
  background-color: #aaaaaa;
  margin: 2px;
  padding: 4px 2px 4px 2px;
  margin-bottom: 6px;
}
.calendar-week-table thead th:first-child .day-of-week-text,
.calendar-day-of-week-table thead th:first-child .day-of-week-text {
  border-radius: 100vmax 0 0 100vmax;
}
.calendar-week-table thead th:last-child .day-of-week-text,
.calendar-day-of-week-table thead th:last-child .day-of-week-text {
  border-radius: 0 100vmax 100vmax 0;
}
.calendar-week-table thead th.saturday .day-of-week-text,
.calendar-day-of-week-table thead th.saturday .day-of-week-text {
  background-color: var(--color-saturday);
}
.calendar-week-table thead th.sunday .day-of-week-text,
.calendar-day-of-week-table thead th.sunday .day-of-week-text {
  background-color: var(--color-sunday);
}

.calendar-container-panel {
  display: grid;
  grid-template-columns: 100px calc(100% - 100px);
  height: 100%;
}
@media screen and (max-width: 1200px) {
  .calendar-container-panel {
    display: block;
  }
  .calendar-container-panel .month-list-panel {
    display: none;
  }
}
.calendar-container-panel .month-list-panel {
  height: 100%;
  overflow-y: auto;
}
.calendar-container-panel .month-list-panel .year {
  font-size: 24px;
  font-weight: bold;
}
.calendar-container-panel .month-list-panel .year:hover {
  text-decoration: underline;
}
.calendar-container-panel .month-list-panel .month {
  display: block;
  font-size: 18px;
  color: var(--color-text-02);
}
.calendar-container-panel .month-list-panel .month.current {
  color: var(--color-text);
  font-weight: bold;
}
.calendar-container-panel .calendar-table-container-panel {
  display: grid;
  grid-template-rows: 40px calc(100% - 40px);
  height: 100%;
  overflow-x: auto;
}
.calendar-container-panel .calendar-table-container-panel .calendar-day-of-week-table-container-panel {
  padding-right: 8px;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel {
  overflow-y: scroll;
  height: 100%;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table {
  width: 100%;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table tbody tr.load-data-row {
  display: none;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table tbody tr.load-data-row:nth-child(1) {
  display: table-row;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table tbody tr.load-data-row:last-child {
  display: table-row;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table tbody tr.load-data-row td .load-data-panel {
  display: grid;
  place-items: center;
  height: 36px;
  width: 270px;
  margin: 0 auto 12px auto;
  border-radius: 100vmax;
  background-color: var(--color-panel-menu-bg);
  cursor: pointer;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table tbody tr.load-data-row td .load-data-panel:hover {
  background-color: var(--color-panel-menu-hover);
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table tbody tr.load-data-row td .load-data-panel .loading-panel {
  margin-left: 12px;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table tbody tr td {
  vertical-align: top;
}
.calendar-container-panel .calendar-table-container-panel .scroll-container-panel .calendar-table tbody tr td .record-list-panel {
  min-height: 10dvh;
  padding-right: 2px;
}

.calendar-week-container-panel {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 40px calc(100% - 40px);
}
.calendar-week-container-panel .scroll-container-panel {
  width: 100%;
  overflow: auto;
}
.calendar-week-container-panel .scroll-container-panel .calendar-week-table thead tr th {
  position: sticky;
  top: 0;
  width: 200px;
  padding: 2px 0;
}
.calendar-week-container-panel .scroll-container-panel .calendar-week-table thead tr th .day-of-week-text {
  font-size: 20px;
  margin: 1px 1px 8px 1px;
}
.calendar-week-container-panel .scroll-container-panel .calendar-week-table tbody tr td {
  vertical-align: top;
}
.calendar-week-container-panel .scroll-container-panel .calendar-week-table tbody tr td .record-list-panel {
  padding: 0 2px;
}

.calendar-table .date-text-border,
.calendar-week-table .date-text-border {
  width: calc(100% - 4px);
  margin: 0 2px;
  height: 6px;
  background-color: var(--color-border);
  border-radius: 100vmax;
  margin-bottom: 2px;
}
.calendar-table .date-text-border.today,
.calendar-week-table .date-text-border.today {
  background-color: #ff0000;
}
.calendar-table .date-text-panel,
.calendar-week-table .date-text-panel {
  display: flex;
  align-items: center;
}
.calendar-table .date-text-panel .date-text,
.calendar-week-table .date-text-panel .date-text {
  font-size: 20px;
  line-height: 1;
}
.calendar-table .date-text-panel .flex-right-panel,
.calendar-week-table .date-text-panel .flex-right-panel {
  display: grid;
  place-items: center;
}
.calendar-table .date-text-panel .add-schedule-icon,
.calendar-week-table .date-text-panel .add-schedule-icon {
  visibility: hidden;
  margin: 2px;
}
.calendar-table .date-text-panel:hover .add-schedule-icon,
.calendar-week-table .date-text-panel:hover .add-schedule-icon {
  visibility: visible;
  cursor: pointer;
}
.calendar-table .task-card-panel,
.calendar-week-table .task-card-panel {
  margin-bottom: 4px;
}
.calendar-table .task-card-panel > .header-panel,
.calendar-week-table .task-card-panel > .header-panel {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.calendar-table .task-card-panel [hx-confirm],
.calendar-week-table .task-card-panel [hx-confirm] {
  display: none;
}
.calendar-table .task-card-panel .task-user-record-panel,
.calendar-week-table .task-card-panel .task-user-record-panel {
  display: none;
}

.event-record-panel {
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  padding: 4px;
  margin-bottom: 2px;
  border-radius: 8px;
  line-height: 1.2;
  cursor: pointer;
}
.event-record-panel .title {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.event-record-panel:hover {
  background-color: var(--color-item-hover);
}

.calendar-event-info-panel .data-record-panel {
  width: 100%;
}
.calendar-event-info-panel .data-record-panel .icon {
  width: 20px;
  height: 20px;
}
.calendar-event-info-panel .data-record-panel [delete-record] {
  display: none;
}
.calendar-event-info-panel .data-record-panel:hover {
  background-color: var(--color-form-element-bg);
}
.calendar-event-info-panel input.subject {
  padding-left: 0;
  font-size: 18px;
}
.calendar-event-info-panel .field-panel {
  margin-bottom: 12px;
}
.calendar-event-info-panel .field-panel.duration {
  justify-content: flex-start;
}
.calendar-event-info-panel .field-panel.duration .separator {
  margin: 0 8px;
}
.calendar-event-info-panel .field-panel.duration .start-time, .calendar-event-info-panel .field-panel.duration .end-time {
  display: inline-block;
  width: 60px;
}
.calendar-event-info-panel .field-panel.duration .start-time .input-record, .calendar-event-info-panel .field-panel.duration .end-time .input-record {
  width: 100%;
  border-radius: 0;
  background-color: transparent;
  border: none 0;
}
.calendar-event-info-panel .field-panel.duration .start-time:hover, .calendar-event-info-panel .field-panel.duration .end-time:hover {
  background-color: var(--color-item-hover);
}
.calendar-event-info-panel .field-panel.duration .indicator {
  display: none;
}
.calendar-event-info-panel .field-panel.duration .indicator.htmx-request {
  display: inline-block;
}
.calendar-event-info-panel .field-panel.duration .indicator.htmx-request > div {
  display: inline;
}
.calendar-event-info-panel .flex-field-panel input[type=text] {
  padding-left: 0;
}
.calendar-event-info-panel .flex-field-panel.event-status .data-record-panel {
  padding-left: 0;
}
.calendar-event-info-panel .attendee-list-panel {
  max-height: 400px;
  overflow-y: auto;
  border: solid 1px var(--color-border);
  margin-bottom: 12px;
}
.calendar-event-info-panel .attendee-record-panel {
  display: flex;
  align-items: center;
  padding: 4px;
}
.calendar-event-info-panel .attendee-record-panel .mail-address {
  margin-left: 4px;
  color: var(--color-text-02);
}
.calendar-event-info-panel .attendee-record-panel .response {
  margin-left: auto;
}

.chat-message-panel .header-panel {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 12px;
}
.chat-message-panel .header-panel time {
  cursor: pointer;
}
.chat-message-panel .header-panel time:hover {
  text-decoration: underline;
}
.chat-message-panel .header-panel .record-menu-icon-list-panel {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
}
.chat-message-panel .reaction-list-panel {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.chat-message-panel .reaction-list-panel .reaction-panel {
  margin-right: 4px;
  height: 24px;
  line-height: 1;
}
.chat-message-panel .thread-message-count-panel {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100vmax;
  cursor: pointer;
}
.chat-message-panel .thread-message-count-panel:hover {
  background-color: var(--color-record-menu-link-hover);
}
.chat-message-panel .edit-panel {
  display: none;
  margin-bottom: 8px;
}
.chat-message-panel[display-mode=Edit] .body-html {
  display: none;
}
.chat-message-panel[display-mode=Edit] .edit-panel {
  display: block;
}
.chat-message-panel:hover .record-menu-icon-list-panel {
  display: flex;
}
.chat-message-panel .chat-message-bookmark-panel {
  display: flex;
  align-items: center;
}
.chat-message-panel .chat-message-bookmark-panel .checkbox-panel {
  display: inline-block;
}
.chat-message-panel .chat-message-bookmark-complete-panel {
  display: flex;
  align-items: center;
}

.chat-thread-message-list-panel {
  display: grid;
  grid-template-rows: calc(100% - 60px) 60px;
  height: 100%;
}
.chat-thread-message-list-panel > .content-panel {
  height: 100%;
  overflow-y: auto;
}
.chat-thread-message-list-panel > .content-panel .thread-message-count-panel {
  display: none;
}
.chat-thread-message-list-panel > .content-panel .input-panel {
  margin-top: 40px;
}
.chat-thread-message-list-panel > .footer-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-panel-menu-bg);
}

.agent-voice-panel {
  display: grid;
  grid-template-rows: 40px calc(100% - 160px) 120px;
  height: 100%;
}
.agent-voice-panel .header-panel {
  padding: 4px;
}
.agent-voice-panel .content-panel {
  display: grid;
  grid-template-columns: 3fr 1fr;
}
.agent-voice-panel .content-panel .flex-left-panel {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel {
  width: 100%;
  padding: 0 8px 4px 4px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .agent-voice-response-panel {
  border-radius: 4px;
  background-color: var(--color-panel-bg);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .agent-voice-response-panel .header-panel {
  display: flex;
  align-items: center;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .agent-voice-response-panel .header-panel img {
  margin-right: 4px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .agent-voice-response-panel .text {
  padding: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-loading-panel {
  background-color: var(--color-panel-bg);
  border-radius: 4px;
  padding: 8px;
  margin-bottom: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .agent-voice-transcript-delta-panel {
  background-color: var(--color-black);
  color: var(--color-white);
  margin-bottom: 8px;
  padding: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-conversation-evaluate-panel {
  background-color: var(--color-panel-bg);
  border-radius: 4px;
  padding: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-conversation-evaluate-panel .sentence-panel {
  margin-bottom: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-conversation-evaluate-panel .sentence-panel .user-sentence {
  font-size: 16px;
  font-weight: bold;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-conversation-evaluate-panel .sentence-panel .proposal-list-panel {
  padding: 8px;
  border: solid 1px var(--color-border);
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-conversation-evaluate-panel .evaluation-points {
  font-size: 32px;
  font-weight: bold;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-link-list-panel {
  background-color: var(--color-panel-bg);
  border-radius: 4px;
  padding: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-link-list-panel .keyword-list-panel {
  margin-bottom: 12px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-link-list-panel .keyword-list-panel .keyword {
  font-weight: bold;
  border: solid 1px var(--color-border);
  border-radius: 4px;
  padding: 4px 8px;
  margin-right: 4px;
  margin-bottom: 8px;
  line-height: 1;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-youtube-list-panel {
  background-color: var(--color-panel-bg);
  border-radius: 4px;
  padding: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-youtube-list-panel .keyword-list-panel {
  margin-bottom: 12px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-youtube-list-panel .keyword-list-panel .keyword {
  font-size: 20px;
  font-weight: bold;
  border: solid 1px var(--color-border);
  border-radius: 4px;
  padding: 4px 8px;
  margin-right: 4px;
  line-height: 1;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-youtube-list-panel .youtube-list-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-youtube-list-panel .youtube-list-panel .youtube-panel {
  display: grid;
  place-items: baseline;
  width: 320px;
  height: 180px;
}
.agent-voice-panel .content-panel .flex-left-panel .message-list-panel .function-calling-youtube-list-panel .youtube-list-panel .youtube-panel .title {
  display: block;
  font-weight: bold;
  width: 100%;
  padding: 8px;
  text-decoration: none;
  color: var(--color-white);
  background-image: linear-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
}
.agent-voice-panel .content-panel .flex-right-panel {
  width: 100%;
  padding: 0 8px 8px 8px;
}
.agent-voice-panel .content-panel .flex-right-panel .card-panel {
  height: 100%;
}
.agent-voice-panel .footer-panel {
  background-color: var(--color-panel-menu-bg);
}
.agent-voice-panel .footer-panel .sound-wave {
  width: 100%;
  height: 60px;
}
@container (max-width: 640px) {
  .agent-voice-panel .content-panel {
    grid-template-columns: 100% 0%;
  }
  .agent-voice-panel .content-panel .flex-right-panel {
    display: none;
  }
}

.agent-mail-log-record-panel {
  display: flex;
  align-items: center;
}
.agent-mail-log-record-panel .flex-right-panel {
  margin-left: auto;
  flex: 0 0 content;
}

.recipe-record-panel {
  display: flex;
  align-items: center;
  border-bottom: solid 1px #cccccc;
  padding: 4px;
}

#recipe-material-list-panel {
  display: grid;
  grid-template-rows: 40px calc(100% - 200px) 160px;
  height: calc(var(--height-page-content) - 24px);
  padding: 8px;
}
#recipe-material-list-panel > .content-panel {
  overflow-y: auto;
  height: 100%;
}
.recipe-material-record-panel {
  display: flex;
  align-items: center;
  border-bottom: solid 1px #cccccc;
  padding: 4px;
}

.agent-mail-log-info-panel .body-text,
.agent-mail-log-info-panel .body-html {
  border: solid 1px var(--color-border);
}
.agent-mail-log-info-panel .body-html {
  background-color: var(--color-white);
  color: var(--color-black);
}
.agent-mail-log-info-panel .field-panel {
  margin-bottom: 12px;
}

.data-language-model-record-panel .model-name {
  font-size: 12px;
}

.time-zone-time {
  font-weight: bold;
  min-width: 60px;
}

.environment-info-table {
  width: 100%;
}
.environment-info-table tbody tr td:nth-child(1) {
  width: 120px;
}
.environment-info-table tbody tr td:nth-child(2) {
  text-align: right;
}

.tenant-usage-table thead tr td.usage {
  width: 120px;
  text-align: right;
}
.tenant-usage-table thead tr td.unit {
  width: 70px;
  text-align: right;
}
.tenant-usage-table thead tr td.price {
  width: 100px;
  text-align: right;
}
.tenant-usage-table tbody tr td.usage {
  text-align: right;
}
.tenant-usage-table tbody tr td.unit {
  text-align: right;
}
.tenant-usage-table tbody tr td.price {
  text-align: right;
}

.ai-feature-container-panel {
  padding: 12px;
}
.ai-feature-container-panel > .content-panel {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media screen and (max-width: 720px) {
  .ai-feature-container-panel > .content-panel {
    display: block;
  }
  .ai-feature-container-panel .ai-feature-card-panel {
    margin-bottom: 12px;
  }
}

.ai-feature-card-panel {
  flex: 0 0 360px;
  height: 200px;
  display: grid;
  grid-template-rows: 32px 1fr 36px;
  padding: 12px;
  border-radius: 8px;
}
.ai-feature-card-panel > .header-panel {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: bold;
}
.ai-feature-card-panel > .content-panel {
  font-size: 14px;
}
.ai-feature-card-panel button {
  height: 36px;
  width: 100%;
}

.proofreading-container-panel {
  display: grid;
  grid-template-rows: 40px calc(100% - 200px) 160px;
  height: 100%;
}
.proofreading-container-panel > .header-panel {
  display: flex;
  align-items: center;
  padding: 4px;
}
.proofreading-container-panel > .header-panel .flex-right-panel {
  flex: 0 0 200px;
}
.proofreading-container-panel > .content-panel {
  width: 100%;
}
.proofreading-container-panel > .content-panel > div {
  flex: 0 0 50%;
}
.proofreading-container-panel > .content-panel > div textarea {
  height: 100%;
}
.proofreading-container-panel > .content-panel > div.flex-right-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
.proofreading-container-panel > .content-panel > div.flex-right-panel .cli-panel {
  flex: 0 1 content;
  padding: 8px;
  max-height: 50%;
  overflow-y: auto;
}
.proofreading-container-panel > .content-panel > div.flex-right-panel .proofreading-result-panel {
  padding: 4px;
  flex: 1 1 1fr;
}
.proofreading-container-panel > .content-panel > div.flex-right-panel .proofreading-result-panel .section-title {
  font-weight: bold;
}
.proofreading-container-panel > .content-panel > div.flex-right-panel .proofreading-result-panel .correction-list-panel {
  margin-bottom: 12px;
}
.proofreading-container-panel > .content-panel > div.flex-right-panel .proofreading-result-panel .correction-list-panel .correction-record-panel {
  padding: 8px;
  margin-bottom: 12px;
}
.proofreading-container-panel > .content-panel > div.flex-right-panel .proofreading-result-panel .correction-list-panel .correction-record-panel .category-list-panel {
  margin-bottom: 8px;
}
.proofreading-container-panel > .content-panel > div.flex-right-panel .proofreading-result-panel .correction-list-panel .correction-record-panel .category-list-panel .category {
  display: inline-block;
  border-radius: 100vmax;
  font-size: 13px;
  padding: 4px 12px;
  margin-bottom: 4px;
  word-break: break-word;
  background-color: var(--color-set-glay-01);
  color: var(--color-set-glay-10);
}
.proofreading-container-panel > .content-panel > div.flex-right-panel .proofreading-result-panel .correction-list-panel .correction-record-panel .block-information-panel {
  padding: 8px;
}
.proofreading-container-panel > .footer-panel {
  padding: 12px;
  background-color: var(--color-panel-menu-bg);
}

.translator-container-panel {
  display: grid;
  grid-template-rows: 1fr 160px;
  height: 100%;
}
.translator-container-panel .filter-condition-popup-panel {
  height: 80dvh;
  overflow-y: auto;
}
.translator-container-panel > .content-panel {
  width: 100%;
}
.translator-container-panel > .content-panel > div {
  flex: 0 0 50%;
  display: grid;
  grid-template-rows: 40px 1fr;
}
.translator-container-panel > .content-panel > div .translate-result-panel {
  display: flex;
  flex-direction: column;
}
.translator-container-panel > .content-panel > div .translate-result-panel .cli-panel {
  flex: 0 1 content;
  padding: 8px;
  max-height: 50%;
}
.translator-container-panel > .content-panel > div .translate-result-panel textarea {
  flex: 1 1 1fr;
  height: 100%;
}
.translator-container-panel > .footer-panel {
  padding: 12px;
  background-color: var(--color-panel-menu-bg);
}

.document-file-record-list-table th.create-time {
  width: 130px;
}
.document-file-record-list-table th.display-name {
  width: 280px;
}
.document-file-record-list-table th.file-size {
  width: 120px;
}
.document-file-record-list-table th.column-cell {
  width: 150px;
}
.document-file-record-list-table td.column-cell {
  padding: 0;
}
.document-file-record-list-table td.column-cell > div {
  padding: 0;
}
.data-record-file-panel {
  width: calc(100% - 16px);
  min-width: 800px;
  height: var(--height-page-content);
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.data-record-file-panel > div {
  flex: 0 0 50%;
  height: 100%;
  overflow-y: scroll;
}
.data-record-file-panel > div .pdf-viewer {
  width: 100%;
  aspect-ratio: 1/1.6;
}
.data-record-file-panel > div .thumbnail-image-panel img {
  width: 100%;
}
.data-record-file-panel > div input.title {
  padding-left: 0;
}

.book-file-info-panel,
.data-record-file-info-panel {
  container-type: inline-size;
}
.book-file-info-panel .title-panel,
.data-record-file-info-panel .title-panel {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  background-color: var(--color-panel-bg);
  z-index: 120;
}
.book-file-info-panel .markdown,
.data-record-file-info-panel .markdown {
  border: solid 1px var(--color-border);
  padding: 8px;
  margin-bottom: 8px;
}
.book-file-info-panel .markdown table,
.data-record-file-info-panel .markdown table {
  width: 100%;
}
.book-file-info-panel .markdown table td,
.data-record-file-info-panel .markdown table td {
  border: solid 1px var(--color-border);
  padding: 2px;
}
.book-file-info-panel .data-record-file-column-record-list-table,
.data-record-file-info-panel .data-record-file-column-record-list-table {
  margin-bottom: 12px;
}
.book-file-info-panel .data-record-file-column-record-list-table td.column-name,
.data-record-file-info-panel .data-record-file-column-record-list-table td.column-name {
  width: 120px;
}
@container (min-width: 640px) {
  .book-file-info-panel .data-record-file-column-record-list-table td.column-name,
  .data-record-file-info-panel .data-record-file-column-record-list-table td.column-name {
    width: 25%;
  }
}
.book-file-info-panel .data-record-file-column-record-list-table td.column-value,
.data-record-file-info-panel .data-record-file-column-record-list-table td.column-value {
  padding: 0;
}
.book-file-info-panel .data-record-file-column-record-list-table td.column-value textarea,
.data-record-file-info-panel .data-record-file-column-record-list-table td.column-value textarea {
  margin: 0;
  padding: 4px;
}
.book-file-info-panel .data-record-file-column-record-list-table .scroll-container-panel,
.data-record-file-info-panel .data-record-file-column-record-list-table .scroll-container-panel {
  width: 100%;
  max-height: 80dvh;
  overflow: auto;
}
.book-file-info-panel .data-record-file-column-record-list-table .scroll-container-panel table th,
.data-record-file-info-panel .data-record-file-column-record-list-table .scroll-container-panel table th {
  position: sticky;
  top: 0;
  text-align: left;
  background-color: var(--color-table-header-bg);
  color: var(--color-table-header-text);
}
.book-file-info-panel .data-record-file-column-record-list-table .scroll-container-panel table td,
.data-record-file-info-panel .data-record-file-column-record-list-table .scroll-container-panel table td {
  max-width: 150px;
}
.book-file-info-panel .data-record-file-column-record-list-table .scroll-container-panel table td textarea,
.data-record-file-info-panel .data-record-file-column-record-list-table .scroll-container-panel table td textarea {
  min-width: 100px;
}
.book-file-info-panel .thumbnail-image-panel img,
.data-record-file-info-panel .thumbnail-image-panel img {
  max-width: 100%;
}
.book-file-info-panel .pdf-viewer,
.data-record-file-info-panel .pdf-viewer {
  width: 100%;
  aspect-ratio: 1/1.414;
}

.data-record-file-column-record-list-table td {
  border: solid 1px var(--color-border);
}

#blog-edit-panel {
  height: 100%;
  overflow: hidden;
}
#blog-edit-panel .header-panel {
  background-color: var(--color-panel-menu-bg);
}
#blog-edit-panel .field-panel .display-flex .flex-right-panel {
  flex: 0 0 auto;
}

.blog-view-panel :first-child {
  margin-top: 0;
}
.blog-view-panel h1, .blog-view-panel h2, .blog-view-panel h3, .blog-view-panel h4, .blog-view-panel h5, .blog-view-panel h6 {
  margin-top: 20px;
}
.blog-view-panel h1, .blog-view-panel h2 {
  margin-left: 0;
  margin-bottom: 20px;
  border-bottom: solid 1px var(--color-border);
}
.blog-view-panel h3, .blog-view-panel h4 {
  margin-bottom: 12px;
}
.blog-view-panel .description {
  white-space: pre-wrap;
  word-break: break-all;
}

.blog-entry-record-panel {
  display: flex;
  align-items: center;
}
.blog-entry-record-panel time {
  flex: 0 0 160px;
}

.book-site-path {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  background-color: transparent;
  height: 32px;
}

.book-card-panel {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.book-card-panel .image-panel {
  flex: 0 0 30%;
}
.book-card-panel .image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
}
.book-card-panel .image-panel[is-icon=true] {
  height: max-content;
}
.book-card-panel .image-panel[is-icon=true] img {
  width: 80%;
  height: 80%;
  margin: 12px;
}
.book-card-panel .content-panel {
  flex: 0 0 calc(70% - 12px);
}
.book-card-panel .content-panel .title-panel {
  display: flex;
  align-items: center;
}
.book-card-panel .content-panel .title-panel .title-link {
  color: var(--color-text);
}
.book-card-panel .content-panel .publish-time {
  display: flex;
  align-items: center;
  gap: 8px;
}
.book-card-panel .content-panel .sub-title,
.book-card-panel .content-panel .description {
  width: 100%;
  padding: 8px 0;
  font-size: 12px;
  color: var(--color-text-02);
}
.book-card-panel .content-panel .sub-title {
  border-bottom: solid 1px var(--color-border);
}
.book-card-panel .content-panel .book-page-list-panel {
  padding: 8px;
}

.book-index-card-panel {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.book-index-card-panel .image-panel {
  flex: 0 0 30%;
}
.book-index-card-panel .image-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
}
.book-index-card-panel .image-panel[is-icon=true] {
  height: max-content;
}
.book-index-card-panel .image-panel[is-icon=true] img {
  width: 80%;
  height: 80%;
  margin: 12px;
}
.book-index-card-panel .content-panel {
  flex: 0 0 70%;
  padding: 8px;
}
.book-index-card-panel .book-index-link {
  margin-bottom: 4px;
}
.book-index-card-panel .book-index-link .title {
  font-size: 18px;
  line-height: 1.5;
  padding: 8px;
}
.book-index-card-panel .book-index-link .description {
  margin-left: 12px;
  padding: 8px;
  color: var(--color-text-02);
  font-size: 12px;
}
.book-index-card-panel .book-index-link:hover {
  background-color: var(--color-item-hover);
}
.book-index-card-panel .book-index-link:hover .title {
  text-decoration: underline;
}

.book-section-panel {
  margin-bottom: 20px;
}
.book-section-panel > .title-panel {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.book-section-panel > .title-panel .title {
  font-weight: bold;
  font-size: 24px;
}
.book-section-panel > .page-list-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  container-type: inline-size;
}

.book-section-page-panel {
  background-color: var(--color-panel-bg);
  border-radius: 8px;
  cursor: pointer;
}
.book-section-page-panel.box-shadow {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.16);
}
.book-section-page-panel[section-type=ImageCard] {
  flex: 0 0 calc((100% - 24px) / 3);
  display: grid;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
}
@container (max-width: 480px) {
  .book-section-page-panel[section-type=ImageCard] {
    flex: 0 0 calc((100% - 12px) / 2);
  }
}
.book-section-page-panel[section-type=ImageCard] > .image-url {
  display: none;
}
.book-section-page-panel[section-type=ImageCard] > .title {
  font-size: 18px;
  font-weight: bold;
  place-self: center;
  padding: 8px;
  margin: auto 10%;
  color: var(--color-white);
}
.book-section-page-panel[section-type=ImageCard] > .description {
  display: none;
}
.book-section-page-panel[section-type=ImageCard]:hover .title {
  font-size: 24px;
}
.book-section-page-panel[section-type=VerticalCard] {
  flex: 0 0 calc((100% - 24px) / 3);
  display: grid;
  grid-template-rows: 200px 24px 64px;
}
@container (max-width: 720px) {
  .book-section-page-panel[section-type=VerticalCard] {
    flex: 0 0 calc((100% - 12px) / 2);
  }
}
@container (max-width: 480px) {
  .book-section-page-panel[section-type=VerticalCard] {
    flex: 0 0 100%;
  }
}
.book-section-page-panel[section-type=VerticalCard] > .image-url {
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 4px;
  border-radius: 8px 8px 0 0;
}
.book-section-page-panel[section-type=VerticalCard] > .title {
  font-size: 18px;
  font-weight: bold;
  padding: 0 8px;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.book-section-page-panel[section-type=VerticalCard] > .description {
  color: var(--color-text-02);
  font-size: 12px;
  padding: 0 8px;
  margin-top: 4px;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.book-section-page-panel[section-type=VerticalCard]:hover .title {
  text-decoration: underline;
}
.book-section-page-panel[section-type=HorizontalCard] {
  flex: 0 0 100%;
  height: 200px;
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: 40px 1fr;
}
@container (min-width: 1024px) {
  .book-section-page-panel[section-type=HorizontalCard] {
    height: 300px;
  }
}
.book-section-page-panel[section-type=HorizontalCard] > .image-url {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  grid-row: 1/3;
  grid-column: 1;
  border-radius: 8px 0 0 8px;
}
.book-section-page-panel[section-type=HorizontalCard] > .title {
  grid-row: 1;
  grid-column: 2;
  font-size: 18px;
  font-weight: bold;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  padding: 0 8px;
}
.book-section-page-panel[section-type=HorizontalCard] > .description {
  grid-row: 2;
  grid-column: 2;
  font-size: 12px;
  color: var(--color-text-02);
  padding: 0 8px;
  overflow-y: hidden;
}
.book-section-page-panel[section-type=HorizontalCard]:hover .title {
  text-decoration: underline;
}

.book-page-list-panel .book-page-record-panel {
  display: flex;
  align-items: center;
}

.book-nav-info-panel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.book-nav-info-panel .image-panel {
  flex: 0 0 64px;
}
.book-nav-info-panel .content-panel {
  flex: 0 1 calc(100% - 64px);
}
.book-nav-info-panel .content-panel .title-panel {
  display: flex;
  align-items: center;
}
.book-nav-info-panel .content-panel .sub-title {
  font-size: 12px;
  color: var(--color-text-02);
}

.book-page-ordinal-edit-panel {
  font-size: 20px;
  padding: 4px 0;
}

.input-text-body-html-container-panel {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 2px;
  overflow-x: hidden;
}
.input-text-body-html-container-panel .input-text-panel {
  flex: 0 0 50%;
  border: none 0;
  border-radius: unset;
  background-color: transparent;
  font-size: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.input-text-body-html-container-panel .input-text-panel .ql-toolbar {
  flex: 0 1 content;
}
.input-text-body-html-container-panel .input-text-panel .quill-textbox {
  height: 100%;
  overflow-y: auto;
  flex: 0 1 100%;
}
.input-text-body-html-container-panel .input-text-panel .quill-textbox img {
  max-height: 360px;
}
.input-text-body-html-container-panel .body-html-preview-panel {
  flex: 0 0 50%;
  height: 100%;
  overflow-y: auto;
}
.input-text-body-html-container-panel .body-html-preview-panel .body-html-panel {
  padding: 4px 8px;
  font-size: 16px;
}
.input-text-body-html-container-panel .body-html-preview-panel:has(.tab-container-panel) {
  display: grid;
  grid-template-rows: 40px calc(100% - 40px);
}
.input-text-body-html-container-panel .body-html-preview-panel:has(.tab-container-panel) [tab-content-container-panel] > [tab-name] {
  height: 100%;
  overflow-y: auto;
}
@media screen and (max-width: 960px) {
  .input-text-body-html-container-panel {
    width: 200%;
  }
}

.book-page-body-panel .body-html-panel {
  font-size: 16px;
  line-height: 1.8;
}

.book-page-link-record-panel {
  padding: 8px;
}
.book-page-link-record-panel .header-panel {
  display: flex;
  align-items: center;
}
.book-page-link-record-panel .header-panel .title {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.book-file-record-panel {
  display: flex;
  align-items: center;
}
.book-file-record-panel time {
  flex: 0 0 140px;
}
.book-file-record-panel .title-link {
  flex: 0 1 calc(100% - 140px);
}

#book-main-panel .book-page-content-panel {
  max-width: 960px;
  min-height: calc(var(--height-page-content) - 48px);
}
#book-main-panel .book-page-content-panel > .title-panel {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  margin-bottom: 20px;
  background-color: var(--color-body-bg);
}
#book-main-panel .book-page-content-panel > .content-panel {
  max-width: 1200px;
  padding: 16px;
}
#book-main-panel .chat-input-panel {
  position: sticky;
  bottom: 0;
  display: none;
  align-items: center;
  width: 100%;
  padding: 8px;
  background-color: var(--color-panel-menu-bg);
}
#book-main-panel .chat-input-panel input[type=text] {
  width: 100%;
}
#book-main-panel .chat-input-panel .button {
  margin-left: 8px;
}
#book-main-panel .book-search-panel {
  display: grid;
  grid-template-rows: max-content auto;
  height: 100%;
}
#book-main-panel .book-search-panel .search-container-panel input[type=text] {
  width: 100%;
  height: 36px;
  font-size: 20px;
  padding: 8px 16px;
}
#book-main-panel .book-search-panel .search-container-panel input[type=text]::placeholder {
  font-size: 20px;
}
#book-main-panel .book-search-panel .book-search-content-panel {
  height: 100%;
  overflow-y: auto;
}

.book-portal-panel {
  height: 100%;
  overflow-y: scroll;
}

.book-search-result-card-panel.card-panel {
  border-radius: 0;
}
.book-search-result-card-panel .title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.book-search-result-card-panel .title .score {
  margin-left: auto;
  font-size: 12px;
  font-weight: normal;
  color: var(--color-set-glay-05);
}
.book-search-result-card-panel .blob-file-panel {
  max-width: calc(100% - 200px);
}
.book-search-result-card-panel .blob-file-panel .file-name {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.book-search-result-card-panel .image-url {
  max-height: 240px;
}
.book-search-result-card-panel .body-html-panel {
  max-height: 320px;
  overflow-y: hidden;
}
.book-search-result-card-panel .table-border-container-panel table {
  width: 100%;
}
.book-search-result-card-panel .description {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.book-search-result-card-panel .link-record-panel {
  height: auto;
}
.book-search-result-card-panel .book-page-file-panel .header-panel {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.book-search-result-card-panel .book-page-file-panel .header-panel .flex-right-panel {
  flex: 0 0 140px;
  text-align: right;
}
.book-search-result-card-panel .book-page-file-panel .paragraph-list-panel {
  max-height: 60dvh;
  min-height: 300px;
  overflow-y: auto;
}
.book-search-result-card-panel .book-page-file-panel .thumbnail-image-panel img {
  max-width: 100%;
  max-height: 360px;
}
.book-search-result-card-panel .book-page-file-panel .paragraph-panel {
  margin-bottom: 8px;
}
.book-search-result-card-panel .book-page-file-panel .paragraph-panel .page-number {
  font-weight: bold;
}
.book-search-result-card-panel .book-page-file-panel .paragraph-panel .description {
  padding: 4px;
  background-color: var(--color-block-information-panel-bg);
  color: var(--color-block-information-panel-text);
  border: solid 1px var(--color-border);
}

.book-page-file-list-panel .thumbnail-image-panel img {
  max-height: 360px;
  max-width: calc(100% - 20px);
}

.book-page-file-card-panel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.book-page-file-card-panel > .flex-left-panel {
  flex: 0 1 100%;
}
.book-page-file-card-panel .title-panel .textbox {
  width: 100%;
}
.book-page-file-card-panel .content-panel {
  display: flex;
}
.book-page-file-card-panel .content-panel .thumbnail-image-panel {
  flex: 0 0 50%;
  border: solid 1px var(--color-border);
}
.book-page-file-card-panel .content-panel .thumbnail-image-panel img {
  max-height: 360px;
  max-width: calc(100% - 20px);
}
.book-page-file-card-panel .content-panel textarea {
  flex: 0 0 50%;
}

.book-page-file-edit-panel .thumbnail-image-panel img {
  max-height: 360px;
}

.card-panel .task-record-panel {
  margin-right: 8px;
  margin-bottom: 4px;
}
.card-panel .task-record-panel .priority {
  flex: 0 0 28px;
}
.card-panel .task-record-panel .due-date {
  flex: 0 0 100px;
  display: flex;
  align-items: center;
  width: 100px;
  height: 28px;
  cursor: pointer;
  padding-left: 4px;
  text-align: center;
}
.card-panel .task-record-panel .due-date:hover {
  background-color: var(--color-record-menu-link-hover);
}
.card-panel .task-record-panel .complete-time {
  flex: 0 0 100px;
}
.card-panel .task-record-panel .task-state {
  display: inline-block;
  width: 100px;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  padding: 4px unset;
}
.card-panel .task-record-panel .task-state:hover {
  background-color: var(--color-record-menu-link-hover);
}
.card-panel .task-record-panel [delete-record] {
  display: none;
}
.card-panel .task-record-panel .flex-right-panel {
  max-width: 200px;
}
.card-panel .task-record-panel .flex-right-panel .user {
  width: max-content;
}
.card-panel .task-record-panel .flex-right-panel .user:hover {
  text-decoration: underline;
}
@container (max-width: 480px) {
  .card-panel .task-record-panel .flex-right-panel {
    max-width: 120px;
  }
  .card-panel .task-record-panel .flex-right-panel .user {
    display: inline-block;
  }
}

.project-container-panel > .row-3-panel {
  height: var(--height-page-content);
  width: 100%;
}

.task-priority {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  width: 24px;
  height: 24px;
  line-height: 24px;
  margin-right: 4px;
  background-color: var(--color-panel-menu-bg);
  border-radius: 100vmax;
  text-align: center;
  cursor: pointer;
}

.task-info-panel {
  padding: 0 8px 8px 8px;
}
.task-info-panel .header-menu-panel {
  display: flex;
  align-items: center;
}
.task-info-panel .title-panel {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  background-color: var(--color-panel-bg);
  z-index: 120;
}
.task-info-panel input.title {
  padding-left: 0;
  font-size: 18px;
}
.task-info-panel .data-record-panel {
  width: 100%;
}
.task-info-panel .data-record-panel .icon {
  width: 20px;
  height: 20px;
}
.task-info-panel .data-record-panel [delete-record] {
  display: none;
}
.task-info-panel .data-record-panel:hover {
  background-color: var(--color-form-element-bg);
}
.task-info-panel .flex-field-panel.priority .priority {
  font-size: 18px;
  font-weight: bold;
  width: 32px;
  text-align: center;
}
.task-info-panel .accordion-panel .header-panel:hover {
  background-color: var(--color-item-hover);
}
.task-info-panel .body-html-panel {
  min-height: 100px;
  overflow-y: auto;
}
.task-info-panel .add-comment-panel .input-text {
  min-height: 32px;
  line-height: 32px;
}
.task-info-panel .comment-list-panel .comment-record-panel {
  margin-bottom: 12px;
}
.task-info-panel .comment-list-panel .comment-record-panel:last-child {
  scroll-snap-align: end;
}
.task-info-panel .comment-list-panel .comment-record-panel .icon-panel {
  visibility: hidden;
}
.task-info-panel .comment-list-panel .comment-record-panel:hover .icon-panel {
  visibility: visible;
}
.task-info-panel .comment-list-panel .comment-record-panel .body-html img {
  max-width: 100%;
}
.task-info-panel .add-comment-panel {
  align-items: flex-end;
}
.task-info-panel .add-comment-panel textarea.input-text {
  height: 32px;
}
.task-info-panel .add-comment-panel button {
  word-break: keep-all;
}

.task-card-panel {
  background-color: var(--color-panel-bg);
  padding: 4px;
  border-radius: 4px;
}
.task-card-panel > .header-panel {
  display: flex;
}
.task-card-panel .icon-panel {
  align-self: flex-start;
}
.task-card-panel input.date {
  padding-left: 0;
}
.task-card-panel .task-user-record-panel {
  margin-top: 4px;
}
.task-card-panel .task-user-record-panel:hover {
  background-color: var(--color-record-menu-link-hover);
}
.task-card-panel [delete-record] {
  display: none;
}

.project-athievement-panel .filter-panel {
  background-color: var(--color-filter-panel);
  padding: 4px 12px;
  border-radius: 100vmax;
}
.project-athievement-panel .record-list-panel .date {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  border-radius: 100vmax;
  border: solid 1px var(--color-border);
  padding: 2px 16px;
  background-color: var(--color-panel-bg);
}
.project-athievement-panel .record-list-panel .date-task-list-panel {
  border-left: solid 3px var(--color-border);
  margin-left: 20px;
  padding: 8px;
  min-height: 40px;
}
.project-athievement-panel .record-list-panel .user-task-list-panel {
  border-left: solid 3px var(--color-border);
  margin-left: 8px;
  padding-left: 8px;
  padding-bottom: 8px;
}
.project-athievement-panel .record-list-panel .user-task-list-panel .task-record-panel .complete-time {
  margin-right: 8px;
}

.task-record-list-table {
  min-width: 720px;
}
.task-record-list-table th.checkbox {
  width: 28px;
}
.task-record-list-table th.priority {
  width: 36px;
}
.task-record-list-table th.due-date {
  width: 100px;
}
.task-record-list-table th.user {
  width: 150px;
}
.task-record-list-table th.state {
  width: 150px;
}
.task-record-list-table tbody {
  line-height: 1;
}
.task-record-list-table tbody .data-record-panel {
  background-color: transparent;
  width: 100%;
  padding: 0;
}
.task-record-list-table tbody .data-record-panel [delete-record] {
  display: none;
}
.task-record-list-table tbody tr td {
  padding: 2px;
}
.task-record-list-table tbody tr td.checkbox {
  padding: 0;
}
.task-record-list-table tbody tr td.checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
}
.task-record-list-table tbody tr td.due-date {
  padding: 0;
}
.task-record-list-table tbody tr td.due-date time {
  display: flex;
  align-items: center;
  width: 100px;
  height: 32px;
  cursor: pointer;
  padding-left: 2px;
}
.task-record-list-table tbody tr td.due-date time:hover {
  background-color: var(--color-record-menu-link-hover);
}
.task-record-list-table tbody tr td.priority {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  padding: 0;
}
.task-record-list-table tbody tr td.title {
  line-height: 1.4;
}
.task-record-list-table tbody tr td.state {
  padding: 0;
}
.task-record-list-table tbody tr td.user {
  padding: 0;
}
.task-record-list-table tbody tr td .select-record {
  display: flex;
  align-items: center;
  height: 32px;
}
.task-record-list-table tbody tr td .select-record:hover {
  background-color: var(--color-record-menu-link-hover);
}
.task-record-list-table tbody tr[has-complete-time=true] {
  opacity: 0.3;
}
.task-record-list-table tbody tr[has-complete-time=true] .title-link {
  text-decoration: line-through;
}

.task-board-panel {
  display: flex;
  align-items: flex-start;
}
.task-board-panel .task-state-panel {
  flex: 0 0 240px;
}
.task-board-panel .task-state-panel > .header-panel {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding: 4px;
}
.task-board-panel .task-state-panel > .content-panel {
  vertical-align: top;
  padding: 2px;
  padding-bottom: 200px;
}
.task-board-panel .task-state-panel > .content-panel .task-card-panel {
  margin-bottom: 4px;
}
.task-board-panel .task-state-panel > .content-panel .textbox-no-border:focus {
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  border-radius: 4px;
}
.user-permission-edit-table {
  table-layout: fixed;
}
.user-permission-edit-table thead tr th.user {
  width: 160px;
}
.user-permission-edit-table thead tr th.permission {
  width: 100px;
}
.user-permission-edit-table thead tr th.icon-cell {
  width: 40px;
}
.user-permission-edit-table tbody tr td.icon-cell {
  vertical-align: middle;
}

.input-field-image-url-panel .image-list-panel .icon-panel:hover {
  background-color: var(--color-item-hover);
}

#notification-setting-edit-panel {
  max-width: 750px;
}
#notification-setting-edit-panel .day-of-week-container-panel {
  display: flex;
  width: 708px;
  max-width: 100%;
  height: 600px;
  overflow: auto;
}
#notification-setting-edit-panel .day-of-week-container-panel .day-of-week-panel {
  flex: 0 0 100px;
}
#notification-setting-edit-panel .day-of-week {
  position: sticky;
  top: 0;
  background-color: var(--color-table-header-bg);
  color: var(--color-table-header-text);
  margin-bottom: 4px;
}
#notification-setting-edit-panel .notification-setting-button-container-panel {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
#notification-setting-edit-panel .notification-setting-button-container-panel .button {
  margin: 4px;
}

.record-count {
  color: var(--color-white);
  font-size: 12px;
  padding: 3px 8px 4px 8px;
  text-align: center;
  line-height: 1;
  border-radius: 16px;
  word-break: keep-all;
}

.big-number-container-panel {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 12px;
  container-type: inline-size;
}
.big-number-container-panel .big-number-square-panel {
  flex: 0 0 calc(25% - 12px);
  height: 120px;
  border-radius: 8px;
  background-color: var(--color-panel-menu-bg);
  padding: 12px;
  container-type: inline-size;
}
.big-number-container-panel .big-number-square-panel .text {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  font-weight: bold;
}
.big-number-container-panel .big-number-square-panel .number {
  font-size: 54px;
  font-weight: bold;
}
@container (max-width: 480px) {
  .big-number-container-panel .big-number-square-panel {
    flex: 0 0 100%;
    width: auto;
    margin-bottom: 12px;
  }
}
@container (max-width: 480px) {
  .big-number-container-panel {
    display: block;
  }
}

/*----------------------------------------------------------
ContainerPanel
----------------------------------------------------------*/
.send-message-key {
  flex: 0 0 auto;
  height: 32px;
  box-sizing: border-box;
  display: grid;
  margin-right: 4px;
  padding: 4px 12px;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  border-radius: 100vmax;
  cursor: pointer;
}
.send-message-key:hover {
  background-color: var(--color-panel-menu-hover);
}

.chat-input-panel {
  display: flex;
  align-items: flex-end;
  padding: 4px;
}
.chat-input-panel .chat-message-input-textbox {
  flex: 0 1 100%;
  border-radius: 16px;
  width: 100%;
  margin-right: 4px;
}
.chat-input-panel button {
  flex: 0 0 auto;
  height: 32px;
  box-sizing: border-box;
  padding: 4px 12px;
  color: var(--color-white);
  cursor: pointer;
}

.chat-channel-container-panel {
  height: 100%;
}
.chat-channel-container-panel .tab-content-container-panel {
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  padding: 0;
}
.chat-channel-container-panel .chat-message-panel {
  background-color: var(--color-item-bg0);
}
.chat-channel-container-panel .chat-message-panel:hover {
  background-color: var(--color-item-hover);
}
.chat-channel-container-panel .chat-message-panel .chat-message-bookmark-panel,
.chat-channel-container-panel .chat-message-panel .chat-message-bookmark-complete-panel {
  display: none;
}
.chat-channel-container-panel .search-container-panel {
  flex: 0 0 auto;
  padding: 4px;
}
.chat-channel-container-panel .chat-channel-content-panel {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.chat-channel-container-panel .chat-channel-content-panel .load-message-panel {
  flex: 0 0 40px;
  height: 40px;
}
.chat-channel-container-panel .chat-channel-content-panel .message-container-panel {
  flex: 1 1 100%;
  overflow-y: auto;
}
.chat-channel-container-panel .chat-channel-content-panel .footer-panel {
  flex: 0 1 40px;
  height: fit-content;
  position: relative;
}
.chat-channel-container-panel .chat-channel-content-panel .footer-panel .new-chat-message-panel {
  position: absolute;
  top: -40px;
  height: 0;
  display: grid;
  place-items: center;
  width: 100%;
  cursor: pointer;
}
.chat-channel-container-panel .chat-channel-content-panel .footer-panel .new-chat-message-panel .text {
  color: var(--color-set-primary-05);
  background-color: var(--color-set-primary-01);
  border: solid 1px var(--color-set-primary-05);
  border-radius: 100vmax;
  font-size: 14px;
  line-height: 14px;
  padding: 8px 16px;
}
.chat-channel-container-panel .chat-channel-content-panel .footer-panel .chat-channel-panel {
  border: solid 1px var(--color-border);
  border-radius: 8px;
  padding: 4px 8px;
  margin: 4px;
  background-color: var(--color-panel-bg);
}
.chat-channel-container-panel .chat-channel-content-panel .footer-panel .chat-channel-panel .user-list-panel {
  line-height: 1;
  display: none;
}
.chat-channel-container-panel .chat-channel-content-panel .footer-panel .chat-channel-panel .user-list-panel:has(.channel-user-panel) {
  display: flex;
  align-items: center;
}
.chat-channel-container-panel .chat-channel-content-panel .footer-panel .chat-channel-panel .user-list-panel .channel-user-panel {
  margin-right: 2px;
  cursor: pointer;
}
.chat-channel-container-panel .chat-channel-calendar-content-panel {
  height: 100%;
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel {
  display: flex;
  height: 100%;
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel {
  flex: 0 0 100px;
  height: 100%;
  overflow-y: auto;
  padding: 8px;
  border-right: solid 1px var(--color-border);
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel .year {
  font-size: 24px;
  font-weight: bold;
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel .month {
  font-size: 20px;
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel time {
  display: block;
  font-size: 20px;
  cursor: pointer;
  color: var(--color-set-glay-05);
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel time.saturday {
  color: var(--color-saturday);
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel time.sunday {
  color: var(--color-sunday);
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel time .day-of-week {
  font-size: 14px;
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel time:hover {
  text-decoration: underline;
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .date-list-panel time[current=true] {
  font-weight: bold;
  color: var(--color-text-02);
}
.chat-channel-container-panel .chat-channel-calendar-content-panel .chat-channel-calendar-panel .chat-message-list-panel {
  flex: 0 1 calc(100% - 100px);
  height: 100%;
  overflow-y: auto;
}
.chat-channel-container-panel .chat-channel-search-content-panel {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  height: calc(100% - 100px);
  overflow-y: auto;
}
.chat-channel-container-panel .load-message-panel {
  display: grid;
  place-items: center;
  padding: 4px;
  cursor: pointer;
  background-color: var(--color-record-menu-link-bg);
}
.chat-channel-container-panel .load-message-panel:hover {
  background-color: var(--color-record-menu-link-hover);
}

.container-type-inline-size-panel {
  container-type: inline-size;
}

.agent-chat-channel-container-panel {
  display: grid;
  grid-template-columns: calc(100% - 240px) 240px;
  overflow: hidden;
}
.agent-chat-channel-container-panel .agent-chat-message-panel {
  background-color: var(--color-item-bg0);
  display: flex;
  height: fit-content;
  width: 100%;
}
.agent-chat-channel-container-panel .agent-chat-message-panel:hover {
  background-color: var(--color-item-hover);
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-left-panel {
  flex: 0 0 70%;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-left-panel > .header-panel {
  display: flex;
  align-items: center;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-left-panel > .header-panel .record-menu-icon-list-panel {
  display: none;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel {
  flex: 0 0 30%;
  height: 100%;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .tab-container-panel {
  background-color: transparent;
  border-bottom: none;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .tab-container-panel .tab-panel {
  border: none;
  border-radius: 100vmax;
  padding: 4px 16px;
  height: auto;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .tab-container-panel .tab-panel.current {
  border: solid 1px var(--color-border);
  background-color: var(--color-item-current);
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .search-result-container-panel {
  max-height: calc(var(--height-page-content) - 300px);
  overflow-y: auto;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .search-result-container-panel .agent-chat-message-link-panel {
  border: solid 1px var(--color-border);
  padding: 8px;
  margin-bottom: 4px;
  container-type: inline-size;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .search-result-container-panel .agent-chat-message-link-panel .title-link {
  font-size: 16px;
  font-weight: bold;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .search-result-container-panel .agent-chat-message-link-panel .image {
  max-height: 120px;
}
.agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .search-result-container-panel .agent-chat-message-link-panel .description {
  font-size: 12px;
  display: none;
}
@container (min-width: 360px) {
  .agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .search-result-container-panel .agent-chat-message-link-panel .image {
    max-width: 50%;
    flex: 0 1 50%;
  }
  .agent-chat-channel-container-panel .agent-chat-message-panel > .grid-right-panel .search-result-container-panel .agent-chat-message-link-panel .description {
    display: block;
    margin-left: 8px;
  }
}
.agent-chat-channel-container-panel .flex-left-panel {
  display: grid;
  grid-template-rows: 40px calc(100dvh - 80px);
}
.agent-chat-channel-container-panel .flex-left-panel > .header-panel input[type=text] {
  width: 100%;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel {
  display: flex;
  flex-direction: column;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel .load-message-panel {
  height: 40px;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel .message-container-panel {
  height: 100%;
  overflow-y: auto;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel .followup-question-list-panel {
  background-color: var(--color-body-bg);
  padding: 4px 0;
  max-height: 130px;
  overflow-y: auto;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel .followup-question-list-panel .loading-panel {
  margin-left: 8px;
  font-size: 14px;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel .followup-question-list-panel .followup-question-panel {
  display: inline-block;
  background-color: var(--color-panel-bg);
  border: solid 1px var(--color-border);
  border-radius: 100vmax;
  height: 28px;
  margin: 2px 4px;
  padding: 0 8px;
  cursor: pointer;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel .followup-question-list-panel .followup-question-panel:hover {
  background-color: var(--color-item-hover);
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel > .footer-panel {
  display: flex;
  align-items: flex-end;
  padding: 4px;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel > .footer-panel .checkbox-panel {
  margin-right: 8px;
}
.agent-chat-channel-container-panel .flex-left-panel > .content-panel > .footer-panel .flex-right-panel {
  flex: 0 0 content;
  margin-left: 4px;
  display: flex;
  align-items: flex-end;
}
.agent-chat-channel-container-panel .setting-panel {
  height: 100%;
  overflow-y: auto;
  padding: 8px;
}
.agent-chat-channel-container-panel .setting-panel .agent-chat-card-panel {
  background-color: var(--color-panel-bg);
  padding: 8px;
  border-radius: 8px;
}
.agent-chat-channel-container-panel .setting-panel .agent-chat-card-panel .header-panel {
  display: flex;
  align-items: stretch;
  height: 64px;
}
.agent-chat-channel-container-panel .setting-panel .agent-chat-card-panel .header-panel .image-panel {
  display: grid;
  place-items: center;
  margin-right: 8px;
}
.agent-chat-channel-container-panel .setting-panel .agent-chat-card-panel .header-panel .content-panel .display-name {
  font-weight: bold;
}
.agent-chat-channel-container-panel .setting-panel .agent-chat-card-panel .header-panel .content-panel .model-name {
  font-size: 12px;
  color: var(--color-text-02);
}
.agent-chat-channel-container-panel .setting-panel .agent-chat-card-panel .description {
  padding: 8px;
  color: var(--color-block-information-panel-text);
  background-color: var(--color-block-information-panel-bg);
}
@container (max-width: 800px) {
  .agent-chat-channel-container-panel {
    grid-template-columns: 100% 240px;
    overflow-x: scroll;
  }
  .agent-chat-channel-container-panel .flex-left-panel {
    grid-template-rows: 40px calc(100dvh - 150px);
  }
}
@container (min-width: 1200px) {
  .agent-chat-channel-container-panel {
    grid-template-columns: calc(100% - 400px) 400px;
  }
}
.agent-chat-channel-container-panel .load-message-panel {
  display: grid;
  place-items: center;
  padding: 4px;
  cursor: pointer;
  background-color: var(--color-record-menu-link-bg);
}
.agent-chat-channel-container-panel .load-message-panel:hover {
  background-color: var(--color-record-menu-link-hover);
}

.data-interface-container-panel .file-upload-container-panel {
  background-color: var(--color-item-bg0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-items: stretch;
}
.data-interface-container-panel .file-upload-container-panel > * {
  flex: 0 0 50%;
  height: 100px;
}
.data-interface-container-panel .file-upload-container-panel > *:hover {
  background-color: var(--color-item-hover);
}
.data-interface-container-panel .file-upload-container-panel .file-upload {
  display: grid;
  place-items: center;
}
.data-interface-container-panel .file-upload-container-panel .file-drop-panel {
  border: none;
}

#DataViewAgentMailLog .right-panel {
  width: 1024px;
  max-width: 100%;
}

#DataViewWebAccessLog .right-panel {
  width: 1024px;
  max-width: 100%;
}

.web-access-log-record-list-table td {
  vertical-align: top;
  color: var(--color-text);
  padding: 2px;
}
.web-access-log-record-list-table td.begin-request-time {
  width: 230px;
}
.web-access-log-record-list-table td.begin-request-time time {
  display: block;
}
.web-access-log-record-list-table td.request-url {
  width: 800px;
  padding-top: 2px;
}
.web-access-log-record-list-table td.request-url .request-url {
  color: var(--color-link);
  cursor: pointer;
}
.web-access-log-record-list-table td.request-url .request-url:hover {
  text-decoration: underline;
}
.web-access-log-record-list-table td.request-url .user-record-panel {
  display: flex;
}
.web-access-log-record-list-table td.request-url .user-record-panel .user-name {
  margin-right: 6px;
}
.web-access-log-record-list-table td.request-url .request-header {
  font-size: 11px;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.web-access-log-record-list-table td.server-info {
  font-size: 11px;
  width: 170px;
}
.web-access-log-record-list-table td.status-code {
  width: 100px;
}

.web-access-log-info-panel > .display-flex {
  border-bottom: solid 1px var(--color-set-glay-02);
}
.web-access-log-info-panel .property-name {
  align-self: flex-start;
  flex: 0 0 120px;
  margin-right: 8px;
}

#DataViewErrorLog .right-panel {
  width: 1024px;
  max-width: 100%;
}

.error-log-record-list-table th.execute-time {
  width: auto;
}
.error-log-record-list-table td {
  vertical-align: top;
  color: var(--color-text);
  padding: 2px;
}
.error-log-record-list-table td.execute-time {
  width: 230px;
}
.error-log-record-list-table td.exception-type {
  width: 120px;
}
.error-log-record-list-table td.server-info {
  font-size: 11px;
  width: 170px;
}
.error-log-record-list-table td.description-cell {
  width: 680px;
}
.error-log-record-list-table td.description-cell .text {
  font-size: 11px;
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.error-log-info-panel > .display-flex {
  border-bottom: solid 1px var(--color-set-glay-02);
}
.error-log-info-panel .property-name {
  align-self: flex-start;
  flex: 0 0 120px;
  margin-right: 8px;
}

.morphic-image-card-panel {
  padding: 12px;
}
.morphic-image-card-panel .header-panel {
  display: flex;
  align-items: center;
}
.morphic-image-card-panel .header-panel time {
  margin-right: 8px;
}
.morphic-image-card-panel .header-panel .user-name {
  margin-left: 4px;
}
.morphic-image-card-panel .image-container-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 0;
}
.morphic-image-card-panel .image-container-panel:hover {
  background-color: var(--color-panel-menu-hover);
}
.morphic-image-card-panel .image-container-panel .image-panel {
  flex: 0 0 calc(50% - 4px);
  display: grid;
  place-items: center;
  max-height: 360px;
  overflow: hidden;
}
.morphic-image-card-panel .image-container-panel .image-panel img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

.morphic-image-feed-panel {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  container-type: inline-size;
}
.morphic-image-feed-panel .image-column-panel {
  flex: 0 0 calc(25% - 4px);
}
.morphic-image-feed-panel .image-column-panel img {
  width: 100%;
}
@container (max-width: 600px) {
  .morphic-image-feed-panel .image-column-panel {
    flex: 0 0 calc(50% - 2px);
  }
}

.morphic-image-info-panel {
  padding: 12px;
  padding-bottom: 100px;
}
.morphic-image-info-panel .image-panel {
  width: 100%;
  margin-bottom: 4px;
}
.morphic-image-info-panel .image-panel img {
  width: 100%;
}
.morphic-image-info-panel .language-model-name {
  margin-bottom: 12px;
}
.morphic-image-info-panel .prompt-text {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: var(--color-block-information-panel-bg);
  color: var(--color-block-information-panel-text);
  margin-bottom: 12px;
}
.morphic-image-info-panel .prompt-text a {
  margin-left: auto;
}

.recipe-portal-panel .section-title {
  font-size: 24px;
  color: #CC7D1E;
  text-align: center;
}

#recipe-calendar-panel {
  height: 220px;
  overflow-y: auto;
}
#recipe-calendar-panel .recipe-calendar-table {
  width: 100%;
  text-align: center;
}
#recipe-calendar-panel .recipe-calendar-table thead tr th {
  position: sticky;
  top: 0;
  left: 0;
  text-align: center;
}
#recipe-calendar-panel .recipe-calendar-table thead tr th .day-of-week {
  display: inline-block;
  padding: 2px 8px;
  text-align: center;
  border-radius: 100vmax;
  background-color: #c47a23;
  color: var(--color-white);
  font-size: 24px;
}
#recipe-calendar-panel .recipe-calendar-table thead tr th .day-of-week.saturday {
  background-color: #73BBEC;
}
#recipe-calendar-panel .recipe-calendar-table thead tr th .day-of-week.sunday {
  background-color: #CB5551;
}
#recipe-calendar-panel .recipe-calendar-table tbody tr td {
  padding: 2px;
}
#recipe-calendar-panel .recipe-calendar-table tbody tr td .month {
  font-size: 24px;
}
#recipe-calendar-panel .recipe-calendar-table tbody tr td .date {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 100vmax;
  cursor: pointer;
  font-size: 20px;
  line-height: 20px;
  padding-top: 10px;
  color: var(--color-text-03);
  text-align: center;
}
#recipe-calendar-panel .recipe-calendar-table tbody tr td .date[selected=true] {
  border-color: var(--color-set-primary-04);
  background-color: var(--color-set-primary-04);
  color: var(--color-white);
}

.recipe-duration-date-panel {
  position: sticky;
  top: 0;
  left: 0;
  height: 64px;
  background: linear-gradient(to bottom, #e4c51e, #ff9e2b 70%);
}
.recipe-duration-date-panel .recipe-plan-duration-date-text {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recipe-duration-date-panel .recipe-plan-duration-date-text .month {
  font-size: 20px;
  align-self: flex-start;
  margin-top: 8px;
}
.recipe-duration-date-panel .recipe-plan-duration-date-text .day {
  font-size: 36px;
  font-weight: bold;
}
.recipe-duration-date-panel .recipe-plan-duration-date-text .day-of-week {
  font-size: 24px;
  font-weight: bold;
}
.recipe-duration-date-panel .recipe-plan-duration-date-text .separator {
  margin: 0 8px;
}

.recipe-date-panel {
  width: 100%;
  overflow-x: auto;
}
.recipe-date-panel > .header-panel {
  display: flex;
  align-items: center;
}
.recipe-date-panel > .header-panel .date-text {
  font-size: 20px;
  font-weight: bold;
}
.recipe-date-panel > .header-panel .icon-panel {
  margin-left: auto;
}
.recipe-date-panel .scroll-container-panel {
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel {
  display: flex;
  width: fit-content;
  height: fit-content;
  gap: 8px;
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel {
  background-position: center;
  background-size: cover;
  border-radius: 12px;
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel > div {
  width: 200px;
  height: 200px;
  display: inline-grid;
  grid-template-rows: 50px 1fr 32px;
  cursor: pointer;
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel > div > .header-panel {
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  background-image: linear-gradient(rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel > div > .header-panel .display-name {
  margin-top: 2px;
  padding: 4px;
  color: var(--color-white);
  line-height: 1;
  padding-top: 2px;
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel > div > .footer-panel {
  display: flex;
  align-items: flex-end;
  padding: 2px;
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel > div > .footer-panel .flex-right-panel {
  flex: 0 0 content;
  color: var(--color-white);
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel .recipe-type {
  font-size: 20px;
  margin-right: 2px;
  padding: 4px;
  border-radius: 4px;
  color: var(--color-white);
  word-break: keep-all;
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel .recipe-type[recipe-type=Change] {
  margin-left: auto;
}
@media screen and (max-width: 480px) {
  .recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel {
    font-size: 14px;
  }
  .recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel > div {
    width: 150px;
    height: 150px;
  }
  .recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-square-panel .recipe-type {
    padding: 2px;
    border-radius: 2px;
  }
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-add-panel {
  width: 200px;
  height: 200px;
  display: grid;
  place-content: center;
}
.recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-add-panel > span {
  cursor: pointer;
}
@media screen and (max-width: 480px) {
  .recipe-date-panel .scroll-container-panel .recipe-square-list-panel .recipe-add-panel {
    width: 150px;
    height: 150px;
  }
}

.recipe-image {
  background-position: center;
  background-size: cover;
  border-radius: 12px;
}

.recipe-collection-card-panel .header-panel {
  display: flex;
}
.recipe-collection-card-panel .header-panel .flex-right-panel {
  flex: 0 1 100%;
}
.recipe-collection-card-panel .header-panel .flex-right-panel .description {
  font-size: 13px;
  color: var(--color-text-01);
  width: 100%;
  max-height: 140px;
  overflow-y: auto;
}
.recipe-collection-card-panel .price {
  font-size: 24px;
  font-weight: bold;
}

.recipe-collection-info-panel .recipe-count-text {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
}
.recipe-collection-info-panel .recipe-card-panel {
  margin-bottom: 12px;
}

.recipe-card-panel {
  display: flex;
}
.recipe-card-panel .recipe-image {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
}
.recipe-card-panel .display-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 8px;
}
.recipe-card-panel .display-name a {
  color: var(--color-text);
}
.recipe-card-panel .calorie {
  color: var(--color-set-primary-05);
}
.recipe-card-panel .flex-right-panel {
  flex: 0 0 32px;
  display: grid;
  place-items: center;
}

.recipe-type {
  border-radius: 8px;
  padding: 4px;
  margin: 0 2px;
  color: var(--color-white);
}
.recipe-type[recipe-type=StapleFood] {
  background-color: #006ad1;
}
.recipe-type[recipe-type=MainDish] {
  background-color: #dd3700;
}
.recipe-type[recipe-type=SideDish] {
  background-color: #23b044;
}
.recipe-type[recipe-type=Soup] {
  background-color: #ffb400;
}
.recipe-type[recipe-type=Dessert] {
  background-color: #ff35b1;
}
.recipe-type[recipe-type=Breakfast] {
  background-color: #a7ca00;
}
.recipe-type[recipe-type=Lunch] {
  background-color: #6fbb07;
}
.recipe-type[recipe-type=Party] {
  background-color: #ff93d5;
}
.recipe-type[recipe-type=Snacks] {
  background-color: #ff9573;
}
.recipe-type[recipe-type=Change] {
  background-color: #181818;
  opacity: 0.5;
}

.recipe-info-panel {
  background-color: var(--color-panel-bg);
  width: 100%;
}
.recipe-info-panel .content-panel {
  padding: 0 8px;
}
.recipe-info-panel .content-panel .display-name {
  position: sticky;
  top: 0;
  left: 0;
}
.recipe-info-panel .content-panel .recipe-image {
  max-width: 100%;
  max-height: 300px;
}
.recipe-info-panel .content-panel .person-count {
  font-weight: bold;
}
.recipe-info-panel .content-panel > .display-name {
  font-size: 20px;
  font-weight: bold;
}
.recipe-info-panel .content-panel .section-title {
  margin-top: 20px;
  font-weight: bold;
}
.recipe-info-panel .content-panel .material-amount-record-panel {
  width: 100%;
  max-width: 300px;
  display: flex;
  border-bottom: dotted 1px var(--color-border);
}
.recipe-info-panel .content-panel .material-amount-record-panel .amount-text {
  flex: 0 0 120px;
  margin-left: auto;
}
.recipe-info-panel .content-panel .recipe-procedure-panel {
  display: flex;
  height: fit-content;
}
.recipe-info-panel .content-panel .recipe-procedure-panel > .left-panel {
  flex: 0 0 48px;
}
.recipe-info-panel .content-panel .recipe-procedure-panel > .left-panel .circle {
  display: grid;
  place-items: center;
  color: var(--color-white);
  background-color: #ff9e2b;
  width: 32px;
  height: 32px;
  border-radius: 100vmax;
}
.recipe-info-panel .content-panel .recipe-procedure-panel > .left-panel .line {
  align-self: stretch;
  border-left: solid 1px #ff9e2b;
  margin-left: 16px;
  width: 2px;
  height: calc(100% - 32px);
  min-height: 64px;
}
.recipe-info-panel .content-panel .recipe-procedure-panel .description {
  flex: 0 1 100%;
  background-color: var(--color-block-information-panel-bg);
  padding: 4px;
  margin-bottom: 8px;
}
.recipe-info-panel .content-panel .recipe-procedure-panel:last-of-type .description {
  margin-bottom: 0;
}
.recipe-info-panel .content-panel .recipe-url {
  display: -webkit-box;
  overflow-y: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-top: 40px;
}

.buy-material-table {
  width: 100%;
  margin-bottom: 16px;
}
.buy-material-table tbody tr.checkbox-row td {
  font-size: 12px;
  font-weight: bold;
  padding: 0;
}
.buy-material-table tbody tr.checkbox-row td .amount-text {
  white-space: nowrap;
  margin-right: 8px;
}
.buy-material-table tbody .amount-panel .amount-record-panel {
  display: flex;
  align-items: center;
}
.buy-material-table tbody .amount-panel .amount-record-panel .recipe {
  font-size: 12px;
  padding-left: 24px;
}
.buy-material-table tbody .amount-panel .amount-record-panel .amount-text {
  display: flex;
  align-items: center;
  width: 200px;
  margin-left: auto;
}
.buy-material-table tbody .amount-panel .amount-record-panel .amount-text .amount-text-panel {
  margin-left: auto;
  margin-right: 12px;
}
.buy-material-table tbody .amount-panel .amount-record-panel .amount-text .person-count {
  margin-right: 8px;
  white-space: nowrap;
}
@media screen and (max-width: 480px) {
  .buy-material-table tbody .amount-panel .amount-record-panel {
    display: block;
  }
  .buy-material-table tbody .amount-panel .amount-record-panel .amount-text {
    display: block;
    width: 100%;
    font-size: 12px;
    margin-left: 24px;
  }
}

.recipe-duration-date-panel {
  z-index: 110;
}

#notification-setting-edit-panel .day-of-week-container-panel .day-of-week-panel {
  z-index: 100;
}
#notification-setting-edit-panel .day-of-week {
  z-index: 130;
}

.quill-body-html-panel .icon-circle-panel {
  z-index: 120;
}

.filter-condition-popup-panel {
  z-index: 140;
}

.recipe-version-update-panel {
  z-index: 140;
}

.right-popup-panel {
  z-index: 140;
}

.select-text-type-popup-panel {
  z-index: 150;
}

.select-color-popup-panel {
  z-index: 150;
}

.notification-popup-panel {
  z-index: 121;
}

.user-setting-popup-panel {
  z-index: 120;
}

.user-service-menu-popup-panel {
  z-index: 120;
}

.full-size-image-popup-panel {
  z-index: 500;
}

#chat-channel-right-popup-panel {
  z-index: 150;
}

.chat-channel-container-panel .new-chat-message-panel {
  z-index: 120;
}

[drag=true][draging=true] {
  z-index: 200;
}

[ordinal-panel][draging=true] {
  z-index: 200;
}

.select-chat-reaction-popup-panel {
  z-index: 200;
}

/*----------------------------------------------------------
Color
----------------------------------------------------------*/
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-scrollbar-track: var(--color-glay-06);
  --color-scrollbar-thumb: var(--color-glay-03);
  --color-body-bg: #f0eeec;
  --color-text: var(--color-glay-09);
  --color-text-01: var(--color-set-glay-08);
  --color-text-02: var(--color-glay-07);
  --color-text-03: var(--color-glay-05);
  --color-input-error-text: #ff4400;
  --color-border: var(--color-glay-03);
  --color-border-focus: var(--color-glay-05);
  /* Primary */
  --height-page-content: calc(100dvh - 40px);
  --color-link: #0022cc;
  --color-link-visited: #2200cc;
  --color-page-header-bg: #1b0000;
  --color-page-header-text: #ffffff;
  --color-nav-service-list-panel-bg: #3e2723;
  --color-nav-service-list-panel-hover: #604040;
  --color-nav-panel-bg: #eeeae4;
  --color-nav-panel-current: #f8f8f8;
  --color-menu-link-hover: #fffaf8;
  --color-record-menu-link-bg: #f2f2f2;
  --color-record-menu-link-hover: #eeeeee;
  --color-tab-bg: #f0f0f0;
  --color-tab-hover: #e0e0e0;
  --color-tab-border: var(--color-set-glay-05);
  --color-progress-panel-text: var(--color-set-glay-05);
  --color-progress-panel-current: #1b0000;
  --color-panel-menu-bg: #e0e0e0;
  --color-panel-menu-hover: #d8d8d8;
  --color-panel-bg: #ffffff;
  --color-popup-panel-bg: #ffffff;
  --color-footer-bg: #eaeaea;
  /* button */
  --color-button-bg: var(--color-set-primary-05);
  --color-button-text: var(--color-white);
  --color-button-hover: var(--color-set-primary-07);
  --color-button-focus: var(--color-set-primary-07);
  --color-publish-button-bg: #d7191c;
  /* form element */
  --color-form-element-bg: var(--color-set-glay-01);
  --color-form-element-text: var(--color-text);
  --color-form-element-border: var(--color-border);
  --color-form-element-focus: var(--color-set-glay-03);
  --color-placeholder: var(--color-set-glay-05);
  --color-table-header-bg: #37474f;
  --color-table-header-text: #ffffff;
  --color-block-information-panel-bg: var(--color-set-glay-01);
  --color-block-information-panel-text: var(--color-text);
  /* checkbox-panel */
  --color-checkbox-panel-checked: var(--color-set-primary-05);
  --color-checkbox-panel-focus: var(--color-set-primary-09);
  /* Primary color */
  /*--color-form-element-primary: #ff0000;*/
  --color-set-primary-01: var(--color-set-rose-01);
  --color-set-primary-02: var(--color-set-rose-02);
  --color-set-primary-03: var(--color-set-rose-03);
  --color-set-primary-04: var(--color-set-rose-04);
  --color-set-primary-05: var(--color-set-rose-05);
  --color-set-primary-06: var(--color-set-rose-06);
  --color-set-primary-07: var(--color-set-rose-07);
  --color-set-primary-08: var(--color-set-rose-08);
  --color-set-primary-09: var(--color-set-rose-09);
  --color-set-primary-10: var(--color-set-rose-10);
  /* Item */
  --color-set-item-01: var(--color-set-glay-01);
  --color-set-item-02: var(--color-set-glay-02);
  --color-set-item-03: var(--color-set-glay-03);
  --color-set-item-04: var(--color-set-glay-04);
  --color-set-item-05: var(--color-set-glay-05);
  --color-set-item-06: var(--color-set-glay-06);
  --color-set-item-07: var(--color-set-glay-07);
  --color-set-item-08: var(--color-set-glay-08);
  --color-set-item-09: var(--color-set-glay-09);
  --color-set-item-10: var(--color-set-glay-10);
  --color-tab-container-panel: #f0eae0;
  --color-filter-panel: var(--color-set-glay-01);
  --color-filter-condition-panel: #ececec;
  --color-filter-condition-panel-hover: #f2f2f2;
  --color-drop-target-bg: var(--color-set-glay-03);
  --color-circle-border: var(--color-set-glay-05);
  --color-saturday: #73BBEC;
  --color-sunday: #CB5551;
}
@media screen and (max-width: 640px) {
  :root .layout-higlabo {
    --height-page-content: calc(100dvh - 100px);
  }
}
:root .layout-recipe {
  --height-page-content: calc(100dvh - 80px);
}

[dark-mode=true] {
  --color-scrollbar-track: var(--color-glay-03);
  --color-scrollbar-thumb: var(--color-glay-06);
  --color-body-bg: #000000;
  --color-text: #ffffff;
  --color-text-01: var(--color-glay-04);
  --color-text-02: var(--color-glay-05);
  --color-text-03: var(--color-glay-07);
  --color-border: var(--color-glay-07);
  --color-border-focus: var(--color-glay-05);
  /* Primary */
  --color-link: #0088ff;
  --color-link-visited: #0088ff;
  --color-page-header-bg: #202020;
  --color-page-header-text: #ffffff;
  --color-nav-service-list-panel-bg: #2a2a2a;
  --color-nav-service-list-panel-hover: #404040;
  --color-nav-panel-bg: #303030;
  --color-nav-panel-current: #555555;
  --color-menu-link-hover: #6c6c6c;
  --color-record-menu-link-bg: #222222;
  --color-record-menu-link-hover: #555555;
  /* tab */
  --color-tab-bg: #202020;
  --color-tab-hover: #303030;
  --color-tab-border: var(--color-set-glay-05);
  --color-progress-panel-text: var(--color-set-glay-06);
  --color-progress-panel-current: #e0e0e0;
  /* panel */
  --color-panel-menu-bg: #555555;
  --color-panel-menu-hover: #777777;
  --color-panel-bg: #303030;
  --color-popup-panel-bg: #333333;
  --color-footer-bg: var(--color-set-glay-10);
  /* button */
  --color-button-bg: var(--color-set-primary-06);
  --color-button-text: var(--color-white);
  --color-publish-button-bg: #d7191c;
  /* form element */
  --color-form-element-bg: var(--color-set-glay-08);
  --color-form-element-text: var(--color-set-glay-02);
  --color-form-element-border: var(--color-border);
  --color-form-element-focus: var(--color-set-glay-03);
  --color-placeholder: var(--color-set-glay-06);
  --color-block-information-panel-bg: var(--color-set-glay-08);
  --color-block-information-panel-text: var(--color-set-glay-04);
  --color-item-text: #4d5156;
  --color-item-bg: #242424;
  --color-item-bg0: #2c2c2c;
  --color-item-bg1: #2a2a2a;
  --color-item-hover: #242428;
  --color-item-focus: #212121;
  --color-item-current: #202020;
  --color-data-record-panel: #111111;
  --color-tab-container-panel: #333333;
  --color-filter-panel: var(--color-set-glay-08);
  --color-filter-condition-panel: #4a4a4a;
  --color-filter-condition-panel-hover: #3a3a3a;
  --color-drop-target-bg: var(--color-set-glay-07);
  --color-circle-border: var(--color-set-glay-07);
}

a, .link, a.link {
  color: var(--color-link);
}
a:visited, .link:visited, a.link:visited {
  color: var(--color-link-visited);
}
a:visited.button, .link:visited.button, a.link:visited.button {
  color: var(--color-white);
}

.menu-link:hover {
  background-color: var(--color-menu-link-hover);
}
.menu-link .link:focus {
  text-decoration: none;
  background-color: var(--color-menu-link-hover);
}
.menu-link .link:visited {
  color: unset;
}

.title-link {
  cursor: pointer;
}
.title-link:hover {
  text-decoration: underline;
}

.link-button,
a.link-button {
  background-color: var(--color-button-bg);
  color: var(--color-button-text);
}
.link-button:hover,
a.link-button:hover {
  background-color: var(--color-button-hover);
}
.link-button:focus,
a.link-button:focus {
  background-color: var(--color-button-hover);
}

.publish-button {
  background-color: var(--color-publish-button-bg);
}

.field-panel .field-name,
.flex-field-panel .field-name {
  color: var(--color-text-02);
}

.full-window-popup-panel {
  background-color: var(--color-panel-bg);
  color: var(--color-text);
}

.card-panel,
.ai-feature-card-panel {
  background-color: var(--color-panel-bg);
}

.input-card-panel {
  background-color: var(--color-panel-bg);
}

.layout-header-footer header {
  background-color: var(--color-page-header-bg);
  color: var(--color-page-header-text);
}
.layout-header-footer footer {
  background-color: var(--color-page-header-bg);
  color: var(--color-white);
}
.layout-header-footer footer a {
  color: var(--color-white);
}
.layout-header-footer footer a:visited {
  color: var(--color-white);
}

.layout-higlabo header {
  background-color: var(--color-page-header-bg);
  color: var(--color-page-header-text);
}
.layout-higlabo content .service-list-panel {
  background-color: var(--color-nav-service-list-panel-bg);
}
.layout-higlabo content .service-list-panel .service-icon-panel:hover {
  background-color: var(--color-nav-service-list-panel-hover);
}
.layout-higlabo footer {
  background-color: var(--color-footer-bg);
}
.layout-higlabo footer .service-icon-panel:hover {
  background-color: var(--color-panel-menu-hover);
}

.layout-recipe .recipe-duration-date-panel {
  background-color: #ff9800;
  color: var(--color-white);
}
.layout-recipe .room-name {
  background-color: #ff9800;
  color: var(--color-white);
}

.layout-2column header,
.layout-header header {
  background-color: var(--color-page-header-bg);
  color: var(--color-page-header-text);
}
.layout-2column content nav,
.layout-header content nav {
  background-color: var(--color-nav-panel-bg);
}

.nav-content-panel > .nav-panel {
  background-color: var(--color-nav-panel-bg);
}
.nav-content-panel > .nav-panel .tab-container-panel {
  background-color: var(--color-tab-container-panel);
}
.nav-content-panel > .nav-panel .tab-container-panel .tab-panel:hover {
  background-color: var(--color-menu-link-hover);
}

.color-panel-menu-bg {
  background-color: var(--color-panel-menu-bg);
}

.input-record > .record-list-panel > .data-record-panel:hover {
  background-color: var(--color-item-hover);
}
.input-record > .data-record-panel:hover:not([hig-property-type=Object]) {
  background-color: transparent;
}
.input-record > .data-record-panel:hover {
  background-color: transparent;
}
.input-record > .data-record-panel:focus {
  background-color: transparent;
}

.icon-panel:focus {
  border: solid 1px var(--color-border);
}

.icon-circle-panel:hover {
  background-color: var(--color-panel-menu-hover);
}

.icon-radius-32:hover {
  background-color: var(--color-panel-menu-hover);
}

.block-information-panel {
  background-color: var(--color-block-information-panel-bg);
  color: var(--color-block-information-panel-text);
}

.attention-pink {
  background-color: #ff66d0;
}

.attention-red {
  background-color: #ff0000;
}