body {
  /* background-image: url('/static/images/bg.png'); */
  background-position: left top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  background-blend-mode: lighten;
  opacity: 0.85;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 100%;
}

.table-striped tbody tr td {
  color: #d3d3d3;
}

.table-striped tbody tr:nth-child(odd) td {
  background-color: #1d1d1d;
  font-size: small;
}

.table-striped tbody tr:nth-child(even) td {
  background-color: #27272c;
  font-size: small;
}


table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
}

/* もしセルも角を丸くしたい場合 */
th:first-child,
td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

th:last-child,
td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.table-container {
  overflow-y: auto;
  max-height: 400px;
  /* ここで高さを指定します。 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  position: sticky;
  top: 0;
  vertical-align: middle;
  text-align: center;
  --bs-table-bg: #393e4b;
}

.h2,
h2 {
  font-size: 2rem;
  letter-spacing: 1px;
}

.selected {
  background-color: #007bff;
  /* 例: ブルーの背景色 */
  color: white;
  /* 文字色を白に */
}


[v-cloak] {
  display: none;
}

/* ダークモード用のカスタム変数 */
:root {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 224.3 76.3% 48%;
}