/*
 * Standalone stylesheet for the static Truth Challenge results pages.
 * Ported from packages/rails/app/assets/stylesheets (brand/bootstrap variables,
 * views/challenges.sass, components/{jumbotron,nav-pills,paginate,tablesort,
 * tiltview,cards,table}.sass) so the page has zero dependency on the Rails
 * asset pipeline or third-party CDNs.
 */

:root {
  --brand-blue-primary: #1F70B5;
  --brand-blue-secondary: #63A5DE;
  --brand-blue-tertiary: #8198BC;
  --brand-blue-subtle: #E3F3FC;
  --brand-blue-subtler: #F4F8FD;
  --brand-blue-dark: #343E4D;
  --brand-red-primary: #EB776F;
  --brand-highlight: #FFF6E4;
  --accessible-blue: #165B97;
  --accessible-warning-bg: #f0ad4e;
  --accessible-warning-color: #664400;
  --state-info-bg: #d9edf7;
  --gray-dark: #333;
  --gray-light: #777;
  --gray-lighter: #eee;
  --gray-subtle: #f5f5f5;
  --text-muted: #777;
  --border-default: #ddd;
  --link-color: #1F70B5;
  --link-hover: #3d94dd;
}

/* ---------- Reset-ish base (Bootstrap 3 subset) ---------- */
* { box-sizing: border-box; }
html { font-size: 10px; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body {
  margin: 0;
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: var(--gray-dark);
  background-color: #fff;
}
a { color: var(--link-color); text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }
img { vertical-align: middle; border: 0; }
p { margin: 0 0 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; }
abbr[title] { cursor: help; border-bottom: 1px dotted var(--gray-light); text-decoration: none; }
blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid var(--gray-lighter); }
hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid var(--gray-lighter); }
code {
  padding: 2px 4px; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }
h1, .h1 { font-size: 36px; margin: 20px 0 10px; }
h2, .h2 { font-size: 30px; margin: 20px 0 10px; }
h3, .h3 { font-size: 24px; margin: 20px 0 10px; }
h4, .h4 { font-size: 18px; margin: 10px 0; }
.small, small { font-size: 85%; }
.text-center { text-align: center; }
.text-right { text-align: right !important; }
.text-left { text-align: left; }
.text-muted { color: var(--text-muted); }
.text-uppercase { text-transform: uppercase; }
.text-monospace { font-family: "PT Mono", Menlo, Monaco, Consolas, monospace; }
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.lead { margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4; }
div.lead { margin: 0; }
.lead-bold { font-weight: bold; }
@media (min-width: 768px) { .lead { font-size: 21px; } }
.lead-intro { line-height: 1.5; font-size: 25px; font-weight: 400; }

.container {
  margin-right: auto; margin-left: auto;
  padding-left: 15px; padding-right: 15px;
}
@media (min-width: 768px) { .container { width: 750px; } }
@media (min-width: 992px) { .container { width: 970px; } }
@media (min-width: 1200px) { .container { width: 1170px; } }
.container-padded { padding-top: 20px; padding-bottom: 20px; }
.container:before, .container:after,
.row:before, .row:after,
.pfda-toolbar:before, .pfda-toolbar:after,
.clearfix:before, .clearfix:after { content: " "; display: table; }
.container:after, .row:after, .pfda-toolbar:after, .clearfix:after { clear: both; }

/* 24-column grid (pFDA uses $grid-columns: 24) — only spans used by the pages */
.row { margin-left: -15px; margin-right: -15px; }
.col-sm-2, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-10, .col-sm-12, .col-sm-14, .col-sm-18,
.col-md-8, .col-md-11, .col-md-12, .col-lg-8, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
@media (min-width: 768px) {
  .col-sm-2, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-10, .col-sm-12, .col-sm-14, .col-sm-18 { float: left; }
  .col-sm-18 { width: 75%; }
  .col-sm-14 { width: 58.33333333%; }
  .col-sm-12 { width: 50%; }
  .col-sm-10 { width: 41.66666667%; }
  .col-sm-7 { width: 29.16666667%; }
  .col-sm-6 { width: 25%; }
  .col-sm-5 { width: 20.83333333%; }
  .col-sm-2 { width: 8.33333333%; }
  .col-sm-offset-1 { margin-left: 4.16666667%; }
  .col-sm-offset-2 { margin-left: 8.33333333%; }
  .col-sm-offset-3 { margin-left: 12.5%; }
  .col-sm-offset-6 { margin-left: 25%; }
}
@media (min-width: 992px) {
  .col-md-8, .col-md-11, .col-md-12 { float: left; }
  .col-md-8 { width: 33.33333333%; }
  .col-md-11 { width: 45.83333333%; }
  .col-md-12 { width: 50%; }
  .col-md-offset-1 { margin-left: 4.16666667%; }
  .col-md-offset-4 { margin-left: 16.66666667%; }
  .col-md-offset-8 { margin-left: 33.33333333%; }
}
@media (min-width: 1200px) {
  .col-lg-8, .col-lg-12 { float: left; }
  .col-lg-8 { width: 33.33333333%; }
  .col-lg-12 { width: 50%; }
  .col-lg-offset-6 { margin-left: 25%; }
  .col-lg-offset-8 { margin-left: 33.33333333%; }
}

.list-inline { padding-left: 0; list-style: none; margin-left: -5px; }
.list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }
.list-inline-bullets > li + li:before { content: "•"; margin-right: 8px; color: var(--text-muted); }

/* ---------- Tables ---------- */
.table-responsive { min-height: .01%; overflow-x: auto; }
table { border-spacing: 0; border-collapse: collapse; background-color: transparent; }
.table { width: 100%; max-width: 100%; margin-bottom: 20px; }
.table > thead > tr > th, .table > tbody > tr > th,
.table > thead > tr > td, .table > tbody > tr > td {
  padding: 8px; line-height: 1.428571429; vertical-align: top; border-top: 1px solid var(--border-default);
  text-align: left;
}
.table > thead > tr > th { vertical-align: bottom; border-bottom: 2px solid var(--border-default); }
.table > thead:first-child > tr:first-child > th { border-top: 0; }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > td { border: 1px solid var(--border-default); }
.table-bordered > thead > tr > th { border-bottom-width: 2px; }
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th,
.table-condensed > thead > tr > td, .table-condensed > tbody > tr > td { padding: 5px; }
.table-hover > tbody > tr:hover { background-color: var(--gray-subtle); }
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
.table.table-auto { width: auto; }
.challenge-section table { font-size: 12px; }

/* tablesort (components/tablesort.sass) */
table.table-sort th.sort-header { cursor: pointer; user-select: none; }
table.table-sort th.sort-header:after {
  content: ''; display: inline-block; margin-top: 7px; margin-left: 5px;
  border-width: 0 4px 4px; border-style: solid; border-color: #404040 transparent; opacity: 0.2;
}
table.table-sort th.sort-header:hover:after { opacity: 0.4; visibility: visible; }
table.table-sort th.sort-up:after, table.table-sort th.sort-down:after,
table.table-sort th.sort-down:hover:after { visibility: visible; opacity: 0.8; }
table.table-sort th.sort-up:after { border-bottom: none; border-width: 4px 4px 0; }
table.table-sort th.sort-up, table.table-sort th.sort-down { background-color: #fffaef; }

.percentage { display: inline-block; }
.percentage:after { content: "%"; color: #aaa; margin-left: 2px; }

/* ---------- Buttons / forms (subset) ---------- */
.btn {
  display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center;
  vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none;
  border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px;
  line-height: 1.428571429; border-radius: 4px; user-select: none; text-decoration: none;
}
.btn:hover, .btn:focus { text-decoration: none; }
.btn-primary { color: #fff; background-color: var(--brand-blue-primary); border-color: #1c65a3; }
.btn-primary:hover { color: #fff; background-color: #1a5f99; border-color: #164f80; }
.btn-default { color: var(--gray-dark); background-color: #fff; border-color: #ccc; }
.btn-link { color: var(--link-color); background: none; border-color: transparent; }
.btn-link-danger { color: #C2524B; background: none; border: none; }
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; }
.btn.disabled, .btn[disabled] { cursor: not-allowed; opacity: 0.65; box-shadow: none; }
.btn-group { position: relative; display: inline-block; vertical-align: middle; }
.caret {
  display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle;
  border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent;
}
select.form-control, input.form-control {
  height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555;
  background-color: #fff; border: 1px solid #ccc; border-radius: 4px; display: inline-block;
  font-family: inherit;
}
.form-inline .form-control { width: auto; vertical-align: middle; }

/* accessible btn variants (join button) */
.btn-join { width: 100%; }
.btn-join .media-left .fa-trophy-svg { width: 42px; height: 42px; }
.btn-join .time-remaining { font-weight: 300; font-size: 18px; }
.accessible-btn-success { color: #fff; background-color: #518400; border-color: #446e00; }
.accessible-btn-warning { color: #664400; background-color: #f0ad4e; border-color: #eea236; }
.accessible-btn-danger { color: #fff; background-color: #C2524B; border-color: #b04a43; }

.media { margin-top: 15px; }
.media:first-child { margin-top: 0; }
.media, .media-body { overflow: hidden; zoom: 1; }
.media-left { float: left; padding-right: 10px; display: table-cell; vertical-align: top; }
.media-body { display: block; width: auto; }
.media-body .text-left { text-align: left; }

/* ---------- Dropdown ---------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 280px;
  max-width: 420px; max-height: 480px; overflow-y: auto;
  padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; text-align: left;
  background-color: #fff; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.175); background-clip: padding-box;
}
.dropdown.open > .dropdown-menu { display: block; }
.dropdown-menu > li > a { display: block; padding: 6px 20px; clear: both; font-weight: normal; line-height: 1.42; color: var(--gray-dark); white-space: normal; }
.dropdown-menu > li > a:hover { text-decoration: none; background-color: var(--gray-subtle); }
.dropdown-menu .list-inline { margin-bottom: 0; }

/* ---------- Nav pills / tabs (components/nav-pills.sass) ---------- */
.nav { padding-left: 0; margin-bottom: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; }
.nav.nav-pills { font-size: 0; }
.nav.nav-pills > li { float: none; display: inline-block; margin: 0; margin-top: -2px; }
.nav.nav-pills > li > a:not(.btn) {
  font-size: 14px; background-color: transparent; border: 0;
  border-bottom: 3px solid transparent; color: var(--text-muted); border-radius: 0; font-weight: bold;
}
.nav.nav-pills > li > a:not(.btn):hover {
  background-color: transparent; border-bottom-color: #f2a8a3; color: var(--link-hover);
}
.nav.nav-pills > li.active > a, .nav.nav-pills > li.active > a:hover {
  background-color: transparent; border-bottom-color: var(--brand-red-primary); color: var(--link-color);
}
/* the Consistency overview uses nav-tabs; style it like the contained pills */
.nav.nav-tabs { font-size: 0; border-bottom: 0; }
.nav.nav-tabs > li { float: none; display: inline-block; margin: 0; }
.nav.nav-tabs > li > a {
  font-size: 14px; background-color: transparent; border: 0;
  border-bottom: 3px solid transparent; color: var(--text-muted); border-radius: 0; font-weight: bold;
}
.nav.nav-tabs > li > a:hover { background-color: transparent; border-bottom-color: #f2a8a3; color: var(--link-hover); }
.nav.nav-tabs > li.active > a, .nav.nav-tabs > li.active > a:hover {
  background-color: transparent; border-bottom-color: var(--brand-red-primary); color: var(--link-color);
}
.nav-tabs-contained { margin-bottom: 15px; }

.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* ---------- Jumbotron (components/jumbotron.sass) ---------- */
.jumbotron-challenges {
  background-color: var(--brand-blue-dark); position: relative; margin: 0; padding: 50px 20px; overflow: hidden;
}
.jumbotron-challenges h1, .jumbotron-challenges p { color: var(--brand-blue-subtle); }
.jumbotron-challenges h1 { font-weight: 200; font-size: 56px; margin-top: 10px; }
@media (max-width: 767px) { .jumbotron-challenges h1 { font-size: 36px; } }
.challenge-title-muted { opacity: 0.65; }

/* tiltview (components/tiltview.sass) */
.tiltview-container { position: relative; }
.tiltview-description { position: relative; z-index: 1000; }
.tiltview {
  z-index: 1; position: absolute; left: 50%; width: 50%; top: 50%;
  transform-style: preserve-3d; transform: translateY(-50%) rotateX(60deg) rotateZ(35deg);
  opacity: 0.25;
}
.tiltview img { max-width: 100%; display: block; margin: 0 auto; }
.img-thumbnail { padding: 4px; background-color: #fff; border: 1px solid var(--border-default); border-radius: 4px; }
.img-responsive { display: block; max-width: 100%; height: auto; }
@media (max-width: 1199px) { .tiltview { width: 100%; left: 0; pointer-events: none; } }
@media (max-width: 991px) { .tiltview { top: 0; } }

/* ---------- Challenge Info tab components ---------- */
.copy { font-size: 16px; font-weight: 300; line-height: 1.4; }
mark { background-color: #fcf8e3; padding: .2em; }
.well {
  min-height: 20px; padding: 19px; margin-bottom: 20px;
  background-color: var(--brand-blue-subtler); border: 1px solid var(--brand-blue-subtle);
  border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}
.text-success { color: #3c763d; }
.text-danger { color: #a94442; }
.challenge-card-icon { text-align: center; margin-bottom: 20px; }
.challenge-card-icon svg { color: #57729f; }
.pfda-challenge-diagram { text-align: center; padding: 0 25px; }
.pfda-controller-challenges h3 { text-transform: uppercase; color: #57729f; margin-bottom: 20px; }
.panel-default { border-color: #ddd; }
.panel-default > .panel-heading { color: var(--gray-dark); background-color: var(--gray-subtle); border-color: #ddd; }
.bs-callout {
  padding: 20px; margin: 20px 0; border: 1px solid #eee;
  border-left-width: 5px; border-radius: 3px;
}
.bs-callout p:last-child { margin-bottom: 0; }
.bs-callout-info { border-left-color: #5bc0de; }
.bs-callout-warning { border-left-color: #f0ad4e; }
.icon-4x { width: 56px; height: 56px; }
.icon-file { width: 12px; height: 12px; vertical-align: -1px; }
.rotate-90 { transform: rotate(90deg); }

/* ---------- Challenge sections (views/challenges.sass) ---------- */
.pfda-challenge-intro .lead-intro { margin: 50px 0; font-size: 21px; font-weight: 300; line-height: 1.4; }
.pfda-challenge-intro .lead-intro + .lead { margin-top: -25px; margin-bottom: 25px; }
.challenge-section .h2 { color: #344967; padding: 12px 0; border-bottom: 1px solid var(--border-default); }
.challenge-section .h3 { text-transform: uppercase; color: #57729f; margin-bottom: 20px; margin-top: 20px; }
.challenge-section.challenge-section-highlight { background-color: #fff9ec; }
.challenge-section.challenge-section-conclusion { background-color: #f8f8f8; }
.challenge-section.challenge-section-conclusion .media-left .fa-quote-svg { color: var(--text-muted); }
.challenge-description { font-weight: 300; }

/* cards (components/cards.sass subset) */
.pfda-cards { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px 0; }
.pfda-cards-justify-centered { justify-content: center; }
.pfda-card { background: #fff; border: 1px solid var(--border-default); flex-grow: 1; max-width: 360px; }
.pfda-card-padded .pfda-card-body { padding: 20px; }
.pfda-card-rounded { border-radius: 6px; }
.pfda-card-medal { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* stacked list of cards (app-a-thon "Submitted Apps"/"No apps yet" cards) */
.pfda-cards-list { flex-direction: column; flex-wrap: nowrap; gap: 10px; }
.pfda-cards-list .pfda-card { max-width: none; border-radius: 6px; box-shadow: 0 1px 3px rgba(16, 30, 54, 0.1); transition: box-shadow .15s ease; }
.pfda-cards-list .pfda-card:hover { box-shadow: 0 3px 10px rgba(16, 30, 54, 0.16); }
.pfda-card-header { padding: 14px 18px; }
.pfda-card-header .text-muted { font-size: 13px; margin-bottom: 2px; }
.pfda-card-header .pfda-card-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.pfda-card-header .pfda-card-title a { color: var(--brand-blue-dark); }
.pfda-card-warning { background-color: #fcf8e3; border-color: #faebcc; }

.pfda-challenge-awards .challenge-badge-qualifier { text-transform: uppercase; font-size: 14px; text-align: center; color: #5a6a84; }
.pfda-challenge-awards .challenge-badge-medal-name { text-align: center; font-size: 20px; color: var(--brand-blue-dark); }
.pfda-challenge-awards .challenge-badge-context { text-align: center; font-size: 16px; color: #5a6a84; }
.pfda-challenge-awards .challenge-winning-team { color: var(--accessible-warning-color); text-align: center; }
.pfda-challenge-awards .challenge-winning-team ul { margin-top: 10px; opacity: 0.6; }
.pfda-challenge-awards .challenge-awarded-to { font-size: 11px; text-transform: uppercase; opacity: 0.6; }

/* badges */
.challenge-badge {
  text-transform: uppercase; border-radius: 20px; padding: 1px 5px; font-size: 10px;
  white-space: nowrap; display: inline-block;
}
.challenge-badge-medal { background-color: var(--accessible-warning-bg); color: #fff; }
.challenge-badge-recognition-highest { background-color: var(--accessible-blue); color: #fff; }
.challenge-badge-recognition { background-color: var(--state-info-bg); color: var(--accessible-blue); }
.challenge-row-medal { background-color: var(--accessible-warning-bg); color: #fff; }
.challenge-row-medal .percentage:after { color: #f8d6a7; }
.challenge-row-recognition { background-color: var(--state-info-bg); }
.challenge-row-highest { background-color: var(--accessible-blue); color: #fff; }
.challenge-row-highest a { color: #fff; }
.challenge-row-highest a:hover { color: var(--brand-blue-subtle); }
.challenge-row-high { background-color: var(--state-info-bg); color: var(--accessible-blue); }
.challenge-row-not-considered { background-color: var(--gray-subtle); color: var(--accessible-text, #555); }

/* three side-by-side metric tables on the Consistency results tab */
.accuracy-tables table { float: left; width: 32%; margin-right: 1%; }
.accuracy-tables table:last-child { margin-right: 0; }
@media (max-width: 767px) { .accuracy-tables table { float: none; width: 100%; margin-right: 0; } }

.list-group { padding-left: 0; margin-bottom: 20px; }
.list-group-item {
  position: relative; display: block; padding: 10px 15px; margin-bottom: -1px;
  background-color: #fff; border: 1px solid var(--border-default); list-style: none;
}
.list-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; }

.pFDA-C1-Diagram { text-align: center; padding: 0 25px; }

/* medal icon (fa-stack replacement, inline SVG) */
.medal-icon { display: inline-block; vertical-align: middle; }
.medal-icon svg { display: block; }
.medal-icon-lg { text-align: center; }
.star-icon { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; }

/* results preview overlay */
.challenge-results-preview { position: relative; max-height: 500px; overflow: hidden; }
.challenge-results-preview_link {
  z-index: 10; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.6); box-shadow: inset 0px -250px 100px rgba(255,255,255,0.6);
  text-align: center; line-height: 500px; font-size: 36px; text-shadow: 0px 0px 50px #aaa;
}
.challenge-results-preview_link:hover { text-decoration: none; }

/* ---------- Panels / accordion ---------- */
.panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; box-shadow: 0 1px 1px rgba(0,0,0,0.05); }
.panel-info { border-color: #bce8f1; }
.panel-info > .panel-heading { color: #31708f; background-color: var(--state-info-bg); border-color: #bce8f1; }
.panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-radius: 3px 3px 0 0; }
.panel-title { margin: 0; font-size: 16px; }
.panel-title a { color: var(--accessible-blue); display: block; }
.panel-title a:hover { color: #0e3c64; text-decoration: none; }
.panel-body { padding: 15px; }
.panel-collapse { display: none; }
.panel-collapse.in { display: block; }
.panel-group .panel + .panel { margin-top: 5px; }
.accordion .panel-title { text-transform: none; }

/* ---------- Toolbar (explore tab) ---------- */
.pfda-toolbar { background-color: var(--brand-blue-subtler); border-top: 1px solid #e6eefa; border-bottom: 1px solid #e6eefa; }
.pfda-toolbar-padded { padding: 10px 16px; }
.pfda-toolbar .btn-group + .btn-group { margin-left: 8px; }

/* ---------- Grid (WiceGrid replacement) ---------- */
.results-grid-container { padding: 0 16px; }
.pfda-controller-challenges .results-grid-container table { font-size: 12px; }
.results-grid th a { color: var(--gray-dark); display: inline-block; }
.results-grid th a:hover { color: var(--link-color); text-decoration: none; }
.results-grid th.sorted { background-color: #fffaef; }
.results-grid th .sort-arrow { font-size: 9px; color: #b58900; margin-left: 3px; }
.results-grid .filter-row th { font-weight: normal; background: var(--brand-blue-subtler); }
.results-grid .filter-row select { width: 100%; max-width: 160px; font-size: 12px; height: 26px; padding: 2px 4px; }
.grid-status { padding: 8px 0; color: var(--text-muted); font-size: 12px; }
.empty-grid .alert { padding: 15px; margin: 20px 0; border: 1px solid #bce8f1; border-radius: 4px; color: #31708f; background-color: var(--state-info-bg); }

/* pagination (components/paginate.sass) */
.paginate-container { text-align: center; padding: 20px 16px; }
.paginate-container .pagination { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; justify-content: center; }
.paginate-container .pagination > li { display: inline-block; }
.paginate-container .pagination > li > a, .paginate-container .pagination > li > span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  padding: 0 10px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--brand-blue-primary);
  background-color: #fff; border: 1px solid var(--border-default); border-radius: 6px;
  text-decoration: none; transition: all 0.15s ease-in-out; cursor: pointer;
}
.paginate-container .pagination > li > a:hover, .paginate-container .pagination > li > a:focus {
  color: #16507f; background-color: var(--brand-blue-subtler); border-color: var(--brand-blue-primary); text-decoration: none;
}
.paginate-container .pagination > li.active > a, .paginate-container .pagination > li.active > span {
  color: #fff; background-color: var(--brand-blue-primary); border-color: var(--brand-blue-primary); cursor: default; pointer-events: none;
}
.paginate-container .pagination > li.disabled > a, .paginate-container .pagination > li.disabled > span {
  color: var(--gray-light); background-color: var(--gray-subtle); border-color: var(--border-default);
  cursor: not-allowed; pointer-events: none; opacity: 0.5;
}
.paginate-container .pagination > li.prev > a, .paginate-container .pagination > li.next > a,
.paginate-container .pagination > li.first > a, .paginate-container .pagination > li.last > a { font-weight: 600; }
.paginate-container .pagination > li.prev { margin-right: 4px; }
.paginate-container .pagination > li.next { margin-left: 4px; }
.paginate-container .pagination > li.first { margin-right: 2px; }
.paginate-container .pagination > li.last { margin-left: 2px; }

/* utility */
.nowrap { white-space: nowrap; }
noscript .alert { display: block; padding: 15px; margin: 15px; background: #fcf8e3; border: 1px solid #faebcc; color: #8a6d3b; border-radius: 4px; }

/* ---------- App-a-thon in a Box (views/meta_appathon.sass + components/{cards,pane,buttons,tags,lists}.sass) ---------- */
.pfda-meta-appathon-template { background-color: var(--brand-blue-dark); }
.pfda-meta-appathon-template .container-fluid { padding-left: 15px; padding-right: 15px; }
.pfda-meta-appathon-template .container-fluid:before, .pfda-meta-appathon-template .container-fluid:after { content: " "; display: table; }
.pfda-meta-appathon-template .container-fluid:after { clear: both; }

.jumbotron-meta_appathon {
  position: relative; margin: 0; padding: 50px 20px; overflow: hidden;
  background-color: #fff; background-repeat: repeat; background-position: 50% 100%;
}
.jumbotron-meta_appathon h1, .jumbotron-meta_appathon p, .jumbotron-meta_appathon .h3 { margin-top: 0; color: var(--brand-blue-primary); }
.jumbotron-meta_appathon h1 { font-size: 36px; }
@media (min-width: 768px) { .jumbotron-meta_appathon h1 { font-size: 63px; } }
.jumbotron-meta_appathon .meta_appathon-title-muted { opacity: 0.65; font-size: 75%; }
.jumbotron-meta_appathon .lead-intro { margin: 0 0 10px; font-weight: 300; font-size: 18px; line-height: 1.4; }
@media (max-width: 767px) { .jumbotron-meta_appathon .lead-intro { font-size: 16px; } }
.jumbotron-meta_appathon .img-responsive { margin: 20px auto 0; }
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.jumbotron-meta_appathon .alert-warning .lead { color: #8a6d3b; }
.jumbotron-meta_appathon .alert-warning a { color: #66512c; }

.pfda-meta-appathon-submissions { padding: 50px 20px 30px; }
.panel-primary { border-color: var(--brand-blue-primary); }
.panel-primary > .panel-heading { color: #fff; background-color: var(--brand-blue-primary); border-color: var(--brand-blue-primary); }
.pfda-meta-appathon-submissions .panel-heading h4 { text-transform: uppercase; font-weight: 300; }

/* panes: sidebar of app-a-thon cards + list of submitted apps */
.pfda-pane { display: flex; }
.pfda-pane-sidebar { flex: 0 0 300px; width: 300px; min-width: 300px; min-height: 500px; background-color: #ebf0f7; }
.pfda-pane-content { flex: 1; min-width: 0; background-color: #fff; border-left: 1px solid var(--border-default); }
@media (max-width: 767px) {
  .pfda-pane { flex-direction: column; }
  .pfda-pane-sidebar { width: auto; min-width: 0; min-height: 0; flex-basis: auto; }
  .pfda-pane-content { border-left: 0; border-top: 1px solid var(--border-default); }
}
.pfda-meta-appathon-template .pfda-cards { gap: 0; padding: 10px 0; }
.pfda-meta-appathon-template .pfda-cards.pfda-cards-list { padding: 0; }
.pfda-meta-appathon-template .pfda-card {
  position: relative; margin: 10px; overflow: hidden; border: 0; max-width: none; flex-grow: 0;
  width: calc(100% - 20px); font-weight: normal; color: var(--text-muted);
}
.pfda-meta-appathon-template .pfda-card .pfda-card-title { font-size: 20px; font-weight: 700; }
.pfda-meta-appathon-template .pfda-card .pfda-card-body { font-size: 16px; padding: 0; }
.pfda-meta-appathon-template .pfda-card-padded { padding: 12px; }
.pfda-meta-appathon-template .pfda-card-rounded { border-radius: 3px; }
.pfda-meta-appathon-template .pfda-card-bordered { border: 1px solid var(--border-default); }
.pfda-meta-appathon-template .pfda-card-light { background-color: #fefefe; color: var(--gray-dark); }
.pfda-meta-appathon-template .pfda-card-warning { background-color: #fcf8e3; color: #8a6d3b; }
.pfda-meta-appathon-template .pfda-card-list { width: 100%; margin: 0; border-bottom: 1px solid #eaeaea; }
.pfda-meta-appathon-template .pfda-card-list:last-child { border-bottom: 0; }
.pfda-meta-appathon-template .pfda-card-metadata { color: var(--brand-blue-tertiary); margin-bottom: 0; }
.pfda-appathon-card .pfda-card-title { color: var(--brand-blue-dark); line-height: 1.3; margin-bottom: 4px; }
.pfda-appathon-card .list-inline { margin-bottom: 0; font-size: 14px; }

/* reactions (components/buttons.sass) and tags (components/tags.sass) */
.btn-reactions { padding-top: 10px; margin-bottom: 0; }
.btn-reaction {
  display: block; margin: 0 1px; padding: 0 5px; font-size: 16px; text-align: center;
  color: var(--brand-blue-tertiary); border: 1px solid #e5eaf1; border-radius: 10px; cursor: default;
}
.btn-reaction .reaction-icon { width: 14px; height: 14px; vertical-align: -2px; }
.btn-reaction .upvote-count { display: inline-block; vertical-align: middle; font-size: 12px; color: rgba(129, 152, 188, 0.5); }
.pfda-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.pfda-tags > li { padding: 0; }
.pfda-tags .pfda-tags-icon { padding-right: 0; color: var(--brand-blue-tertiary); }
.pfda-tags .tags-icon { width: 14px; height: 14px; vertical-align: -2px; }
.pfda-tags .pfda-tag { color: var(--brand-blue-tertiary); background-color: #eceff5; border-radius: 20px; padding: 1px 6px; font-size: 85%; }
.pfda-tags .pfda-tag .upvote-count:empty { display: none; }

/* "what is" section, video and start/end panels */
.pfda-meta-appathon-section { background-color: var(--brand-red-primary); padding: 50px 20px 30px; }
.pfda-meta-appathon-video { padding: 0 20px 50px; width: 800px; max-width: 100%; margin: auto; }
.thumbnail { display: block; padding: 4px; margin-bottom: 0; background-color: #fff; border: 1px solid var(--border-default); border-radius: 4px; }
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.panel-warning { border-color: #faebcc; }
.panel-warning > .panel-heading { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.pfda-meta-appathon-template .list-group.list-group-inline { margin-bottom: 10px; }
.pfda-meta-appathon-template .list-group-inline > .list-group-item {
  display: inline-block; vertical-align: top; border: 0; border-radius: 3px; padding-left: 0; background: transparent;
}
.list-group-item-heading { margin: 0 0 5px; font-size: 14px; color: var(--brand-blue-tertiary); text-transform: uppercase; font-weight: 300; }
.list-group-item-text { margin: 0; font-size: 16px; }
.label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }
.label-default { background-color: var(--gray-light); }

/* organizer/participant kit */
.pfda-meta-appathon-kit { background-color: #3c763d; padding: 50px 20px 30px; }
.pfda-meta-appathon-kit .h3 { margin-top: 0; }
.pfda-meta-appathon-kit .panel + .panel { margin-top: 20px; }
.nav.nav-pills.nav-pills-center { margin: auto; text-align: center; }
.nav.nav-pills.nav-pills-padded.nav-pills-lg { padding: 20px 16px 0; }
.nav.nav-pills.nav-pills-lg > li > a:not(.btn) { font-size: 18px; padding-top: 10px; padding-bottom: 10px; }
.pfda-meta-appathon-kit .row + .row { margin-top: 10px; }
@media (max-width: 767px) { .pfda-meta-appathon-kit .col-sm-2 img { max-width: 64px; } }