﻿
@media only screen  and (max-width : 1200px) 
{
    #pageTitle {margin-top:13px;}
    #store {padding: 0px 0px 24px 24px;}
    .cubeWrapper{width:130px;}
    .cubeWrapper .cubeData{font-size:24px;}
    .cubeWrapper.chartCube {width:250px; min-height:212px;}
    .graphArea {margin:0;padding:0;padding-left:8px;}
    .graphArea .halfWidth{margin-top:24px;}
    .graphArea .graphWrapperFull{margin-top:24px;}
    .graphTitle {margin-top:16px;}

    .graphWrapperLeft {width:100%; height:470px;}
    .graphWrapperRight {width:100%; height:470px;}

    .homeMiddleArea .halfWidth {display: block;width: 100%;}
    .homeMiddleArea .halfWidth .graphBoxLeft {width:100%;float:none;}
    .homeMiddleArea .halfWidth .graphBoxRight {width:100%;float:none;}
    .homeMiddleArea .oneThirdWidth  {display: block;width: 100%;}
    .homeMiddleArea .oneThirdWidth .graphBoxRightThirdWidth {display: block;width: 100%;}
    .homeMiddleArea .twoThirdWidth  {display: block;width: 100%;}
    .homeMiddleArea .twoThirdWidth .graphBoxLeft {width:100%;float:none;}
    .homeMiddleArea .twoThirdWidth .graphBoxRight {width:100%;float:none;}
    #sales {background-position: 36px 11px;}
    #waste {background-position: 31px 11px;}
    #uploads {background-position: 8px 11px;}

.cubeWrapper .dataChangeUp {color:#FF4136; background-image: url('../images/arrowUp.png');background-repeat: no-repeat;background-position:90px -1px;background-size: 12px 12px;}
.cubeWrapper .dataChangeDown {background-image: url('../images/arrowDown.png');background-repeat: no-repeat;background-position: 90px -1px;background-size: 13px 13px;}

    .graphArea .scroll{overflow:overlay;max-height: 426px;}
    .graphArea .tableView th.sortable {cursor:pointer;background-image: url('../images/sort.png');background-repeat: no-repeat;background-position: 75% 11px;background-size: 30px 12px;}

    #wasteProductStoresCube {display:none;}
    #productData {margin-top:10px; margin-right:12px;}
    #productImage {width:150px; height:140px;}

    #wasteProductProductListWrapper .tableView th.sortable {background-position: 76% 9px;background-size: 40px 16px;}
    .graphArea .graphWrapperFull .tableView th.sortable {
        cursor: pointer;
        background-image: url('../images/sort.png');
        background-repeat: no-repeat;
        background-position: 115% 95%;
        background-size: 24px 10px;
    }
    
    #alertsListTableHeader th.col1 {width:5% !important;}
    #alertsListTableHeader th.col2 {width:10% !important;}
    #alertsListTableHeader th.col3 {width:10% !important;}
    #alertsListTableHeader th.col4 {width:10% !important;}
    #alertsListTableHeader th.col5 {width:35% !important;}
    #alertsListTableHeader th.col6 {width:30% !important;}

    #alertsListTableData td.col1 {width:5% !important;}
    #alertsListTableData td.col2 {width:10% !important;}
    #alertsListTableData td.col3 {width:10% !important;}
    #alertsListTableData td.col4 {width:10% !important;}
    #alertsListTableData td.col5 {width:35% !important;}
    #alertsListTableData td.col6 {width:30% !important;}

    #storesSearchListWrapper{background-color:red;}
}

@media only screen and (max-device-width: 600px) 
/*and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3)*/
{
    .cubeWrapper{width:130px;}
    .cubeWrapper .cubeData{font-size:24px;}
    .cubeWrapper.chartCube {width:250px; min-height:212px;}
    #productsFilter {display: inline-block;margin-left: 16px;width:138px;}
    #productData {margin:0;}
    #sales {cursor:pointer;background-image: url('../images/info1.png');background-repeat: no-repeat;background-position: 40px 10px;background-size: 20px 20px;}
    #waste {cursor:pointer;background-image: url('../images/info1.png');background-repeat: no-repeat;background-position: 36px 10px;background-size: 20px 20px;}
    #uploads {cursor:pointer;background-image: url('../images/info1.png');background-repeat: no-repeat;background-position: 12px 10px;background-size: 20px 20px;}

    #productsFilter .ui-widget.ui-widget-content {height: 32px;color: #2D2D4F;font-weight: bold;width: 80%;text-indent: 4px;border: 1px solid #ededed;background: none;outline: none;}

    #storesSearchListWrapper {
        background-color: green;
    }

}


/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}


@media print {
    @page {
        size: auto; /* auto is the initial value */
        margin: 0mm; /* this affects the margin in the printer settings */
    }

    body {
        margin: 0;
    }


    .pagebreak {
        clear: both;
        /*page-break-after: always;*/
        page-break-before: always;
    }

    #userLang, #logout {
        display: none !important;
        visibility: hidden !important;
    }



    #leftPane {
        display: none !important;
        width: 0% !important;
        min-width: 0px !important;
    }

    #centerPane {
        width: 100% !important;
    }

    .cubeWrapper {
        width: 110px !important;
    }

    .graphBoxRight, .graphBoxLeft {
        width: 90% !important;
    }

    .graphWrapperLeft, .graphWrapperRight {
        width: 90% !important;
    }

    .bottomTableContainer {
        margin-top: 25mm !important;
    }

    .bottomTableWrapper {
        height: 900px !important;
    }
}