/* The NSE palette over the legacy GWT pages (layout/header.blade.php -
 * /train and its steps, the calculators) when they are served on the NSE
 * domain. Loaded after the page's own CSS, NSE only.
 *
 * A skin, not a rebuild: these pages are Bootstrap 3 markup, and only
 * type, colour and buttons change here.
 */

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cloud);
}

h1, h2, h3, .hgroup h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--ink);
}

a,
.nav-pills > li > a {
  color: var(--teal);
}

a:hover,
a:focus {
  color: var(--teal-dark);
}

/* Every coloured button on these pages - Bootstrap's, the calculators'
   orange submit, and the training steps' next/back - becomes the NSE
   pill. dreamCard.css styles the last two by id, hence the ids here. */
.btn-success,
.btn-primary,
body .btn_submit_bg,
body #btn_submit,
body .btn_last_or_next {
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--white);
  letter-spacing: 1px;
  padding: 8px 22px;
}

.btn-success:hover,
.btn-success:focus,
.btn-primary:hover,
.btn-primary:focus,
body .btn_submit_bg:hover,
body .btn_submit_bg:focus,
body #btn_submit:hover,
body #btn_submit:focus,
body .btn_last_or_next:hover,
body .btn_last_or_next:focus {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background: var(--teal);
  border-radius: 999px;
}

.form-control {
  border-color: #D5DEDE;
  border-radius: 10px;
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--teal);
  box-shadow: none;
}