body, html {
    height: 100%;
}

.ui-page {
    height: inherit;
}

#leftPanel
{
    background: #f7f7f7 !important;
    width: 75%;
    height: inherit;
}

div.ui-panel-inner {
    height: inherit;
    padding: 0px;
    margin: 0px;
}

.ui-panel-dismiss-position-left
{
    width: 25%;
    right: 0 !important;
    left: auto !important;
}

.ui-panel-dismiss-position-right
{
    width: 25%;
    left: 0 !important;
    right: auto !important;
}

#menuTbl
{
    width: 100%;
    position: absolute;
    top:0;
    bottom:0;
    height: inherit;
}

#menuTbl td
{
    border-radius: 15px;
    border: 1px solid #b6b8b9;
    background-color: white;
    border-collapse: collapse;
    color: black;
    white-space: nowrap;
}

#menuTbl td:hover
{
    background-color: #DFE0E3;
}

.iconColumn
{
    background-repeat: no-repeat;
    background-size: auto 90%;
    background-position: left;
    vertical-align: middle;
}
@media screen and (orientation:portrait) {

    @media screen and (max-width:322px){
        #leftPanel{
            background: #f7f7f7 !important;
            width: 85%;
        }
    }
    @media screen and (min-width:323px) and (max-width:400px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 92%;
        }
    }
    @media screen and (min-width:401px) and (max-width:450px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 80%;
        }
    }
    @media screen and (min-width:451px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 75%;
        }
    }
    @media screen and (max-height:600px) {
        .spanMenu{
            padding-left: 45px;
        }
    }
    @media screen and (min-height:601px) and (max-height:700px) {
        .spanMenu{
            padding-left: 55px;
        }
    } 
    @media screen and (min-height:701px) and (max-height:850px) {
        .spanMenu{
            padding-left: 65px;
        }
    }
    @media screen and (min-height:851px) and (max-height:950px) {
        .spanMenu{
            padding-left: 75px;
        }
    }
    @media screen and (min-height:951px) and (max-height:1040px) {
        .spanMenu{
            padding-left: 85px;
        }
    }
    @media screen and (min-height:1041px) and (max-height:1240px) {
        .spanMenu{
            padding-left: 95px;
        }
    }
    @media screen and (min-height:1241px) {
        .spanMenu{
            padding-left: 105px;
        }
    }

}
@media screen and (orientation:landscape) {

    #menuTbl td{
        padding-left: 50px;
    }

    #leftPanel{
        background: #f7f7f7 !important;
        width: 75%;
        height: 480px;
    }
    .ui-page{
        height: 480px;/*100vw;*/
    }

    @media screen and(max-width:480px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 75%;
            height: 480px;
        }
        .ui-page{
            height: 480px;/*100vw;*/
        }
    }
    @media screen and (min-width:481px) and (max-width:570px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 75%;
            height: 570px;
        }
        .ui-page{
            height: 570px;/*100vw;*/
        }
    }
    @media screen and (min-width:571px) and (max-width:640px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 75%;
            height: 640px;
        }
        .ui-page{
            height: 640px;/*100vw;*/
        }
    }
    @media screen and (min-width:641px) and (max-width:753px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 75%;
            height: 753px;
        }
        .ui-page{
            height: 753px;/*100vw;*/
        }
        #menuTbl td
        {
            padding-left: 70px;
        }
    }
    @media screen and (min-width:754px) and (max-width:960px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 75%;
            height: 960px;
        }
        #menuTbl td
        {
            padding-left: 80px;
        }
        .ui-page{
            height: 960px;/*100vw;*/
        }
    }
    @media screen and (min-width:961px) and (max-width:1024px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 75%;
            height: 1024px;
        }
        #menuTbl td
        {
            padding-left: 83px;
        }
        .ui-page{
            height: 1024px;/*100vw;*/
        }
    }
    @media screen and (min-width:1025px) and (max-width:1280px) {
        #leftPanel{
            background: #f7f7f7 !important;
            width: 75%;
            height: 1280px;
        }
        #menuTbl td
        {
            padding-left: 91px;
        }
        .ui-page{
            height: 1280px;/*100vw;*/
        }
    }
}