html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f5f5;
}

body * {
  font-family: "Meiryo UI", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif !important;
}

/* PC表示用のラッパー */
#root {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-color: white;
  margin: 0 auto;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* PC画面での表示制限 */
@media screen and (min-width: 768px) {
  html {
    background-color: #e8e8e8 !important;
  }
  
  body {
    background-color: #e8e8e8 !important;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    padding: 0;
  }
  
  #root {
    width: 100%;
    max-width: 480px !important;
    min-height: 100vh;
    background-color: white !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto;
  }
  
  /* 各ページのメインコンテナを制限 */
  #root > div {
    max-width: 100% !important;
  }
  
  /* 固定幅要素の調整 */
  .semi-modal-content {
    max-width: 480px !important;
  }
  
  /* MUIモーダルの幅調整 */
  .MuiModal-root .MuiBox-root {
    max-width: min(450px, calc(100% - 30px)) !important;
    width: auto !important;
    margin: 0 auto;
  }
  
  /* MUIモーダル内のコンテンツボックス調整 */
  .MuiModal-root [style*="width: 60%"],
  .MuiModal-root [style*="width:60%"] {
    width: min(450px, calc(100% - 30px)) !important;
    max-width: 450px !important;
  }
  
  /* MUIモーダルのバックドロップ */
  .MuiBackdrop-root {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  
  /* patient_infoページのモーダル特別対応 */
  .MuiBox-root[style*="transform: translate(-50%, -50%)"] {
    max-width: min(450px, calc(100vw - 30px)) !important;
    width: auto !important;
  }
  
  /* テーブルやリストの幅調整 */
  .semi-table,
  .rce-container-input {
    max-width: 100% !important;
  }
  
  /* MUIコンポーネントの幅調整 */
  .MuiContainer-root {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* 固定幅のBoxやPaperコンポーネント調整 */
  .MuiBox-root[style*="max-width"],
  .MuiPaper-root[style*="max-width"] {
    max-width: 100% !important;
  }
  
  /* フォーム要素の幅調整 */
  .semi-form,
  .semi-input,
  .semi-select,
  .semi-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* お客様情報フォームなどのPaper要素調整 */
  .MuiPaper-elevation1 {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* フォームコントロール要素の調整 */
  .MuiFormControl-root,
  .MuiTextField-root,
  .MuiSelect-root {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* 固定幅指定のあるインライン要素を調整 */
  [style*="width: 350px"],
  [style*="width: 600px"],
  [style*="max-width: 600px"] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

.semi-card {
  border-radius: 0px !important;
}

.semi-button {
  border-radius: 3px !important;
}

.semi-modal-body.semi-modal-body {
  flex: none;
}

.semi-button.talk-room-search-button {
  border-radius: 10px !important;
}

.semi-checkbox-disabled .semi-checkbox-addon {
  color: black !important;
}

.semi-input-textarea-readonly {
  color: black !important;
}

.semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  border-right: solid rgb(28 31 35 / 8%) 4px !important;
}

.semi-select-disabled .semi-select-selection,
.semi-select-disabled .semi-select-selection-placeholder {
  color: black !important;
}

.semi-radio-addon-buttonRadio-disabled {
  color: rgb(177, 168, 168) !important;
}

.semi-radio-addon-buttonRadio-checked {
  background: var(--semi-color-primary) !important;
  color: white !important;
}

.semi-select-disabled .semi-tag {
  color: black !important;
}

.semi-modal-content-animate-show {
  animation: none !important;
}

.inspection-table-header-children {
  background-color: #f1fffe !important;
}

.inspection-table-header {
  background-color: #b3dae5 !important;
}

.inspection-table-header-children {
  background-color: #f1fffe !important;
}

.icon-up:hover {
  color: red;
}

.icon-down:hover {
  color: blue;
}

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  display: none;
}
/* 以下 react chat elements用 css*/
.custom-chat-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.custom-chat-list .rce-lst-item {
  width: 100%;
  margin-bottom: 10px;
}

.custom-chat-list .rce-lst-item-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.custom-chat-list .rce-lst-item-title {
  font-weight: bold;
  font-size: 1rem;
}

.custom-chat-list .rce-lst-item-subtitle {
  font-size: 0.9rem;
  color: gray;
}

/* LINE風のメッセージバブルデザイン */

.chat-input {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
}

.rce-button {
  background-color: #00b900 !important;
  color: white;
  border-radius: "20px";
  padding: "10px 20px";
  cursor: "pointer";
}

.rce-mbox-text:after {
  content: "" !important;
}
.rce-mbox {
  min-width: auto !important;
  box-shadow: none !important;
}
.rce-container-mbox {
  min-width: auto !important;
}

.rce-container-input {
  min-width: 95% !important;
}
.rce-citem-body--bottom-title {
  color: #adb5bd !important;
  font-size: 14px !important;
}

.rce-citem {
  height: 85px !important;
}

.semi-upload-file-list {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.semi-upload-file-list {
  flex-basis: auto !important;
}

.rce-citem-body--bottom {
  margin-top: 0px !important;
}