body {}

a,
a:hover {
    color: unset;
    text-decoration: unset;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.d-flex {
    display: flex;
}

.all {
    width: 100vw;
}

.page-login {
    background-image: url(../images/login-bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.page-login form {
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 1px 1px 10px 1px #ccc;
}

.header {
    padding: 0 30px;
}

.header-inner > div:first-child {
    width: 30%;
}

.header-inner > div:last-child {
    width: 70%;
    text-align: right;
    justify-content: end;
    gap: 8em;
}

.header-menu {
    width: 100%;
    justify-content: end;
    gap: 1.5em;
}

.header-menu > div {
    position: relative;
    width: 10%;
    text-align: left;
}

.header-menu .menu-3 {
    width: 25%;
}

.header-menu > div:hover .submenu {
    display: block !important;
}

.header-menu .submenu {
    background-color: #fff;
    color: #333;
    padding: 10px;
    position: absolute;
    top: 50px;
    border: 1px solid #333;
    z-index: 10;
}

.header-menu .submenu ul li {
    line-height: normal;
    padding: 3px 10px;
    cursor: pointer;
}

.container .header {
    background: #fff !important;
    color: #333;
}

.main-content {
    border: 1px solid #ccc;
}

#main {
    background-image: url(../images/1.png);
    background-size: 99.1% 98%;
    background-repeat: no-repeat;
    background-position-x: 1%;
    width: 50%;
    height: 1006px;
}

.circle {
    position: absolute;
    border-radius: 50%;
    border: .1vw solid #000;
    overflow: hidden;
    font-size: .53vw;
    /*width: 2vw;
    height: 4.3vh;*/
    border: .46vw solid transparent;

}

.circle-orange {
    background: #fe9d17;
}

.circle-danger {
    background: #ff0000;
}

.circle-yellow {
    background: #ffcc53;
}

.circle-green {
    background: #008000;
}

.circle-lightgreen {
    background: #4aa79a;
}

.circle > div {
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 50%;
    overflow: hidden;
}

.check > div {
    border: 1px solid #000;
    border-radius: 50%;
    overflow: hidden;
}

.circle div.circle_t {
    border-bottom: .1vw solid #000;
    height: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.circle div.circle_b {
    height: 50%;
    /*align-items: center;*/
    justify-content: center;
    display: flex;
    background: #fff;
}

/* left CSS */

#left > div {
    position: absolute;
}

.line_left_01 {
    top: 14.1vw;
    left: 35vh;
}

.circle_left_01 {
    top: 11.6vw;
    left: 32.3vh;
}

.check-1,
.check-2,
.check-3 {
    position: absolute;
    width: fit-content;
    height: fit-content;
    border-radius: 50%;
    transition: border-color 0.3s ease;
}

/* 기본 테두리 색상 */
.check-1 {
    border: .46vw solid #fb494b;
}

.check-2 {
    border: .46vw solid green;
}

.check-3 {
    border: .46vw solid yellow;
}

/* 깜빡일 때 변경될 테두리 색상 */
.check-1.blink-border-red {
    border-color: rgba(251, 73, 75, 0.3) !important;
}

.check-2.blink-border-green {
    border-color: rgba(0, 128, 0, 0.3) !important;
}

.check-3.blink-border-yellow {
    border-color: rgba(255, 200, 0, 0.3) !important;
}

.line-l {
    border-left: .15vw solid #000;
    height: 1vh;
    position: absolute;
    bottom: -5px;
    z-index: 100;
}

.line-w {
    border-top: .15vw solid #000;
    width: 10px;
    position: absolute;
    bottom: -5px;
    z-index: 100;
}

.circle_left_02 {
    top: 11.6vw;
    left: 40.5vh;
}

.line_left_02 {
    top: 14.1vw;
    left: 43.3vh;
}

.circle_left_03 {
    top: 11.6vw;
    left: 49vh;
}

.line_left_03 {
    top: 14.1vw;
    left: 51.7vh;
}

.circle_left_04 {
    top: 11.6vw;
    left: 59.7vh;
}

.line_left_04 {
    top: 14.1vw;
    left: 62.4vh;
}

.circle_left_05 {
    top: 11.6vw;
    left: 67.3vh;
}

.line_left_05 {
    top: 14.1vw;
    left: 70.1vh;
}

.line_left_06 {
    top: 16.65vw;
    left: 32.9vh;
}

.circle_left_06 {
    top: 15.3vw;
    left: 27.9vh;
}

.line_left_07 {
    top: 16.65vw;
    left: 37vh;
}

.circle_left_07 {
    top: 15.3vw;
    left: 37.2vh;
}

.circle_left_08 {
    top: 19vw;
    left: 26vh;
}

.line_left_08 {
    top: 19vw;
    left: 28.7vh;
}

.line_left_09 {
    top: 19vw;
    left: 41.5vh;
}

.circle_left_09 {
    top: 19vw;
    left: 38.5vh;
}

.line_left_10 {
    top: 18.8vw;
    left: 51vh;
}

.circle_left_10 {
    top: 18.9vw;
    left: 48.1vh;
}

.line_left_11 {
    top: 19.5vw;
    left: 58.4vh;
}

.circle_left_11 {
    top: 18.1vw;
    left: 58.5vh;
}

.line_left_12 {
    top: 24vw;
    left: 61.3vh;
}

.circle_left_12 {
    top: 22.7vw;
    left: 61.5vh;
}

.circle_left_13 {
    top: 28.5vw;
    left: 62.3vh;
}

.line_left_13 {
    top: 31vw;
    left: 65vh;
}

.circle_left_14 {
    top: 10.15vw;
    left: 76.8vh;
}

.line_left_14 {
    top: 11.54vw;
    left: 81.8vh;
    width: 14px;
}

.circle_left_15 {
    top: 15.9vw;
    left: 75.4vh;
}

.line_left_15 {
    top: 17.3vw;
    left: 80.3vh;
}

.circle_left_16 {
    top: 21.1vw;
    left: 77.2vh;
}

.line_left_16 {
    top: 22.5vw;
    left: 82.2vh;
}

.circle_left_17 {
    top: 10.1vw;
    left: 1.7vh;
}

.line_left_17 {
    top: 11.5vw;
    left: 1.7vh;
    width: 8px;
}

.circle_left_18 {
    top: 12.8vw;
    left: 1.7vh;
}

.line_left_18 {
    top: 14.2vw;
    left: 1.7vh;
    width: 8px;
}

.circle_left_19 {
    top: 15.5vw;
    left: 1.7vh;
}

.line_left_19 {
    top: 16.95vw;
    left: 1.7vh;
    width: 8px;
}

.circle_left_20 {
    top: 12.8vw;
    left: 7vh;
}

.circle_left_21 {
    top: 23.7vw;
    left: 1.7vh;
}

.line_left_21 {
    top: 25.1vw;
    left: 1.7vh;
    width: 8px;
}

.circle_left_22 {
    top: 27.7vw;
    left: 1.7vh;
}

.line_left_22 {
    top: 29.05vw;
    left: 1.7vh;
    width: 8px;
}

.circle_left_23 {
    top: 34.6vw;
    left: 45vh;
}

.line_left_23 {
    top: 36vw;
    left: 44.8vh;
}

.circle_left_24 {
    top: 39vw;
    left: 48vh;
}

.line_left_24 {
    top: 40.4vw;
    left: 53vh;
}

.circle_left_25 {
    top: 42.2vw;
    left: 48vh;
}

.line_left_25 {
    top: 43.6vw;
    left: 53vh;
}

.circle_left_26 {
    top: 32vw;
    left: 57.4vh;
}

.line_left_26 {
    top: 34.4vw;
    left: 60vh;
    height: 8px;
}


/* right CSS */

.square {
    position: absolute;
    background-color: orange;
    width: 40px;
    height: 40px;
    border: .1vw solid #000;
    font-size: .53vw;
    text-align: center;
    line-height: 4;
}

.square-01 {
    top: 3vh;
    left: 51.8vw;
}

.square-02 {
    top: 18.9vh;
    left: 53.4vw;
}

.square-03 {
    top: 19vh;
    left: 77.7vw;
}

#right .line-l {
    border-left: 2px solid #000;
    height: 1vh;
    position: absolute;
    bottom: -5px;
    z-index: 100;
}

.line_right_01 {
    top: 6.5vw;
    left: 100.2vh;
}

.circle_right_01 {
    top: 4.2vw;
    left: 97.5vh;
}

.line_right_02 {
    top: 6.5vw;
    left: 107.8vh;
}

.circle_right_02 {
    top: 4.2vw;
    left: 105vh;
}

.line_right_03 {
    top: 6.5vw;
    left: 127vh;
}

.circle_right_03 {
    top: 4.0vw;
    left: 124.2vh;
}

.line_right_04 {
    top: 6.5vw;
    left: 135.9vh;
}

.circle_right_04 {
    top: 4.0vw;
    left: 133vh;
}

.line_right_05 {
    top: 6.5vw;
    left: 143.9vh;
}

.circle_right_05 {
    top: 4.0vw;
    left: 141vh;
}

.line_right_06 {
    top: 14vw;
    left: 100.7vh;
}

.circle_right_06 {
    top: 11.5vw;
    left: 98vh;
}

.line_right_07 {
    top: 14vw;
    left: 107.5vh;
}

.circle_right_07 {
    top: 11.5vw;
    left: 104.7vh;
}

.line_right_08 {
    top: 17.3vw;
    left: 95.2vh;
}

.circle_right_08 {
    top: 15.9vw;
    left: 95.4vh;
}

.line_right_09 {
    top: 23vw;
    left: 100vh;
}

.circle_right_09 {
    top: 20.5vw;
    left: 97.3vh;
}

.line_right_10 {
    top: 23vw;
    left: 107vh;
}

.circle_right_10 {
    top: 20.5vw;
    left: 104.3vh;
}

.line_right_11 {
    top: 15.9vw;
    left: 122.8vh;
}

.circle_right_11 {
    top: 13.4vw;
    left: 120vh;
}

.line_right_12 {
    top: 15.9vw;
    left: 128.7vh;
}

.circle_right_12 {
    top: 13.4vw;
    left: 126vh;
}

.line_right_13 {
    top: 15.9vw;
    left: 134.7vh;
}

.circle_right_13 {
    top: 13.4vw;
    left: 132vh;
}

.line_right_14 {
    top: 16vw;
    left: 149.3vh;
}

.circle_right_14 {
    top: 13.5vw;
    left: 146.5vh;
}

.line_right_15 {
    top: 16vw;
    left: 159.6vh;
}

.circle_right_15 {
    top: 13.5vw;
    left: 157vh;
}

.line_right_16 {
    top: 16vw;
    left: 175.7vh;
}

.circle_right_16 {
    top: 13.5vw;
    left: 173vh;
}

.line_right_17 {
    top: 32.2vw;
    left: 85vh;
}

.circle_right_17 {
    top: 32.3vw;
    left: 82.1vh;
}

.line_right_18 {
    top: 32.2vw;
    left: 97vh;
}

.circle_right_18 {
    top: 32.3vw;
    left: 94.1vh;
}

.line_right_19 {
    top: 36.1vw;
    left: 103.8vh;
}

.circle_right_19 {
    top: 34.7vw;
    left: 99vh;
}

.line_right_20 {
    top: 41.5vw;
    left: 110vh;
}

.circle_right_20 {
    top: 40vw;
    left: 105.1vh;
}

.line_right_21 {
    top: 43.4vw;
    left: 128vh;
}

.circle_right_21 {
    top: 43.5vw;
    left: 125vh;
}

.line_right_22 {
    top: 44.5vw;
    left: 137vh;
}

.circle_right_22 {
    top: 42vw;
    left: 134.2vh;
}

.line_right_23 {
    top: 44.5vw;
    left: 145vh;
}

.circle_right_23 {
    top: 42vw;
    left: 142.2vh;
}

.circle_right_24 {
    top: 30vw;
    left: 136vh;
}

.circle_right_25 {
    top: 35.7vw;
    left: 140vh;
}

.line_right_26 {
    top: 36.2vw;
    left: 147.5vh;
}

.circle_right_26 {
    top: 34.8vw;
    left: 147.7vh;
}

.line_right_27 {
    top: 40.3vw;
    left: 154.2vh;
}

.circle_right_27 {
    top: 37.8vw;
    left: 151.5vh;
}

.line_right_28 {
    top: 42.9vw;
    left: 162.8vh;
    height: 13px !important;
}

.circle_right_28 {
    top: 43.1vw;
    left: 160vh;
}

.line_right_29 {
    top: 42.9vw;
    left: 176vh;
    height: 13px !important;
}

.circle_right_29 {
    top: 43.1vw;
    left: 173.1vh;
}

.line_right_30 {
    top: 42.9vw;
    left: 190.7vh;
    height: 13px !important;
}

.circle_right_30 {
    top: 43.1vw;
    left: 188vh;
}

.line_right_31 {
    top: 29.3vw;
    left: 150.8vh;
}

.circle_right_31 {
    top: 26.8vw;
    left: 148vh;
}

.circle_right_32 {
    top: 26vw;
    left: 156vh;
}

.line_right_33 {
    top: 29.3vw;
    left: 163.8vh;
}

.circle_right_33 {
    top: 26.8vw;
    left: 161vh;
}

.line_right_34 {
    top: 29.3vw;
    left: 175vh;
}

.circle_right_34 {
    top: 26.8vw;
    left: 172.3vh;
}

.circle_right_35 {
    top: 31vw;
    left: 127vh;
}

.border {
    width: 39px;
    height: 39px;
    border: 1px solid #000;
    border-radius: 50%;
    color: #fff;
}

/* pipe Css */


.pipe {
    position: absolute;

}

.pipe-l-01 {
    top: 18.2vh;
    left: 0.9vw;
}

.pipe-l-02 {
    top: 21vh;
    left: 0.05vw;
}

.pipe-l-03 {
    top: 29vh;
    left: 13.5vw;
}

.pipe-l-04 {
    top: 30.6vh;
    left: 12.2vw;
}

.pipe-l-05 {
    top: 35.5vh;
    left: 22.1vw;
}

.pipe-l-06 {
    top: 37.9vh;
    left: 28.9vw;
}

.pipe-l-07 {
    top: 62.1vh;
    left: 30vw;
}

.pipe-l-08 {
    top: 7.7vh;
    left: 38.3vw;
}

.pipe-l-09 {
    top: 11.1vh;
    left: 37.2vw;
}

.pipe-l-10 {
    top: 11vh;
    left: 42.45vw;
}

.pipe-l-11 {
    top: 17.1vh;
    left: 44.7vw;
}

.pipe-l-12 {
    top: 61vh;
    left: 71.9vw;
}

.pipe-l-13 {
    top: 7.6vh;
    left: 94.2vw;
}

.pipe-l-14 {
    top: 17vh;
    left: 94.18vw;
}

.pipe-l-15 {
    top: 13.95vh;
    left: 46vw;
}

.pipe-l-16 {
    top: 59.7vh;
    left: 38vw;
}

.pipe-l-17 {
    top: 58.9vh;
    left: 73vw;
}

.pipe-l-18 {
    top: 75.7vh;
    left: 25vw;
}

.pipe-l-19 {
    top: 78vh;
    left: 27.35vw;
}

.pipe-l-20 {
    top: 28.8vh;
    left: 49vw;
}

.pipe-l-21 {
    top: 46.5vh;
    left: 49vw;
}

.pipe-l-22 {
    top: 32.5vh;
    left: 59vw;
}

.pipe-l-23 {
    top: 88.7vh;
    left: 68vw;
}

.pipe-l-24 {
    top: 83.2vh;
    left: 76.5vw;
}

.pipe-l-25 {
    top: 84.2vh;
    left: 37vw;
}

.pipe-l-26 {
    top: 84.2vh;
    left: 41vw;
}

.pipe-l-27 {
    top: 84.2vh;
    left: 58vw;
}

.pipe-l-28 {
    top: 82vh;
    left: 66.85vw;
}

.pipe-l-29 {
    top: 8vh;
    left: 98.3vw;
}

.pipe-l-30 {
    top: 34vh;
    left: 98.25vw;
}

.pipe-l-31 {
    top: 35vh;
    left: 57.3vw;
}

.pipe-l-32 {
    top: 49.5vh;
    left: 39.3vw;
}

.pipe-line {
    border: 1px solid red;
}

.water {
    position: absolute;
}

.water-1 {
    top: 28.3vh;
    left: 42.5vw;
}

.water-2 {
    top: 69.7vh;
    left: 58.7vw;
}

.modal .form-control,
.modal .form-select {
    background-color: #f8f7fc;
}

.modal .border-bottom {
    border-bottom: 1px dashed #ccc !important;
}

/* Global styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    /* Prevent horizontal scroll during transitions */
}

h2,
h3 {
    margin: 0 0 20px;
}

/* Container for both the flowchart and details view */
.container {
    display: flex;
    width: 200vw;
    /* Double the viewport width to hold two “screens” */
    height: 100vh;
    transition: transform 0.5s ease-in-out;
    padding: 0;
}

/* The flowchart “screen” */
.flowchart-view {
    /*width: 100vw;*/
    height: 100vh;
    /*background: #f0f0f0;*/
    /*padding: 40px;*/
    box-sizing: border-box;
}

/* The details “screen” that is initially off-screen */
.details-view {
    width: 100vw;
    height: 100vh;
    background: #fff;
    padding: 40px;
    box-sizing: border-box;
    position: relative;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    transition: transform 0.5sease-in-out;
}

/* Equipment nodes styling */
.equipment-node {
    display: inline-block;
    margin: 10px;
    background: #007BFF;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
    padding: 3px 10px;
    line-height: normal !important;
}

.equipment-node:hover {
    background: #0056b3;
}

/* Back button in the details view */
.back-button {
    display: inline-block;
    margin-bottom: 20px;
    color: #007BFF;
    cursor: pointer;
    text-decoration: underline;
}

/* Monitoring details content */
.monitoring-details {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fafafa;
}

/* tree Css */

.details-view .container {
    display: flex;
    /*flex-direction: column;
    height: 100vh;
    max-width: 1400px;
    margin: 0 auto;*/
}

.main-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sidebar {
    width: 250px;
    background-color: #fff;
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid #ccc;
}

.monitoring-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #e9ecef;
}

.piping-map {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    overflow: auto;
}

.details-panel {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
}

.system-item,
.pipe-item {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    cursor: pointer;
}

.system-item:hover,
.pipe-item:hover {
    background-color: #f0f0f0;
}

.map-item {
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    cursor: pointer;
}

.normal {
    color: #28a745;
}

.warning {
    color: #ffc107;
}

.critical {
    color: #dc3545;
}

.connected {
    color: #28a745;
}

.disconnected {
    color: #dc3545;
}

.error {
    color: #ff8000;
}

.sensor-data p {
    margin: 5px 0;
}

.chart-container {
    width: 100%;
    height: 300px;
    margin-top: 20px;
}

/*시스템 Css*/

.search-section {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
}

.search-section label {
    margin-right: 10px;
}

.search-section input {
    padding: 8px;
    width: 200px;
    box-sizing: border-box;
}

.search-section button {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

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

.table-section {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
}

.table-section h2 {
    margin-top: 0;
}

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

.table-section th,
.table-section td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.table-section th {
    background-color: #007bff;
    color: white;
}

.table-section td {
    cursor: pointer;
}

.table-section button {
    padding: 5px 10px;
    margin: 2px;
    cursor: pointer;
}

.edit-btn {
    background-color: #ffc107;
    color: black;
    border: none;
}

.delete-btn {
    background-color: #dc3545;
    color: white;
    border: none;
}

.pagination {
    margin-top: 20px;
    text-align: center;
    width: 100%;
}

.pagination button {
    padding: 5px 10px;
    margin: 0 5px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.pagination button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination span {
    margin: 0 10px;
}

.regist-btn {
    position: absolute;
    right: 0;
    margin-top: 20px !important;
    padding: 8px 16px;
    background-color: #000;
    color: white;
    border: none;
    cursor: pointer;
}

/* 장비류 Css */

.form-section {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.form-section h2 {
    margin-top: 0;
}

.form-section label {
    display: block;
    margin: 10px 0 5px;
}

.form-section input,
.form-section select {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.form-section .field-group {
    display: none;
}

.form-section button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

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

.table-section {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
}

.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

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

.table-section th,
.table-section td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.table-section th {
    background-color: #007bff;
    color: white;
}

.table-section button {
    padding: 5px 10px;
    margin: 2px;
    cursor: pointer;
}

.edit-btn {
    background-color: #ffc107;
    color: black;
    border: none;
}

.delete-btn {
    background-color: #dc3545;
    color: white;
    border: none;
}

.error {
    color: #dc3545;
    font-size: 0.9em;
}

/* Separator High Level Css*/

.alarm-banner {
    background-color: #dc3545;
    color: white;
    padding: 10px;
    text-align: center;
    display: none;
}

.main-content {
    display: flex;
    flex: 1;
    padding: 20px;
    background-color: #e9ecef;
    overflow: hidden;
}

.status-panel {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    margin-right: 20px;
    border: 1px solid #ccc;
    overflow-y: auto;
}

.chart-panel {
    flex: 2;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.normal {
    color: #28a745;
}

.warning {
    color: #ffc107;
}

.critical {
    color: #dc3545;
}

.valve-open {
    color: #28a745;
}

.valve-closed {
    color: #dc3545;
}

.pump-on {
    color: #28a745;
}

.pump-off {
    color: #dc3545;
}

.logic-active {
    color: #007bff;
}

.logic-inactive {
    color: #6c757d;
}

.sensor-data p {
    margin: 5px 0;
}

.control-buttons button {
    margin: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.chart-container {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}

.log {
    margin-top: 20px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
}

.data-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
    max-height: 200px;
    overflow-y: auto;
}

.data-table th,
.data-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.data-table th {
    background-color: #007bff;
    color: white;
}

.data-table .normal-value {
    color: #28a745;
}

.data-table .warning-value {
    color: #ffc107;
}

.data-table .critical-value {
    color: #dc3545;
}

/* Separator Low Level Css*/

.alarm-banner {
    background-color: #dc3545;
    color: white;
    padding: 10px;
    text-align: center;
    display: none;
}

.main-content {
    display: flex;
    flex: 1;
    padding: 20px;
    background-color: #e9ecef;
    overflow: hidden;
}

.status-panel {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    margin-right: 20px;
    border: 1px solid #ccc;
    overflow-y: auto;
}

.chart-panel {
    flex: 2;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.normal {
    color: #28a745;
}

.warning {
    color: #ffc107;
}

.critical {
    color: #dc3545;
}

.valve-open {
    color: #28a745;
}

.valve-closed {
    color: #dc3545;
}

.pump-on {
    color: #28a745;
}

.pump-off {
    color: #dc3545;
}

.logic-active {
    color: #007bff;
}

.logic-inactive {
    color: #6c757d;
}

.sensor-data p {
    margin: 5px 0;
}

.control-buttons button {
    margin: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.chart-container {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}

.log {
    margin-top: 20px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
}

.data-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
    max-height: 200px;
    overflow-y: auto;
}

.data-table th,
.data-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.data-table th {
    background-color: #007bff;
    color: white;
}

.data-table .normal-value {
    color: #28a745;
}

.data-table .warning-value {
    color: #ffc107;
}

.data-table .critical-value {
    color: #dc3545;
}

/* Separator 선택 Css*/

.alarm-banner {
    background-color: #dc3545;
    color: white;
    padding: 10px;
    text-align: center;
    display: none;
}

.main-content {
    display: flex;
    flex: 1;
    padding: 20px;
    background-color: #e9ecef;
    overflow: hidden;
}

.status-panel {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    margin-right: 20px;
    border: 1px solid #ccc;
    overflow-y: auto;
}

.chart-panel {
    flex: 2;
    background-color: #fff;
    padding: 20px;
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

.normal {
    color: #28a745;
}

.warning {
    color: #ffc107;
}

.critical {
    color: #dc3545;
}

.valve-open {
    color: #28a745;
}

.valve-closed {
    color: #dc3545;
}

.sensor-data p {
    margin: 5px 0;
}

.control-buttons button {
    margin: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.chart-container {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}

.log {
    margin-top: 20px;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
}

.data-table {
    margin-top: 20px;
    width: 100%;
    border-collapse: collapse;
    max-height: 200px;
    overflow-y: auto;
}

.data-table th,
.data-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

.data-table th {
    background-color: #007bff;
    color: white;
}

.data-table .normal-value {
    color: #28a745;
}

.data-table .warning-value {
    color: #ffc107;
}

.data-table .critical-value {
    color: #dc3545;
}