@media all {html {font-size: 1em;}}
    /* @media (min-width: 767px) {
        #PageSubtitleHolder {
            width: calc(var(--VW) * 100);
            height: calc(var(--VW) * 200);
            border: 2px dotted red;
        }
    } */

    :root {
        --VH: 0; /* default value */
        --VW: 0; /* default value */
      }

    html, body {
        overflow-x:hidden;
        font-weight:bold;
        font-style:normal;
        text-decoration:none;
        text-shadow:none; /* 1px 1px 0px #cc9f52; */
        height: 100%;
        width: 100%;
        min-width: 100%;
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin:0%;
        padding:0%;
        font-size:100%;
        font-family: arial;	
        user-select: none;
        
    }

    a:hover {
	  color            : white;
	  background-color : blue;
	}

	img.w3c { /* makes it load faster */
	  height       : 31px;
	  width        : 88px;
	  border-style : none;
	}

	input {
	  font-family : arial rounded mt bold;
	  font-size: 1.3em;
      border: 1px solid indigo;
      background:aliceblue;
	}

	input.nbor {
	  border     : 0;
	  text-align : right;
	  background : palegreen;
	  font-weight:bold;
	  color:red;
	}

input.nborTOTAL {
	  border     : 0;
	  text-align : right;
	  font-family : arial rounded mt bold;
	  font-weight: bold;
	  background : palegreen;
	  font-size   : 1.2em;
	}

	select{
	  font-family : arial;
	  font-size: 1.3em;
      background-color:aliceblue;
      border: 1px solid indigo;
      text-align: center;
	}

	table {
	  font-size   : 0.95em;
	}

    .IdentityFooter{
        /* display:flex;
        flex-direction: column;
        justify-content: center; 
        align-items: center; */
        height: calc(var(--VH) * 13px);
        width: 100vw;
        z-index: 60;
        border: 0px dashed violet;
        white-space: nowrap;
        position: fixed;
        top:calc(var(--VH) * 95px);
        color:indigo;
        font-size:.6em;
    }



*:focus {outline: none;}
 button:focus {outline:0;} /* removes ugly outline around elements */
 input:focus, textarea:focus, select:focus{
    outline: none;
}

h1 {
    text-align: center;
    font-size:2em;
    color:indigo;    
    padding: 0 2% 0 2%;
    box-sizing: border-box;
}

h2 {
    position:relative;
    top:-1em;
    text-align: center;
    font-size:1.5em;
    color:indigo; 
}

.ButtonSpan{
    background:lime; border-radius:5px; border:0; font-size:1em; vertical-align:top;  
}

.IdentityFooter{
display:flex;
flex-direction: column;
justify-content: center; 
align-items: center;
height: calc(var(--VH) * 13px);
width: 100vw;
z-index: 60;
border: 0px dashed violet;
white-space: nowrap;
position: fixed;
top:calc(var(--VH) * 90px);
color:indigo;
font-size:.6em;
}


.Boton {
       width: calc(var(--VW) * 80px);
       max-width: 500px;	   		
       height: calc(var(--VH) * 10px);  
	   		/* font-size:2em;
    display:table-cell;
    vertical-align:middle;
       font-weight:bold;
       background:Lavender;
       border:1px solid lavender;
       border-radius:30px;
        */
    display:inline-block;
    /*color:#ffffff;*/
    font-family:trebuchet, arial;
    font-size: 1.1em;
    font-weight:bold;
    font-style:normal;
    line-height:195%;
    text-decoration:none;
    text-align:center;
    text-shadow:none; /* 1px 1px 0px #666699; */
    cursor:pointer; 
    cursor:hand;	   		
}		    	    		    


.BotonBlack { 	/* ################################################### */
    -moz-box-shadow:inset 0px 1px 0px 0px #303030;
    -webkit-box-shadow:inset 0px 1px 0px 0px #303030;
    box-shadow:inset 0px 1px 0px 0px #303030;
    
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #303030), color-stop(1, gray) );
    background:-moz-linear-gradient( center top, #303030 5%, gray 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='gray');
    background-color:#303030;
    -webkit-border-top-left-radius:20px;
    -moz-border-radius-topleft:20px;
    border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;
    -moz-border-radius-topright:20px;
    border-top-right-radius:20px;
    -webkit-border-bottom-right-radius:20px;
    -moz-border-radius-bottomright:20px;
    border-bottom-right-radius:20px;
    -webkit-border-bottom-left-radius:20px;
    -moz-border-radius-bottomleft:20px;
    border-bottom-left-radius:20px;
    text-indent:0;
    
    border:1px solid gray;  
    
    display:inline-block;
    color:#ffffff;
    font-family:trebuchet, arial;
    font-size:60%;
    font-weight:bold;
    font-style:normal;
    line-height:225%;
    text-decoration:none;
    text-align:center;
    text-shadow:none; /* 1px 1px 0px #666699; */
    cursor:pointer; 
    cursor:hand;
}



#mainMenuContainer{
    position:fixed;
    left:calc(var(--VW) * 0px);
    top:calc(var(--VH) * 21px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
    width: calc(var(--VW) * 100px);
    height:calc(var(--VH) * 70px);
    border: 0px dotted gold;
    font-size:2em;
}

#loginContainer{
    position:fixed;
    left:calc(var(--VW) * 0px);
    top:calc(var(--VH) * 27px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
    width: calc(var(--VW) * 100px);
    height:calc(var(--VH) * 63px);
    border: 0px dotted gold;
    font-size:2em;			
}

#informesMenuContainer{
    position:fixed;
    left:calc(var(--VW) * 0px);
    top:calc(var(--VH) * 21px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
    width: calc(var(--VW) * 100px);
    height:calc(var(--VH) * 70px);
    border: 0px dotted gold;
    font-size:2em;
}

#btnAgregarPedido, #btnAgregarProveedor{
    width: calc(var(--VW) * 80px); 
/* 			top: calc(var(--VH) * 20px);  CAUSA PROBLEMA RARO */
    max-width: 600px; 
    font-size: 1em;
}

#menuContainer{
    position:fixed;
    left:calc(var(--VW) * 10px);
    top:calc(var(--VH) * 20px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-content: space-around;
    align-items: center;
    width: 80vw;
    height:60vh;
    border: 0px dotted gold;
    font-size:2em;
}