.test-css{
   display: none;
}
html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    display: block!important;
    
    input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus, div:focus{
	outline:none;
    }
}    
    
    .vg_entorno{
        height: 100%;
        width: 100%;
        overflow: hidden;
        
        .vg_login{
            height: 100%;
            width: 100%;
            background-color: #e9f2f8;
            display: flex;
            justify-content: center;
            align-items: center;
            
            .vg_loginform{
                width: 50%;
                height: 50%;
                max-width: 450px;
                border: #CCCCCC;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                padding: 10px;
                background-color: white;
                
                h1{
                    font-family: Arial;
                    font-size: 28px;
                    font-weight: normal;
                    text-align: center;
                }
                form{
                    margin: 0;
                    padding: 10px;
                    
                    label{
                        font-family: Arial;
                        font-size: 14px;
                        clear: both;
                        display: block;
                        margin-bottom: 5px;
                    }
                    input[type="text"], input[type="password"]{
                        display: block;
                        margin-bottom: 15px;
                        width: 100%;
                        padding: 6px;
                        border: 1px solid #999;
                        font-family: Arial;
                        font-size: 14px;
                        color: #333
                    }
                    button{
                        display: block;
                        margin-bottom: 10px;
                        margin-top: 20px;
                        
                        width: 100%;
                        padding: 5px;
                        background-color: #12afcb;
                        border: 1px solid #CCC;
                        padding: 10px;
                        color: white;
                    }
                    
                    div{
                        position: relative;
                        display: inline-block;
                        width: 100%;
                        i{
                            position: absolute;
                            right: 10px;
                            top: 50%;
                            transform: translateY(-100%);
                            cursor: pointer;
                            color: #666;
                        }
                    }
                }
            }
            
        }
        
        .vg_inicio{
            --vg_init_h: 60px;
            --vg_inil_w: 90px;
            --vg_ini_path_h:40px;
            
            height: 100%;
            width: 100%;
            overflow: hidden;
            
            .vg_inicio_t{
                height: calc( var(--vg_init_h) - 1px);
                border-bottom: 1px solid #CCC;
                background-color: var(--vgEntorno_Color_Fondo_1);
                display: flex;
                align-items: center;
                justify-content: flex-end;
                overflow: hidden;
                
                div:first-child{
                    margin-right: auto;
                    margin-left: 8px;
                    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.3));
                    svg{
                        displays: none;
                    }
                }
                div:not(:first-child){
                    margin: 5px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    
                    img{
                        height: 70%;
                        transition: transform 0.1s ease-in-out;
                        cursor: pointer;
                    }
                    img:hover{
                        transform: scale(1.1);
                        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); /* Sombra que sigue la forma del PNG */
                    }
                    svg{
                        width: 40px;
                        height: 40px;
                        transition: transform 0.1s ease-in-out;
                        cursor: pointer;

                    }
                    svg:hover{
                        transform: scale(1.1);
                        filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5)); /* Sombra que sigue la forma del PNG */
                    }
                }
            }
            
            .vg_inicio_b{
                height: calc(100% - var(--vg_init_h));
                overflow: hidden;
                display: flex;
                
                
                .vg_inicio_l{
                    width: calc( var(--vg_inil_w) - 1px );
                    height: 100%;
                    border-right: 1px solid #CCC;
                    background-color: var(--vgEntorno_Color_ppal);
                    display: flex;
                    flex-direction: column;
                    
                    div{
                        display: flex;
                        justify-content: center;
                        margin: 10px;
                        padding: 5px;
                        
                        img{
                            height: 48px;
                            transition: transform 0.1s ease-in-out;
                            cursor: pointer;
                        }
                        img:hover{
                            transform: scale(1.2);
                            filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.75)); /* Sombra que sigue la forma del PNG */
                        }
                        
                        svg {
                            transition: transform 0.2s ease-in-out;
                            cursor: pointer;
                            height: 48px;
                            width: 48px;
                            
                            path{
                                fill: var(--vgEntorno_Color_Font_ppal);
                            }
                            polygon{
                                fill: var(--vgEntorno_Color_Font_ppal);
                            }
                        }
                        svg:hover{
                            transform: scale(1.2);
                            filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.75)); /* Sombra que sigue la forma del PNG */
                        }
                    }
                    div:last-child{
                        margin-top: auto;
                        margin-bottom: 20px;
                    }
                }
                .vg_inicio_m{
                    flex-grow: 1;
                    overflow-y: hidden;
                    
                    .vg_inicio_m_hdr{
                        background-color: var(--vgEntorno_Color_Fondo_2);
                        height: calc(var(--vg_ini_path_h) - 1px);
                        border-bottom: 1px solid #DDD;
                        display: flex;
                        align-items: center;
                        font-family: Arial;
                        font-size: 16px;
                        color:var(--vgEntorno_Color_Font_2);
                        
                        div{
                            margin: 2px;
                            cursor: pointer;
                            
                        }
                        div:first-child{
                            margin-left: 15px;
                        }
                        div:after{
                            content: " / ";
                        }
                        div:last-child:after{
                            content: ""
                        }
                        div:hover{
                            text-decoration: underline;
                            color: var(--vgEntorno_Color_Font_2_hover);
                        }
                    
                    }
                    .vg_inicio_m_bdy{
                        height: calc(100% - var(--vg_ini_path_h) );
                        overflow-y: scroll;
                        overflow-x: hidden;
                        font-family: Arial;
                        
                        .vg_menu_grp{
                            display: flex;
                            flex-wrap: wrap;
                            gap: 15px;
                            padding: 15px;
                            justify-content: flex-start;
                            div{
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                cursor: pointer;
                                transition: transform 0.15s ease-in-out;
                                img{
                                    width: 50px;
                                    height: 50px;
                                    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.5));
                                }
                                span{
                                    margin-top: 5px;
                                    font-size: 12px;
                                    text-align: center;
                                }
                                svg{
                                    filter: drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.5));
                                }
                            }
                            div:hover{
                                transform: scale(1.1);
                            }
                            div.vg_menuitemfdr{
                                svg {
                                    width: 60px;
                                    height: 50px;
                                    
                                    path.fldrback{
                                        fill: var(--vgEntorno_icomnu_carpeta_fillback);
                                        stroke: var(--vgEntorno_icomnu_carpeta_stroke);
                                    }
                                    path.fldrfront{
                                        fill:var(--vgEntorno_icomnu_carpeta_fillfront);
                                        stroke: var(--vgEntorno_icomnu_carpeta_stroke);
                                    }
                                }
                            }
                            div.vg_menuitemapp{
                                svg {
                                    width: 50px;
                                    height: 50px;
                                    rect.appwin{
                                    
                                    }
                                    rect.appwin{
                                        fill:var(--vgEntorno_icomnu_app_fillWin);
                                        stroke: var(--vgEntorno_icomnu_app_stroke);
                                    }
                                    rect.apptbr{
                                        fill:var(--vgEntorno_icomnu_app_fillTbr);
                                        stroke:var(--vgEntorno_icomnu_app_stroke);
                                    }
                                    circle{
                                        fill:var(--vgEntorno_icomnu_app_FontTbr);
                                    }
                                    text.apptbrfont{
                                        fill: var(--vgEntorno_icomnu_app_FontTbr);
                                    }
                                    text.appwinfont{
                                        fill: var(--vgEntorno_icomnu_app_FontWin);
                                    }
                                }
                            }
                        }
                        
                        .vg_menu_pie{
                            bottom: 10px;
                        }
                    }
                }
            
            }
        }
        
    }