/*#region I -   PREDETERMINADOS */


    /*#region A.    PREDETERMINADOS/Variables */
:root {
    --color-pane-barr-txt: #ffffff; /*0*/
    --color-pane-barr-bgc: #337ab7;
    --color-pane-body-txt: #000000;
    --color-pane-body-bgc: #fcfcfc;
    --color-pane-foot-bgc: #f5f5f5;
    --color-pane-foot-lin: #dddddd;
    --color-pane-titu-txt: #ebbd1d; /*6*/
    --color-bton-text-txt: #ffffff;
    --color-bton-text-act: #FFC800;
    --color-bton-back-bgc: #337ab7; /*9*/
    --color-formlabel-txt: #242424; /*10*/
    --color-forminput-bgc: #e1e1e1;
    --color-forminput-txt: #000000;
    --color-forminput-bor: #cccccc;
    --color-forminput-enf: #66afe9;
    --color-forminput-off: #99999981;
    --color-forminput-ayu: #999999;
    --color-formicono-bgc: #194f67;
    --color-formicono-txt: #e1d6d6; /*17*/
    --color-form-sele-bgc: #194f67; /* seleciion cmb y listas*/
    --color-form-sele-txt: #e1d6d6;

    --color-gvie-barr-txt: #ffffff; /*18   GRID */
    --color-gvie-barr-bgc: #424242;
    --color-gvie-body-txt: #303030; /*Fondo grid Verde besta como verde*/
    --color-gvie-body-bgc: #ffffff; /*Fondo grid*/
    --color-gvie-line-bgc: #dddddd; /*Fondo Linea alrenativa*/


    --color-gvie-sele-bgc: #974748;
    --color-gvie-sele-txt: #ffffff;
    --color-gvie-sel2-bgc: #e5ea66; /*24*/
    /*    background: #974748 url('../Fondos/FondoSelectedGridViewRojo.png') repeat-x top;    color: #ffffff;*/




    --color-main-body-txt: #f2f2f2; /*--color texto mensajes emergentes;*/
    --color-main-body-bgc: #333333;
    --color-main-body-img: none;
    --color-link-text-txt: #f2f2f2;
    --color-link-text-act: #FFC800;
    --color-main-navb-txt: #f2f2f2;
    --color-main-navb-bgc: #264e36;
    --color-main-navb-img: url(../Fondos/FondoSelectedGridViewRojo.png);
    /* url('../Fondos/FondoHeadGridViewAzul.png') repeat-x top; color: #fff; Fonfo Barra Tutulo*/
    /* --color-form-foot-bgc: #f5f5f5;          */



    --color-fijo-x-traspa: transparent;
    --color-fijo-xxx-nada: none;
    --color-fijo-x0-negro: black;
    --color-fijo-x1-negro: #00000080;
    --color-fijo-x-blanco: white;
    --color-fijo-xxx-gris: gray;
    /*            --color-main-body-bgc: #061331;*/
    /* url(../Fondos/FondoSelectedGridViewRojo.png); */
    /*--color-main-body-img: url('../Fondos/Fondo_Verde_556.jpg');*/


    --color-texto-xxnegro: #000000;
    --color-texto-xblanco: #ffffff;
    --color-texto-xxxrojo: #ff0000;
    --color-texto-xxxgris: gray;
    --color-texto-griscla: gainsboro;
    --color-texto-grisupc: rgba(227,227,227,1);
    --color-texto-rojopal: #d9534f;
    --color-texto-xxxazul: #4b6fe7;
    --color-texto-mostaza: #FFC800;
    --color-fondo-rojopal: #7f4145;
    --color-fondo-cafe-of: #615550;
    --color-fondo-cafe-on: #2a293e;
    --color-fondo-verdeon: #264e36;
    --color-fondo-verdoff: #616247;
    --color-fondo-verdcla: #5cb85c;
    --color-fondo-azution: #2e4a62;
    --color-fondo-azutiof: #577284;
    --color-fondo-champar: #d2c29d;
    --color-fondo-xxcrema: #f0ead6;
    --color-fondo-azusupc: #E1ECF9;
    --font-mini: 10px;
    --font-x576: 12px;
    --font-x768: 18px;
    --font-x992: 20px;
    --font-1200: 24px;
    --panel-border-radius: 15px;
    --xform-border-radius: 15px;
}






    /*#endregion */


    /*#region B.    PREDETERMINADOS/Iniciales */
        * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0px; border: 0px; padding: 0px;}
        body {
            background-color: var(--color-main-body-bgc, #333333);
            background-image: var(--color-main-body-img, none);
            background-repeat: repeat;
            color: var(--color-main-body-txt, #f2f2f2);
            font-family: "Segoe UI",Tahoma,Arial,sans-serif;
/*            font-size: 14px;*/
            line-height: 1;
        }
     
        a {text-decoration: none; background-color: var(--color-fijo-x-traspa, transparent); color: var(--color-link-text-txt, #f2f2f2); cursor: pointer;}
        a:hover {outline: 0; color: var(--color-link-text-act, #FFC800);}
        a:active {cursor: default; color: var(--color-link-text-act, #00ff21);}
        textarea {max-height: 400px; min-height: 75px; resize: vertical;}
        hr {border:1px solid var(--color-fijo-x0-negro, black);}
        img {border: 0; vertical-align: middle; background-color: var(--color-fijo-x-traspa, transparent); max-width: 100%;}
       .dl-horizontal dt {white-space: normal;}
       table code {padding-right: 10px; font-weight: bold; }

    /*#endregion */



    
    /*#region C.    PREDETERMINADOS/navBar */ 
        /*#region 1.    Inicio/navBar/Base */
            .navbar {
                display: grid;
                grid-template-columns: 70px auto auto;
                background-color: var(--color-main-navb-bgc);  
                background-image: var(--color-main-navb-img, none);
                background-repeat:repeat;
            } 
            .navbar-logo {justify-self: center; align-self: center; margin-right: 4px;}
            .navbar-logo > img {width: 50px; height: 50px;}            
            .navbar-logo > img:hover {cursor: zoom-in;}       
            .navbar-titulo {font-size: 18px; text-align: left; background-color: var(--color-fijo-x-traspa);  color: var(--color-main-navb-txt);}
            .navbar-titulo:hover{color: var(--color-link-text-act);}
        /*#endregion */    
            
        /*#region 2.    Inicio/navBar/Celular_Contraido */
            .navbar-icono {display: block; justify-self: center; align-self: center;}
            .navbar-icono:hover { color: var(--color-link-text-act);} 
            .navbar-mimenu {position: fixed; width: 100%; top: 50px; background-color: var(--color-fijo-x-traspa);z-index: 1020;}
            .ajustecelular { display: none; }
            .navbar-botonera {display: block; float: right; padding: 10px; text-align: right; 
                background-color: var(--color-main-navb-bgc);
                background-image: var(--color-main-navb-img);
                background-repeat:repeat; 
                border-radius: 10px 0px 10px 10px; 
            }
                .navbar-botonera  .xbtn {
                    display: block; 
                    min-width: 200px; 
                    min-height: 25px; 
                    margin: 0px 0px 5px 3px;
                }
        /*#endregion */
        
        /*#region 3.    Inicio/navBar/Normal_large*/
            @media (min-width: 768px) {
                .navbar-icono {display: none; }     
                .navbar-mimenu {position: static; width: auto; top: 0px; }
                .navbar-mimenu.ajustecelular { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important;}
                .navbar-botonera {background-color: var(--color-fijo-xxx-nada); padding: 8px 15px; border: 0px;}
                    .navbar-botonera .xbtn {display: inline-block; min-width: 60px;}
            }
        
            @media (min-width: 992px) {
                .navbar-botonera .xbtn {margin: 2px 0px 2px 3px; min-width: 70px; padding: 6px 10px; font-size: 12px;}
            }
            
            @media (min-width: 1200px) and (min-height: 800px){
                .navbar > img {width: 60px; height: 60px;}            
                .navbar-titulo {height: 60px; font-size: 22px; }
                .navbar-botonera  .xbtn {margin: 5px 0 5px 5px; min-width: 100px; padding: 8px 20px; font-size: 14px;}
            } 
        /*#endregion*/


    /*#endregion */

    /*#region D.    PREDETERMINADOS/LoginPath */
        /*#region 1.    PREDETERMINADOS/LoginPath/Contenedor */
            .div-barra{
                display: grid;
                grid-template-columns: auto 10% 180px;
                background-color: var(--color-fijo-xxx-gris); 
                color: var(--color-fijo-x-blanco); 
                font-size: 10px; 
                -webkit-user-select: none; -ms-user-select: none; user-select: none; 
            }
            @media (min-width: 1200px) and (min-height: 800px) {.div-barra {grid-template-columns: auto 15% 20%; font-size: 18px;}}
        /*#endregion */
        /*#region 2.    PREDETERMINADOS/LoginPath/Path */
            .div-barra > .bar-path {margin-left: 10px; padding: 4px 0; text-align: left; }
            .xbreadcrumb { list-style: none; }
            .xbreadcrumb > li { display: inline-block; }
            .xbreadcrumb > li + li:before { color: #BBBBBB; content: "/\00a0"; padding: 0 5px; }
            .xbreadcrumb a:active, .xbreadcrumb > .active{ color: var(--color-link-text-act);}
            .xbreadcrumb a:link { color: var(--color-link-text-txt); }
            .xbreadcrumb a:visited { color: var(--color-link-text-txt); }
            .xbreadcrumb a:hover { color: var(--color-link-text-act); }        
        /*#endregion */
        /*#region 3.    PREDETERMINADOS/LoginPath/Login */
            .div-barra > .bar-sesion-1 {padding: 4px 0; text-align: center; border-left: 2px solid #a9a9a9; background-color: var(--color-fijo-x1-negro); }
            .div-barra > .bar-sesion-2 {padding: 4px 0; text-align: center; border-left: 2px solid #a9a9a9; background-color: var(--color-fijo-x1-negro); }
        /*#endregion */
    /*#endregion */




  



    /*#region E.    PREDETERMINADOS/PiePagina */
        #piedepagina {position: fixed; bottom: 0; right: 0; padding: 2px; width: 100%; color: var(--color-fijo-x-blanco); background: var(--color-fijo-x1-negro);  font-size: 10px;  overflow: hidden; z-index: 3; }
        #piedepagina > .InfoIzq { float: left; margin-left: 5px; position: static; }
        #piedepagina > .InfoDer { float: right; margin-right: 5px; position: static; }
    /*#endregion */  

    /*#region F.    PREDETERMINADOS/TitulosPaginas margin: 10px 0px 10px 0px !important; */
        .encabezado-pagina {
            display: block;
            margin: 0px 0px 10px 0px !important;
            color: var(--color-pane-titu-txt);
            padding: 10px;
            width: 100%;
            border-bottom: 1px solid; 
            -webkit-user-select: none; -ms-user-select: none; user-select: none;
/*            box-shadow: 2px 2px 2px  rgba(0, 0, 0, 0.7);*/
        }

        .pie-pagina {
            display: block;
            margin: 10px 0px 10px 0px !important;
            color: var(--color-pane-titu-txt);
            padding: 10px;
            width: 100%;
            border-top: 1px solid;
            text-align: right;
            -webkit-user-select: none; -ms-user-select: none; user-select: none;
        }
    /*#endregion */
/*#endregion */

/*#region II -  Botones */
    /*#region A     Botones/Basico */
        .xbtn {
            background-color: var(--color-bton-back-bgc, #337ab7);
            color: var(--color-bton-text-txt, #f2f2f2);
            /*box-shadow: 1px 2px #3E3E3E;*/
            
            box-shadow: 2px 2px 2px  rgba(0, 0, 0, 0.7);
            cursor: pointer;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
        }

        .xbtn:hover {
            opacity: 0.5;
            color: var(--color-bton-text-act, #FFC800);
        }

        .xbtn:active, .xbtn.active {
            opacity: 0.8;
            color: var(--color-bton-text-act, #FFC800);
            box-shadow: 1px 1px #666;
            transform: translateY(1px);
            border-left: 4px solid;
            border-left-color: red;
        }

        .xbtn.inactivo, .xbtn:disabled {
            pointer-events: none;
            cursor: default;
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .xbtn:focus {
            border: 3px solid var(--color-forminput-enf);
            outline:none; 
        }
    /*#endregion */

    /*#region B.    Botones/Repositive  */
        .xbtn { min-width: 40px; margin: 1px 0px 3px 3px; padding: 4px 4px; font-size: 8px; border-radius: 2px; }

        @media (min-width: 576px) { .xbtn { min-width: 45px; margin: 1px 0px 1px 1px; padding: 4px 6px; font-size: 8px; border-radius: 4px; }}
        @media (min-width: 768px) { .xbtn { min-width: 60px; margin: 3px 0px 3px 3px; padding: 5px 10px; font-size: 10px; }}
        @media (min-width: 992px) { .xbtn { min-width: 70px; margin: 3px 0px 4px 3px; padding: 7px 10px; font-size: 12px; }}
        @media (min-width: 1200px) and (min-height: 800px) {.xbtn { min-width: 100px; margin: 5px 0 5px 5px; padding: 8px 20px; font-size: 14px; }}
    /*#endregion */


    /*#region C.    Formato/BotónDropDown */
        .dropdown {
            position: relative;
            display: inline-block;
        }


        .dropdown-content {
            display: none;
            position: absolute;
            background: #224259;
            background: linear-gradient(180deg, rgb(96, 96, 96) 0%, rgb(87, 87, 87) 79%, rgb(72, 72, 72) 100%);
            border-radius: 0px 0px 10px 10px;
            min-width: 180px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
            right: 10px;
        }

            .dropdown-content > .xbtn {
                display: block !important;
                min-width: 150px;
                margin-bottom: 10px;
            }

        .dropdown:hover .dropbtn {
            color: white;
        }

        .dropdown:hover .dropdown-content {
            display: block !important;
            float: none;
            color: black;
            padding: 12px 16px;
        }
            /* .dropbtn:active, .dropbtn.active { color: #FFC800;}
                .dropbtn.active { border-bottom:1px solid #FFC800; } */
    /*#endregion */

/*#endregion */







/*#region III - Paneles */
    /*#region A.    Paneles/Plantilla*/
        .panel-heading { padding: 12px 15px; border-radius: var(--panel-border-radius) var(--panel-border-radius) 0px 0px; background-color: var(--color-pane-barr-bgc, #337ab7); }
        .panel-title {font-weight: bold; color: var(--color-pane-barr-txt, #ffffff); -webkit-user-select: none; -ms-user-select: none; user-select: none; }
        .close { float: right; background-color: var(--color-x-trasparente, transparent); color: var(--color-pane-barr-txt, #ffffff); padding: 0px 5px;}
                .close:hover, .close:focus {cursor: pointer; color: #FFC800; font-size: 110%; background-color:#615550; border-radius: 4px;}

        .panel-body {background-color: var(--color-pane-body-bgc, #fcfcfc); color: var(--color-pane-body-txt,#000000); padding: 15px; min-height: 100px;}
        .panel-body.sinmarco { padding: 1px;}

        .panel-footer { padding: 4px 15px; border-radius: 0px 0px var(--panel-border-radius) var(--panel-border-radius);  background-color: var(--color-pane-foot-bgc,#f5f5f5); border-top: 1px solid var(--color-pane-foot-lin); text-align: right;box-shadow: 2px 2px 2px  rgba(0, 0, 0, 0.7);}
/*.panel-footer .sinseparador {border-top: 0px solid var(--color-fijo-x-traspa);*/
.panel-footer.sinseparador {border-top: none;}
    /*#endregion */

    /*#region B.    Paneles/Repositive */
            .close { font-size: var(--font-mini); }

            @media (min-width: 576px) { .close { font-size: var(--font-x576); }}
            @media (min-width: 768px) { .close { font-size: var(--font-x768); }}
            @media (min-width: 992px) { .close { font-size: var(--font-x992); }}
            @media (min-width: 1200px) and (min-height: 800px) { .close { font-size: var(--font-1200); }}

    /*#endregion */


    /*#region C.    Paneles/Tamaños_fnContenido */
        .panel-tam-x { padding: 0px 15px;  }
        .panel-tam-y { margin: 0px auto;  }

        .panel-tam-a0 {margin: 15px 1px 10px;}
        .panel-tam-a1 {margin: 42px 10px 2px;}
        .panel-tam-a2 {margin: 68px 30px 5px;}

        .panel-tam-b0 {margin: 160px 20px 5px;}
        .panel-tam-b1 { margin: 155px 30px 5px;}
        .panel-tam-b2 { margin: 155px auto 5px; max-width: 200px;}

        @media (min-width: 576px) { 
            .panel-tam-a0 {margin: 20px auto 10px; max-width: 576px;}
            .panel-tam-a1 {margin: 45px auto 10px; max-width: 561px;}
            .panel-tam-a2 {margin: 70px auto 15px; max-width: 510px;}     
                
            .panel-tam-b0 {margin: 170px auto 15px; max-width: 520px;}
            .panel-tam-b1 { margin: 175px auto 15px; max-width: 550px; }        
            .panel-tam-b2 { margin: 175px auto 15px; max-width: 220px; }        
        }   

        @media (min-width: 768px) {
                .panel-tam-a0 {margin: 20px auto 10px; max-width: 768px;}
                .panel-tam-a1 {margin: 56px auto 10px; max-width: 752px;}    
                .panel-tam-a2 {margin: 88px auto 15px; max-width: 680px;}

                .panel-tam-b0 {margin: 184px auto 15px; max-width: 700px;}
                .panel-tam-b1 { margin: 195px auto 15px; max-width: 738px;}
                .panel-tam-b2 { margin: 195px auto 15px; max-width: 240px;}
        }

        @media (min-width: 992px) {
                .panel-tam-a0 {margin: 20px auto 10px; max-width: 992px;}
                .panel-tam-a1 {margin: 58px auto 15px; max-width: 942px;}    
                .panel-tam-a2 {margin: 98px auto 15px; max-width: 860px;}

                .panel-tam-b0 {margin: 190px auto 15px; max-width: 830px;}
                .panel-tam-b1 { margin: 220px auto 15px; max-width: 800px;}
                .panel-tam-b2 { margin: 220px auto 15px; max-width: 250px;}
        }

        @media (min-width: 1200px) and (min-height: 800px) {
                .panel-tam-a0 {margin: 20px auto 10px; max-width: 1200px;}
                .panel-tam-a1 {margin: 64px auto 15px; max-width: 1100px;}
                .panel-tam-a2 {margin: 110px auto 15px; max-width:  900px;}

                .panel-tam-b0 { margin:220px auto 15px; max-width: 1000px;}
                .panel-tam-b2 { margin: 245px auto 15px; max-width: 280px;}
        }
    /*#endregion */

    /*#region D.    Paneles/Tapetes*/
        .panel-tapete-a { background-color: #808080; background-color: rgba(0, 0, 0, 0.5); bottom: 0; left: 0; outline: 0; overflow: auto; position: fixed; right: 0; top: 0; z-index: 1031; }
        .panel-tapete-b { background-color: #808080; background-color: rgba(0, 0, 0, 0.5); bottom: 0; left: 0; outline: 0; overflow: auto; position: fixed; right: 0; top: 0; z-index: 1032; }
        .panel-tapete-c { background-color: #808080; background-color: rgba(0, 0, 0, 0.5); bottom: 0; left: 0; outline: 0; overflow: auto; position: fixed; right: 0; top: 0; z-index: 1033; }
        .panel-tapete-d { background-color: #808080; background-color: rgba(0, 0, 0, 0.5); bottom: 0; left: 0; outline: 0; overflow: auto; position: fixed; right: 0; top: 0; z-index: 1034; }
    /*#endregion */

    /*#region F.    Paneles/Visibilidad */
        .panel-oculto { display: none; }
        .panel-visible { display: block; }
    /*#endregion */
/*#endregion */



/*#region IV  -   Formularios  */

    /*#region A.    Formularios/Básico  */
        .xform { display: grid; grid-template-columns: 30% 70%; grid-gap: 4px; padding: 0px; }
        .xform.enbloque { display: block;}
        .xform.enlinea { display: flex; justify-content: flex-end;}
        .xform.inputcolor { grid-template-columns: 70% 30%; }

        .xform-label { display: flex; align-items: center; color: var(--color-formlabel-txt);  font-weight: bold; -webkit-user-select: none; -ms-user-select: none; user-select: none; z-index: 2;  }
        .xform-input-text { color: var(--color-forminput-txt); background-color: var(--color-forminput-bgc); border: 1px solid var(--color-forminput-bor); border-radius: var(--xform-border-radius); outline: none; }

        .xform.inputcolor > .xform-label { color: var(--color-fijo-x0-negro); }
        .xform.inputcolor > .xform-input-text { padding: 2px; background-color: var(--color-fijo-x1-negro); border-radius: 1px; width: 100%; }
    /*#endregion */


    /*#region B.    Formularios/Paquete: Hace lo necesario para ajustar los botones iconos. */
        .xform-paquete { display: flex; width: 100%; }
        .xform-sinpaquete { display: flex; width: 100%; }
        .xform-paquete.pilax1 { display: grid; grid-template-columns: auto; }
        .xform-paquete.pilax2 { display: grid; grid-template-columns: auto auto; }
        .xform-paquete.pilax3 { display: grid; grid-template-columns: auto auto auto; }
        .xform-paquete.pilax4 { display: grid; grid-template-columns: auto auto auto auto; }

        .xform-paquete > .xform-input-text { width: 100%; }
        .xform-paquete > .xbtn { box-shadow: none; margin: 0px; vertical-align: bottom; background-color: var(--color-formicono-bgc); color: var(--color-formicono-txt); border-radius: var(--xform-border-radius);  }

        .xbtn.xbtn-ini { border-bottom-right-radius: 0; border-top-right-radius: 0; }
        .xbtn.xbtn-med { border-radius: 0; border-right: none; }
        .xbtn.xbtn-fin { border-bottom-left-radius: 0; border-top-left-radius: 0; }



        .xform-paquete > .xform-input-text:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; }
        .xform-paquete > .xform-input-text:not(:first-child):not(:last-child) { border-radius: 0; }
        .xform-paquete > .xform-input-text:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; }
    /*#endregion */

    /*#region C.    Formularios/Otros  */
        .xform-input-text:focus { border-width: 3px; border-color: var(--color-forminput-enf); z-index: 3; }
        .xform-input-text::-moz-placeholder { color: var(--color-forminput-ayu); opacity: 1; }
        .xform-input-text:-ms-input-placeholder { color: var(--color-forminput-ayu); }
        .xform-input-text::-webkit-input-placeholder { color: var(--color-forminput-ayu); } 
        .xform-error-validador { color: var(--color-texto-xxxrojo); text-align:left; }
        .xbtn.inactivo, .xbtn:disabled {pointer-events:none; cursor:default; -webkit-user-select: none; -ms-user-select: none; user-select: none;} 
        .xform-input-text:disabled, .xform-input-text[readonly] { background-color: var(--color-forminput-off); opacity: 1; border: none; }
        .xform select { cursor: pointer; }
    /*#endregion */


    /*#region D.    Formularios/Respositive  */
        .xform { margin: 3px; }
        .xform > .xform-label, .xform > .xform-paquete > .xform-input-text, .xform > .xform-paquete > .xbtn { height: 25px; padding: 3px 8px; font-size: 10px; min-width: 25px; }
        .xform > .xform-input-text { height: 25px; padding: 3px 3px 3px 15px; font-size: 10px; min-width: 25px; }

        .xform.mini { margin: 2px; grid-template-columns: 20% 80%; grid-gap: 0px;}
        .xform.mini > .xform-label, .xform.mini  > .xform-paquete > .xform-input-text, .xform.mini > .xform-paquete > .xbtn { height: 16px; padding: 0px 8px; font-size: 8px; min-width: 24px; }
        .xform.mini > .xform-input-text { height: 16px; padding: 0px 8px; font-size: 8px; min-width: 50px; }

        @media (min-width: 576px) {
            .xform { margin: 5px; }
            .xform > .xform-label, .xform > .xform-paquete > .xform-input-text, .xform > .xform-paquete > .xbtn { height: 30px; padding: 5px;  font-size: 12px; min-width: 30px; }
            .xform > .xform-input-text { height: 30px; padding: 5px 5px 5px 20px;  font-size: 12px; min-width: 30px; }
        }

        @media (min-width: 768px) {
            .xform { margin: 5px; }
            .xform > .xform-label, .xform > .xform-paquete > .xform-input-text, .xform > .xform-paquete > .xbtn { height: 35px; padding: 6px;  font-size: 14px; min-width: 35px; }
            .xform > .xform-input-text { height: 35px; padding: 6px 6px 6px 18px;  font-size: 14px; min-width: 35px; }
        }

        @media (min-width: 992px) {
            .xform { margin: 5px; }
            .xform > .xform-label, .xform > .xform-paquete > .xform-input-text, .xform > .xform-paquete > .xbtn { height: 40px; padding: 8px;  font-size: 16px; min-width: 40px; }
            .xform > .xform-input-text { height: 40px; padding: 8px 8px 8px 20px;  font-size: 16px; min-width: 40px;}

            .xform.mini { margin: 2px;  grid-gap: 0px;}
            .xform.mini > .xform-label, .xform.mini  > .xform-paquete > .xform-input-text, .xform.mini > .xform-paquete > .xbtn { height: 20px; padding: 0px 8px; font-size: 10px; min-width: 25px; }
            .xform.mini > .xform-input-text { height: 20px; padding: 0px 8px; font-size: 10px; min-width: 80px; }
        }

        @media (min-width: 1200px) and (min-height: 800px) {
            .xform { margin: 8px; }
            .xform > .xform-label, .xform > .xform-paquete > .xform-input-text, .xform > .xform-paquete > .xbtn { height: 45px; padding: 10px;  font-size: 18px; min-width: 45px; }
            .xform > .xform-input-text { height: 45px; padding: 10px 10px 10px 20px;  font-size: 18px; min-width: 45px; }

            .xform.mini { margin: 2px;  grid-gap: 0px;}
            .xform.mini > .xform-label, .xform.mini  > .xform-paquete > .xform-input-text, .xform.mini > .xform-paquete > .xbtn { height: 20px; padding: 0px 8px; font-size: 12px; min-width: 25px; }
            .xform.mini > .xform-input-text { height: 20px; padding: 0px 8px; font-size: 12px; min-width: 80px; }

        }
    /*#endregion */

    /*#region E.    Control especial para CheckBox  y Radio  */
        .xform-checkradio { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; color: var(--color-formlabel-txt); }
        .xform-checkradio input { position: absolute; opacity: 0; cursor: pointer; height: 0px; width: 0px; }
        .checkmark { position: absolute; left: 0; background-color: var(--color-forminput-bgc); border: 1px solid rgb(169, 173, 231); }
        .radiomark { position: absolute; left: 0; background-color: var(--color-forminput-bgc); border-radius: 50%; border: 1px solid rgb(169, 173, 231); }


        .xform-checkradio:hover input ~ .checkmark, .xform-checkradio:hover input ~ .radiomark { background-color: #ccc; }
        .xform-checkradio input:checked ~ .checkmark, .xform-checkradio input:checked ~ .radiomark { background-color: #424242; }
        .xform-checkradio input:focus ~ .checkmark, .xform-checkradio input:focus ~ .radiomark { z-index: 3; border-color: var(--color-forminput-enf); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6); outline: 0; }
        .checkmark:after, .radiomark:after { content: ""; position: absolute; display: none; }
        .xform-checkradio input:checked ~ .checkmark:after, .xform-checkradio input:checked ~ .radiomark:after { display: block; }
        .xform-checkradio .checkmark:after { border: solid white; border-width: 0 3px 3px 0; transform: rotate(45deg); }
        .xform-checkradio .radiomark:after { border-radius: 50%; background: white; }


        .xform-checkradio { font-size: 10px; padding: 3px 8px 3px 20px; }
        .checkmark { top: 0; height: 15px; width: 15px; }
        .radiomark { top: 0; height: 15px; width: 15px; }
        .xform-checkradio .checkmark:after { top: 0px; left: 4px; width: 2px; height: 8px; }
        .xform-checkradio .radiomark:after { top: 4px; left: 4px; width: 5px; height: 5px; }
        .xform.mini > .xform-paquete > .xform-checkradio { padding: 3px 0 0 20px; font-size: 8px; }



        .xform.mini > .xform-paquete > label > .checkmark, .xform.mini > .xform-paquete > label > .radiomark { height: 15px; width: 15px; }

        .xform.mini > .xform-paquete > label > .checkmark:after { top: 1px; left: 4px; width: 2px; height: 8px; }
        .xform.mini > .xform-paquete > label > .radiomark:after { top: 4px; left: 4px; width: 5px; height: 5px; }


        @media (min-width: 768px) {
            .xform-checkradio { font-size: 14px; padding: 6px 6px 6px 35px; }
            .checkmark { top: 3px; height: 20px; width: 20px; }
            .radiomark { top: 3px; height: 20px; width: 20px; }
            .xform-checkradio .checkmark:after { top: 1px; left: 6px; width: 4px; height: 10px; }
            .xform-checkradio .radiomark:after { top: 6px; left: 6px; width: 6px; height: 6px; }
            .xform.mini > .xform-paquete > .xform-checkradio { padding: 3px 0 0 20px; font-size: 10px; }
        }

        @media (min-width: 992px) {
            .xform-checkradio { font-size: 16px; padding: 8px 8px 8px 35px; }
            .checkmark { top: 7px; height: 20px; width: 20px; }
            .radiomark { top: 7px; height: 20px; width: 20px; }
            .xform-checkradio .checkmark:after { top: 1px; left: 6px; width: 4px; height: 10px; }
            .xform-checkradio .radiomark:after { top: 6px; left: 6px; width: 6px; height: 6px; }
            .xform.mini > .xform-paquete > .xform-checkradio { padding: 3px 0 0 20px; font-size: 10px; }
        }

        @media (min-width: 1200px) and (min-height: 800px) {
            .xform-checkradio { font-size: 18px;  padding: 10px 10px 10px 35px;}
            .checkmark { top: 8px; height: 25px; width: 25px; }
            .radiomark { top: 8px; height: 25px; width: 25px; }
            .xform-checkradio .checkmark:after {
                top: 2px;
                left: 7px;
                width: 6px;
                height: 14px;
            }
            .xform-checkradio .radiomark:after {
                top: 8px;
                left: 8px;
                width: 8px;
                height: 8px;
            }
            .xform.mini > .xform-paquete > .xform-checkradio { padding: 3px 0 0 20px; font-size: 12px; }
        }
    /*#endregion */

    /*#region F.    ComboBox SELECT para ASP.NET */
        select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0;
        }
/*        .xform-input-text option:hover {*/
/*            NO ES POSIBLE CAMBIAR EL COLOR AZUL DEL SELECT POR CSS TRADICIONAL        */
/*            background-color: var(--color-form-sele-bgc) !important;*/
/*            color: var(--color-form-sele-txt);*/
/*        }*/

/*#endregion */
/*#region G.    Control especial para chkboxlist   */
.chkboxlist td {
    background-color: dimgray;
    padding: 10px 20px;
}
        .chkboxlist input[type="checkbox"] { vertical-align: middle; width: 25px; height: 25px; }
        .chkboxlist label { color: black; vertical-align: middle; padding: 10px 20px; width: 200px; }
        /*.chkboxlist input[type="checkbox"]:checked {background-color:red;  width:50px;height:24px;vertical-align:middle;border: 1px solid blue;}*/
        .chkboxlist input[type="checkbox"]:checked + label { font-weight: bold; color: gold; width: 50px; height: 24px; vertical-align: middle; }
    /*#endregion */

/*#endregion */





/*#region V - GridView */
    /*#region A - GridView/GridView */
        .ContenedorGrid { border-radius: 7px; min-height: 250px; overflow: auto; width: 100%; font-family: "Cascadia Mono", "Courier New", Courier, monospace;}
        .seGrid { background-color: var(--color-gvie-body-bgc); color:var(--color-gvie-body-txt);  border: solid 2px var(--color-gvie-barr-bgc); border-collapse: collapse; margin: 0; width: 100%;}
        .seGrid th { background-color: var(--color-gvie-barr-bgc); color: var(--color-gvie-barr-txt);  }
        .seGrid td {  }
        .seGrid .seGrid-CeldasAlternativas { background-color:var(--color-gvie-line-bgc); }
        .seGrid .seGrid-Selected { background-color:var(--color-gvie-sele-bgc); color: var(--color-gvie-sele-txt); }
        .seleccionmultiple { background-color: var(--color-gvie-sel2-bgc); color: var(--color-fijo-xxx-gris);}




            .seGrid .seGrid-Selected input { background-color: #c9302c; }


        .seGrid .seGrid-Empry { background: #0b1d32 url('../Baldosas/NoData.png');  border-radius: 7px; border: solid 1px #486694;}
        /*.seGrid .seGrid-Empry { background: #0b1d32 url('../Fondos/FondoFootGridViewAzul.png') repeat-x top; color: #C0C0C0;*/ /*font-size: x-large;*/ /*font-weight: bold;*/ /*height: 150px;*/ /*padding:20px;*/ /*margin: 180px 0 80px 0;*/ /*text-align: center;*/ /*height: 100%;*/ /*}*/
/*            .seGrid .seGrid-Empry img { padding: 0px; }*/


        .seGrid td > input { margin: 0 4px 2px 0; background-color: #5cb85c; border: 1px solid transparent; border-radius: 4px; cursor: pointer; vertical-align: middle; }
            .seGrid td > input:hover { background-color: #FFC800; }

    /*#endregion */

    /*#region B - GridView/Paginacion */
        .seGrid-Paginar-independiente { background-color: var(--color-gvie-barr-bgc); color: var(--color-gvie-barr-txt); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding :2px }
/*        .seGrid-Paginar-independiente table { padding: 5px 30px; }*/
/*        .seGrid-Paginar-independiente td { font-size: 10px; border-width: 0;  display: table-cell; font-weight: bold; line-height: 12px; padding: 0 4px; }padding: 5px 30px;*/
/*.xform-input-text-grdpaginacion {
    color: var(--color-forminput-txt);
    background-color: var(--color-forminput-bgc);
    border: 1px solid var(--color-forminput-bor);
    border-radius: var(--xform-border-radius);
    display: inline;
    margin: 0;
    padding: 0px 2px 0px 12px;
    z-index: 2;
}*/
/*        .xform-input-text-grdpaginacion { background-color: lightgoldenrodyellow; border: 1px solid #cccccc; border-radius: 4px; display: inline; margin: 0; padding: 0px 2px 0px 12px; z-index: 2; }*/
    /*#endregion */
    
    /*#region C - GridView/Respositive */
        .seGrid th { font-size: 10px; padding: 5px 2px 5px 4px;}
        .seGrid td { font-size: 10px; padding: 0 0 0 2px; }
        .seGrid td > input { padding: 0px 5px; }
        .seGrid-Paginar-independiente > .xform.mini > .xform-label, .seGrid-Paginar-independiente > .xform-label  {font-size: 10px; color: var(--color-gvie-barr-txt);}

        @media (min-width: 768px) {
            .seGrid th { font-size: 14px; padding: 7px 2px 7px 4px; }
            .seGrid td { font-size: 14px; padding: 0 0 0 4px; }
            .seGrid td > input { padding: 0px 8px;}
            .seGrid-Paginar-independiente > .xform.mini > .xform-label, .seGrid-Paginar-independiente > .xform-label  { font-size: 14px; }
        }
    /*#endregion */
/*#endregion */

/*#region VI -   Menus y cajoneras (Baldosas) */
    .xbtn-baldosas { 
        display: block; 
        margin: 5px;
        padding: 4px 5px 4px 5px; 
        background-color: rgb(66,66,66); 
        background-color: rgba(66, 66, 66, 0.5); 
        background: linear-gradient(to bottom, rgba(66,66,66,1) 0%, rgba(143,143,143,1) 100%);  
        color: ghostwhite; border: 1px solid #dddddd; 
        border-radius: 8px; 
        transition: border 0.2s ease-in-out;
        max-width: 256px;
    }
    .xbtn-baldosas > img { display: block; height: auto; margin: 0px auto; max-width: 50%;}
    .xbtn-baldosas > label, .xbtn-baldosas > span {display: block; margin: 0; text-align: center;  min-height:40px; font-size: 12px;} 
    a.xbtn-baldosas:hover, a.xbtn-baldosas:focus, a.xbtn-baldosas.active { 
        border-color: #337ab7; 
        color: #FFC800;

    }
    a.xbtn-baldosas:link { text-decoration: none; }


/*    @media (min-width: 576px) {
        .xbtn-baldosas { margin: 10px;}
        .xbtn-baldosas > img { width: 100%;}
        .xbtn-baldosas > label, .xbtn-baldosas > span { padding: 12px 0px 0px 0px; min-height:50px; font-weight: bold;}
    }

    @media (min-width: 768px) {
        .xbtn-baldosas > label, .xbtn-baldosas > span { padding: 5px 0px 0px 0px; min-height:50px;min-height:50px; font-size: 14px;}
    }*/ 
/*#endregion */

/*#region VII -   Contenedores COMPLEMENTARIO NO ESENCIAL */
    /*#region A.    Contendores/Responsive cuadricula */
        .row { margin-left: 0px; margin-right: 0px; }
        .col-x-01, .col-x-02, .col-x-03, .col-x-04, .col-x-05, .col-x-06, .col-x-07, .col-x-08, .col-x-09, .col-x-10, .col-x-11, .col-x-12,
        .col-s-01, .col-s-02, .col-s-03, .col-s-04, .col-s-05, .col-s-06, .col-s-07, .col-s-08, .col-s-09, .col-s-10, .col-s-11, .col-s-12,
        .col-m-01, .col-m-02, .col-m-03, .col-m-04, .col-m-05, .col-m-06, .col-m-07, .col-m-08, .col-m-09, .col-m-10, .col-m-11, .col-m-12,
        .col-l-01, .col-l-02, .col-l-03, .col-l-04, .col-l-05, .col-l-06, .col-l-07, .col-l-08, .col-l-09, .col-l-10, .col-l-11, .col-l-12 { position: relative; width: 100%; }

        .col-x-01, .col-x-02, .col-x-03, .col-x-04, .col-x-05, .col-x-06, .col-x-07, .col-x-08, .col-x-09, .col-x-10, .col-x-11, .col-x-12 { float: left; }
        .col-x-12 { width: 100%; }
        .col-x-11 { width: 91.66666667%; }
        .col-x-10 { width: 83.33333333%; }
        .col-x-09 { width: 75%; }
        .col-x-08 { width: 66.66666667%; }
        .col-x-07 { width: 58.33333333%; }
        .col-x-06 { width: 50%; }
        .col-x-05 { width: 41.66666667%; }
        .col-x-04 { width: 33.33333333%; }
        .col-x-03 { width: 25%; }
        .col-x-02 { width: 16.66666667%; }
        .col-x-01 { width: 8.33333333%; }

        .col-img { display: block; height: auto; margin: 0px auto; max-width: 50%; }

        .col-padding-a {padding: 5px 5px 0px 0px;}
        .col-padding-b {padding: 10px;}
        .col-padding-c {padding: 15px;}
        @media (min-width: 576px) {.col-padding-a {padding: 10px 10px 0px 0px;}}

        @media (min-width: 768px) {
            .col-s-01, .col-s-02, .col-s-03, .col-s-04, .col-s-05, .col-s-06, .col-s-07, .col-s-08, .col-s-09, .col-s-10, .col-s-11, .col-s-12 { float: left; }
            .col-s-12 { width: 100%; }
            .col-s-11 { width: 91.66666667%; }
            .col-s-10 { width: 83.33333333%; }
            .col-s-09 { width: 75%; }
            .col-s-08 { width: 66.66666667%; }
            .col-s-07 { width: 58.33333333%; }
            .col-s-06 { width: 50%; }
            .col-s-05 { width: 41.66666667%; }
            .col-s-04 { width: 33.33333333%; }
            .col-s-03 { width: 25%; }
            .col-s-02 { width: 16.66666667%; }
            .col-s-01 { width: 8.33333333%; }
        }

        @media (min-width: 992px) {
            .col-m-01, .col-m-02, .col-m-03, .col-m-04, .col-m-05, .col-m-06, .col-m-07, .col-m-08, .col-m-09, .col-m-10, .col-m-11, .col-m-12 { float: left; }
            .col-m-12 { width: 100%; }
            .col-m-11 { width: 91.66666667%; }
            .col-m-10 { width: 83.33333333%; }
            .col-m-09 { width: 75%; }
            .col-m-08 { width: 66.66666667%; }
            .col-m-07 { width: 58.33333333%; }
            .col-m-06 { width: 50%; }
            .col-m-05 { width: 41.66666667%; }
            .col-m-04 { width: 33.33333333%; }
            .col-m-03 { width: 25%; }
            .col-m-02 { width: 16.66666667%; }
            .col-m-01 { width: 8.33333333%; }
        }

        @media (min-width: 1200px) and (min-height: 800px) {
            .col-l-01, .col-l-02, .col-l-03, .col-l-04, .col-l-05, .col-l-06, .col-l-07, .col-l-08, .col-l-09, .col-l-10, .col-l-11, .col-l-12 { float: left; }
            .col-l-12 { width: 100%; }
            .col-l-11 { width: 91.66666667%; }
            .col-l-10 { width: 83.33333333%; }
            .col-l-09 { width: 75%; }
            .col-l-08 { width: 66.66666667%; }
            .col-l-07 { width: 58.33333333%; }
            .col-l-06 { width: 50%; }
            .col-l-05 { width: 41.66666667%; }
            .col-l-04 { width: 33.33333333%; }
            .col-l-03 { width: 25%; }
            .col-l-02 { width: 16.66666667%; }
            .col-l-01 { width: 8.33333333%; }
        }

        @media (max-width: 768px) {.col-x-oculto { display: none !important;}}
        @media (min-width: 768px) and (max-width: 991px) {.col-s-ocuto {display: none !important;}}
        @media (min-width: 992px) and (max-width: 1199px) {.col-m-oculto { display: none !important;}}
        @media (min-width: 1200px) and (min-height: 800px) {.col-l-oculto { display: none !important;}}
        .row:before, .row:after { display: table; content: " ";}
        .row:after { clear: both;}
    
    
    /*#endregion */

    /*#region B.    Contenedores/Delimitados */
        .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
        @media (min-width: 576px) {.container { max-width: 540px; }}
        @media (min-width: 768px) {.container { max-width: 720px; }}
        @media (min-width: 992px) {.container { max-width: 960px; }}
        @media (min-width: 1200px) and (min-height: 800px) {.container { max-width: 1140px;}}
        @media (min-width: 1800px) {.container { max-width: 1440px;}}
    /*#endregion */


    /*#region C.    Contenedores/GridFlex */
        .xGrid3070 {
            display: grid;
            grid-template-columns: 100%;
            grid-gap: 4px;
            padding: 0px;
        }
        .xGrid3070-item01 {
        /*            background-color: rgba(189, 34, 34, 0.8);*/
        /*            border: 1px solid rgba(0, 0, 0, 0.8);*/
            padding: 10px;
            justify-self:center; 
            align-self : center;
        }

        .xGrid3070-item02 {
        /*            background-color: greenyellow;*/
        /*            border: 1px solid rgba(0, 0, 0, 0.8);*/
            padding: 10px;
            align-self : center;
        }


        @media (min-width: 576px) {.xGrid3070 {grid-template-columns: 20% 80%;}}
        @media (min-width: 768px) {.xGrid3070 {grid-template-columns: 30% 70%;}}
/*        @media (min-width: 992px) {.container { max-width: 960px; }}*/
/*        @media (min-width: 1200px) and (min-height: 800px) {.container { max-width: 1140px;}}*/
/*        @media (min-width: 1800px) {.container { max-width: 1440px;}}*/
    /*#endregion */
/*#endregion */

/*#region VIII - Formatos COMPLEMENTARIO NO ESENCIAL */  
    /*#region A.    Formato/Texto-Parrafo */
        p { display: block; padding: 0px;}
        b, .b, .text-negrilla, strong {font-weight: bold;}
        small, .small {font-size: 55%; font-weight: normal; opacity:0.7;}
        code, .code { font-family: "Cascadia Code", "Lucida Console", "Courier New", monospace; }
        .text-left { text-align: left; }
        .text-right { text-align: right !important;}
        .text-center { text-align: center; }
        .text-justify { text-align: justify; }
        .text-center-vertical {vertical-align:middle;}
        .text-nowrap { white-space: nowrap; }
        .text-ajustesobredimension {overflow: hidden; text-overflow: ellipsis; }
        .text-interlineado-1 { line-height: 1; }
        .text-interlineado-1-15 { line-height: 1.15; }


    /*#endregion */
    /*#region B.    Formato/Titulo-H_Texto-P */
        h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { display: block; margin: 0px 0px 0px 0px; font-weight: bold; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
        .p1, .p2, .p3, .p4, .p5, .p6 { display: block; padding: 5px 10px 5px 15px; text-align: justify;}

        h1, .h1, .p1 { font-size: 17px; }
        h2, .h2, .p2 { font-size: 14px; }
        h3, .h3, .p3 { font-size: 12px; }
        h4, .h4, .p4 { font-size: 10px; }
        h5, .h5, .p5 { font-size: 8px; }
        h6, .h6, .p6 { font-size: 6px; }

        @media (min-width: 768px) {
        h1, .h1, .p1 { font-size: 22px; }
        h2, .h2, .p2 { font-size: 18px; }
        h3, .h3, .p3 { font-size: 14px; }
        h4, .h4, .p4 { font-size: 12px; }
        h5, .h5, .p5 { font-size: 10px; }
        h6, .h6, .p6 { font-size: 8px; }
        }

        @media (min-width: 992px) {
        h1, .h1, .p1 { font-size: 24px; }
        h2, .h2, .p2 { font-size: 20px; }
        h3, .h3, .p3 { font-size: 18px; }
        h4, .h4, .p4 { font-size: 14px; }
        h5, .h5, .p5 { font-size: 12px; }
        h6, .h6, .p6 { font-size: 10px; }
        }

        @media (min-width: 1200px) and (min-height: 800px) {
        h1, .h1, .p1 { font-size: 42px; }
        h2, .h2, .p2 { font-size: 30px; }
        h3, .h3, .p3 { font-size: 22px; }
        h4, .h4, .p4 { font-size: 18px; }
        h5, .h5, .p5 { font-size: 16px; }
        h6, .h6, .p6 { font-size: 14px; }
        }


body {font-size: var(--font-mini);}

           @media (min-width: 576px) { 

body {font-size: var(--font-x576);}
            }   

            @media (min-width: 768px) {
body {font-size: var(--font-x768);}

            }

            @media (min-width: 992px) {
body {font-size: var(--font-x992);}

            }

            @media (min-width: 1200px) and (min-height: 800px) {

body {font-size: var(--font-1200);}
            }



/*#endregion */
    /*#region C     Formato/Colores */
            .color-Transparente{
                background-color: var(--color-fijo-x-traspa) !important; 
                border-color: var(--color-fijo-x-traspa);  
                color: var(--color-fijo-x-traspa);  
            }
            .color-nada {
                background-color: var(--color-fijo-xxx-nada) !important;
                border-color: var(--color-fijo-xxx-nada);
                color: var(--color-fijo-xxx-nada);
            }

        .xcolor-texto-negro { color: var(--color-texto-xxnegro); }
        .xcolor-texto-blanco { color: var(--color-texto-xblanco); }
        .xcolor-texto-rojo { color: var(--color-texto-xxxrojo); }
        .xcolor-texto-gris { color: var(--color-texto-xxxgris); }
        .xcolor-texto-gris-claro { color: var(--color-texto-griscla); }
        .xcolor-texto-gris-superclaro { color: var(--color-texto-grisupc); }
        .xcolor-texto-rojo-palido { color: var(--color-texto-rojopal); }
        .xcolor-texto-azul { color: var(--color-texto-xxxazul); }
        .xcolor-texto-mostaza { color: var(--color-texto-mostaza); }
        .xcolor-fondo-rojo-palido { background-color: var(--color-fondo-rojopal) !important; }

        
        .xcolor-fondo-cafe-off { background-color:var(--color-fondo-cafe-of) !important; }

        .xcolor-fondo-cafe-on { background-color: var(--color-fondo-cafe-on) !important; }
        .xcolor-fondo-verde-on { background-color: var(--color-fondo-verdeon) !important; }
        .xcolor-fondo-verde-off { background-color: var(--color-fondo-verdoff) !important;}
        .xcolor-fondo-verde-cla { background-color: var(--color-fondo-verdcla) !important; }
        .xcolor-fondo-azultierra-on { background-color: var(--color-fondo-azution) !important; }
        .xcolor-fondo-azultierra-off { background-color: var(--color-fondo-azutiof) !important; }
        .xcolor-fondo-champan { background-color: var(--color-fondo-champar) !important; }
        .xcolor-fondo-crema { background-color: var(--color-fondo-xxcrema) !important; }
        .xcolor-fondo-azulsuperclaro { background-color: var(--color-fondo-azusupc) !important; }   

            .xbtn-color-01 { background-color: #615550; border-color: #2e6da4;  color: #ffffff; }
                .xbtn-color-01:focus, .xbtn-color-01.focus { background-color: #2a293e; border-color: azure; color: #ffffff; }
                .xbtn-color-01:hover { background-color: #2a293e; border-color: #204d74; color: #FFC800;  }



            .xbtn-color-02 { background-color: #f0ad4e; border-color: #eea236; color: #ffffff; }
                .xbtn-color-02:focus, .xbtn-color-02.focus { background-color: #ec971f; border-color: #985f0d; color: #ffffff; }
                .xbtn-color-02:hover { background-color: #ec971f; border-color: #d58512; color: #FFC800; }

            .xbtn-color-03 { background-color: #5cb85c; border-color: #4cae4c; color: #ffffff; }
                .xbtn-color-03:focus, .xbtn-color-03.focus { background-color: #449d44; border-color: #255625; color: #ffffff; }
                .xbtn-color-03:hover { background-color: #449d44; border-color: #398439; color: #FFC800;  }




            .xbtn-color-04 { background-color: #d9534f; border-color: #d43f3a; color: #ffffff;  }
                .xbtn-color-04:focus, .xbtn-color-04.focus { background-color: #c9302c; border-color: #761c19; color: #ffffff; }
                .xbtn-color-04:hover { background-color: #c9302c; border-color: #ac2925; color: #FFC800;  }





            .xbtn-color-05 { background-color: #578437; border-color: #233914; color: #ffffff; }
                .xbtn-color-05:focus, .xbtn-color-05.focus { background-color: #3b6221; border-color: #255625; color: #ffffff; }
                .xbtn-color-05:hover { background-color: #3b6221; border-color: #398439; color: #FFC800; }

            .xbtn-color-06 { background-color: #616247; border-color: #233914; color: #ffffff; }
                .xbtn-color-06:focus, .xbtn-color-06.focus { background-color: #264e36 ; border-color: #255625; color: #ffffff; }
                .xbtn-color-06:hover { background-color: #264e36 ; border-color: #398439; color: #FFC800; }

            .xbtn-color-07 { background-color: #577284; border-color: #233914; color: #ffffff; }
                .xbtn-color-07:focus, .xbtn-color-07.focus { background-color: #2e4a62 ; border-color: #255625; color: #ffffff; }
                .xbtn-color-07:hover { background-color: #2e4a62 ; border-color: #398439; color: #FFC800; }
        /*#endregion */
/*#endregion */

/*#region IX - ControlesUsuario COMPLEMENTARIO NO ESENCIAL */  
    /*#region A - ControlesUsuario/Calendario ok */
        .Calendario {height: 100%; width: 100%; background-color: #006e6d;  border-top-left-radius:8px;  border-top-right-radius:8px;}
        .Calendario-TituloDia {color: azure; font-weight: bold; padding: 3px; text-align: center; font-size: 10px;}
        .Calendario-TodosLosDias {text-align: center; background-color: rgba(227,227,227,1); border: 1px solid #eee; padding:3px; font-size: 10px;}
        .Calendario-TodosLosDias:hover, .Calendario-TodosLosDias:focus, .Calendario-TodosLosDias.focus {padding:1px; border: 2px solid #0d2b46;}         
        .Calendario-OtherMonthDayStyle {background-color: ghostwhite; font-weight: normal; border: 1px solid transparent; font-size: 10px; padding:3px;}
        .Calendario-SelectedDayStyle {background-color: #006e6d; border:2px solid #0d2b46; font-size: 10px; font-weight: bold;}             
        .Calendario-TodayDayStyle {background-color: #5cb85c; font-size: 10px;}
        @media (min-width: 768px) {
            .Calendario-TituloDia {padding: 5px; font-size: 14px;}
            .Calendario-TodosLosDias {padding:5px; font-size: 14px;}
            .Calendario-TodosLosDias:hover, .Calendario-TodosLosDias:focus, .Calendario-TodosLosDias.focus {padding:2px; border: 3px solid #0d2b46;}         
            .Calendario-OtherMonthDayStyle {font-size: 14px; padding:5px;}
            .Calendario-SelectedDayStyle {border:3px solid #0d2b46; font-size: 14px;}    
            .Calendario-TodayDayStyle {font-size: 14px;}         
        }
        @media (min-width: 1200px) and (min-height: 800px) {
            .Calendario-TituloDia {padding: 10px 10px; font-size: 22px;}
            .Calendario-TodosLosDias {padding:10px; font-size: 22px; }
            .Calendario-TodosLosDias:hover, .Calendario-TodosLosDias:focus, .Calendario-TodosLosDias.focus {padding:5px; border: 5px solid #0d2b46;}         
            .Calendario-OtherMonthDayStyle {font-size: 22px; padding:10px; }
            .Calendario-SelectedDayStyle {border:5px solid #0d2b46; font-size: 22px;}             
            .Calendario-TodayDayStyle {font-size: 22px;}
        }
    /*#endregion */
    /*#region B - ControlesUsuario/Calculadora */
        .xformcal { display: grid; grid-template-columns: auto auto auto auto; 
/*                    grid-gap: 4px; */
                    padding: 4px; }
        .xformcal-item { text-align:center; align-self:center; -webkit-user-select: none; -ms-user-select: none; user-select:none;}
        .xformcal-item-x2 { text-align:center; align-self:center; grid-column: 1/3;}

        .btn-calc { margin:4px; padding:12px; min-width: 38px; font-size: 12px; }
        .btn-calc.btn-calc_ok { min-width: 84px; }


@media (min-width: 576px) {
        .btn-calc { margin:4px; padding:14px; min-width:40px; font-size: 14px; }
        .btn-calc.btn-calc_ok { min-width: 88px; }
       

}

    @media (min-width: 768px) {

        .btn-calc { margin:4px; padding:14px; min-width: 44px; font-size: 16px; }
        .btn-calc.btn-calc_ok { min-width: 96px; }


    }

@media (min-width: 992px) {

        .btn-calc { margin:4px; padding:14px; min-width: 46px; font-size: 18px; }
        .btn-calc.btn-calc_ok { min-width: 100px; }
    

}


    @media (min-width: 1200px) and (min-height: 800px) {
        .btn-calc { margin:5px; padding:14px; min-width: 48px; font-size: 18px; }
        .btn-calc.btn-calc_ok { min-width: 116px; }
  
       
    }


    /*#endregion */

    /*#region C - ControlesUsuario/MensajeEspecial(Mensajero control de usuario) */
    .mensaje-especial {
        display: table;
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
        background-color: #fcf8e3;
        border-color: #faebcc;
    }

        .mensaje-especial > .close {
            color: black;
        }
    /*#endregion */
    /*#endregion */

    /*#region VIII -   Contenedor Imagenes en panel */
    .thumbnail {
        background-color: rgb(66,66,66);
        background-color: rgba(66, 66, 66, 0.5);
        background: linear-gradient(to bottom, rgba(66,66,66,1) 0%, rgba(143,143,143,1) 100%);
        color: ghostwhite;
        border: 1px solid #dddddd;
        border-radius: 8px;
        height: 300px;
        display: flex;
        /*    text-align: center;*/
        /*    align-content: center;*/
        justify-content: center;
        align-items: center;
        padding: 4px;
    }

        .thumbnail > img {
            max-height: 256px;
            max-width: 100%;
            width: auto;
        }

    a.thumbnail:hover,
    a.thumbnail:focus {
        border-color: #428bca;
    }





    /*#endregion */


    /*#region VIII -   Contenedor colores */

    .gridColores {
        display: grid;
        grid-template-columns: 2fr 1fr;
        margin: 20px;
        padding: 10px;
        grid-gap: 10px;
    }

    .gridColores-item01 {
        /*    background-color: #878644;*/
        /*    border: 1px solid rgba(116, 47, 47, 0.8);*/
        grid-row: 1 / 3;
    }


.gridColores-item02 {
    background-color: var(--color-fijo-xxx-gris);
    padding: 5px;
    border-radius: 5px;
    padding: 5px 5px;
    color: var(--color-fijo-x0-negro);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}


.gridColores-item03 {
    grid-column: 2 / 3;
    border-radius: 5px;
    padding: 5px 5px;
    text-align: center;
    /*    max-height: 50px;*/
    align-self: self-end;
    background-color: var(--color-fijo-xxx-gris);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}


    /*#endregion */
    /*#region XIV -   CANVAS */
    .canvas-formato {
        width: 100%;
        height: 100%;
        display: block;
        border: 1px solid rgb(255, 255, 255);
        border-radius: 8px;
        background: #ebebeb; /*#fffdd2*/
        box-shadow: 3px 3px 1px #000000;
    }

    .canvas-formato-01 {
        width: 100%;
        height: 100%;
        display: block;
        border: 1px solid rgb(255, 255, 255);
        border-radius: 8px;
        background: #ebebeb; /*#fffdd2*/
        box-shadow: 3px 3px 1px #000000;
    }

    .canvas-formato-02 {
        width: 100%;
        height: 100%;
        display: block;
        border: 1px solid #ffffff;
        border-radius: 8px;
        background: #f0ead6;
        box-shadow: 3px 3px 1px #cce816;
        color: #fff;
    }

    .canvas-formato-03 {
        width: 100%;
        height: 100%;
        display: block;
        border: 1px solid #ffffff;
        border-radius: 8px;
        background: #d1b894;
        box-shadow: 3px 3px 1px #cce816;
    }

    .canvas-formato-04 {
        width: 100%;
        height: 100%;
        display: block;
        border: 1px solid #ffffff;
        border-radius: 8px;
        background: #f1ea7f;
        box-shadow: 3px 3px 1px #cce816;
    }

    .canvas-formato-05 {
        width: 50%;
        height: 50%;
        margin: 0 auto;
        display: block;
        border: 1px solid rgb(255, 255, 255);
        border-radius: 8px;
        background: #ebebeb; /*#fffdd2*/
        box-shadow: 3px 3px 1px #000000;
    }

    .canvas-btn {
        width: 100%;
        height: 100%;
        background-color: transparent;
    }
    /*#endregion */


    /*.canvas-formato { width: 100%; display: block; border: 1px solid #ffffff; border-radius: 8px; background: #ebebeb;*/ /*#fffdd2*/ /*box-shadow: 3px 3px 1px #000000; }*/


/*.autocomplete-items {
    display: inline-block;*/
/*    float: left;*/
    /*padding: 10px;
    text-align: center;
    background-color: var(--color-main-navb-bgc);
    background-image: var(--color-main-navb-img);
    background-repeat: repeat;
    border-radius: 10px 0px 10px 10px;
}*/



/*the container must be positioned relative:*/
.autocomplete {
    position: relative;
/*    display: inline-block;*/
}

/*.autocomplete input {
    border: 1px solid transparent;
    background-color: #f1f1f1;
    padding: 10px;
    font-size: 16px;
}

.autocomplete     input[type=text] {
        background-color: #f1f1f1;
        width: 100%;
    }

.autocomplete     input[type=submit] {
        background-color: DodgerBlue;
        color: #fff;
        cursor: pointer;
    }*/

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 40px;
    right: 0;
/*    border-radius: var(--xform-border-radius);
    -webkit-transition: 1s;
    transition: 1s;*/
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
/*        background-color: #fff;*/
/*        color: var(--color-forminput-txt);*/
        /*        color: var(--color-fijo-x0-negro);*/
/*        border-bottom: 1px solid #d4d4d4;*/


    color: var(--color-forminput-txt);
    background-color: var(--color-forminput-bgc);
    border: 1px solid var(--color-forminput-bor);
/*    outline: none;*/




    }

        /*when hovering an item:*/
        .autocomplete-items div:hover {
            /*            background-color: #e9e9e9;*/
            background-color: var(--color-form-sele-bgc);
            color: var(--color-form-sele-txt);
        }

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
    background-color: var(--color-form-sele-bgc) !important;
    color: var(--color-form-sele-txt) !important;
    border: 2px solid var(--color-forminput-enf) !important;
}