body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f9;
}

.container {
    text-align: center;
    width: 100%;
    max-width: 900px;
    margin: auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    padding: 10px;
    border-radius: 8px;
}

.button-container {
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center; /* 垂直方向に中央揃え */
    margin: auto; /* 上下に余白を追加 */
    gap: 20px; /* ボタン間のスペース */
    font-size: 32px;
}

.logout-button, .back-button {
    justify-content: center; /* 水平方向に中央揃え */
    width: 100%;
    height: 100px; /* 高さを固定 */
    background-color: #3646f4; 
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 32px; /* 小さめの文字サイズ */
}

.logout-button i, .back-button i {
    margin-right: 5px; /* アイコンとテキストの間にスペースを追加 */
}

.logout-button:hover, .back-button:hover {
    background-color: #2f58d3; /* ホバー時の色 */
}

#barcode, #regionBarcode1, #regionBarcode2, #regionBarcode3, #regionBarcode4, 
#regionBarcode5, #regionBarcode6, #regionBarcode7, #regionBarcode8, 
#regionBarcode9, #regionBarcode10 {
    width: 100%;
    max-width: 800%; /* バーコードを大きく表示 */
    height: auto;
    margin: 20px auto; /* 上下中央揃え */
}

#searchButton,#detailsButton {
    display: block;
    margin: 20px auto; /* 上下中央揃え */
}

#productCode {
    background-color: #0e779f; /* 青ラベル */
    color: #fff; /* 白文字 */
    padding: 10px;
    display: inline-block; /* ラベルのように表示 */
    font-size: 25px; /* 見やすい文字サイズ */
    margin-top: 10px; /* 上に余白を追加 */
}

h2 {
    color: #333;
    font-size: 50px; /* 最適化された文字サイズ */
}

button {
    margin: 20px 0;
    padding: 20px;
    width: 100%;
    height: 200px; /* 高さを固定 */
    max-width: 700px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 50px; /* 最適化された文字サイズ */
}

input, select {
    margin: 20px 0;
    padding: 20px;
    width: 100%;
    height: 100px; /* 高さを固定 */
    max-width: 500px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 30px; /* 最適化された文字サイズ */
}

button {
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

button:disabled {
    background-color: #ccc; /* 無効化時の背景色 */
    cursor: not-allowed; /* 無効化時のカーソル */
    color: #666; /* 無効化時の文字色 */
}

table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 20px;
    text-align: center;
    font-size: 24px; /* 最適化された文字サイズ */
}

th {
    background-color: #007bff;
    color: #fff;
}

.blue-border {
    border: 2px solid #007bff; /* 青枠 */
    border-radius: 8px; /* 角を丸くする */
    padding: 10px; /* 内側の余白 */
    margin: 20px auto; /* 上下中央揃え */
    max-width: 400px; /* 最大幅を設定 */
    text-align: center; /* 中央揃え */
    background-color: #f9f9ff; /* 背景色を薄い青に */
}

.red-border {
    border: 2px solid #ff0000; /* 赤枠 */
    border-radius: 8px; /* 角を丸くする */
    padding: 10px; /* 内側の余白 */
    margin: 20px auto; /* 上下中央揃え */
    max-width: 400px; /* 最大幅を設定 */
    text-align: center; /* 中央揃え */
    background-color: #f9f9ff; /* 背景色を薄い青に */
}

.warning-text {
    color: red; /* 赤文字 */
    font-size: 25px; /* 小さめの文字サイズ */
    margin-bottom: 10px; /* 上に余白を追加 */
}

#cameraPreview {
    border: 2px solid #007bff;
    border-radius: 8px;
    margin: 20px auto;
    display: block;
    background-color: transparent; /* 背景を透明に設定 */
    object-fit: cover; /* 映像を要素にフィットさせる */
    width: 100%; /* 幅を100%に設定 */
    max-width: 500px; /* 最大幅を設定 */
    height: auto; /* 高さを自動調整 */
}

#cameraSection button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#cameraSection button:hover {
    background-color: #0056b3;
}

#cameraSection .button-container button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#cameraSection .button-container button:hover {
    background-color: #0056b3;
}