/*
 * Base 4*5 grid
 *
 * medium
 */
.grid-item {
   height: 204px;
   width: 189px;
}
.grid-item[data-colspan='2'] { width: 378px; }
.grid-item[data-colspan='3'] { width: 567px; }
.grid-item[data-colspan='4'] { width: 756px; }
.grid-item[data-colspan='5'] { width: 945px; }
.grid-item[data-colspan='6'] { width: 1134px; }
.grid-item[data-colspan='7'] { width: 1323px; }
.grid-item[data-colspan='8'] { width: 1512px; }
.grid-item[data-colspan='9'] { width: 1701px; }
.grid-item[data-colspan='10'] { width: 1890px; }

.grid-item[data-rowspan='2'] { height: 408px; }
.grid-item[data-rowspan='3'] { height: 612px; }
.grid-item[data-rowspan='4'] { height: 816px; }

/*
 * chart_view
 */
.page-container[data-page='chart_view'] .grid-item {
   height: 102px;
   width: 236px;
}
.page-container[data-page='chart_view'] .grid-item[data-colspan='2'] { width: 472px; }
.page-container[data-page='chart_view'] .grid-item[data-colspan='3'] { width: 708px; }
.page-container[data-page='chart_view'] .grid-item[data-colspan='4'] { width: 944px; }
.page-container[data-page='chart_view'] .grid-item[data-colspan='5'] { width: 1180px; }
.page-container[data-page='chart_view'] .grid-item[data-colspan='6'] { width: 1416px; }
.page-container[data-page='chart_view'] .grid-item[data-colspan='7'] { width: 1652px; }
.page-container[data-page='chart_view'] .grid-item[data-colspan='8'] { width: 1888px; }


.page-container[data-page='chart_view'] .grid-item[data-rowspan='2'] { height: 204px; }
.page-container[data-page='chart_view'] .grid-item[data-rowspan='3'] { height: 306px; }
.page-container[data-page='chart_view'] .grid-item[data-rowspan='4'] { height: 408px; }
.page-container[data-page='chart_view'] .grid-item[data-rowspan='5'] { height: 510px; }
.page-container[data-page='chart_view'] .grid-item[data-rowspan='6'] { height: 612px; }
.page-container[data-page='chart_view'] .grid-item[data-rowspan='7'] { height: 714px; }
.page-container[data-page='chart_view'] .grid-item[data-rowspan='8'] { height: 816px; }

@media only screen and (min-width: 3840px) and (max-width: 4092px)
{
   .casper > .header {
      height: 148px;
   }

   .page-container {
      padding-top: 150px;
      padding-bottom: 90px;
   }

   .page-container > .page
   {
      padding: 10px;
   }

   .grid-item {
      height: 408px;
      padding: 10px;
      width: 378px;
   }
   .grid-item[data-colspan='2'] { width: 756px; }
   .grid-item[data-colspan='3'] { width: 1134px; }
   .grid-item[data-colspan='4'] { width: 1512px; }
   .grid-item[data-colspan='5'] { width: 1890px; }
   .grid-item[data-colspan='6'] { width: 2268px; }
   .grid-item[data-colspan='7'] { width: 2646px; }
   .grid-item[data-colspan='8'] { width: 3024px; }
   .grid-item[data-colspan='9'] { width: 3402px; }
   .grid-item[data-colspan='10'] { width: 3780px; }

   .grid-item[data-rowspan='2'] { height: 816px; }
   .grid-item[data-rowspan='3'] { height: 1224px; }
   .grid-item[data-rowspan='4'] { height: 1632px; }

   .grid-item-container > .grid-item-header {
      font-size: 24px;
      height: 50px;
      line-height: 50px;
      padding-left: 12px;
   }

   .grid-item-container > .grid-item-content {
      padding: 62px 12px 12px 12px;
   }
}