body {font-family: Roboto, sans-serif;}      

    #grid * {
      box-sizing: border-box;
    }
    
    #grid ul {  
      display: table;      
      margin: 0;
      padding: 0;
      line-height: 0;
      font-size: 0;
      list-style: none;      
    }
    
    #grid ul.row {
        background-color: white;        
    }
    
    #grid li {
        display: table-cell;        
        text-align: center;
        vertical-align: middle;
        font-family: Roboto, sans-serif;        
        height: 50px;
        -webkit-transform: translate3d(0,0,0);
        width: 200px;        
    }
    
    #grid .head li {
        font-size: 12px;
        color: rgb(117,117,117);
        font-weight: bold;        
    }
    
    #grid ul.body {
        border-bottom: 1px rgb(224,224,224) solid;
    }    
       
    #grid .body li, #grid .body label {
        font-size: 13px;
        color: rgb(33,33,33);           
    }
        
    #grid {
        position: relative;                            
        background-color: #fcfcfc;
    }      
    #tl, #t, #l, #m { overflow: hidden; background-color: white; }     
    #l, #m { background-color: #fcfcfc; -webkit-transform: translate3d(0,0,0);}     
        
    #tl {position:absolute;top:64px;left:0;width: 200px;height:50px;z-index: 4; clip: rect(-10px, 260px, 50px, -10px);  } /* Use clip to show that the box is 1 above the fixed left col, but 2 above the background. */
    #tl-inner { position:absolute;bottom:0;left:0;height: 50px; width: 100%; }
    
    #t { position:absolute;top:0;left:0;height: 114px; width: 100%;z-index: 3;}
    #card-top { position:absolute;top:0;left:0;height: 50px; width: 100%;  }
    #t-inner { position:absolute;bottom:0;left:200px;height: 50px; width: calc(100% - 200px);}
        #t-inner .scroller {width:1800px;}          

    #l { position:absolute;top:0;left: 0; width: 200px; height: 100%; z-index: 2;}
    #l-inner { position:absolute;top:114px;left: 0; width: 200px; height: calc(100% - 114px); z-index: 2; }
        #l .scroller {height: 1800px; width: 200px;}
    #m { position:absolute;top:114px;left: 200px; width: 1800px; height: calc(100% - 114px); width: calc(100% - 200px);}
        #m .scroller {width:1800px; height: 500px;}
 
    /*Infinity scroll*/
    #l .scroller, #m .scroller {
        position: absolute;
    }
    
    #l ul.row, #m ul.row {        
        position: absolute;
        top: 0;
        left: 0;
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        transform: translateZ(0);        
    }

    /*ul.row.body.hover li { background-color: #eee;}*/
    
    #viewframe {
        width: 100%;
        height: 522px;                 
    }     

    #grid {
        width: 100%;
        height: 100%;        
    }
    
    
#loader { position: absolute; top: 113px; left: 0; right: 0; z-index: 4; 
    opacity: 0;    
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

/*Overrides*/
.progress{height:3px;margin: 0;background-color:#b3e5fc;}
.progress .determinate{background-color:#03a9f4;}
.progress .indeterminate{background-color:#03a9f4}

#search-container {
    position: absolute;
    top: 15px; right: 10px; margin: 0;
    max-width: calc(100% - 200px);
    height: 40px;     
    width: 0;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.2s ease-in-out;
    transition: width 0.2s ease-in-out;
}

#search-container.open { width: 300px; }
#search-container #close-search { display: none; }
#search-container.open #close-search { display: block; }

#search {
    font-size: 16px;
    margin: 0;
    padding: 5px 0;
    height: auto;
    width: 100%;
}

/*#search-container.open #open-search { left: -36px; }*/

#open-search {
    position: absolute;
    left: -36px;
    top: 0;
    font-size: 32px;
    color: rgb(117,117,117);    
}

#search-container.open #open-search { color: rgb(33,33,33);  }

#close-search {
    position: absolute;
    right: 0;
    top: 2px;
    font-size: 24px;
    color: rgb(33,33,33);           
}

#card-top h3 { font-size: 20px; color: rgb(33,33,33); margin: 18px 0 0 24px; padding: 0;}

ul.row li.sortable {cursor: pointer;}
ul.row li i.sort-icon { visibility: hidden; margin-left: -18px; transition: transform .25s;}
ul.row li.sorted i.sort { visibility: visible; }
ul.row li.sortable:hover:not(.sorted) i.sort-icon { visibility: visible; color: rgb(189,189,189);}

#grid ul.head li.sorted { color: rgb(33,33,33); }

ul.row li i.sort-icon { font-size: 16px; color: rgb(33,33,33); vertical-align: middle; margin-top: -4px;margin-right:6px;}
ul.row li i.sort-desc { margin-top: -2px; transform: rotate(180deg);}
ul.row li.sorted i.sort-icon { visibility: visible;}


/*li .bar { background-color: #03a9f4; position: absolute; top: 0px; left:0; bottom:0px; }*/
li .text {z-index: 1; position: relative;}

#grid ul.selected { background-color: #f5f5f5; }
#grid ul.hover { background-color: #EEEEEE;}