/* CSS Reset */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
body {
  line-height: 1;
}

/* Heart Disease */
html {
  font-family: "Quattrocento Sans", sans-serif;
  font-size: 14px;
  color: #2e3c43;
}

svg {
  fill: #2e3c43;
}

.title {
  font-family: "Quattrocento", serif;
  display: block;
  font-size: 2.5em;
  text-align: center;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.chart-title {
  font-family: "Quattrocento", serif;
  font-size: 1.5em;
}

.introduction-section-title {
  font-family: "Quattrocento", serif;
  display: block;
  font-size: 1.17em;
  text-align: center;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.introduction {
  line-height: 1.5;
}

/* Layout */
.container {
  width: 1280px;
  height: 800px;
  display: flex;
  margin: 0 auto;
}

.panel-left {
  width: 480px;
  position: relative;
}

.panel-middle {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.panel-right {
  width: 480px;
}

/* Bubble Chart */
#bubble-chart-dropdown {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
}

.patient-circle {
  stroke: transparent;
  pointer-events: all;
}

.patient-circle.presence {
  fill: #e73f74;
}

.patient-circle.absence {
  fill: #3969ac;
}

.patient-circle.filtered-out {
  fill: #ddd;
}

.patient-circle.selected {
  fill: #f2b701;
}

.filter-option {
  fill: #aaa;
  cursor: pointer;
  font-weight: bold;
}

.filter-option.selected {
  fill: #f2b701;
}

/* Parallel Coordinates */
.patient-path {
  fill: none;
  stroke-width: 1px;
  pointer-events: stroke;
}

.patient-path.presence {
  stroke: #e73f74;
}

.patient-path.absence {
  stroke: #3969ac;
}

.patient-path.filtered-out {
  stroke: #ddd;
}

.patient-path.selected {
  stroke: #f2b701;
  stroke-width: 3px;
}

.axis-title {
  font-size: 1rem;
}

.brush .selection {
  fill: #aaa;
  fill-opacity: 0.7;
}

.selected-brush .selection {
  fill: #f2b701;
}

/* Donut Chart */
.patient-slice.presence {
  fill: #e73f74;
}

.patient-slice.absence {
  fill: #3969ac;
}

.patient-slice-label {
  fill: #fff;
}

/* Count Summary */
#count-summary {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.target {
  text-align: center;
}

.patient-count {
  font-size: 2.5rem;
  font-weight: bold;
}

.patient-count.presence {
  color: #e73f74;
}

.patient-count.absence {
  color: #3969ac;
}

.patient-count.filtered-out {
  color: #ddd;
}

/* Tooltip */
#tooltip {
  position: fixed;
  padding: 0.5rem 0.75rem;
  pointer-events: none;
  background-color: #fff;
  border-radius: 0.5em;
  opacity: 0;
  line-height: 1.5;
  border: 1px solid #2e3c43;
}

.tooltip-entry-header {
  font-weight: bold;
}

.tooltip-entry-value {
}