.grid 
{
    height:100vh;
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--gridColumnWidth, calc(100vw/12)));
    grid-template-rows: repeat(auto-fill, var(--gridRowHeight, calc(100vh/30)));
}
  
.grid > div
{
    border-radius: 0px;
}

.navRow
{
    grid-column: 1 / span 12;
    grid-row: 1 / span 3;
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(100vw/24));
    grid-template-rows: repeat(auto-fill, 50%);
    align-items: center;
    border-bottom: 1px solid lightgrey;
}

.navrow > div
{
    background: #d3c8e4;
    padding: 1.5rem;
}

.header
{
    line-height: 175%;
    grid-column-start: 4;
    grid-column-end: 10;
    grid-row: 1 / span 3;
    margin: 0;
}


.homeImageLink
{
    position:absolute;
    top: 0.5vh;
    left: 3vw;
}

.menuItem
{
    position: absolute;
    padding: 5px;
    border-radius: 20px;
    z-index: 1;
}

#lowerLink
{
    top: 150%;
    right: 20%;
    background-color: #fff;
    --enterRightFinishLocation: 20%;
    --enterRightDist: 150vw;
}

#middleLink
{
    top: 90%;
    right: 140%;
    background-color: #fff;
    --enterRightFinishLocation: 140%;
    --enterRightDist: 150vw;
}

#upperLink
{
    top: 0%;
    right: 175%;
    background-color: #fff;
    white-space: nowrap;
    --enterRightFinishLocation: 175%;
    --enterRightDist: 150vw;
}

.ViewStyle
{
    --columnStart: 1;
    --columnWidth: 12;
    --rowStart: 5;
    --rowHeight: 26;
}

.mainBody
{
    grid-column: var(--columnStart, 3) / span var(--columnWidth, 8);
    grid-row: var(--rowStart, 4) / span var(--rowHeight, 27);
    overflow-y: scroll;
}

.leftSidebar
{
    grid-column: 1 / span 2;
    grid-row: 4 / span 27;
    text-align: left;
    padding: 0.5em;
    border-right: 1px solid lightgrey;
    overflow-y: auto;
}

.desktopSidebar
{
    grid-column: 11 / span 2;
    grid-row: 4 / span 27;
    text-align: left;
    padding: 0.5em;
    border-left: 1px solid lightgrey;
    overflow-y: auto;
}

.visible
{
    animation:menuEnterRight 0.35s;
}
@keyframes menuEnterRight
{
    from { right: var(--enterRightDist, 100vw); } 
    to { right: var(--enterRightFinishLocation, 0%); }
}

.invisible
{
    transition: 0.35s;
    opacity: 0;
}

.menuContainer
{
    position:relative;
    z-index: 1;
    top: 1vh;
    grid-column: 23 / span 2;
    justify-self: center;
}

#navRowResult
{
    grid-column-start: 10;
    grid-column-end: 23;
    grid-row: 1 / span 3;
    display:flex;
    justify-content: center;
    align-items: center;
    height: 82%;
    border: 5px inset; 
    border-radius: 30px; 
    border-color: #fe0000 #0000fe #0000fe #fe0000;
}

.resultDisplay
{
    margin: 7px;
    text-align: center;
}

#lblPowerLevel
{
    font-size: 18px;
}

.result
{
    font-size:22px;
}

.buttonBar
{
    width: 100%;
    max-height: calc(200vh/30);
    overflow: hidden;
    grid-column: 1 / span 12; 
    grid-row: 4 / span 1;
}

.barButton
{
    padding:8px 16px;
    float:left;
    border:none;
    display:block;
    outline:0;
    width:11em;
    min-width:16.66vw;
    max-width:50%;
    height: 100%;
}

.enterLeft, .enterRight, .exitLeft, .exitRight
{
    top: 13.32%;
}

.enterLeft
{
    animation:enterLeft 0.4s;
}
@keyframes 
enterLeft
{
    from { left: var(--enterLeftDist,-100vw); }
    to { left: 0%; }
}

.enterRight
{
    animation:enterRight 0.4s;
}
@keyframes enterRight
{
    from { left: var(--enterRightDist, 100vw); } 
    to { left: var(--enterRightFinishLocation, 0%); }
}

.exitLeft
{
    position: fixed !important;
    animation:animExitLeft 0.4s;
}
@keyframes animExitLeft
{
    from { left: 0%; }
    to { left: var(--exitLeftDist, -100vw); }
}

.exitRight
{
    position: fixed !important;
    animation: animExitRight 0.4s;
}
@keyframes animExitRight
{
    from { left: var(--enterRightFinishLocation, 0%); }
    to { left: var(--exitRightDist, 100vw); }
}

h1
{
    font-size:30px;
    margin-bottom: 0;
}
h2
{
    font-size:24px;
    margin-bottom: 0;
}
h3
{
    font-size:20px;
    margin-bottom: 0;
}
h4
{
    font-size:18px;
    margin-bottom: 0;
}
h5
{
    font-size:16px;
    margin-bottom: 0;
}
h6
{
    font-size:14px;
    margin-bottom: 0;
}

@media only screen and (max-width: 600px)
{
    .header 
    {
        grid-column-start: 7;
        grid-column-end: 21;
    }
    .desktopSidebar { display: none; }
    .leftSidebar { display: none; }
    .mainBody { grid-column: var(--columnStart, 1) / span var(--columnWidth, 12); }
    .menuContainer { grid-column: 21 / span 4;}
    #navRowResult
    {
        grid-column-start: 7;
        grid-column-end: 20;
        line-height: 120%;
    }
    .resultDisplay { margin: 0px; }
    .BigScreenOnly { display: none; }
    .barButton { width: calc(100vw/3); }
}

@media only screen and (max-height: 1070px)
{
    .buttonBar
    {
        grid-row: 4 / span 2;
    }
    .ViewStyle
    {
        grid-row: 6 / span 25;
    }
    .enterLeft, .enterRight, .exitLeft, .exitRight { top: 16.65%; }
    div#lblPowerLevel { font-size: 16px; }
    div.result { font-size: 17px; }
}

@media only screen and (min-width: 1370px)
{
    h1 {font-size: 36px}
    h2{font-size: 24px}
    h3
    {
        font-size: 20px;
        margin-bottom: 0;
    }
    h4{font-size: 18px}
    h5{font-size: 16px}
    h6{font-size: 14px}
}

.menuButton
{
    cursor: pointer;
}

.menuBar1, .menuBar2, .menuBar3
{
    width: 35px;
    height: 5px;
    background-color: #0000FE;
    margin: 6px 6px;
    transition: 0.35s;
}

/* Rotate first bar */
.change .menuBar1
{
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    background-color: #fe0000;
}

/* Fade out the second bar */
.change .menuBar2 
{
    opacity: 0;
}
  
/* Rotate last bar */
.change .menuBar3 
{
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    background-color: #fe0000;
}

textarea
{
    height: 3em;
}

.smallNumber
{
    width: 4em;
}

table
{
    border-collapse: collapse;
    max-width: 95%;
    max-width: 1080px;
}

td
{
    border: 1px solid #aaaaaa;
    padding: 8px;
}

td.textBoxCell
{
    text-align: center;
}

button,input,select,textarea,optgroup
{
    font:inherit;
    font-size: 17px;
    margin:0;
}

.popupClick
{
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popupClick .popupText
{
    width: 90vw;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: fixed;
    z-index: 1;
    bottom: 33vh;
    left: 5vw;
}

.hide
{
    visibility: hidden;
}

.show
{
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn 
{
    from {opacity: 0;} 
    to {opacity: 1;}
}
  
@keyframes fadeIn 
{
    from {opacity: 0;}
    to {opacity:1 ;}
}

html
{
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    background-color: #2F2F2F;
    color:#FFF;
}

html,body
{
    font-family:Verdana,sans-serif;
    font-size:16px;
    line-height:1.5;
}

body
{ 
	width:100%;
    margin:0;
}

button
{
    border:none;
    color:inherit;
    background-color:inherit;
    padding:8px 16px;
    display:inline-block;
    vertical-align:middle;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    white-space:nowrap;
}

button:hover
{
    color:#000!important;
    background-color:#ccc!important;
}

.black, .buttonBar
{
    color:#fff;
    background-color:#000;
}

.blue
{
    color: #ffffff;
    background-color: #0000fe;
}

.red
{
    color: #ffffff;
    background-color: #fe0000;
}

textarea, input[type=text]
{
    width: 95%;
}

img
{
    width: auto;
    max-width:100%;
    max-height:100%;
}

a
{
    color: #0000FE;
    background-color: #FFF;
}