parrots-page-system-node-info{
    position: relative;
    width: 100%;
    height: 100%;
}
.parrots-page-system-node-info {
    display: flex; 
    position: absolute; 
    width: 100%; 
    height: 100%;
    >.wrapper-node-info {
        display: inline-block; 
        position: absolute; 
        height: 100%; 
        width: 65%;  
        overflow: auto;
        >.wrapper-head-info {
            display: inline-block; 
            width: 100%;
            >.label-title {
                display: flex; 
                padding-top: 9%; 
                padding-left: 7%; 
                font-size: 35px;
            }
            >.label-description {
                display: flex; 
                padding-left: 7%; 
                padding-bottom: 6%; 
                color: extract(@CLR_0, 7); 
            }
        }
        >.wrapper-head-show-del-node {
            display: flex; 
            height: 10%; 
            width: 100%; 
            align-items: center; 
            background-color: extract(@CLR_1, 8); 
            >.label-title-name-node {
                padding-left: 5%;
            }
            >.icon-error {
                display: flex; 
                align-items: center;  
                position: absolute;  
                right: 12.5%;
                justify-content: center;
                width: 50px;
                height: 50px; 
                &:before { 
                    cursor: pointer;  
                    content: "G";
                    font-family: 'PhloxGlyphicons';
                    font-size: 13pt; 
                } 
            }
            >.icon-trash {
                display: flex; 
                align-items: center;  
                position: absolute;  
                right: 5.5%;
                justify-content: center;
                width: 50px;
                height: 50px; 
                &:before { 
                    cursor: pointer;  
                    content: "g";
                    font-family: 'PhloxGlyphicons';
                    font-size: 13pt; 
                } 
            }
            .selected {
                color: @CLR_BRAND;
            } 
        } 
        >.container-node-del {
            display: flex; 
            width: 100%; 
            height: 15%; 
            background-color: extract(@CLR_1, 9); 
            font-weight: unset;
            align-items: center; 
            margin-bottom: unset;
            cursor: pointer;
            border-bottom: 1px solid extract(@CLR_1, 7); 
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;   
        }
        .container-node-del input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
        }
        .checkmark {
            position: absolute; 
            left: 17px;
            height: 18px;
            width: 18px;
            background-color: #eee;
        } 
        .container-node-del:hover input ~ .checkmark {
            background-color: #ccc;
        } 
        .container-node-del input:checked ~ .checkmark {
            background-color: @CLR_BRAND;
        }  
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        } 
        .container-node-del input:checked ~ .checkmark:after {
            display: block;
        } 
        .container-node-del .checkmark:after {
            left: 5.5px;
            top: 1px;
            width: 6px;
            height: 13px;
            border: solid extract(@CLR_1, 9); 
            border-width: 0 3px 3px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        } 
        .icon-node {
            margin-left: 5%;
        }
        .icon-node-del {
            margin-left: 9%;
        }
        .wrapper-node-name-id {
            display: inline-block; 
            padding-left: 2%;
            >.label-name-node {
                display: flex; 
                font-size: 12pt;
            }
            >.label-id-node {
                display: flex; 
                font-size: 8.12pt; 
                color: extract(@CLR_0, 7); 
            }
        }
        .wrapper-node-ping-datetime {
            display: inline-block; 
            justify-content: flex-end; 
            right: 18%; 
            position: absolute;
            >.label-ping-node {
                display: flex; 
                color: extract(@CLR_0, 7);  
                font-size: 12pt; 
                justify-content: flex-end;
            }
            >.value-ping-node {
                color: extract(@CLR_0, 1); 
                padding-left: 1%;
            }
            >.label-datetime {
                display: flex; 
                font-size: 8.12pt; 
                color: extract(@CLR_1, 1); 
            }
        }
        .icon-status-node {
            display: flex; 
            right: 6%; 
            position: absolute; 
            height: 30pt; 
            width: 40px;
        } 
        >.btn-del-node-active {
            display: flex; 
            height: 10%; 
            width: 100%; 
            cursor: pointer; 
            justify-content: center; 
            align-items: center; 
            color: extract(@CLR_1, 9);  
            background-color: @CLR_BRAND; 
            border-bottom: 1px solid  extract(@CLR_1, 6); 
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;   
        }
        >.btn-del-node {
            display: flex; 
            height: 10%; 
            width: 100%;  
            justify-content: center; 
            align-items: center; 
            color: extract(@CLR_0, 7); 
            background-color: extract(@CLR_1, 7);  
            border-bottom: 1px solid extract(@CLR_1, 6); 
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;   
        } 
        >.container-node { 
            display: flex; 
            width: 100%; 
            height: 15%; 
            background-color: extract(@CLR_1, 9);  
            align-items: center; 
            border-bottom: 1px solid extract(@CLR_1, 6);  
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        >.btn-create-node {
            display: flex; 
            height: 10%; 
            width: 100%; 
            justify-content: center; 
            align-items: center; 
            color: extract(@CLR_0, 7);  
            background-color: extract(@CLR_1, 7);  
            border-bottom: 1px solid extract(@CLR_1, 6); 
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;   
        } 
    }
    >.wrapper-setting-node {
        display: inline-block; 
        position: absolute; 
        left: 65.1%; 
        width: 35%; 
        height: 100%; 
        background-color: extract(@CLR_1, 7); 
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;   
        >.label-setting {
            display: flex; 
            width: 100%; 
            height: 10%; 
            padding-top: 12%; 
            padding-left: 82%; 
            color: extract(@CLR_1, 1); 
            border-bottom: 1px solid extract(@CLR_1, 6); 
        }
        >.block-setting {
            display: flex;
            cursor: pointer; 
            width: 100%; 
            height: 10%; 
            background-color: extract(@CLR_1, 9);  
            align-items: center; 
            border-bottom: 1px solid extract(@CLR_1, 6); 
            >.label-title-setting {
                padding-left: 7%; 
                color: extract(@CLR_1, 1);  
            }
            >.label-data-setting {
                right: 17%; 
                position: absolute;
            }
        }
    }
}