/** responsive design **/
@media(min-width: 850px){
  form > div { display: inline-block; }
  .col-submit { display: block; }
  
  .col-2, .col-3, .col-4 { box-shadow: 1px 1px #e4e4e4; border: none; }
  
  .col-2 { width: 50% }
  .col-3 { width: 33.3333333333% }
  .col-4 { width: 25% }
  
  .col-submit button { width: 30%; margin: 0 auto; }
}

thead th, tfoot td
{
  font-weight: bold;
  text-align: center;
  font-family: 'Calibri';
  font-size: 14px;
  text-align: center;
}

tbody
{
  font-weight: bold;
}

#addTableRow
{
  padding: 10px;
  background: #555;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

.appTableBody td, #table_compressibility td
{
  font-family: 'Calibri';
  letter-spacing: 1px;
  font-size: 11px;
}

td#big_e , td#compressibility
{
  font-size: 30px;
  padding-top: 25px;
  padding-left: 16px;
  text-align: center;
}

#table_compressibilty tbody tr
{
  border-top: none; 
}

.table.no-border tr td, .table.no-border tr th {
  border-width: 0;
}

#table_app_1 thead
{
  /*background: #B2EBF2;*/
}

.header_part
{
  width: 800px;
  height: 100px;
  margin: auto;
  border-style: solid;
  border-width: 3px;
  border-color: lightblue;
  border-radius: 20px;
  background: #B2EBF2;
  padding-bottom: 100px;
}
.header_part .tile_group, .header_part .tile
{
  border-radius: 20px;
}
.header_part .tile .name
{
  color: rgb(31,31,31);
}

.compressibility_summary
{
  width: 775px;
  height: 300px;
  background: null;
  margin: auto;
  background: #7986CB;
}

.tile_group
{
  float: left;
  background: white;
  background: #7986CB;
}
.tile
{
  float: left;
  height: 100px;
  background: white;
  background: #7986CB;
  padding: 20px;
  color: white;
}
.tile .input
{
 padding-top: 8px;
 color: black; 
}
.tile .input input
{
  letter-spacing: 0.5px;
  font-family: 'Calibri';
}
.tile select
{
  color: black;
}
.tile .value
{
  font-family: 'Segoe UI Light';
  font-size: 32px;
  text-align: left;
}
.tile .name
{
  font-family: 'Calibri';
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

table#table_app_1 td:nth-child(3), table#table_app_1 td:nth-child(12) 
{
  display: none;
}

table#table_app_1 td:nth-child(1)
{
  text-align: left;
}

table#table_app_1 td:nth-child(2)
{
  background: #F4FF81;
}
table#table_app_1 tfoot td:nth-child(2)
{
  background: none;
}

table#table_app_1 td
{
  font-family: 'Helvetica Neue', Verdana, Arial, sans-serif;;
  letter-spacing: 0px;
  font-size: 12px;
  font-weight: normal;
}

#table_app_1
{
  max-width: 1300px;
  margin: auto;
}


.error
{
  font-family: 'Segoe UI';
  color: maroon;
  font-weight: bold;
  font-size: 12px;
}

.rearrange
{
  float: left;
  font-family: 'Calibri';
  font-size: 14px;
  font-style: italic;
  font-weight: bold;
  color: rgb(100,100,100);
  cursor: pointer;
  padding-left: 15px;
  margin-top: 10px;
}
.rearrange:hover
{
  color: rgb(40,40,40);
}

.wrapper {
  margin-top: -40px;
}

.header_part {
  width: 900px;
}

#input_area .tile {
  background: white;
}

#input_area .tile .name, #tile_left .name {
  margin-top: -10px;
  font-size: 15px;
  color: #0080FF;
  font-weight: bold;
  font-family: 'Calibri';
  padding-left: 7px;
  text-align: left;
  margin-bottom: 5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 15px;
}

#input_area .tile input, #tile_left input {
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: #EDEDED;
  font-family: 'Calibri';
  padding-bottom: 10px;
  padding-top: 10px;
  outline: none;
}
#input_area .tile select, #tile_left select {
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: #EDEDED;
  font-family: 'Calibri';
  padding-bottom: 5px;
  outline: none;
}

table {
  max-height: 100px;
  overflow: hidden;
}

.appTableBodyCover {
  max-height: 500px;
  overflow-y: scroll;
}

#table_app_1 input {
  width: 80px;
}

thead th {
  font-family: 'Calibri';
  letter-spacing: 0.5px;
}

#specific_gravity {
  font-weight: bold;
}

.row {
  border-style: none;
}