@charset "UTF-8";

*, *::before, *::after{
    box-sizing:border-box;
  }

  :root{
    --base-color: #1f303f;
    --base-dark: #17232f;
    --base-width: 1200px;
    --secondary-color: #478fcc;
    --contrast-color: #FFFFFF;
    --listing-background: #2b3d50;
    --nav-background: #2b3d50;
    --nav-border: #bbc0c5;
    --nav-chosen: #4a768c;
    --nav-color: #fefeec;
    --alert-color: #F8F89A;
    --shade-color: #F2F2F2;
    --gray: #D2D2D2;
    --border-color: #cccccc;
    --dark-border: #17232f;
  }

  html {
    margin: 0;
  }

body {
    background: var(--contrast-color);
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    position: relative;
}

wrapper {
    background:var(--base-dark);
    display: block;
    height: 100vh;
    margin: 0 auto;
    padding: 0 0 1.5rem 0;
    max-width: 1200px;
    width: var(--base-width);
}

header {
    background: var(--base-color);
}
header ul {
    color: var(--contrast-color);
    align-items: center;
    display: grid;
    grid-gap: 0;
    grid-template-columns: 5fr 5fr;
    list-style:none;
    margin: 0;
    padding: 0;
}
header ul li {
    font-size: .9rem;
    font-weight: 400;
    padding: 1rem;
    text-align:left;
}
header ul li.right {
    text-align:right;
}
header ul li.heading{
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
}
header ul li.heading div {
    display: block;
    font-size: .9rem;
    font-weight: 500;
}
header ul li.next {
    color: var(--alert-color);
    font-size: .8rem;
    font-weight: 700;
    text-align:right;
    text-transform: uppercase;
}
header ul li.next span {
    color: var(--contrast-color);
    display: block;
}

nav {
    background: var(--nav-background);
    display: flex;
}
nav ul {
    display: flex;
    font-size: .9rem;
    list-style:none;
    margin: 0;
    padding: 0;
}
nav ul.right {
    margin: 0 0 0 auto;
}
nav ul li {
    text-align:left;
}
nav ul li.right {
    margin-left: 0;
}
nav ul li a {
    border-right: 1px solid var(--nav-border);
    color: var(--nav-color);
    display: block;
    padding: .5rem 1.5rem .5rem 1.5rem;
    text-decoration: none;
}
nav ul.right li a {
    border-right: none;
    border-left: 1px solid var(--nav-border);
}
nav ul li a:hover {
    background: var(--base-dark);
    color: var(--contrast-color);
}
nav ul li a.chosen {
    background: var(--nav-chosen);
    color: var(--contrast-color);
}
subheader {
    background: var(--nav-chosen);
    border-bottom: 1px solid var(--nav-border);
    color: var(--contrast-color);
    display: block;
    font-size: .9rem;
    font-weight: 500;
    padding: .75rem 1.5rem;
}

main {
    background: var(--base-color);
    display: block;
    margin: 0 auto;
    min-height: 100%;
    padding: 1.5rem;
}

ul.listing {
    background: var(--listing-background);
    color: var(--contrast-color);
    display: block;
    font-size: .9rem;
    font-weight: 300;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.listing li {
    border-bottom: 1px solid var(--nav-border);
    align-items:center;
    display:grid;
    grid-template-columns: repeat(18,1fr);
    margin: 0;
}
ul.listing li:first-child {
    border-top: 1px solid var(--nav-border);
}
ul.listing li:hover {
    background: var(--nav-chosens);
}

.big-date {
    font-size: 1.2rem;
    font-weight: 700;
}
.right {
    text-align: right;
}
.top-pad {
    padding: .5rem .5rem 0 .5rem;
}
.lower-pad {
    padding: 0rem .5rem .5rem .5rem;
}
.normal-pad {
    padding: .5rem;
}

.list-grid-1 {
    grid-column: span 1;
}
.list-grid-2 {
    grid-column: span 2;
}
.list-grid-3 {
    grid-column: span 3;
}
.list-grid-4 {
    grid-column: span 4;
}
.list-grid-5 {
    grid-column: span 5;
}
.list-grid-6 {
    grid-column: span 6;
}
.list-grid-7 {
    grid-column: span 7;
}
.list-grid-8 {
    grid-column: span 8;
}
.list-grid-9 {
    grid-column: span 9;
}
.list-grid-10 {
    grid-column: span 10;
}
.list-grid-11 {
    grid-column: span 11;
}
.list-grid-12 {
    grid-column: span 12;
}
.list-grid-all {
    grid-column: 1 / -1;
}

.zoomlink {
    color: var(--alert-color);
    text-decoration: none;
}
.zoomlink:hover {
    color: var(--contrast-color);
}

.orange {
    background: orange;
}