/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat','sans-serif','verdana';
}
  
  /* Define color scheme and fonts */
:root {
  --primary-color: #F94;
  --secondary-color: #8cb5f2;
  --white: #ffffff;
  --background: #324e6a;
  --light-gray: #F5F5F5; /* Light grey for backgrounds */
  --dark-gray: #333333; /* Dark grey text */
  --font-family: 'Arial', sans-serif;
  --font-size: 16px;
  --font-size-large: 22px;
  --border-radius: 8px;
  --transition: 0.3s;
}

/* NAV start */

div.logo {
  padding:2px;
}

div.navbar {
  padding:10px;
  height:72px;
  background-color: var(--background);
  color:var(--white);
  min-width:100vw;
}

div.navbar ul.nav-list {
  display: flex;
  flex-direction: row;
  font-size:14px;
  width:100vw;
  list-style: none;
  gap:10px;
}

div.navbar ul.nav-list li a {
  display: block;
  padding:4px;
  text-decoration: none;
  color:var(--white);
}

div.navbar ul.nav-list li a:hover {
  color:var(--secondary-color);
}

div.navbar ul.nav-list li.align-right {
  justify-self: flex-end;
}

/* NAV end */

footer {
  text-align: center;
  font-size:12px;
}

div.main-content {
  min-height:calc(100vh - 120px);
  width:90%;
  margin:0 auto;
  padding:10px 0 10px 0;
}

table {
  border-collapse: collapse;
  background-color: var(--white);
  filter: drop-shadow(5px 5px 10px #ccc);
  width:100%;
}

tr:nth-child(even) td {
  background-color: #f3f3f3;
}

tr:hover td {
  background-color: var(--dark-gray);
  color:#FFF;
}

td, th {
  text-align: left;
}

tr.shipment-head th {
  background-color: var(--secondary-color);
  padding:20px;
  color:var(--white);
  border-bottom:2px #ccc solid;
}

tr.shipment-body td {
  font-size:20px;
  padding:8px;
}

tr.packages-body td, tr.packages-head th {
  font-size:12px;
  padding:4px;
  background-color: #eee;
}

div.search input, div.search button {
  padding:8px;
  margin:5px;
  border-radius:4px;
  border:solid 1px #000;
  float:right;
}