/* ARG's original logo, with red accents on charcoal and warm white surfaces. */
:root {
  --brand-red: #bd2028;
  --brand-red-bright: #ef343d;
  --charcoal: #191b20;
}

.brand {
  display: block;
  line-height: 0;
}
.brand img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
.sidebar {
  width: 248px;
  padding: 30px 24px;
  border-right: 1px solid #292c33;
}
.sidebar .brand {
  padding: 0 4px 22px;
  border-bottom: 1px solid #35383f;
}
.sidebar .brand img {
  width: 192px;
  height: auto;
  margin: 0 auto;
}
.nav-caption { margin-top: 26px; }
.main-wrap { margin-left: 248px; }
nav a.active { box-shadow: inset 3px 0 0 var(--brand-red-bright); }
nav a.active > span { color: #ff9297; }
.pilot-dot:before { background: var(--brand-red-bright); }
.sidebar-footer p { color: #adb2bc; }
.primary { box-shadow: 0 3px 8px #bd202814; }
.primary:active { background: #8f151e; }
.stat.featured {
  border-top: 3px solid var(--brand-red-bright);
  padding-top: 18px;
}
.stat.featured .stat-label > span { color: #ff9ba0; }
.pill { border: 1px solid #f1cfd2; }
.notice.info strong { color: #333b47; }
.tabs button.active { border-bottom-width: 3px; }
.login-story {
  background: var(--charcoal);
  border-top: 5px solid var(--brand-red-bright);
}
.login-story .brand img { width: 266px; height: auto; }
.login-story h1 { max-width: 560px; }
.login-story .light { color: #ff999e; }
.login-panel { background: #faf9f7; }
.login-card .pill { padding: 7px 10px; }
.modal-head { border-top: 3px solid var(--brand-red); }
.modal-head .eyebrow { color: var(--brand-red); }

@media (min-width: 1500px) {
  .stat.featured { padding-top: 22px; }
}
@media (max-width: 1100px) {
  .sidebar { width: 196px; padding: 26px 16px; }
  .sidebar .brand img { width: 156px; height: auto; }
  .main-wrap { margin-left: 196px; }
  .stat.featured { padding-top: 16px; }
  .login-story { padding: 44px; }
  .login-story h1 { font-size: 46px; }
}
@media (max-width: 800px) {
  .sidebar { width: 100%; padding: 18px 18px 0; border-right: 0; }
  .sidebar .brand { padding: 0; border-bottom: 0; }
  .sidebar .brand img { width: 148px; height: auto; margin: 0; }
  .main-wrap { margin-left: 0; }
  nav { margin-top: 18px; }
  nav a.active { box-shadow: inset 0 -3px 0 var(--brand-red-bright); }
  .stat.featured { padding-top: 15px; }
  .login-screen { grid-template-rows: auto 1fr; }
  .login-story { padding: 26px 28px; }
  .login-story .brand img { width: 184px; height: auto; }
}
@media (max-width: 390px) {
  .stat.featured { padding-top: 13px; }
}