@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Rubik&display=swap');   

html,body{
    font-family: 'Rubik', sans-serif;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 99%;
}

@media only screen and (orientation: landscape) {
    #projection{
        font-size: 18px;
    }
    .chartDesk{
        display: inline-flex;
        margin: 0 auto 3vh auto;
        padding: 0 1vw 0 1vw;
        width: 45vw;
        position: relative; 
        height: 500px;
    }
    .chartDesk-wide{
        display: inline-block;
        margin: 0 auto;
        width: 100vw;
        position: relative; 
        height: 700px;
    }
    .logoHeader{
        display: inline-block; color: forestgreen; overflow: hidden; font-family: 'Lobster', sans-serif; position: relative; font-size: 5vh; border-radius: 0 4vh 4vh 0; background-color: white; height: 97%; width: 3.5vw !important; text-align: left; line-height: 6.5vh; cursor: pointer; border: 1px solid forestgreen; transition: width .3s linear;
    }
    .productName{
        display: 
        inline-block; 
        color: white; 
        font-weight: bold; 
        position: absolute; 
        top: 50%; 
        transform: translateY(-50%); 
        margin-left: 1vw;
        font-size: 3vw;
    }
    .logoHeaderOpen{
        width: 28.5vw !important;
    }
    .headerStyle{
        width: 100vw; top: 0; left: 0; position: relative; background-color: forestgreen; height: 8%;
    }
    .menuStyle {
        z-index: 500; width: 25vw; padding-left: 2vw; top: 8%; left: 0; position: absolute; background-color: forestgreen; overflow: auto; display: block; text-align: center; transition: height .1s linear;
    }
    .frameStyle {
        z-index: 200; height: 88%; width: 98vw; margin-top: 0.5%; left: 1vw; position: relative; overflow: auto;
    }
    .footerStyle{
        color: lightgrey; height: 4%; width: 100vw; margin-top: 0.5%; position: relative; border-top: 1px solid lightgrey; background-color: black; text-align: right; line-height: 2vh; font-weight: 200; 
    }
    .logoutHeader {
        position: absolute; right: 2vw; top: 50%; transform: translateY(-50%); font-size: 3.5vh; cursor: pointer;
    }
    .supportHeader {
        position: absolute; right: 9vw; top: 50%; transform: translateY(-50%); font-size: 3.5vh; cursor: pointer;
    }
    .newsHeader {
        position: absolute; right: 16vw; top: 50%; transform: translateY(-50%); font-size: 3.5vh; cursor: pointer;
    }
    .networkHeader {
        position: absolute; right: 23vw; top: 50%; transform: translateY(-50%); font-size: 3.5vh; cursor: pointer;
    }
    .homeHeader {
        position: absolute; right: 29vw; top: 50%; transform: translateY(-50%); font-size: 3.5vh; cursor: pointer;
    }
    .menuToggle{
        display: none;                 
    }
    .menuItem{
        font-size:1vw; line-height: 2.5vw; font-weight: 600; display: block; color: white; cursor: pointer;    
    }
    .menuItem-location{
        font-size:1.25vw; line-height: 2.5vw; font-weight: 600; display: block; color: white;  
    }
    .menuItem-action{
        font-size:1vw; line-height: 1.75vw; font-weight: 100; display: block; color: white; cursor: pointer;    
    }
    .userClass0{
        margin-top: 2%; width: 100%; text-align: left; position: relative;
    }
    .userClass500{
        margin-top: 2%; width: 100%; text-align: left; position: relative;
    }
    .appIco{
        display: inline-block;
    }
    
    .landStats{
        display: block;
    }

    .portStats{
        display: none;
    }
}

@media only screen and (orientation: portrait) {
    #projection{
        font-size: 16px;
    }
    .chartDesk{
        display: inline-flex;
        margin: 0 auto 3vh auto;
        padding: 0 1vw 0 1vw;
        width: 100vw;
        position: relative; 
        height: 500px;
    }
    .chartDesk-wide{
        display: inline-block;
        margin: 0 auto;
        width: 100vw;
        position: relative; 
        height: 700px;
    }
    .productName{
        display: 
        inline-block; 
        color: white; 
        font-weight: bold; 
        position: absolute; 
        top: 50%; 
        transform: translateY(-50%); 
        margin-left: 3vw;
        font-size: 3vh;
    }
    .logoHeader{
        display: inline-block; color: forestgreen; overflow: hidden; font-family: 'Lobster', sans-serif; position: relative; font-size: 4vh; border-radius: 0 3.5vh 3.5vh 0; background-color: white; height: 7vh; width: 14.5vw !important; text-align: left; line-height: 7vh; cursor: pointer; border: 1px solid forestgreen; transition: width .3s linear;
    }
    .logoHeaderOpen{
        width: 75vw !important;
    }
    .headerStyle{
       width: 100vw; top: 0; left: 0; position: relative; background-color: forestgreen; height: 7.2vh;
    }
    .menuStyle {
        z-index: 500; width: 70vw; padding-left: 2vw; top: 7.2vh; left: 0; position: absolute; background-color: forestgreen; overflow: auto; display: block; text-align: center; transition: height .1s linear;
    }
    .frameStyle {
        z-index: 100; max-height: 88%; height: 88%; width: 100vw; top: 8%; left: 0vw; position: fixed; overflow: auto;
    }
    .footerStyle{
        z-index: 500; color: lightgrey; height: 3%; width: 100vw; bottom: 0; left: 0; position: fixed; background-color: black; text-align: right; line-height: 3vh; font-weight: bold; font-size: 1.5vh;
    }
    .logoutHeader{
        position: absolute; right: 2vw; top: 50%; transform: translateY(-50%); font-size: 4vw;
    }
    .supportHeader{
        position: absolute; right: 12vw; top: 50%; transform: translateY(-50%); font-size: 4vw;
    }
    .homeHeader{
        position: absolute; right: 22vw; top: 50%; transform: translateY(-50%); font-size: 4vw;
    }
    .logoutMenu{
        font-size:2vh; line-height: 3.5vh; font-weight: bold; display: block; color: navy; cursor: pointer;
    }
    .menuToggle{
        position: absolute; left: 5vw; top: 1vh; font-size: 5vh;
    }
    .menuItem{
        font-size:1.5vh; line-height: 2.5vh; font-weight: 600; display: block; color: white; cursor: pointer;    
    }
    .menuItem-location{
        font-size:1.75vh; line-height: 2.5vh; font-weight: 600; display: block; color: white;  
    }
    .menuItem-action{
        font-size:1.5vh; line-height: 1.75vh; font-weight: 100; display: block; color: white; cursor: pointer;    
    }
    .userClass0{
        margin-top: 2%; width: 100%; text-align: left; position: relative;
    }
    .userClass500{
        margin-top: 2%; width: 100%; text-align: left; position: relative;
    }
    .appIco{
        display: none;
    }
    
    .landStats{
        display: none;
    }

    .portStats{
        display: block;
    }

}