body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; padding: 16px; } @media screen and (max-width: 600px){ main { padding: 16px 0px; } } nav .brand-logo { font-size: 1.8rem; } .invoice-table table { border-collapse: collapse; } .invoice-table th, .invoice-table td, .invoice-table table { border: 1px solid black; } @media screen and (max-width: 993px){ nav .brand-logo { font-size: 1.6rem; width: 70%; text-align: center; } } @media screen and (max-width: 600px){ nav .brand-logo { font-size: 1rem; width: 70%; text-align: center; } } .container { width: 94%; } @media screen and (min-width: 993px){ .container { width: 90%; } } @media screen and (min-width: 601px){ .container { width: 96%; } } .show-on-medium-and-down { display: none; } @media screen and (max-width: 992px) { .show-on-medium-and-down { display: block; } .show-on-medium-and-down.inline-block { display: inline-block !important; } td.show-on-medium-and-down, th.show-on-medium-and-down { display: table-cell !important; } } .btn.btn-block { display: inline-block; width: 100%; margin-bottom: 8px; } @media screen and (max-width: 600px){ .btn-block-sm { display: inline-block; width: 100%; margin-bottom: 8px; } } @media screen and (min-width: 601px) { .show-on-small { display: none !important; } .show-on-small-inline { display: none !important; } } @media screen and (max-width: 600px){ .show-on-small { display: block !important; } .show-on-small-inline { display: inline !important; } tr.show-on-small { display: table-row !important; } table.show-on-small { display: table !important; } } table.additional.striped>tbody>tr:nth-child(odd) { background-color: initial !important; } table.additional.striped>tbody>tr:nth-child(4n+1) { background-color: #f2f2f2 !important; } table.additional.striped>tbody>tr:nth-child(4n+1) + .additional-row { background-color: #f2f2f2 !important; } .additional-row .row { margin: 0; } table.additional.bordered>tbody>tr { border-bottom: none !important; } table.additional.bordered>tbody>tr:not(:first-child) { border-top: 1px solid #d0d0d0 !important; } table.additional.bordered>tbody>tr.additional-row { border-top: none !important; } .no-margin { margin: 0 !important; } td.half { width: 50%; } @media screen and (max-width: 600px){ .loads-container { margin: 0 !important; } .loads-container .card-content { padding: 0 !important; } .loads-container td { padding: 8px; } .loads-container .row{ margin: 0; } .loads-container .col{ padding: 0 !important; } .loads-container .card-title{ padding-left: 8px; padding-top: 8px; } }