.qry2cfgFilter {    
    display: flex; 
    flex-direction: row;
    justify-content: flex-start; 
    align-items: flex-start; 
    width: 100%; 
    height: 100%; 
    border: 2px solid grey; 
    box-sizing: border-box; }
.qry2cfgFilter:focus {
    border: 2px solid orangered; }
.in-filter-2v-1-toolbar {
    display: flex; 
    flex-direction: column;
    justify-content: flex-start; 
    align-items: center; 
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    height: 100%;
    background-color: hsl(0, 0%, 82%);
    background: linear-gradient(hsl(0, 0%, 20%),hsl(0, 0%, 40%),hsl(0, 0%, 20%));
    padding: 30px;
    z-index: 200; 
    box-sizing: border-box; }
    .in-filter-2v-1-toolbar-top {
        display: flex; 
        flex-direction: column;
        justify-content: flex-start; 
        align-items: center; }
    .in-filter-2v-1-toolbar-center {
        display: flex; 
        flex-direction: column;
        justify-content: center; 
        align-items: center; }
    .in-filter-2v-1-toolbar-bottom {
        display: flex; 
        flex-direction: column;
        justify-content: flex-end; 
        align-items: center; 
        padding: 10px 0}
/*--------------------------*/
.filter-field {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 6px;
    border: none;
    outline: none;
    box-shadow: none; }
    .filter-field-no-view-no-rol {
        flex-direction: row;
        align-items: center;
        min-height: 36px; }
    .filter-field-view-no-rol {
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        width: 100%; }
    .filter-field-no-view-rol {
        flex-direction: row;
        width: 100%; }
        .filter-field-rol-color {
            align-items: flex-start;
            height: 35px; }        
        .filter-field-rol-codigo-barra {
            align-items: center;
            height: 100px;
            min-height: 100px;
            max-height: 100px; }
        .filter-field-rol-codigo-qr {
            align-items: center;
            height: 200px; 
            min-height: 200px; 
            max-height: 200px; }
        .filter-field-rol-imagen {
            align-items: center;
            height: 200px; 
            min-height: 200px; 
            max-height: 200px; }    
    .filter-field-editable {
        cursor: pointer; }
    .filter-field-no-editable {
        cursor: default; }
    .filter-field-focus {}
    /*--------------------------*/
    .filter-field-label-wrapper { 
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: 100; }
        .filter-field-label-wrapper-no-view-no-rol {}
        .filter-field-label-wrapper-view-no-rol {
            width: 100%!important;
            min-width: 100%!important;
            height: 50px; }
        .filter-field-label-wrapper-no-view-rol {}    
            .filter-field-label-wrapper-rol-color {}
            .filter-field-label-wrapper-rol-codigo-barra {}
            .filter-field-label-wrapper-rol-codigo-qr {}
            .filter-field-label-wrapper-rol-imagen {}
    .filter-field-label-wrapper-focus {
        font-weight: 800; }
    .filter-field-label-wrapper-dply-filas {
        margin-left: 10px; }
    .filter-field-label-wrapper-dply-columnas {
        width: 100px;
        min-width: 100px;
        max-width: 100px; }
    .filter-field-label-wrapper-editable {
        color: hsl(0, 0%, 30%); }
    .filter-field-label-wrapper-no-editable {
        color: hsl(0, 0%, 50%); }
        /*--------------------------*/
        .filter-field-label { 
            font-family: Arial, Helvetica, sans-serif;
            text-wrap: nowrap;
            margin-right: 6px; }
            .filter-field-label-no-view-no-rol {
                font-size: 12px;
                font-weight: 100; }
            .filter-field-label-view-no-rol {
                text-transform: uppercase;
                font-size: 16px;
                font-weight: 600;
                text-shadow: 1px 1px 1px rgb(48,48,48);
                width: 240px; }
            .filter-field-label-no-view-rol {
                font-size: 12px;
                font-weight: 100; }
                .filter-field-label-rol-color {}
                .filter-field-label-rol-codigo-barra {}
                .filter-field-label-rol-codigo-qr {}
                .filter-field-label-rol-imagen {}            
            .filter-field-label-focus {
                font-weight: 800; }
            .filter-field-label-dply-filas {
                /*margin-left: 10px;*/ }
            .filter-field-label-dply-columnas {
                /*width: 100px;*/ }
            .filter-field-label-editable {
                color: hsl(0, 0%, 30%); }
            .filter-field-label-no-editable {
                color: hsl(0, 0%, 50%); }
    /*--------------------------*/
    .filter-field-data-wrapper-2 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative; }
        .filter-field-data-wrapper-2-no-view-no-rol {}
        .filter-field-data-wrapper-2-view-no-rol {
            width: 100%;
            height: 100%; }
        .filter-field-data-wrapper-2-no-view-rol {}
            .filter-field-data-wrapper-2-rol-color {}
            .filter-field-data-wrapper-2-rol-codigo-barra {
                /*width: 100%;*/
                height: 100%; }                    
            .filter-field-data-wrapper-2-rol-codigo-qr {
                height: 100%; }  
            .filter-field-data-wrapper-2-rol-imagen {
                height: 100%; }  
        .filter-field-data-wrapper-2-focus {
            border: 2px solid rgb(41 25 255);
            border-radius: 8px;
            box-shadow: 2px 2px 8px rgb(53 98 253); }
        /*--------------------------*/              
        .filter-field-data-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
            background-color: hsl(0, 0%, 95%);
            border-radius: 5px;
            border: none;
            outline: none;
            box-shadow: 1px 1px 1px hsl(0, 0%, 30%); }
            .filter-field-data-wrapper-no-view-no-rol {}
            .filter-field-data-wrapper-view-no-rol {
                width: 100%;
                height: 100%; 
                margin-left: 0!important;
                padding: 0; }
            .filter-field-data-wrapper-no-view-rol {}
                .filter-field-data-wrapper-rol-color {}
                .filter-field-data-wrapper-rol-codigo-barra {
                    /*width: 100%;*/
                    height: 100%;
                    margin-left: 0!important;
                    padding: 0 5px 0 0; }
                .filter-field-data-wrapper-rol-codigo-qr {
                    height: 100%;
                    margin-left: 0!important;
                    padding: 0 5px 0 0; }
                .filter-field-data-wrapper-rol-imagen {
                    height: 100%;
                    margin-left: 0!important;
                    padding: 0 5px 0 0; }                    
                .filter-field-data-wrapper-view-focus {}
            .filter-field-data-wrapper-focus {
                background-color: hsl(0, 0%, 25%)!important;
                color: white!important; }            
            .filter-field-data-wrapper-edition {
                background-color: hsl(61, 100%, 79%)!important; }
            .filter-field-data-wrapper-editable {
                background-color: hsl(0, 0%, 95%); }
            .filter-field-data-wrapper-no-editable {
                background-color: hsl(0, 0%, 70%);
                color: hsl(0, 0%, 50%)!important; }
            /*--------------------------*/
            .filter-field-data {
                flex: 1 1 auto;
                margin-left: 0;
                padding: 0;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                font-weight: 800;
                min-height: 20px;
                border: none;
                outline: none;
                box-shadow: none;
                display: flex;
                justify-content: space-between;
                align-items: center; }
                .filter-field-data-no-view-no-rol {}
                .filter-field-data-view-no-rol {
                    width: 100%;
                    height: 100%; }
                .filter-field-data-no-view-rol {}
                    .filter-field-data-rol-color {}
                    .filter-field-data-rol-codigo-barra {
                        height: 100%; }
                    .filter-field-data-rol-codigo-qr {
                        height: 100%; }
                    .filter-field-data-rol-imagen {
                        height: 100%; }                        
                    .filter-field-data-view-focus {}
                .filter-field-data-querydef {
                    justify-content: flex-start;
                    align-items: flex-start; }
                .filter-field-data-no-querydef {
                    justify-content: space-between;
                    align-items: center; }                        
                .filter-field-data-focus {
                    color: white!important; }
                .filter-field-data-editable {}
                .filter-field-data-no-editable {
                    color: hsl(0, 0%, 50%); }
                /*--------------------------*/
                .filter-field-data-value-pre-unit {
                    margin-right: 3px;
                    font-weight: 100; }
                .filter-field-data-value {
                    flex: 1 1 auto;
                    margin-left: 0;
                    padding: 0;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 14px;
                    font-weight: 800;
                    height: 26px;
                    border: none;
                    outline: none;
                    box-shadow: none; }
                    .filter-field-data-value-no-view-no-rol {}
                    .filter-field-data-value-view-no-rol {}
                    .filter-field-data-value-no-view-rol {}
                        .filter-field-data-value-rol-color {}
                        .filter-field-data-value-rol-codigo-barra {}
                        .filter-field-data-value-rol-codigo-qr {}
                        .filter-field-data-value-rol-imagen {
                            width: 100%;
                            height: 100%; }
                        .filter-field-data-value-view-focus {}
                    .filter-field-data-value-focus {
                        color: white!important; }
                    .filter-field-data-value-editable {}
                    .filter-field-data-value-no-editable {
                        color: hsl(0, 0%, 50%); }
                    .filter-field-data-value-querydef {
                        justify-content: flex-start;
                        align-items: flex-start; }                        
                    .filter-field-data-value-no-querydef {
                        justify-content: space-between;
                        align-items: center; 
                        flex-wrap: wrap; }                          
                .filter-field-data-value-post-unit {
                    margin-left: 3px;
                    font-weight: 100; }
            /*--------------------------*/
            .filter-field-data-tool {
                flex: 0 0 auto;
                margin-left: 2px;
                padding: 0;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 8px;
                font-weight: 100;
                border: none;
                outline: none;
                box-shadow: none;
                text-wrap: nowrap; }
                .filter-field-data-tool-editable {}
                .filter-field-data-tool-no-editable { 
                    display: none; }
                .filter-field-data-tool-view {
                    display: none; }                            
                .filter-field-data-tool-btn {
                    box-shadow: 1px 1px 1px #444;
                    border-radius: 2px;
                    width: 13px;
                    min-width: 13px;
                    max-width: 13px;
                    height: 13px;
                    min-height: 13px;
                    max-height: 13px;
                    font-weight: 100;
                    font-size: 7px;
                    padding: 0;
                    outline: none;
                    border: 1px solid white;
                    cursor: pointer;
                    color: white; }
                    .filter-field-data-tool-btn-editable {}
                    .filter-field-data-tool-btn-no-editable {
                    display: none; }  
            .filter-field-data-input {
                /*flex: 1 1 auto;*/
                margin-left: 0;
                padding: 0;
                background-color: hsl(61, 100%, 79%);
                color: hsl(21, 97%, 30%)!important;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                font-weight: 800;
                height: 26px;
                border: none;
                outline: none;
                box-shadow: none; }
        .filter-field-data-dropdown {
            position: absolute; 
            left: 0; 
            top: 30px;
            width: 600px; 
            height: 200px; 
            border: 1px solid darkgreen; 
            background-color: #aaa;
            border-radius: 4px;
            z-index: 1000;
            box-shadow: 1px 1px 1px #333; }
/*datatypes*/
.filter-dt {
    /*color: hsl(0, 0%, 40%);*/
    display: flex;
}
.filter-dt-entero {
    font-size: 14px;
    justify-content: flex-end;
    align-items: center;
}
.filter-dt-decimal {
    font-size: 14px;
    justify-content: flex-end;
    align-items: center;
}
.filter-dt-fechaHora {
    font-size: 14px;
    justify-content: center;
    align-items: center;
}
.filter-dt-fecha {
    font-size: 14px;
    justify-content: center;
    align-items: center;
}
.filter-dt-hora {
    font-size: 14px;
    justify-content: center;
    align-items: center;
}
.filter-dt-string {
    font-size: 14px;
    justify-content: flex-start;
    align-items: center;
}
.filter-dt-texto {
    font-size: 14px;
    justify-content: flex-start;
    align-items: center;
}
.filter-dt-objeto {
    font-size: 14px;
    justify-content: flex-start;
    align-items: center;
}
.filter-dt-enum {
    font-size: 14px;
    justify-content: flex-start;
    align-items: center;
}
.filter-dt-array {
    font-size: 14px;
    justify-content: flex-start;
    align-items: center;
}
.filter-dt-logico {
    color: hsl(0, 0%, 40%);
    font-size: 18px;
    justify-content: center;
    align-items: center;
}



/*tool por datatypes*/
.filter-dt-tool {}
.filter-dt-tool-entero {}
.filter-dt-tool-decimal {}
.filter-dt-tool-fechaHora {}
.filter-dt-tool-fecha {}
.filter-dt-tool-hora {}
.filter-dt-tool-string {}
.filter-dt-tool-texto {}
.filter-dt-tool-objeto {}
.filter-dt-tool-enum {}
.filter-dt-tool-array {}
.filter-dt-tool-logico {
    display: none;}

/*btn tool por datatypes*/
.filter-dt-tool-btn {}
.filter-dt-tool-btn-entero {}
.filter-dt-tool-btn-decimal {}
.filter-dt-tool-btn-fechaHora {}
.filter-dt-tool-btn-fecha {}
.filter-dt-tool-btn-hora {}
.filter-dt-tool-btn-string {}
.filter-dt-tool-btn-texto {}
.filter-dt-tool-btn-objeto {}
.filter-dt-tool-btn-enum {}
.filter-dt-tool-btn-array {}
.filter-dt-tool-btn-logico {}

/*Button type*/
.filter-btn-ok {
    background-color: rgb(8, 160, 0);
}
.filter-btn-cancel {
    background-color: rgb(166, 15, 15);
}
.filter-btn-query {
    background-color: rgb(160, 160, 0);
}
.filter-btn-edit {
    background-color: rgb(0, 93, 160);
}
.filter-btn-delete {
    background-color: rgb(166, 85, 15);
}
.filter-btn-dropdown {
    background-color: rgb(126, 11, 144);
}


.numero-positivo {
	background: linear-gradient(to top, hsl(120, 97%, 12%),hsl(120, 61%, 39%),hsl(120, 97%, 12%));
	color: white!important; }
.numero-negativo {
	background: linear-gradient(to top, hsl(0, 100%, 18%),hsl(0, 96%, 60%),hsl(0, 100%, 18%));
	color: white!important; }
.data-wrapper-numero-cero {
	background: linear-gradient(to top, hsl(238, 97%, 12%),hsl(238, 97%, 39%),hsl(238, 97%, 12%)); }
.data-wrapper-numero-positivo {
	background: linear-gradient(to top, hsl(120, 97%, 12%),hsl(120, 61%, 39%),hsl(120, 97%, 12%)); }
.data-wrapper-numero-negativo {
	background: linear-gradient(to top, hsl(0, 100%, 18%),hsl(0, 96%, 60%),hsl(0, 100%, 18%)); }
.data-numero-cero {
	color: white!important; }
.data-numero-positivo { 
    color: white!important; }
.data-numero-negativo {
	color: white!important; }


.filter-desc {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 0;
    background: linear-gradient(hsla(0, 0%, 70%, 0.1),hsla(0, 0%, 90%, 0.1), hsla(0, 0%, 70%, 0.1)); }    
    .filter-desc-field {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9px;
        font-weight: 600; }
    .filter-desc-conector {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 8px;
        font-weight: 200; }
    .filter-desc-value {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 9px;
        font-weight: 800; }