html {
	scroll-behavior: smooth;
}
@media (min-width: 992px) {
	html {
		scroll-padding-top: 100px;
	}
}

/* body section common */
body {
	overflow-x: hidden;
	overflow-y: scroll;
	color: #565656;
	margin-bottom: 60px;
	min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.section {
  display: none;
}
.active {
  display: block;
}


/* nav bar */
.navbar{
  /* background: linear-gradient(to right, #Ffff7f, #FFFFF0); */
}


/* サイドバーのスタイル */
.sidebar {
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  padding: 24px 0 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  background-color: #406b75; /* 背景色を青に設定 */
  background: linear-gradient(to bottom, #007bff, #6c757d);
  color: #fff; /* 文字色を白に設定 */
}
/* サイドバー内のアイテムのスタイル */
.sidebar .nav-link {
  font-weight: 500;
  color: inherit; /* デフォルトの文字色を継承する */
  border-top: 1px solid #fff; /* 境界線を表示する */
  padding: 8px 16px; /* アイテムのパディングを調整する */
  transition: background-color .2s ease-in-out; /* 背景色のトランジションを設定する */
}
.sidebar .nav-link:first-child {
  border-top: none; /* 最初のアイテムには境界線を表示しない */
}
.sidebar .nav-link:hover,
.sidebar .nav-link:focus { /* ホバー時とフォーカス時のスタイルを指定する */
  color: #fff; /* 文字色を白に設定 */
  background-color: rgba(255,255,255,0.2); /* 背景色を半透明の白に設定 */
  outline: none; /* フォーカス時の枠線を消す */
}
.sidebar .nav-link.active {
  color: #fff; /* アクティブ時の文字色を白に設定 */
  background-color: rgba(255,255,255,0.4); /* アクティブ時の背景色を半透明の白に設定 */
}


/* メインコンテンツのスタイル */
.main {
  padding: 48px;
  margin-left: 240px; /* サイドバーの幅分だけオフセット */
}













.content-wrapper {
  flex: 1;
}

.footer {
  background-color: #f8f9fa;
  padding: 10px 0;
  text-align: center;
  border-top: 1px solid #dee2e6;
}


/* chat */
.chat-container {
  background-color: #657596;
  height: 80vh;
  overflow-y: scroll;
  padding: 15px;
  border: 1px solid #dee2e6;
  border-radius: 5px;
}
.message {
  margin-bottom: 32px;
}
.message-text {
  display: inline-block;
  padding: 8px 15px;
  border-radius: 18px;
  max-width: 70%;
  word-wrap: break-word;
}
.sent {
  text-align: right;
}
.sent .message-text {
  background-color: #007bff;
  color: #fff;
}
.received .message-text {
  background-color: #e9ecef;
}



.datepicker-days th.dow:first-child,
.datepicker-days td:first-child {
  color: #f00;
}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {
  color: #00f;
}