@charset "utf-8";

/* 画面全体の高さ */
.frame-height {
    height: 650px;
}

/* 画面右側ペイン */
.right_pane {
    background-color: #eaf4ff;
}

/* システムメッセージ：テキストエリア */
.sys_msg {
    width: 100%;
    font-size: 14px;
}

/* 通信状態：良好時 */
.net_info_ok {
    background-color: #72e272;
}

/* 通信状態：データ停止時 */
.net_info_delay {
    background-color: #eaea95;
    animation: blink_anim 1s ease infinite;
}

/* 通信状態：エラー時 */
.net_info_err {
    background-color: #ea9595;
    animation: blink_anim 1s ease infinite;
}

/* 点滅表示 */
@keyframes blink_anim {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* データ品質：良好 */
.data_q_fixed {
    background-color: #72e272;
}

/* データ品質：低下 */
.data_q_float {
    background-color: #eaea95;
}

/* データ品質：不良 */
.data_q_bad {
    background-color: #ea9595;
}

/* 接近レベル：安全 */
.alert_lv0 {
    color: #404040;
    background-color: #72e272;
}

/* 接近レベル：１ */
.alert_lv1 {
    color: #404040;
}

/* 接近レベル：２ */
.alert_lv2 {
    color: #ff0000;
}

/* 接近レベル：３ */
.alert_lv3 {
    color: #ff0000;
    animation: blink_anim 1s ease infinite;
}

/* 接近レベル：データ停止 */
.alert_gray {
    color: gray;
}

/* キャンバス＠接近レベル：安全 */
.canvas_lv0 {
    background: #ffffff;
    width: 100%;
    border: 1px solid gray;
}

/* キャンバス＠接近レベル：１ */
.canvas_lv1 {
    background: #ffcc00;
    width: 100%;
    border: 1px solid gray;
}

/* キャンバス＠接近レベル：２ */
.canvas_lv2 {
    background: #ff9933;
    width: 100%;
    border: 1px solid gray;
}

/* キャンバス＠接近レベル：３ */
.canvas_lv3 {
    background: #ff3366;
    width: 100%;
    border: 1px solid gray;
}

/* キャンバスをレイヤー表示するための設定 */
.canvas_overlay {
    position: relative;
}

/* Z 方向表示用キャンバス */
.canvas_z {
    position: absolute;
    bottom: 0;
    right: 0;
    border: 4px solid blue;
}

/* 「自機を中央に表示」ボタン */
.centering_button {
    position: absolute;
    top: 0;
    right: 0;
    width: 15%;
    height: 35px;
}

/* 「全機表示」ボタン */
.show_all_cranes_button {
    position: absolute;
    top: 40px;
    right: 0;
    width: 15%;
}

/* 「Z方向表示」ボタン */
.disp_z_button {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15%;
    /* z-index: 10; */
}

/* 設定画面 */
.settings {
    background-color: #eaf4ff;
}

/* 接近レベル距離閾値のテキストボックス */
.alert_thres {
    width: 60px;
}

/* キャンバス内でのタッチ操作は無効にする */
#canvas {
    touch-action: none;
}

#canvas_z {
    touch-action: none;
}

/* フラッシュメッセージ */
.flash {
    padding: 0.8em;
    margin-bottom: 1em;
    border-radius: 4px;
    font-weight: bold;
}

.flash-success {
    /* background-color: #abdefd;
    color: #002E7E;
    border: 1px solid #abdefd; */
    background-color: #002E7E;
    color: white;
    border: 1px solid #002E7E;
}

.flash-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ログイン画面 高さ */
.frame-height-login {
    height: 500px;
}

/* ログイン ボタン */
.btn-primary-login {
    background-color: #002E7E;
    border-color: #002E7E;
    color: white;
}

/* 操作無効用 */
.blockable.disabled {
    opacity: 0.5;
    /* 見た目を薄くする */
    pointer-events: none;
    /* 内部のクリックや変更を無効化 */
}

/* ナビゲーションバー */
#navbar-top {
    background-color: #102744;
}

/* ナビゲーションバーのドロップダウンメニュー */
#dropdown-admin,
#dropdown-sites {
    background-color: #102744;
}

/* ナビゲーションバーのドロップダウンメニューのテキスト */
#dropdown-admin .dropdown-item,
#dropdown-sites .dropdown-item {
    color: rgba(255, 255, 255, 0.75);
}

/* ナビゲーションバーのドロップダウンメニューのテキストをホバーしたとき */
#dropdown-admin .dropdown-item:hover,
#dropdown-sites .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: white;
}

/* 設定モーダルの背景色と文字色 */
#settingsModal .modal-content {
    background-color: #102744;
    color: rgba(255, 255, 255, 0.75);
}

/* 閉じるボタン（×）を白くする */
#settingsModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* 設定モーダル内のテーブルの文字色と枠線色 */
#settingsModal .table {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.2);
}

/* 設定モーダル内のテーブルのヘッダー文字色 */
#settingsModal .table th {
    color: white;
}

/* 設定モーダル内の数値（距離）の文字色 */
#alert_thres_1_modal,
#alert_thres_2_modal,
#alert_thres_3_modal,
#fence_alert_thres_1_modal,
#fence_alert_thres_2_modal,
#fence_alert_thres_3_modal {
    color: white;
}

/* 設定モーダル内のシステムログ */
#settingsModal .sys_msg {
    background-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
}