.scip-area {
    /* displays a scrollbar if content would be clipped, ensure no scrollbar is visible to get the right size */
    overflow: auto;
}

    .scip-area .scip-area-header {
        margin-bottom: 0;
    }

    .scip-area .scip-area-content {
        margin-bottom: 0;
    }

    .cpfrMiniIcons{
        height:20px; 
        vertical-align:bottom;
    }

    /*****************************************************************/
    /* define the default sizes based on a resolution of 1366x768    */
    /*****************************************************************/
    .scip-area.scip-area-full
        {
        height: 420px;
        overflow-x: hidden;
    }

    .scip-area.scip-area-half
        {
        height: 245px;
        overflow-x: hidden;
    }
        
    .scip-area.scip-area-forty{
        height: 194px;
        overflow-x: hidden;
    }

    .scip-area.scip-area-sixty {
        height: 285px;
        overflow-x: hidden;
    }

    .scip-area.scip-area-withheader.scip-area-sixty {
        height: 270px;
        overflow-x: hidden;
    }

    /*.scip-area-content, row, scip-area{
        height: 200px !important;
    }*/
    
        /* define the content height for kendo grids */
        .scip-area.scip-area-half .k-grid-content {
            max-height: 125px;
        }
        
        .scip-area.scip-area-forty .k-grid-content{
            max-height:80px;
        }

        .scip-area.scip-area-sixty .k-grid-content  {
            max-height: 80px;
        }

        /* define the content height for kendo grids with headers */
        .scip-area.scip-area-half.scip-area-withheader .k-grid-content {
            max-height: 140px;
        }
        
        .scip-area.scip-area-forty.scip-area-withheader .k-grid-content{
            max-height: 76px;
        }

        .scip-area.scip-area-sixty.scip-area-withheader .k-grid-content  {
            max-height: 144px;
        }

        /* define the content height for kendo grids with headers and toolbar*/
            .scip-area.scip-area-forty.scip-area-withheader.scip-area-withtoolbar .k-grid-content {
                max-height: 55px;
            }

        /* define the content height for kendo charts */
        .scip-area.scip-area-full .k-chart {
            max-height: 340px;
            height: 340px !important;
        }

        .scip-area.scip-area-half .k-chart                {
            max-height: 135px;
            height: 135px !important;
        }
        .scip-area.scip-area-forty .k-chart{
            max-height: 180px;
            height: 180px !important;
        }
        .scip-area.scip-area-sixty .k-chart {
            max-height: 130px;
            height: 140px !important;            
        }

        /* define the content height for kendo charts with headers */
        .scip-area.scip-area-full.scip-area-withheader .k-chart                {
            max-height: 300px;
            height: 300px !important;
        }
        .scip-area.scip-area-half.scip-area-withheader .k-chart                {
            max-height: 170px;
            height: 170px !important;
        }
        .scip-area.scip-area-forty.scip-area-withheader .k-chart{
            max-height: 140px;
            height: 140px !important;
        }
        .scip-area.scip-area-sixty.scip-area-withheader .k-chart {
            max-height: 100px;
            height: 100px !important;            
        }

                 
        /*define layout for summary statements (business plan)*/        
        .scip-area.scip-area-sixty .summaryStatementsInnerBox{
            max-height: 140px;
            height:  140px;
            margin-right: 30px;
        }
        .scip-area.scip-area-sixty .summaryStatementsInnerBox .summaryRow
        {
            font-size: 10px;            
            height: 40px;
        }
        .scip-area.scip-area-sixty .summaryRow .summaryLeftCell {
                height: 10px;
                /*padding-top: 0.2em;*/
                min-width: 350px;
            }
        .scip-area.scip-area-sixty .summaryRow .summaryRightCell {
            min-width: 120px;
            max-width: 120px;
        }

        .summaryRowBp
        {
            font-size: 10px;            
            max-height: 20px;
        }

    /*.scip-area.scip-area-top {
        background-color: lightblue;
    }

    .scip-area.scip-area-bottom {
        background-color: darkslateblue;
    }

     .scip-area.scip-area-forty {
        background-color: palevioletred;
    }

    .scip-area.scip-area-sixty {
        background-color: mediumvioletred;
    }*/

    .img-product-logo{
        width: 95px;
    }

    .img-product-logo-mini{
        width: 60px;
    }

    .cpfrCellText{
        font-size: 10px;
    }

    /* settings for cpfr grid top logo and mini icons */
    /* special case: hide top logo and show mini logo in this resolution */

    .showMiniProductLogo{
        height: 20px;
        display:normal;
    }

    .cpfrMiniIcons{
        margin-left: 20px;
    }

    .productLogoWrapper{
        display:none !important;
    }

@media (min-height: 720px) {
    .scip-area.scip-area-full
        {
        height: 700px;
    }

    .scip-area.scip-area-half {
        height: 330px;
    }

    .scip-area.scip-area-withheader.scip-area-half {
        height: 300px;
    }

    .scip-area.scip-area-forty {
        height: 216px;
    }

    .scip-area.scip-area-sixty {
        height: 390px;
    }

    .scip-area.scip-area-withheader.scip-area-sixty {
        height: 380px;
        overflow-x: hidden;
    }


    .scip-area.scip-area-top {
        /*background-color: lightgreen;*/
    }

    .scip-area.scip-area-bottom {
        /*background-color: darkseagreen;*/
    }

        /* define the content height for kendo grids */
        .scip-area.scip-area-half .k-grid-content {
            max-height: 180px;
        }
        .scip-area.scip-area-forty .k-grid-content {
            max-height: 100px;
        }
        .scip-area.scip-area-sixty .k-grid-content {
            max-height: 225px;
        }

        /* define the content height for kendo grids with header */
        .scip-area.scip-area-half.scip-area-withheader .k-grid-content {
            max-height: 190px;
        }
        .scip-area.scip-area-forty.scip-area-withheader .k-grid-content {
            max-height: 100px;
        }
        .scip-area.scip-area-sixty.scip-area-withheader .k-grid-content {
            max-height: 400px;
        }

        /* define the content height for kendo grids with headers and toolbar*/
            .scip-area.scip-area-forty.scip-area-withheader.scip-area-withtoolbar .k-grid-content {
                max-height: 77px;
            }


        /* define the content height for kendo charts */
        .scip-area.scip-area-full .k-chart {
            max-height: 440px;
            height: 440px !important;
        }
        .scip-area.scip-area-half .k-chart {
            max-height: 170px;
            height: 170px !important;
        }
        .scip-area.scip-area-forty .k-chart {
            max-height: 176px;
            height: 176px !important;
        }
        .scip-area.scip-area-sixty .k-chart {
            max-height: 244px;
            height: 244px !important;
        }

        /* define the content height for kendo charts with headers */
        .scip-area.scip-area-full.scip-area-withheader .k-chart                {
            max-height: 400px;
            height: 400px !important;
        }
        .scip-area.scip-area-half.scip-area-withheader .k-chart                {
            max-height: 235px;
            height: 235px !important;
        }
        .scip-area.scip-area-forty.scip-area-withheader .k-chart{
            max-height: 136px;
            height: 136px !important;
        }
        .scip-area.scip-area-sixty.scip-area-withheader .k-chart {
            max-height: 205px;
            height: 205px !important;            
        }        

         /*define layout for summary statements (business plan)*/        
        .scip-area.scip-area-sixty .summaryStatementsInnerBox{
            max-height: 244px;
            height:  244px;
            margin-right: 40px;
        }
        .scip-area.scip-area-sixty .summaryStatementsInnerBox .summaryRow
        {
            font-size: 14px;            
            height: 60px;
        }
        .scip-area.scip-area-sixty .summaryRow .summaryLeftCell {
                height: 50px;
                /*padding-top: 1.25em;*/
            }
        .scip-area.scip-area-sixty .summaryRow .summaryRightCell {
            min-width: 130px;
            max-width: 130px;
        }

        /* settings for cpfr grid top logo and mini icons */

        .showMiniProductLogo{
            height: 20px;
            display:none;
        }

        .cpfrMiniIcons{
            margin-left: 50px;
        }

        .productLogoWrapper{
            display:block !important;
        }
}

@media (min-height: 720px) {
    .scip-area.scip-area-full
        {
        height: 720px;
    }
    .scip-area.scip-area-half {
        height: 390px;
    }

    .scip-area.scip-area-withheader.scip-area-half {
        height: 390px;
    }
    
    .scip-area.scip-area-forty {
        height: 316px;
    }

    .scip-area.scip-area-sixty {
        height: 475px;
    }

    .scip-area.scip-area-withheader.scip-area-sixty {
        height: 450px;
        overflow-x: hidden;
    }

    .scip-area.scip-area-top {
        /*background-color: palevioletred;*/
    }

    .scip-area.scip-area-bottom {
        /*background-color: mediumorchid;*/
    }

            /* define the content height for kendo grids */
            .scip-area.scip-area-half .k-grid-content {
                max-height: 240px;
            }
            .scip-area.scip-area-forty .k-grid-content {
                max-height: 192px;
            }
            .scip-area.scip-area-sixty .k-grid-content {
                max-height: 288px;
            }

            /* define the content height for kendo grids with headers */
            .scip-area.scip-area-half.scip-area-withheader .k-grid-content {
                max-height: 280px;
            }
            .scip-area.scip-area-forty.scip-area-withheader .k-grid-content {
                max-height: 192px;
            }
            .scip-area.scip-area-sixty.scip-area-withheader .k-grid-content {
                max-height: 288px;
            }

            /* define the content height for kendo grids with headers and toolbar*/
            .scip-area.scip-area-forty.scip-area-withheader.scip-area-withtoolbar .k-grid-content {
                max-height: 177px;
            }

            /* define the content height for kendo charts */
            .scip-area.scip-area-full {
                max-height: 592px;
                height: 592px !important;
            }

            .scip-area.scip-area-full .k-chart {
                max-height: 592px;
                height: 592px !important;
            }
            .scip-area.scip-area-half .k-chart {
                max-height: 280px;
                height: 280px !important;
            }
            .scip-area.scip-area-forty .k-chart {
                max-height: 240px;
                height: 240px !important;
            }
            .scip-area.scip-area-sixty .k-chart {
                max-height: 330px;
                height: 330px !important;             
            }

             /* define the content height for kendo charts with headers */
            .scip-area.scip-area-full.scip-area-withheader .k-chart {
                max-height: 552px;
                height: 552px !important;
            }
            .scip-area.scip-area-half.scip-area-withheader .k-chart {
                max-height: 290px;
                height: 290px !important;
            }
            .scip-area.scip-area-forty.scip-area-withheader .k-chart {
                max-height: 200px;
                height: 200px !important;
            }
            .scip-area.scip-area-sixty.scip-area-withheader .k-chart {
                max-height: 280px;
                height: 280px !important;             
            }


            /* define the content height for summary statements */
            .scip-area.scip-area-sixty .summaryStatementsInnerBox{
                max-height: 260px;
                height: 260px !important;
                margin-right: 50px;
            }
            .scip-area.scip-area-sixty .summaryStatementsInnerBox .summaryRow
            {
                font-size: 14px;            
                height: 80px;
            }
            .scip-area.scip-area-sixty .summaryRow .summaryLeftCell {
                height: 50px;
                padding-top: 1em;
            }
            .scip-area.scip-area-sixty .summaryRow .summaryRightCell {
                min-width: 120px;
                max-width: 120px;
            }

            /* settings for cpfr grid top logo and mini icons */

            .showMiniProductLogo{
                height: 20px;
                display:none;
            }

            .cpfrMiniIcons{
                margin-left: 50px;
            }

             .productLogoWrapper{
                display:block !important;
            }
}

@media (min-height: 1050px) {
    .scip-area.scip-area-full
        {
        height: 792px;
    }
    .scip-area.scip-area-half {
        height: 440px;
    }

    scip-area.scip-area-withheader.scip-area-half {
        height: 640px;
    }

    .scip-area.scip-area-forty {
        height: 352px;
    }

    .scip-area.scip-area-sixty {
        height: 568px;
    }

    .scip-area.scip-area-withheader.scip-area-sixty {
        height: 460px;
        overflow-x: hidden;
    }

    .scip-area.scip-area-top {
        /*background-color: palegoldenrod;*/
    }

    .scip-area.scip-area-bottom {
        /*background-color: orange;*/
    }

            /* define the content height for kendo grids */
            .scip-area.scip-area-half .k-grid-content {
                max-height: 310px;
            }
            .scip-area.scip-area-forty .k-grid-content {
                max-height: 248px;
            }
            .scip-area.scip-area-sixty .k-grid-content {
                max-height: 372px;
            }

            /* define the content height for kendo charts */
            .scip-area.scip-area-half .k-chart {
                max-height: 325px;
                height: 325px !important;
            }
            .scip-area.scip-area-forty .k-chart {
                max-height: 288px;
                height: 288px !important;
            }
            .scip-area.scip-area-sixty .k-chart {
                max-height: 412px;
                height: 412px !important;
            }

            /* define the content height for kendo charts with headers */
            .scip-area.scip-area-full.scip-area-withheader .k-chart {
                max-height: 285px;
                height: 285px !important;
            }
            .scip-area.scip-area-forty.scip-area-withheader .k-chart {
                max-height: 248px;
                height: 248px !important;
            }
            .scip-area.scip-area-sixty.scip-area-withheader .k-chart {
                max-height: 282px;
                height: 282px !important;
            }

            /* define the content height for summary statements */
            .scip-area.scip-area-sixty .summaryStatementsInnerBox{
                max-height: 360px;
                height: 360px !important;
                margin-right: 50px;
            }
            .scip-area.scip-area-sixty .summaryStatementsInnerBox .summaryRow
            {
                font-size: 14px;            
                height: 90px;
            }
            .scip-area.scip-area-sixty .summaryRow .summaryLeftCell {
                height: 60px;
                padding-top: 1.3em;
            }
            .scip-area.scip-area-sixty .summaryRow .summaryRightCell {
                min-width: 150px;
                max-width: 150px;
            }

            /* settings for cpfr grid top logo and mini icons */

            .showMiniProductLogo{
                height: 20px;
                display:none;
            }

            .cpfrMiniIcons{
                margin-left: 50px;
            }

             .productLogoWrapper {
                display:block !important;
            }
}