parrots-page-monitor-system { 
    position: absolute; 
    width: 100%; 
    height: 100%;
}
.parrots-page-monitor-system {
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 100%;
    >.wrapper-head-monitor {
        .wrapper-under-line(72pt); 
        position: absolute;
        box-shadow: 0px 2px 4px extract(@CLR_1, 6);
        align-items: center; 
        font-weight: bold;
        z-index: 2;   
        justify-content: flex-end;  
        cursor: unset;
        >.wrapper-head-state {
            display: block; 
            position: relative; 
            margin-right: 4.5%; 
            margin-left: 4.5%; 
            >.value-state {
                display: flex; 
                font-size: 14pt; 
                font-weight: bold; 
            }
            >.label-state {
                display: flex; 
                font-size: 8pt; 
            }
        }
        >.line-head-state {
            height: 100%; 
            width: 1px; 
            border-right: 1px solid extract(@CLR_1, 8); 
        }
    }
    >.wrapper-content-state {
        display: flex; 
        padding-top: 72pt;
        width: 100%; 
        height: 100%;
        >.wrapper-content-chart {
            height: 100%;
            >.wrapper-row {
                margin-top: 3%;
                >.wrapper-col {
                    margin-bottom: 3%; 
                    >.wrapper-chart {
                        width: 100%; 
                        cursor: pointer; 
                        box-shadow: 0px 4px 8px extract(@CLR_1, 7); 
                        margin-bottom: 4%; 
                    }
                    .selected-chart {
                        border: 1px solid #14bce2;
                    }
                    >.label-name-chart {
                        left: 15px; 
                        position: absolute; 
                        font-size: 10pt; 
                        font-weight: bold; 
                    }
                    >.value-state-chart {
                        right: 25px; 
                        position: absolute; 
                        font-size: 8pt; 
                    }
                }
            }
        }
        >.wrapper-detail-chart {
            background-color: extract(@CLR_1, 7); 
            height: 100%;
            >.label-title-detail-chart {
                display: flex; 
                margin-top: 8%; 
                margin-left: 5%; 
                font-size: 25pt; 
                font-weight: bold;
            }
            div {
                display: flex;
                >.label-sub-title-detail-chart {
                    margin-left: 5%; 
                    font-size: 12pt; 
                    font-weight: bold;
                }
                >.label-description-detail-chart {
                    margin-left: 2%; 
                    font-size: 8pt; 
                    margin-top: 0.75%;
                }
            } 
            >.wrapper-label-head-deatil-chart {
                display: flex; 
                margin-top: 8%; 
                margin-bottom: 2%; 
                font-weight: bold; 
                font-size: 12pt;
                >.label-name-node {
                    margin-left: 5%;
                }
                >.label-server-node {
                    right: 8%; 
                    position: absolute
                }
            }
            >.wrapper-list-node {
                display: block;
                >.wrapper-item-node {
                    display: flex; 
                    margin-left: 2%; 
                     border-bottom: 1px solid extract(@CLR_1, 8); 
                    height: 75px; 
                    width: 96%; 
                    background-color: extract(@CLR_1, 9); 
                    >.wrapper-icon-name-item-node {
                        display: flex; 
                        align-items: center; 
                        border-right: 1px solid extract(@CLR_1, 8); 
                        width: 32%; 
                        height: 100%; 
                        >.icon-node {
                            margin-left: 9.5%; 
                            height: 30px; 
                        }
                        >.wrapper-name-item-node {
                            display: block; 
                            margin-left: 7.5%;
                            >.label-name-item-node {
                                display: flex; 
                                font-size: 12pt; 
                                font-weight: bold; 
                            } 
                            >.label-id-item-node {
                                display: flex; 
                                font-size: 8pt; 
                            }
                        }
                    }
                    >.wrapper-chart-item-node {
                        display: flex; 
                        height: 100%; 
                        width: 57% ;
                        >.wrapper-chart-node {
                            width: 100%; 
                        }
                    }
                    >.label-server-item-node {
                        display: flex; 
                        z-index: 1; 
                        border-left: 1px solid extract(@CLR_1, 8); 
                        font-weight: bold; 
                        right: 0; 
                        width: 11%; 
                        height: 100%;  
                        justify-content: center; 
                        align-items: center;
                    }
                }
            }
        }
    }
}