/* For debugging alignment using span or input widths */

/*
   input,  textarea {background-color: lightyellow;}
   span,   textarea {background-color: lightyellow} 
   select, textarea {background-color: lightyellow} 
*/

/* Nexa Heavy font */
/* @font-face 
{
   font-family: 'nexa-heavy';
   src: url('fonts/nexa/Nexa-Heavy.woff2') format('woff2'),
        url('fonts/nexa/Nexa-Heavy.woff') format('woff');
   font-weight: normal;
   font-style: normal;
} */

/* Body defaults */
body
{
   margin: 0;
   padding: 0;
   font-family: 'Roboto', serif;
   font-size: 4.5vw;
   line-height: 5.0vw;
   height: 100%
}

/* Hide scrollbars in Webkit browsers like Chrome, Safari, Edge, and Firefox */
body::-webkit-scrollbar 
{
   display: none;    /* Improved desktop experience, scrolling still possible with mousewheel */
}

/* Placeholder font size */
::placeholder
{
   font-size: 2.7vw;
}

/* Hide spinners for numeric inputs */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button 
{
    -webkit-appearance: none;
    margin: 0;
}

/* Hide input focus rectangle */
input:focus, textarea:focus {
   outline: none;
}

/* Shortcut for inline block */

.B{ display:inline-block;}


/* Shortcut for number input */

.N
{ 
   font-weight: bold;
   border-width: 0 0 1px;
   padding-bottom: 1vw;
   text-align: center;
}

/* Shortcuts for font sizes  */

.F10 {font-size: 2.25vw;}
.F11 {font-size: 2.48vw;}
.F12 {font-size: 2.70vw;}
.F13 {font-size: 2.93vw;}
.F14 {font-size: 3.15vw;}
.F15 {font-size: 3.38vw;}
.F16 {font-size: 3.60vw;}
.F17 {font-size: 3.83vw;}
.F18 {font-size: 4.05vw;}
.F19 {font-size: 4.28vw;}
.F20 {font-size: 4.50vw;}
.F21 {font-size: 4.73vw;}
.F22 {font-size: 4.95vw;}
.F23 {font-size: 5.18vw;}
.F24 {font-size: 5.40vw;}
.F25 {font-size: 5.63vw;}
.F26 {font-size: 5.85vw;}
.F27 {font-size: 6.08vw;}
.F28 {font-size: 6.30vw;}
.F29 {font-size: 6.53vw;}
.F30 {font-size: 6.75vw;}
.F31 {font-size: 6.98vw;}
.F32 {font-size: 7.20vw;}

.F16H {font-size: 3.60vh;}
.F20H {font-size: 4.50vh;}

.loader
{
   width:100vw; 
   height:100vh; 
   background-color:#d5ffff;
}

.loader-content
{
   text-align: center; 
   background-color:#d5ffff;
}

.header
{
   position: fixed;
   top: 0;
   left: 0;
   z-index: 10;
   width:100vw; 
   margin-bottom:1vw;
   background-color:#d5ffff; 
}

.header-content
{
   height:12vw;
}

.frame-square
{
   border-width:1vw; 
   border-style: solid; 
   margin-left: 5vw; 
   margin-right:5vw;
}

.frame-round
{
   border-width:0.7vw; 
   border-style: solid; 
   border-radius: 2vw; 
   border-color: #D1CACA; 
   margin-left: 5vw; 
   margin-right:5vw
}

.frame-round-nested
{
   border-width:0.35vw; 
   border-style: solid; 
   border-radius: 2vw; 
   border-color: white;
   margin-left: 2vw; 
   margin-right:2vw
}