/* 読み込み中画面用のオーバーレイのスタイル */
#app-info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* viewport 幅に合わせる */
    height: 100vh; /* viewport 高さに合わせる */
    background-color: rgba(0, 0, 0, 0.5); /* 背景に半透明の黒 */
    justify-content: center; /* コンテンツを中央揃えにする */
    align-items: center;
    z-index: 1002; /* 高い優先度 */
    display: none;
}

/* 読み込み中画面 */
#app-info-load-status {
    text-align: center;
    color: white;
}

/* 読み込み中画面のくるくる表示 */
#app-info-load-status-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.5); /* 薄い白色の部分 */
    border-top: 5px solid white; /* 回転部分の白色 */
    border-radius: 50%; /* 円形にする */
    animation: spin 1s linear infinite; /* 回転アニメーション */
    margin: 0 auto; /* 水平方向中央揃え */
}

/* 読み込み中画面テキスト */
#app-info-load-status-text {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
}

/* 回転アニメーションの定義 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 距離表示画面 */
#app-info-marker-distance {
    position: fixed; /* スクロールしても画面上で固定される */
    bottom: 20px; /* 画面下部からの距離 */
    left: 50%; /* 横方向中央揃え */
    transform: translateX(-50%); /* 幅の中心を基準に中央揃え */
    background-color: white; /* 白背景 */
    border: 1px solid #ddd; /* 薄いグレーの外枠線 */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 立体感のある影 */
    padding: 15px; /* 内側の余白 */
    width: 320px; /* 全体の幅を固定 */
    font-family: 'Arial', sans-serif; /* フォント設定 */
    z-index: 1002; /* 前面に表示 */
    display: none;  /* 初期状態では非表示 */
}

/* 距離表示画面 ヘッダー部分 */
#app-info-marker-distance-header {
    /* top: 10px; */
    font-size: 12px; /* ヘッダーの文字を大きく */
    color: #000000; /* やや薄いグレーで読みやすく */
    margin-top: 0px; /* ヘッダーとの間に余白 */
}

/* 距離表示画面 本文説明部分 */
#app-info-marker-distance-body {
    /* top: 10px; */
    font-size: 12px; /* 本文を通常サイズ */
    color: #555; /* やや薄いグレーで読みやすく */
    margin-top: 0px; /* ヘッダーとの間に余白 */
}

/* 距離表示画面 フッター部分 */
#app-info-marker-distance-direction {
    /* top: 10px; */
    font-size: 12px; /* フッター部分の文字サイズ */
    margin-top: 10px; /* 本文から少し離す */
    color: #000000; /* デフォルト濃いグレー字体 */
}

#app-info-marker-distance-total-distance {
    /* top: 10px; */
    font-size: 12px; /* フッター部分の文字サイズ */
    margin-top: 0px; /* 本文から少し離す */
    color: #000000; /* デフォルト濃いグレー字体 */
}

/* ファイルアップロード進捗状況表示画面 */
#app-info-video-frame-status {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1002;
    display: none;
}

/* 画像表示用オーバーレイのスタイル */
#app-info-image-display-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* viewport 幅に合わせる */
    height: 100vh; /* viewport 高さに合わせる */
    flex-direction: column; 
    background-color: rgba(197, 197, 197, 0.9); /* 背景に半透明の黒 */
    justify-content: center; /* コンテンツを中央揃えにする */
    align-items: center;
    z-index: 10000; /* 高い優先度 */
    display: none;
}

#app-info-image-text {
    margin: 0px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #303030;
}

/* 画像のスタイル */
#app-info-image {
    max-width: 90%; /* 画面幅の90%まで縮小 */
    max-height: 80%; /* 画面高さの90%まで縮小 */
    object-fit: contain; /* 画像比率を維持して中央寄せ */
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); /* 適当な影を追加する例 */
}

/* メディアクエリ：画面幅の狭いデバイス用調整 */
@media screen and (max-width: 600px) {
    
}