.parrots-page-permissions {
    display: flex;
    position: absolute;
    padding-top: 72pt;
    width: 100%;
    height: 100%;  
    >.tooltip-view-group-list{
        display: none;
        position: fixed;
        width: 155px;
        height: 200px;
        z-index: 100;
        box-shadow: 0px 4px 9px extract(@CLR_1, 6);
        background-color: extract(@CLR_1, 9);
        overflow: auto;

        >.tooltip-view-group-list-row{
            width: 100%;
            height: 40px;
            box-shadow: 0px 1px 1px extract(@CLR_1, 6);
            display: flex;
            align-items: center;
            padding-left: 16px;
        }
    }

    >.nav-permitted-user{
        display: block;
        height: 83%;
        width: 25%;
        position: fixed;
        z-index: 1; 
        right: -25%;
        background-color: extract(@CLR_1, 9);
        transition: all 0.5s ease 0s;
        box-shadow: 0px 4px 9px extract(@CLR_1, 6);

        >.wrapper-class-permitted-user {
            position: absolute;
            right: 0;
            width: 100%;
            height: 100%;
            box-shadow: 0px 0px 1px extract(@CLR_1, 6);

            >.wrapper-label-head-permitted-user {
                display: flex;
                margin-left: 5%;
                margin-top: 6%;
                align-items: center;
                >.label-head-select-group {
                    margin-left: 2%; 
                    font-size: 18pt;
                    font-weight: bold;
                }
            }

            >.label-description-permitted-user {
                display: flex;
                margin-left: 5.5%;
                margin-top: 1%;
                font-size: 9pt;
                color: extract(@CLR_1, 3);
                margin-bottom: 32pt;
            } 

            >.col-md-12{
                display: flex;
                width: 100%;
                height: 48pt;
                background-color: extract(@CLR_1, 8);
                border-bottom: 0.5px solid extract(@CLR_1, 7);
                align-items: center;
                
                >.avatar-user{
                    margin-left: 8px; 
                    border-radius: 22px; 
                    height: 44px; 
                    width: 44px;
                }

                >.wrapper-label-username-email {
                    display: block; 
                    margin-left: 8px;
                    >.label-username {
                        display: flex;
                    }
                    >.label-email {
                        display: flex; 
                        font-size: 8pt; 
                        color: extract(@CLR_1, 3);
                    }
                } 

                >.wrapper-group-user{
                    display: block; 
                    position: absolute;
                    right: 7%;
                    width: 17%;

                    >.group-user-header{
                        display: flex;
                        justify-content: center;
                    }

                    >.group-user-description{
                        display: flex; 
                        font-size: 8pt; 
                        color: extract(@CLR_1, 3);
                        justify-content: center;
                    }

                    >.group-user-description:hover{
                        display: flex; 
                        font-size: 8pt; 
                        color: extract(@CLR_0, 1);
                        justify-content: center;
                    }
                }
            } 
            >.label-below-description-permitted-user {
                display: flex;
                margin-left: 10.5%;
                width: 80%;
                bottom: 14%;
                font-size: 9pt;
                position: absolute;
                color: extract(@CLR_1, 3);
            }
            >.btn-back-permitted-user {
                display: flex;
                height: 5.8%;
                width: 23%;
                cursor: pointer;
                align-items:  center;
                justify-content: center;
                margin-left: 10.5%;
                bottom: 5%; 
                font-size: 8pt; 
                position: absolute;
                color: extract(@CLR_0, 7);
                background-color: extract(@CLR_1, 8);
    
                >.icon-back {
                    display: flex;  
                    &:before {  
                        content: "B";
                        font-family: 'PhloxGlyphicons';
                        font-size: 7pt; 
                    } 
                } 
            }
            >.btn-submit-permitted-user {
                display: flex;
                height: 5.8%;
                width: 40%;
                cursor: pointer;
                align-items:  center;
                justify-content: center;
                margin-left: 39%;
                bottom: 5%; 
                font-size: 8pt; 
                position: absolute;
                color: extract(@CLR_0, 7);
                background-color: extract(@CLR_1, 8);
            }
        }
    } 
    >.nav-class{
        display: block;
        height: 83%;
        width: 40%;
        position: fixed;
        z-index: 1; 
        right: -40%;
        background-color: extract(@CLR_1, 9);
        transition: all 0.5s ease 0s;
        box-shadow: 0px 4px 9px extract(@CLR_1, 6); 
        >.nav-class-header{
            height: 16%;
            display: flex;
            padding-left: 8%;
            align-items: center;
            box-shadow: 0px 0px 1px extract(@CLR_1, 6); 
            >.icon-class-object{
                width: 40px;
                height: 40px;;
            } 
            >.label-header{
                padding-left: 4%; 
                >.label-header-title{
                    font-size: 18pt;
                    font-weight: bold;
                } 
                >.label-header-description{
                    font-size: 9pt;
                    color: extract(@CLR_1, 3);
                }
            }
        } 
        >.nav-class-body{ 
            >.wrapper-class-perrmissions-level {
                position: absolute;
                left: 0;
                width: 45%;
                height: 84%;
                box-shadow: 0px 0px 1px extract(@CLR_1, 6); 
                >.wrapper-label-head-nav-select-level {
                    display: flex;
                    margin-left: 5%;
                    margin-top: 6%;
                    align-items: center;

                    >.label-head-select-level {
                        margin-left: 2%; 
                        font-size: 18pt;
                        font-weight: bold;
                    }
                }
                >.label-description-nav-select-level {
                    display: flex;
                    margin-left: 5.5%;
                    margin-top: 1%;
                    font-size: 9pt;
                    color: extract(@CLR_1, 3);
                    padding-bottom: 20%;
                } 
                >.wrapper-list-checkbox{
                    display: flex;
                    padding-left: 16%;
                }
                >.label-below-description-nav-select-level {
                    display: flex;
                    margin-left: 10.5%;
                    width: 80%;
                    bottom: 14%;
                    font-size: 9pt;
                    position: absolute;
                    color: extract(@CLR_1, 3);
                }
            } 
            >.wrapper-class-perrmissions-group {
                position: absolute;
                right: 0;
                width: 55%;
                height: 84%;
                box-shadow: 0px 0px 1px extract(@CLR_1, 6); 
                >.wrapper-label-head-nav-select-group {
                    display: flex;
                    margin-left: 5%;
                    margin-top: 6%;
                    align-items: center;
                    >.label-head-select-group {
                        margin-left: 2%; 
                        font-size: 18pt;
                        font-weight: bold;
                    }
                }
                >.label-description-nav-select-group {
                    display: flex;
                    margin-left: 5.5%;
                    margin-top: 1%;
                    font-size: 9pt;
                    color: extract(@CLR_1, 3);
                } 
                >.wrapper-material{
                    display: flex;  
                    position: absolute;
                    width: 40%;
                    margin-left: 5%;
                    material-text-box {
                        width: 100%;
                    }
                }
                >.btn-all-group {
                    display: flex;
                    position: absolute; 
                    cursor: pointer;
                    padding-right: 10%;
                    margin-top: 5%;
                    width: 100%;
                    color: extract(@CLR_1, 3);
                    border-bottom: 0.5px solid extract(@CLR_1, 7);
                    justify-content: flex-end;
                    padding-bottom: 1%;
                }
                .wrapper-list-group {
                    display: block; 
                    position: absolute; 
                    width: 100%; 
                    padding-left: 1px;
                    height: 60%; 
                    margin-top: 9.7%;
                    padding-top: unset;
                    .phx-table-body {
                        display: block;
                        
                    }
                    .list-group {
                        display: flex;
                        cursor: pointer;
                        width: 100%;
                        height: 15%;
                        background-color: extract(@CLR_1, 8);
                        border-bottom: 0.5px solid extract(@CLR_1, 7);
                        align-items: center;   
                        margin-bottom: unset !important;
                    } 
                    .list-group:hover{
                        background-color: extract(@CLR_1, 9);
                    }
                    .selected-group {
                        background-color: extract(@CLR_1, 9); 
                    }
                }
                >.label-below-description-nav-select-group {
                    display: flex;
                    margin-left: 10.5%;
                    width: 80%;
                    bottom: 14%;
                    font-size: 9pt;
                    position: absolute;
                    color: extract(@CLR_1, 3);
                }
                >.btn-back-nav-select-group {
                    display: flex;
                    height: 5.8%;
                    width: 23%;
                    cursor: pointer;
                    align-items:  center;
                    justify-content: center;
                    margin-left: 10.5%;
                    bottom: 5%; 
                    font-size: 8pt; 
                    position: absolute;
                    color: extract(@CLR_0, 7);
                    background-color: extract(@CLR_1, 8); 
                    >.icon-back {
                        display: flex;  
                        &:before {  
                            content: "B";
                            font-family: 'PhloxGlyphicons';
                            font-size: 7pt; 
                        } 
                    } 
                }
                >.btn-submit-nav-select-group {
                    display: flex;
                    height: 5.8%;
                    width: 40%;
                    cursor: pointer;
                    align-items:  center;
                    justify-content: center;
                    margin-left: 39%;
                    bottom: 5%; 
                    font-size: 8pt; 
                    position: absolute;
                    color: extract(@CLR_0, 7);
                    background-color: extract(@CLR_1, 8);
                }
            }
        }
    } 
    .icon-arrow-right { 
        width: 100%;
        justify-content: flex-end;
        padding-right: 16px;
        display: flex; 
        height: 100%; 
        align-items: center; 
        &:before { 
        content: "C";
        font-family: 'PhloxGlyphicons';
        font-size: 8pt; 
        }
    } 
    .icon-user {
        margin-right: 16px;
        display: flex;
        height: 100%;
        &:before { 
            content: "D";
            font-family: 'PhloxGlyphicons';
            font-size: 16pt; 
        }
    }

    .disable{
        &:before { 
            color: extract(@CLR_1, 5);
            content: "D";
            font-family: 'PhloxGlyphicons';
            font-size: 16pt; 
        }
    }

    .icon-user:hover {
        &:before { 
            color: extract(@CLR_1, 5);
            content: "D";
            font-family: 'PhloxGlyphicons';
            font-size: 16pt; 
        }
    } 
    >.wrapper-permissions-left {
        display: block; 
        height: 100%; 
        width: 25%;
        border-right: 1.7px solid extract(@CLR_1, 7);
        background-color: extract(@CLR_1, 9);
        overflow: auto;
        >.wrapper-head-left {
            display: block; 
            height: 24%; 
            width: 100%; 
            padding: 12% 24px 24px 12%;
            border-bottom: 0.7px solid extract(@CLR_1, 7);
            >.label-title-left {
                font-size: 16pt;
                font-weight: bold;
            }
            >.label-desccription-left {
                font-size: 11pt;
                color: extract(@CLR_1, 3); 
                margin-top: 10pt;
            }
        }
        .wrapper-list-sql {
            display: flex; 
            cursor: pointer;
            width: 100%; 
            height: 40pt; 
            border-bottom: 0.7px solid extract(@CLR_1, 7); 
            align-items: center;
            >.icon-right {
                padding-left: 12px;
                display: flex;  
                height: 100%;
                justify-content: center;
                align-items: center; 
                &:before { 
                    cursor: pointer;  
                    content: "E";
                    font-family: 'PhloxGlyphicons';
                    font-size: 10pt; 
                } 
            }
            >.icon-down {
                padding-left: 12px;
                display: flex; 
                height: 100%;
                justify-content: center;
                align-items: center; 
                color: @CLR_BRAND;
                &:before { 
                    cursor: pointer;  
                    content: "K";
                    font-family: 'PhloxGlyphicons';
                    font-size: 10pt; 
                } 
            }
            >.label-value-sql {
                margin-left: 5%;
                white-space: nowrap; 
                text-overflow: ellipsis; 
                overflow: hidden;
            }
            >.parent-sql {
                width: 80%;
            }
            >.children-sql {
                width: 200%;
            }
        }
        .selected {
            background-color: extract(@CLR_1, 8);
        }
        .wrapper-list-sql:hover {
            background-color: extract(@CLR_1, 8);
        }
    }
    >.wrapper-right{
        overflow: auto;
        width: 75%;
        height: 100%; 
        >.wrapper-permissions-right{
            display: block; 
            height: 100%; 
            width: 100%;  
            background-color: extract(@CLR_1, 9);
            >.wrapper-head-right {
                display: flex; 
                margin-left: 10%; 
                padding-top: 5%;
                >.label-title-right {
                    display: flex; 
                    margin-left: 2.5%; 
                    font-size: 16pt; 
                    font-weight: bold;
                }
            }
            >.label-desrciptions-right {
                display: flex; 
                margin-left: 10%; 
                margin-top: 1%; 
                margin-bottom: 2%;
                font-size: 8pt; 
                color: #c2c2c2;
            }
            >.label-permissions {
                display: flex;
                align-items: center;
                height: 50pt;
                align-content: center;
                padding-left: 10%;
                background-color: #f5f5f5;
                font-weight: bold;
                font-size: 15pt;
            }
            >.wrapper-column-class-object {
                display: flex; 
                width: 100%; 
                height: 50pt; 
                margin-top: 2%; 
                background-color: extract(@CLR_1, 8); 
                align-items: center; 
            }
            .label-first-column {
                display: flex;
                padding-left: 5%;
                align-items: center;
                >.wrapper-icon-class-object {
                    display: flex; 
                    justify-content: center; 
                    width: 5%; 
                    margin-left: 5%; 
                    margin-right: 2%; 
                    >.icon-class-object {
                        width: 10px; 
                        height: 15px; 
                    } 
                }
            }
            >.wrapper-row-class-object {
                display: flex; 
                width: 100%; 
                height: 50pt; 
                align-items: center; 
                border-bottom: 0.7px solid extract(@CLR_1, 7); 

                >.col-md-2{
                    display: flex; 
                    align-items: center;
                }
                >.col-md-3{
                    display: flex; 
                    align-items: center;
                }
                >.col-md-4{
                    display: flex; 
                    align-items: center;
                }
                >.col-md-8{
                    display: flex; 
                    align-items: center;
                }
            }
            >.hover:hover {
                cursor: pointer; 
                background-color: extract(@CLR_1, 8);
            }
        }
    }
    >.nav-permissions {
        display: block;
        height: 83%;
        width: 23.8%;
        position: absolute;
        z-index: 1;
        top: 10%;
        right: -23.8%;
        background-color: extract(@CLR_1, 9);
        transition: all 0.5s ease 0s;
        box-shadow: 0px 4px 9px extract(@CLR_1, 6);
        >.wrapper-label-head-nav-permissions {
            display: flex;
            margin-left: 11%;
            margin-top: 10%;
            align-items: center;
            >.label-head-permissions {
                margin-left: 4%; 
                font-size: 18pt;
                font-weight: bold;
            }
        }
        >.label-description-nav-permissions {
            display: flex;
            margin-left: 10.5%;
            margin-top: 2%;
            font-size: 9pt;
            color: extract(@CLR_1, 3);
        } 
        >.btn-all-user {
            display: flex;
            position: absolute; 
            cursor: pointer;
            padding-right: 10%;
            margin-top: 10%;
            width: 100%;
            color: extract(@CLR_1, 3);
            border-bottom: 0.5px solid extract(@CLR_1, 7);
            justify-content: flex-end;
            padding-bottom: 1%;
        }
        >.wrapper-list-user {
            display: block; 
            position: absolute; 
            width: 100%; 
            height: 55%; 
            margin-top: 15.5%;
            >.list-user {
                display: flex;
                cursor: pointer;
                width: 100%;
                height: 15%;
                background-color: extract(@CLR_1, 8);
                border-bottom: 0.5px solid extract(@CLR_1, 7);
                align-items: center;  
                >.wrapper-space{ 
                    width: 5%; 
                }
                >.icon-status {
                    display: flex;  
                    height: 100%;
                    justify-content: center;
                    align-items: center; 
                    width: 5%; 
                    &:before { 
                        cursor: pointer;  
                        content: "E";
                        font-family: 'PhloxGlyphicons';
                        font-size: 10pt; 
                    } 
                } 
                >.icon-status-show {
                    display: flex; 
                    width: 5%; 
                    height: 100%;
                    align-items: center;  
                    &:before { 
                        cursor: pointer;  
                        content: "K";
                        font-family: 'PhloxGlyphicons';
                        font-size: 10pt; 
                    } 
                }
                >.icon-sub-group {
                    display: flex; 
                    justify-content: center; 
                    width: 5%; 
                    align-items: center; 
                    height: 100%; 
                    &:before { 
                        cursor: pointer;  
                        content: "z";
                        font-family: 'PhloxGlyphicons';
                        font-size: 15pt; 
                    } 
                } 
                >.wrapper-label-group-name-sub {
                    display: flex;  
                    font-weight: bold;
                }
                >.wrapper-label-group-name {
                    display: flex; 
                    margin-left: 10%; 
                    font-weight: bold;
                }
                >.icon-selected-user {
                    display: flex; 
                    position: absolute; 
                    right: 9.5%; 
                    color: extract(@CLR_P, 4);
                    &:before {   
                        content: "y";
                        font-family: 'PhloxGlyphicons';
                        font-size: 16pt; 
                    } 
                }
            }
            .list-user:hover{
                background-color: extract(@CLR_1, 9);
            }
            .selected-user {
                background-color: extract(@CLR_1, 9);
            }
        }
        >.label-below-description-nav-permissions {
            display: flex;
            margin-left: 10.5%;
            width: 72%;
            bottom: 16%;
            font-size: 9pt;
            position: absolute;
            color: extract(@CLR_1, 3);
        }
        >.btn-back-nav-permissions {
            display: flex;
            height: 4.8%;
            width: 25%;
            cursor: pointer;
            align-items:  center;
            justify-content: center;
            margin-left: 10.5%;
            bottom: 5%; 
            font-size: 8pt; 
            position: absolute;
            color: extract(@CLR_0, 7);
            background-color: extract(@CLR_1, 8);
        }
        >.btn-submit-nav-permissions {
            display: flex;
            height: 4.8%;
            width: 50%;
            cursor: pointer;
            align-items:  center;
            justify-content: center;
            margin-left: 39%;
            bottom: 5%; 
            font-size: 8pt; 
            position: absolute;
            color: extract(@CLR_0, 7);
            background-color: extract(@CLR_1, 8);
        }
    }
}