html, body {
   margin: 0;
   padding: 0;
}

html.is-lunchroom,
html.is-lunchroom body {
   overflow: hidden;
}

body {
   background-color: #FFFFFF;
   background-image: url('/images/pat1b.png');
   background-position: left top;
   background-repeat: repeat;
   color: #000000;
   font-family: Arial, sans-serif;
   font-size: 13px;
   line-height: 1.5;
}

.d1-shell {
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid #D7D7D7;
   box-sizing: border-box;
   margin: 0 auto;
   max-width: none;
   min-height: 600px;
   padding: 16px 14px 24px;
   width: calc(100% - 24px);
}

.d1-shell.is-lunchroom {
   margin: 0;
   max-width: 1275px;
   width: 100%;
}

.d1-shell.is-lunchroom .d1-comment-list,
.d1-shell.is-lunchroom .d1-comment-pagination,
.d1-shell.is-lunchroom .d1-form,
.d1-shell.is-lunchroom .d1-toolbar {
   padding-right: 38px;
}

.d1-shell.is-lunchroom .d1-comment {
   padding-right: 30px;
}

.d1-header {
   margin-bottom: 18px;
}

.d1-title {
   font-size: 30px;
   font-weight: 700;
   margin: 0;
}

.d1-toolbar {
   align-items: end;
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   justify-content: space-between;
   margin-bottom: 18px;
}

.d1-toolbar-group {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.d1-toolbar-search {
   flex: 1 1 320px;
   max-width: 420px;
}

.d1-toolbar-label {
   font-size: 12px;
   font-weight: 700;
}

.d1-toolbar-select,
.d1-toolbar-input {
   border: 1px solid #B9B9B9;
   box-sizing: border-box;
   font: inherit;
   min-height: 34px;
   padding: 7px 10px;
}

.d1-toolbar-input {
   width: 100%;
}

.d1-subtitle {
   color: #444444;
   font-size: 13px;
   margin: 8px 0 0;
}

.d1-note {
   background: #F5F9FF;
   border: 1px solid #C9D8EF;
   color: #234266;
   margin: 0 0 16px;
   padding: 10px 12px;
}

.d1-comment-list {
   margin-bottom: 20px;
   min-height: 220px;
}

.d1-comment-pagination {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
   margin: 8px 0 22px;
}

.d1-pagination-label {
   color: #666666;
   font-size: 12px;
   margin-right: 4px;
}

.d1-pagination-button {
   background: #FFFFFF;
   border: 1px solid #C8C8C8;
   color: #1B66A5;
   cursor: pointer;
   font: inherit;
   font-size: 12px;
   min-width: 34px;
   padding: 6px 10px;
}

.d1-pagination-button[disabled] {
   color: #9A9A9A;
   cursor: default;
}

.d1-pagination-button.is-active {
   background: #2B679B;
   border-color: #1E4C73;
   color: #FFFFFF;
}

.d1-comment {
   background: #FFFFFF;
   border-bottom: 1px solid #D7D7D7;
   margin-bottom: 12px;
   padding: 16px 0 18px;
}

.d1-comment:last-child {
   margin-bottom: 0;
}

.d1-comment-inner {
   display: flex;
   gap: 16px;
}

.d1-comment-avatar {
   background: #F7F7F7;
   border: 1px solid #D0D0D0;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75);
   flex: 0 0 42px;
   height: 42px;
   margin-left: 15px;
   object-fit: contain;
   padding: 3px;
   width: 42px;
}

.d1-comment-content {
   flex: 1 1 auto;
   min-width: 0;
}

.d1-comment-head {
   align-items: baseline;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 10px;
}

.d1-comment-author {
   font-size: 16px;
   font-weight: 700;
}

.d1-comment-date {
   color: #666666;
   font-size: 12px;
}

.d1-comment-body {
   font-size: 15px;
   overflow-wrap: anywhere;
   word-break: break-word;
   line-height: 1.6;
   white-space: pre-wrap;
}

.d1-comment-tools {
   margin-top: 10px;
}

.d1-comment-children {
   margin-top: 14px;
}

.d1-comment-child {
   border-bottom: 0;
   margin-bottom: 0;
   padding: 12px 0 0;
}

.d1-comment-child .d1-comment-inner {
   gap: 12px;
}

.d1-empty,
.d1-status {
   background: rgba(255, 255, 255, 0.95);
   border: 1px solid #D7D7D7;
   padding: 16px;
}

.d1-status {
   margin-bottom: 16px;
}

.d1-form {
   background: #FFFAE4;
   border: 1px solid #196E38;
   padding: 14px;
}

.d1-form-title {
   color: #196E38;
   font-size: 22px;
   font-weight: 700;
   margin: 0 0 14px;
}

.d1-field {
   margin-bottom: 12px;
}

.d1-field label {
   display: block;
   font-weight: 700;
   margin-bottom: 4px;
}

.d1-field input,
.d1-field textarea {
   border: 1px solid #B9B9B9;
   box-sizing: border-box;
   font: inherit;
   padding: 8px 10px;
   width: 100%;
}

.d1-field textarea {
   min-height: 120px;
   resize: vertical;
}

.d1-actions {
   align-items: center;
   display: flex;
   gap: 10px;
}

.d1-button {
   background: #2B679B;
   border: 1px solid #1E4C73;
   color: #FFFFFF;
   cursor: pointer;
   font: inherit;
   padding: 8px 14px;
}

.d1-button:disabled {
   cursor: default;
   opacity: 0.6;
}

.d1-link-button {
   background: none;
   border: 0;
   color: #1B66A5;
   cursor: pointer;
   font: inherit;
   font-size: 13px;
   font-weight: 700;
   padding: 0;
}

.d1-link-button:hover {
   color: #0F4F84;
   text-decoration: underline;
}

@media (max-width: 700px) {
   .d1-shell {
      padding: 14px 10px 20px;
      width: calc(100% - 12px);
   }

   .d1-shell.is-lunchroom {
      max-width: none;
      width: calc(100% - 12px);
   }

   .d1-toolbar {
      align-items: stretch;
      gap: 10px;
   }

   .d1-toolbar-search {
      max-width: none;
   }

   .d1-comment-inner {
      gap: 12px;
   }

   .d1-comment-avatar {
      margin-left: 0;
   }

   .d1-comment-pagination {
      justify-content: flex-start;
   }
}