@import url("reset.css");

body {
  margin: 0px;
  padding: 0px;
  background-color: #242424;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  line-height: 1.23;
  color: #FFFFFF;
}

header {
  margin-bottom: 22px;
  padding: 24px;
  padding-bottom: 18px;
}

main {
  margin-top: 16px;
  margin-bottom: 16px;
}

h1 {
  font-size: 28px;
}
h3 {
  font-size: 15px;
  font-weight: normal;
}

time[class^=time_],
data[class^=hour_] {
  display: flex;
  width: 50px;
  margin-top: 4px;
  color: #999999;
}
data[class^=hour_] {
   width: 40px;
}

ul, ul li {
  border: 0px solid #333333;
  border-width: 1px 0px;
}
ul li {
  margin-top: -1px;
  margin-bottom: -1px;
}
ul li:not(:only-child):last-child {
  margin-top: 0px;
}

section.roster ol > li {
  margin-bottom: 18px;
}
ol li[data-group]::before {
  content: attr(data-group);
  display: flex;
  padding: 6px 24px;
  color: #AAAAAA;
  text-transform: capitalize;
}
article.duty {
  padding: 10px 24px;
  padding-left: 21px;
  border-left: 3px solid transparent;
}
article.duty div {
  display: flex;
  align-items: baseline;
  grid-gap: 8px;
}
div.duty_details {
  font-size: 15px;
}
h3.duty_code {
  width: 70px;
  font-weight: bold;
}
span.flight_sector {
  display: flex;
  grid-gap: 8px;
}
abbr.port_code {
  width: 50px;
}
span.duty_special {
  margin-left: auto;
  color: #AAAAAA;
  font-style: italic;
}
time.time_duty_start {
  margin-left: 20px;
}
time.time_duty_end {
  margin-right: auto;
}
data[class^=hour_] {
  justify-content: flex-end;
}