/*
 * Keeps the site looking as it did under Bootstrap 3 after the move to Bootstrap 5.
 * Load this after bootstrap/css/bootstrap.min.css.
 */

/* Glyphicons: only the plus/minus icons used on the "Read abstract" buttons */
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-plus:before { content: "\2b"; }
.glyphicon-minus:before { content: "\2212"; }
/* A collapse toggle shows a minus sign while its panel is open (Bootstrap sets aria-expanded) */
[aria-expanded="true"] > .glyphicon-plus:before { content: "\2212"; }

/* Jump straight to anchors; Bootstrap 5's smooth scrolling fights the navbar offset in index.html */
:root { scroll-behavior: auto; }

/*
 * Text scale: 1 matches Bootstrap 3 (14px body text). Wide screens get 16px text and
 * a wider container (see Grid below). Below 1400px the expanded navbar has no room
 * for larger text.
 */
:root { --text-scale: 1; }
@media (min-width: 1400px) {
  :root { --text-scale: 1.142857; }
}

/* Typography and colors */
:root {
  --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bs-body-font-size: calc(14px * var(--text-scale));
  --bs-body-line-height: 1.428571429;
  --bs-body-color: #333;
  --bs-link-color-rgb: 66, 139, 202;
  --bs-link-hover-color-rgb: 42, 100, 150;
}
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; }
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
h1 { font-size: calc(36px * var(--text-scale)); }
h2 { font-size: calc(30px * var(--text-scale)); }
h3 { font-size: calc(24px * var(--text-scale)); }
h4 { font-size: calc(18px * var(--text-scale)); }
h5 { font-size: calc(14px * var(--text-scale)); }
h6 { font-size: calc(12px * var(--text-scale)); }
h1 small, h2 small, h3 small { font-size: 65%; }
h4 small, h5 small, h6 small { font-size: 75%; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  font-weight: normal;
  line-height: 1;
  color: #999;
}
p { margin: 0 0 10px; }
ul, ol { margin-bottom: 10px; padding-left: 40px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
.lead { margin-bottom: 20px; font-size: 16px; font-weight: 200; line-height: 1.4; }
@media (min-width: 768px) {
  .lead { font-size: calc(21px * var(--text-scale)); }
}

/* Grid: Bootstrap 3 container widths and 30px gutters */
.container, .row { --bs-gutter-x: 30px; }
@media (min-width: 576px) { .container { max-width: none; } }
@media (min-width: 768px) { .container { max-width: 750px; } }
@media (min-width: 992px) { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* Navbar: Bootstrap 3 "navbar-default" */
.navbar {
  --bs-navbar-padding-y: 0;
  --bs-navbar-color: #777;
  --bs-navbar-hover-color: #333;
  --bs-navbar-active-color: #555;
  --bs-navbar-brand-color: #777;
  --bs-navbar-brand-hover-color: #5e5e5e;
  --bs-navbar-nav-link-padding-x: 15px;
  min-height: 50px;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
}
.navbar-brand { font-size: calc(18px * var(--text-scale)); line-height: 20px; padding-top: 15px; padding-bottom: 15px; }
.navbar-brand:hover, .navbar-brand:focus { text-decoration: none; }
.navbar-nav .nav-link { line-height: 20px; padding-top: 15px; padding-bottom: 15px; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { text-decoration: none; }
.navbar-nav .nav-link.active { background-color: #e7e7e7; }
.navbar-toggler { font-size: 16px; padding: 4px 9px; border-color: #ddd; }
/* Collapsed (hamburger) menu */
@media (max-width: 1199.98px) {
  .navbar-expand-xl .navbar-collapse { border-top: 1px solid #e7e7e7; margin: 0 -15px; }
  .navbar-expand-xl .navbar-nav { margin: 7.5px 0; }
  .navbar-expand-xl .navbar-nav .nav-link { padding: 10px 15px; }
}
@media (max-width: 767.98px) {
  .navbar-expand-md .navbar-collapse { border-top: 1px solid #e7e7e7; margin: 0 -15px; }
  .navbar-expand-md .navbar-nav { margin: 7.5px 0; }
  .navbar-expand-md .navbar-nav .nav-link { padding: 10px 15px; }
}

/* Buttons: Bootstrap 3 sizes and colors */
.btn {
  --bs-btn-font-size: calc(14px * var(--text-scale));
  --bs-btn-line-height: 1.428571429;
  --bs-btn-border-radius: 4px;
}
.btn-lg {
  --bs-btn-padding-y: 10px;
  --bs-btn-padding-x: 16px;
  --bs-btn-font-size: 18px;
  --bs-btn-line-height: 1.33;
  --bs-btn-border-radius: 6px;
}
.btn-xs {
  --bs-btn-padding-y: 1px;
  --bs-btn-padding-x: 5px;
  --bs-btn-font-size: calc(12px * var(--text-scale));
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: 3px;
}
.btn-default {
  --bs-btn-color: #333;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #333;
  --bs-btn-hover-bg: #ebebeb;
  --bs-btn-hover-border-color: #adadad;
  --bs-btn-active-color: #333;
  --bs-btn-active-bg: #ebebeb;
  --bs-btn-active-border-color: #adadad;
}
.btn-primary {
  --bs-btn-bg: #428bca;
  --bs-btn-border-color: #357ebd;
  --bs-btn-hover-bg: #3276b1;
  --bs-btn-hover-border-color: #285e8e;
  --bs-btn-active-bg: #3276b1;
  --bs-btn-active-border-color: #285e8e;
}
.btn-success {
  --bs-btn-bg: #5cb85c;
  --bs-btn-border-color: #4cae4c;
  --bs-btn-hover-bg: #47a447;
  --bs-btn-hover-border-color: #398439;
  --bs-btn-active-bg: #47a447;
  --bs-btn-active-border-color: #398439;
}
.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5bc0de;
  --bs-btn-border-color: #46b8da;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #39b3d7;
  --bs-btn-hover-border-color: #269abc;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #39b3d7;
  --bs-btn-active-border-color: #269abc;
}
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: #f0ad4e;
  --bs-btn-border-color: #eea236;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ed9c28;
  --bs-btn-hover-border-color: #d58512;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ed9c28;
  --bs-btn-active-border-color: #d58512;
}
.btn:hover, .btn:focus { text-decoration: none; }

/* Wells (the grey boxes holding abstracts) */
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

/* Carousel: Bootstrap 3 image sizing, shaded side controls and caption shadow */
.carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img { display: block; max-width: 100%; height: auto; line-height: 1; }
.carousel-caption { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.carousel-control-prev { background-image: linear-gradient(to right, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .0001) 100%); }
.carousel-control-next { background-image: linear-gradient(to right, rgba(0, 0, 0, .0001) 0, rgba(0, 0, 0, .5) 100%); }

/* Forms and modals (covid.html) */
label { max-width: 100%; margin-bottom: 5px; font-weight: bold; }
.form-group { margin-bottom: 15px; }
.modal-title { margin-top: 0; }
@media (min-width: 992px) {
  .modal-lg { --bs-modal-width: 900px; }
}