tr:nth-of-type(odd) { 
  background: #d7d7d7 !important; 
}
 tr:nth-of-type(evem) { 
  background: #fff !important; 
}
th { 
  background: rgb(28,108,181) !important; 
  color: white; 
  font-weight:bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
 
}
td:nth-of-type(5), td:nth-of-type(6),td:nth-of-type(7){
    text-align:right !important;
}
@media 
only screen and (max-width: 760px) {
	/* Force table to not be like tables anymore */
	
	table, thead, tbody, th, td, tr { 
		display: block; 
		font-size:13px;
		
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	.col-md-4
    {
        text-align:left !important;
        width:50% !important;
	}
	 
} 
.trCss
        {
            display:bloc;
        }
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	tr {
        border: 3px solid #1a4a7f !important;
          width:auto !important;
		  margin-left:5px;
		  margin-right:5px;
      
    }
}
 
@media only screen and (min-width: 320px) and (max-width: 767px) {
   
    tr {
        border: 3px solid #1a4a7f !important;
          width:300px !important;
		  margin-left:5px;
		  margin-right:5px;
      
    }

        tr + tr {
            margin-top: 1.5em !important;
        }

        tr:nth-child(odd) {
            background: #fff !important;
            color: #1a4a7f !important;
        }

        tr:nth-child(even) {
            background-color: #F9F6F9 !important;
            color: #1a4a7f !important;
        }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
      font-size:10px !important;
        margin-left:3px !important;
         
           
    }
    
        td:before {
            /* Now like a table header */
          word-wrap:normal !important;
            top: 0 !important;
            
            padding-left:10px !important;
              font-size:10px !important;
			  
        }

        /*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-

shadow.
		*/
        td:nth-of-type(5), td:nth-of-type(6),td:nth-of-type(7){
    text-align:justify !important;
}
        td:nth-of-type(1):before {
            content: "Program: ";
            font-weight: 700;
        }

       
        td:nth-of-type(2):before {
            content: "Category: ";
            font-weight: 700;
        }
        td:nth-of-type(3):before {
            content: "location: ";
            font-weight: 700;
        }
        
        td:nth-of-type(4):before {
            content: "Measure Name: ";
            font-weight: 700;
        }
         td:nth-of-type(5):before {
            content: "Quantity: ";
            font-weight: 700;
        }
          td:nth-of-type(6):before {
            content: "Incentive: ";
            font-weight: 700;
        }
td:nth-of-type(7):before {
            content: "kWh savings: ";
            font-weight: 700;
        }
           td:nth-of-type(8):before {
            content: "Delete: ";
            font-weight: 700;
        }

        #tableUpload  tr >td:nth-of-type(1):before {
            content: "File Name: ";
            font-weight: 700;
        }

          #tableUpload tr >td:nth-of-type(2):before {
            content: "File Type: ";
            font-weight: 700;
        }
           #tableUpload tr >td:nth-of-type(3):before {
            content: "Delete: ";
            font-weight: 700;
        }
              #tablestatus  tr >td:nth-of-type(1):before {
            content: "Company Name: ";
            font-weight: 700;
        }

          #tablestatus tr >td:nth-of-type(2):before {
            content: "Account Number: ";
            font-weight: 700;
        }
           #tablestatus tr >td:nth-of-type(3):before {
            content: "Application Status: ";
            font-weight: 700;
        }
             #tablestatus tr >td:nth-of-type(4):before {
            content: "Application ID: ";
            font-weight: 700;
        }
               #tablestatus tr >td:nth-of-type(5):before {
            content: "Site Name: ";
            font-weight: 700;
        }
                 #tablestatus tr >td:nth-of-type(6):before {
            content: "Address: ";
            font-weight: 700;
        }
                   #tablestatus tr >td:nth-of-type(7):before {
            content: "City: ";
            font-weight: 700;
        }
                        #tablestatus tr >td:nth-of-type(8):before {
            content: "ZIP: ";
            font-weight: 700;
        }
                             #tablestatus tr >td:nth-of-type(9):before {
            content: "Created On: ";
            font-weight: 700;
        }
                                 #tablestatus tr >td:nth-of-type(10):before {
            content: "Edit: ";
            font-weight: 700;

        }
        .trCss
        {
            display:none;
        }
}