html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} 

/* ========================================================================================== */
/*  estilo : comun  */
/* w3 schoools compound colors rojo #FE2712 */


:root {
    --linkcolor:             hsl(200, 100%, 50%);
    --linkcolorhover:        hsl(200, 100%, 40%);
    --formfondocolor:        hsl(000,  00%, 100%);
    --formfondocolorhover:   hsl(000,  00%, 95%);
    --labelyheadercolor:     hsl(200, 100%, 40%);
/*    --icolor:                hsl(330, 100%, 50%);
      --icolorcurrent:         hsl(330, 100%, 40%);  */
      
    --navegaletracolor:      hsl(000,    00%,  100%); 
    --navegafondocolor:      hsl(197, 70%,   12%);


    --negro:                 hsl(197, 70%,   12%);
    --griso:                 hsl(000,  00%,  50%);
    --blanco:                hsl(000,  00%, 100%);
    --warncolor:             hsl(360, 100%,  70%);
    --greencolor:            hsl(120, 100%,  70%);
  }

body {  background-color: var(--blanco);  }

span.enfasis   { font-weight:bolder; }

.feedbackwarn  { color: var(--negro);  background: var(--warncolor);}
.feedbackgreen { color: var(--negro);  background: var(--greencolor); }

a:link, a:visited, a { font-weight:bolder;  color: var(--linkcolor);
                font-family:'Bree Serif', 'Courier Prime', 'Oswald', mono, monospace;
                text-decoration:none;  }
a:hover, a:focus { color:var(--linkcolorhover);
                font-family:'Bree Serif', 'Courier Prime', 'Oswald', mono, monospace;
                text-decoration:none; }

div#adminNepesForm a:link, div#adminNepesForm a:visited, div#adminNepesForm a { color: var(--warncolor); }

form button[type="submit"]      , button[type="button"]      {  
    background-color:var(--navegafondocolor); 
    color: var(--linkcolor);
 }
form button[type="submit"]:hover, button[type="button"]:hover{  
    background-color:var(--navegafondocolor);
    /*   border:0px solid var(--warncolor);   */
    color: var(--linkcolorhover);
}
/**/

div#menuicons h1.menuHidableDriver { color:var(--navegaletracolor); }

input[type="text"], input[type="radioxx"], input[type="tel"],
input[type="password"], input[type="email"], input[type="url"], textarea{
    background-color:var(--formfondocolor);
    border:none;
    border-bottom:4px solid var(--griso);
    outline: none;
}
input[type="text"]:focus, input[type="radioxx"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
    background-color:var(--formfondocolorhover);
    border:none;
    border-bottom:4px solid var(--labelyheadercolor); 
}

fieldset{ border:0px solid var(--negro);}
section#donde div#sucasa { border:0px solid var(--negro); }

/*
section label.cabe { font-family:'Courgette', 'Bree Serif', 'Courier Prime', 'Oswald', mono, monospace; }
section label.explica { font-family:'Oswald', mono, monospace;  }
*/

h5.footersubtitulo, ul.navega li a, div#opcionesdiv h5, div#nombreyRevisado h5, 
h2.notHidable, span.diasOld, section label.cabe, section label.explica,
fieldset.hidable label,  fieldset.hidable label.explica, span.enfasis
{ font-family:'Bree Serif', 'Courier Prime', 'Oswald', mono, monospace; }

h2.footertitulo { font-family:'Courgette', 'Bree Serif', 'Courier Prime', 'Oswald', mono, monospace; }

h2.footertitulo       { text-shadow: 0px 2px 0px var(--negro); }
/*  h2.footertitulo:hover { text-shadow: 0px 2px 0px var(--negro); }  */

section label.cabe{ font-weight:bolder; color:var(--labelyheadercolor); }
section label.explica, fieldset.hidable label,  fieldset.hidable label.explica  
{ font-weight:bolder; color:var(--negro); }


form[id$=Form] h3.feedback   { font-family:'Oswald', mono, monospace; font-weight:bolder; }


/*   div#video h2.notHidable { font-family: 'Courgette', mono, monospace;}
     div#video h2.notHidable { color:var(--negro) }   */



 section#quien div.hidable ul  i 
    { border-color:var(--negro);  border-style:solid;  border-width:0pt;  border-radius:5pt;   /* no usando borde*/
    color:var(--griso); background: var(--blanco);}
 section#quien div.hidable ul  i:hover,  section#quien div.hidable ul  i:focus,  section#quien div.hidable ul  i.current 
    { border-color:var(--labelyheadercolor); border-width:0pt;   /* no usando borde*/
    color:var(--linkcolorhover); }

 section#cuando td, section#cuando td.hora, section#donde span.texto, section#donde span.textofixed, p, section#quien h5, div#opcionesdiv h2, section#que ul li, section#donde ul li  
{ font-family:'Courier Prime', serif, mono, monospace; }
 
 section#cuando td, section#donde span.textofixed, span.diasOld  
{ font-weight:bolder;  color:var(--negro); }

 section#cuando td.hora,  section#donde span.texto, section#quien h5, div#opcionesdiv h2
{ color:var(--labelyheadercolor);   font-weight:bolder;}

i[class*="fa-chevron-circle"]
{  color:var(--negro);   background-color:var(--linkcolor); border-radius:200pt;}

i[class*="fa-trash-alt"]
{  color:var(--warncolor); }

i[class*="fa-trash-alt"]:hover, i[class*="fa-chevron-circle"]:hover,
i[class*="fa-trash-alt"]:focus, i[class*="fa-chevron-circle"]:focus
{  background-color:var(--linkcolorhover); }