:root{
  --flint-navy:#122333;
  --flint-navy-2:#1e2a3a;
  --flint-accent:#8bb0d4;
  --flint-accent-2:#6b8db5;
  --flint-muted:#4a6d8c;
  --flint-bg:#f6f8fb;
}

html,body{height:100%}
body{
  background: var(--flint-bg);
}

/* Navbar */
.portal-nav{
  background: var(--flint-navy) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.portal-nav .navbar-brand,
.portal-nav .nav-link{
  color:#fff !important;
}
.portal-nav .nav-link{opacity:.9}
.portal-nav .nav-link:hover{opacity:1;color:var(--flint-accent)!important}

/* Buttons */
.btn-primary{
  background: var(--flint-accent-2) !important;
  border-color: var(--flint-accent-2) !important;
  color:#0b1622 !important;
  font-weight:600;
}
.btn-primary:hover,
.btn-primary:focus{
  background: var(--flint-accent) !important;
  border-color: var(--flint-accent) !important;
  color:#0b1622 !important;
}
.btn-outline-primary{
  border-color: rgba(139,176,212,.65) !important;
  color: var(--flint-accent) !important;
}
.btn-outline-primary:hover{
  background: rgba(139,176,212,.12) !important;
  color: #fff !important;
}

/* Cards */
.card{
  border: 1px solid rgba(18,35,51,.08);
  border-radius: 16px;
}
.card.shadow-sm{
  box-shadow: 0 10px 30px rgba(18,35,51,.08) !important;
}

/* Links */
a{color: var(--flint-muted)}
a:hover{color: var(--flint-accent-2)}

/* Form focus */
.form-control:focus{
  border-color: rgba(107,141,181,.7);
  box-shadow: 0 0 0 .25rem rgba(107,141,181,.18);
}
/* Dark dropdown (admin menu) */
.dropdown-menu-dark{
  background: var(--flint-navy-2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: .5rem 0;
}
.dropdown-menu-dark .dropdown-item{
  color: rgba(255,255,255,.85);
  padding: .5rem 1.25rem;
}
.dropdown-menu-dark .dropdown-item:hover{
  background: rgba(139,176,212,.12);
  color: #fff;
}

/* Fix toggler icon on dark bg */
.portal-nav .navbar-toggler-icon{
  filter: invert(1);
}

/* Calmer tables */
.table td, .table th {
  vertical-align: middle;
  padding: .75rem 1rem;
}
.table-hover tbody tr:hover {
  background: rgba(107,141,181,.04);
}