/**
 * description    : 아르고스 모니터링 상세보기 Modal css
 * fileName       : argos_detail
 */

/* 상세정보 모달 창 */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.modal-dialog {
    width: min(720px, 92vw); background: #fff; border-radius: 12px; padding: 16px 18px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25); position: relative;
}
.modal-close {
    position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; line-height: 24px;
    font-size: 20px; border: none; background: transparent; cursor: pointer;
}
.argos-detail-wrapper{
    display: flex; justify-content: space-between;
    width: 100%; height: 100%;  margin-bottom: 1%;
}
.deviceHeader{ width: 25%; border-right: 1px solid gray; }
.deviceHeader-health{ margin-top: 25%;}
.deviceHeader-status{

}
.device-livestat{ background-color: springgreen; border-radius: 50%;}
.helpImg{
    width: 14%;
}
.argos-detail-wrapper .statusMonitor{
    display: flex; align-items: center;
    width: 80%; height: 100%; padding: 0 10px;
}
.argos-detail-wrapper .statusMonitor.danger{
    border: 1px solid var(--danger); border-radius: 10px;
    background-color: var(--danger);
    color: var(--text);
}
.deviceContainer{ display: flex; width: 100%;}
.thermalContainer{
    display: flex;  align-items: center;  justify-content: center; flex-direction: column;
    border: 1px solid var(--primary);
    width: 100%;
}
.thermalContainer img { width: 60%;}
.thermalContainer .thermal-top{
    display: flex; justify-content: space-between;
    width: 100%; margin-bottom: 1%;
}
.thermal-top-left{display: flex; }
.thermal-top-left .detections{
    color: var(--text); text-align: center;
    border-radius: 20px;
    background-color: #d5e2f9;
    width: 25%; padding: 3px; margin-right: 5px;
}
.thermal-data .no-predict{ color: #999999;}
.thermalContainer .thermal-mid{
    display: flex; justify-content: center; align-items: center; flex-direction: column;
    width: 100%; margin-top: 1%;
}
.thermalContainer .thermal-midlow{
    display: flex; justify-content: space-between;
    width: 60%;
}
.thermalContainer .thermal-bottom{
    display: flex; justify-content: space-between;
    width: 100%; margin-top: 1%;
}
.thermal-bottom-left{display: flex; }
.thermal-top-right,
.thermal-bottom-right,
.thermal-midlow-right{ text-align: right;}
.thermal-data{ width: 50%; margin: 2%;}