.datatable-header {
    /*background-color: #c9c6cbba;*/
    border: 3px solid #204e81;
    border-bottom-width: 3px;
    padding: 0px;
    padding-bottom: 16px;
    

}

.datatable-header > .box-title{
    background-color: #204e81;
    padding: 18px;
    margin-bottom: 10px;
    color: #fff;
    font-size: 22px;
    font-variant: all-small-caps;
    
    
    

}

.navbar-default {
 
    border-color: #2c5e7b;
}
.dashboard-add {
	margin-top: 15px;
	margin-bottom: 15px;
}
.footer-copyright {
	padding: 20px;
	background-color: #f5f5f5;
}
 
  /*footer a {
      color: #f5f5f5;
  }
  footer a:hover {
      color: white;
      text-decoration: none;
  }*/


  /* PurchaseOrder */
  .table-grid{
    display: grid;
    width:80%;
    max-width: 95vw;
    margin:0px auto;
    height:100px;
    /* background-color: sandybrown; */
    grid-template-columns: 200px repeat(8, auto) 90px;
}
.each-section{
    
    display:grid;
    grid-template-rows: 50% 50%;
    
}



.each-section div{
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 10px;
    border: 1px solid #ccc;
}
.section-label{
    font-weight:700;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:14px;
   
}
.section-input{
    background-color: #eee !important;
}

#oilDetailsVertical{
    display: none;
}

@media screen and (max-width:720px){
    .table-grid{
        display: flex;
        flex-direction: column;
        height:auto;
    }
    #oilDetailsHorizontal {
        display: none;
    }
    #oilDetailsVertical{
        display: block;
    }

    .each-section{
        grid-template-rows: 100%;
        grid-template-columns: 40% 60%;
        padding: 0px 0px;
    }
    .each-section div{
        padding: 10px;
    }
    .section-input input[type=button]{
        width:80%;
    }
}