@import url('https://fonts.googleapis.com/css2?family=Alata&family=Inter:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');


.material-icons {
	font-family: 'Material Symbols Outlined';
	font-weight: 100 !important;
	font-style: normal;
	font-size: 24px;  /* Preferred icon size */
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';
}

.material-icons {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 200,
  'opsz' 48
}

* { position:relative; }

body {
	background-color:#f1f1f1;
	padding-bottom: 25em;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Alata', serif;
	font-weight:500;
	letter-spacing:-0.04em;
}

body, html, p, ul, li {
	font-family: 'Inter', sans-serif;
	font-weight:400;
}

p {
	margin-bottom:0;
	max-width:750px;
}

a.hotspot {
	width:0;
	height:0;
	top:-60px;
}

P + p { margin-top:1em; }

.lead { font-size:1.55em; }

strong, .strong { font-weight:700; }

.container-wrap { margin-top:125px; }

.row,
[class*="row-cols-"] > [class*="col"] {
	margin:0;
	margin-top: calc(var(--bs-gutter-x) * .5);
	margin-bottom: calc(var(--bs-gutter-x) * .5);
}

.row.condensed-row { padding-bottom: 0; }

.col.condensed-col { margin-bottom: 0; }

.row.compact-row,
.row.compact-row > .col { margin:0; }

.title-row {
	margin-top:30px;
}

.badge {
	font-weight:300;
}

.badge .material-icons {
	top:1px;
}

.blank-row {
	padding-top: calc(var(--bs-gutter-x) * 2);
	padding-bottom: calc(var(--bs-gutter-x) * 2);
}

.navbar-brand img {
	height:45px;
	width:auto;
}

.clear-fix-top {
	padding-top:100px;
}

.btn + .btn,
.btn + .btn-group,
.btn-group + .btn,
.btn-group + .btn-group {
	margin-left: calc(var(--bs-gutter-x) * .5);
}

h1 .material-icons { top:9px }

h3 .material-icons { top:3px }

p .material-icons-sm { top:2px; }

a .material-icons-sm { top:2px; }

td {
	text-align: center;
}

.btn.btn-sm .material-icons-sm { top:3px }

.btn .material-icons {
	top:6px;
    line-height: 0;
}

.btn.product-select { width:175px; }

.material-icons-lg { font-size: 48px; }

.material-icons-sm { font-size: 16px; }

.card,
.alert { box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12); }

.card-header {
	padding-top:1em;
	padding-bottom:0.4em;
}

.card-header .material-icons,
.card-header h3,
.card-header h4 {
	display:inline-block;
}

.card-header i + h3 {
	left:10px;
	bottom:10px;
}

.card-header i + h4 {
	left:5px;
	bottom:4px;
}

.card-footer {
	background:none;
	padding-top:1em;
	padding-bottom:1em;
}

.checkup-btn {
	display:block;
}

.checkup-btn + .checkup-btn {
	margin-left:0;
}

.progress { height: 10px; }
.choice-btns .btn { min-width: 160px; }

.result-wrap { height: 30px; }
.result-bar  { position: relative; height: 100%; border-radius: 12px; }

.result-bar .bg {
  height: 100%;
  background: linear-gradient(90deg, #d9534f 0%, #f0ad4e 25%, #f7e463 50%, #5cb85c 100%);
  filter: saturate(1.1);
}

.result-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}

.result-layer .icon {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  pointer-events: auto;
}

.result-layer .icon span {
	font-size:40px;
	font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 40;
}

.result-markers .icon { color:#6c757d; top: 15px; }

.result-pins .icon { color:#0d6efd; top: -30px; }

/*
.wb-grid { table-layout:fixed; border-collapse:separate; border-spacing:0; }
.wb-grid th, .wb-grid td { border:1px solid #e9ecef; vertical-align:middle; }
.wb-grid thead th { position:sticky; top:0; background:#f8f9fa; z-index:2; }
.wb-grid .qcol { position:sticky; left:0; background:#fff; z-index:1; max-width:420px; }
.wb-grid .dcol { text-align:center; width:10rem; }

.wb-qtools { white-space:nowrap; }
.wb-qnote-btn .material-icons { font-size:16px; vertical-align:-3px; }
*/
.qcol { position:sticky; left:0; background:#fff !important; z-index:1; min-width:350px; width:420px; }
.dcol { width:10rem; }
.me-2 {padding:15px 0 5px 0;}
.wb-qtools { margin-bottom:15px; }

.wb-points { font-weight:600; }
.wb-label  { font-size:12px; opacity:.9; }
.wb-cell { display:inline-flex; flex-direction:column; align-items:center; gap:.25rem; padding:.35rem .5rem; padding-top:0; border-radius:8px; min-width:94px; }
.wb-cell .material-icons { top:6px; }

.wb-score-1 { background:#fdecea; color:#c62828; border:1px solid #c62828; }
.wb-score-2 { background:#fff3e0; color:#ef6c00; border:1px solid #ef6c00; }
.wb-score-3 { background:#f5f5f5; color:#6d6d6d; border:1px solid #6d6d6d; }
.wb-score-4 { background:#e6f4ea; color:#2e7d32; border:1px solid #2e7d32; }
.wb-score-5 { background:#e0f2f1; color:#1b5e20; border:1px solid #1b5e20; }

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th,
.table-hover>tbody>tr:hover>* {
  background-color: #f7f7f7;
  --bs-table-accent-bg: #f7f7f7;
}

.notes-cell,
.note-text {
	text-align:left;
}

.notes-cell {
	width:350px;
}

    /* minimal table cosmetics to match compare grid 
    .wb-grid .qcol { position: sticky; left: 0; background: #fff; z-index: 1; max-width: 360px; }
    .wb-cell { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
    .wb-points { font-weight: 600; margin-left: .25rem; }
    .wb-label { display: block; font-size: .85rem; color: #555; text-align: center; }
    .wb-score-1 .material-icons { color: #c62828; }
    .wb-score-5 .material-icons { color: #2e7d32; }
    .wb-trend { font-size: 11px; border-radius: 999px; padding: .1rem .4rem; display: inline-block; }
    .wb-trend.up   { background:#e6f4ea; color:#2e7d32; }
    .wb-trend.down { background:#fdecea; color:#c62828; }
    .wb-trend.same { background:#f5f5f5; color:#6d6d6d; }
    /* Notes column squeezes gracefully 
    td.notes-cell { min-width: 220px; max-width: 360px; }
    td.notes-cell .note-text { white-space: pre-wrap; word-break: break-word; color: #444; }
	*/