/* Manulife JH Sans */
@font-face {
  font-family: "Manulife JH Sans";
  src: url("../fonts/ManulifeJHSansTest4-Light.eot");
  src: url("../fonts/ManulifeJHSansTest4-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/ManulifeJHSansTest4-Light.woff2") format("woff2"), url("../fonts/ManulifeJHSansTest4-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Manulife JH Sans";
  src: url("../fonts/ManulifeJHSansTest4.eot");
  src: url("../fonts/ManulifeJHSansTest4.eot?#iefix") format("embedded-opentype"), url("../fonts/ManulifeJHSansTest4.woff2") format("woff2"), url("../fonts/ManulifeJHSansTest4.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Manulife JH Sans";
  src: url("../fonts/ManulifeJHSansTest4-Demibold.eot");
  src: url("../fonts/ManulifeJHSansTest4-Demibold.eot?#iefix") format("embedded-opentype"), url("../fonts/ManulifeJHSansTest4-Demibold.woff2") format("woff2"), url("../fonts/ManulifeJHSansTest4-Demibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Manulife JH Sans";
  src: url("../fonts/ManulifeJHSansTest4-Bold.eot");
  src: url("../fonts/ManulifeJHSansTest4-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/ManulifeJHSansTest4-Bold.woff2") format("woff2"), url("../fonts/ManulifeJHSansTest4-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
/* -------------------------------------------------------------------------
 * Fund Profile formatting
 * ------------------------------------------------------------------------- */
@media (max-width: 699px) {
  body {
    padding-left: 0;
    padding-right: 0;
  }
}
.page,
.header-line-1,
.header-line-2,
footer {
  padding-left: 20px;
  padding-right: 20px;
}

input {
  line-height: 23px;
  padding: 0 0.5em;
}

.scroll-v-panel {
  overflow-y: auto;
}

.card {
  margin-bottom: 20px;
}

.table-area {
  margin-bottom: 20px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

.mobile.table-area col {
  width: 50%;
}
.mobile.table-area tr th:nth-child(1) {
  text-align: left;
}
.mobile.table-area {
  display: none;
}
.mobile.table-area.current-profile {
  display: block;
}
.mobile.table-area.current-profile > .table-title {
  display: none;
}
.show-all .mobile.table-area {
  display: block;
}
.show-all .mobile.table-area.current-profile {
  background-color: #fbd38a;
  border: 10px solid #fbd38a;
}
.show-all .mobile.table-area.current-profile > .table-title {
  display: block;
}
.show-all .mobile.table-area.current-profile .table-striped tbody tr:nth-child(even) {
  background-color: #fff;
}

.scrollable-table table {
  border-collapse: separate;
  border-spacing: 0px;
  width: 100%;
  min-width: 100%;
}
.scrollable-table .name-column {
  overflow-x: auto;
  padding-right: 0;
}
.scrollable-table .name-column th {
  font-weight: normal;
  text-align: left;
}
.scrollable-table .name-column .text-highlighted th {
  font-weight: 700;
}
.scrollable-table .value-column {
  overflow-x: auto;
  overflow-y: hidden;
  padding-left: 0;
}
.scrollable-table .value-column td {
  width: 10em;
}
@media (max-width: 999px) {
  .scrollable-table .value-column td {
    padding-left: 2em;
  }
}
@media (max-width: 699px) {
  .scrollable-table .value-column td {
    padding-left: 1em;
  }
}
.scrollable-table .value-column th {
  padding-left: 1em;
}
.scrollable-table th, .scrollable-table td {
  white-space: pre;
}

.collapsible-table tr {
  display: none;
}
.collapsible-table tr.text-highlighted {
  font-weight: normal;
}
.collapsible-table tr.row-highlighted, .collapsible-table thead tr {
  display: table-row;
}

.show-all-rows tr {
  display: table-row;
}

#fees .value-column td, #fees .value-column th {
  padding-left: 0;
}
#fees thead tr {
  height: 57px;
}
#fees thead tr th {
  line-height: 1.3;
}

.accessible-summary {
  background-color: #fbe9c6;
  padding: 0.166em 0.332em;
}

.accessible-table {
  display: none;
}
.accessible-table.fees-table, .accessible-table.returns-table {
  border-collapse: collapse;
}

.accessibility-enabled .accessible-table {
  display: table;
}
.accessibility-enabled .scrollable-table, .accessibility-enabled .fund-codes-table, .accessibility-enabled .returns-row-show-hide-toggle {
  display: none;
}
@media (max-width: 699px) {
  .accessibility-enabled .returns-row-show-hide-toggle {
    display: none;
  }
  .accessibility-enabled .returns-row-show-hide-toggle {
    display: inline-block;
  }
}

#accessibility-toggle {
  position: absolute;
  right: 20px;
  top: 8px;
}

.logo {
  height: 30px;
  margin: 20px 0 8px;
  padding: 0 20px;
}
@media (max-width: 699px) {
  .logo {
    height: auto;
    width: 100%;
  }
}

.logo-container {
  max-width: 1280px;
  margin: 0 auto;
}

.doc-id:link {
  color: #000;
  font-size: 12px;
  font-weight: 300;
  text-decoration: none;
  cursor: text;
}

#fees-mobile table {
  border-collapse: collapse;
}
#fees-mobile table .single-row {
  border-top: 5px solid white;
  border-bottom: 5px solid white;
}
#fees-mobile table .single-row td:first-child, #fees-mobile table .single-row th:first-child {
  border-right-width: 0;
}
#fees-mobile.show-all .current-profile table .single-row {
  border-color: #fbd38a;
}

#fund-codes {
  margin-bottom: 30px;
}
#fund-codes th {
  text-align: left;
}
#fund-codes th.col-header {
  text-align: center;
}

.disclaimers {
  font-size: 14px;
}

/* charts */
svg, .nvd3 text {
  font-size: 14px;
  font-family: "Manulife JH Sans", Arial, Helvetica, sans-serif;
}

svg {
  display: block;
}

/* random grid lines may not appear if the nvd3 default is chosen */
.nvd3 .nv-axis line {
  shape-rendering: auto;
}

.lt-ie9 .show-for-small {
  display: none !important;
}
.lt-ie9 {
  /* ie hacks follow... */
}
.lt-ie9 .manulife-select select {
  padding-right: 0;
}

/* -------------------------------------------------------------------------
 * Bar Chart Table
 * ------------------------------------------------------------------------- */
.bar-table {
  display: table;
  width: 100%;
}

.bar-table .row {
  display: block;
  position: relative;
  clear: both;
  overflow: hidden;
  height: auto;
}
.bar-table .row:hover {
  background-color: #ace5c4;
}

.bar-table .label,
.bar-table .value {
  padding: 0.166em 0;
  margin-bottom: 15px;
  line-height: 1.1;
}

.bar-table .label {
  float: left;
  max-width: 70%;
}

.bar-table .value {
  float: right;
  width: 5em;
  text-align: right;
}

.bar-table .bar-container {
  position: absolute;
  bottom: 0;
  left: 1px;
  right: 0.332em;
  width: 100%;
}

.bar-table .bar {
  background-color: #06874e;
  position: absolute;
  bottom: 6px;
  height: 6px;
  min-width: 1px;
}

.bar-table .zero-marker {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 3px;
  height: 12px;
  width: 1px;
  left: -0.5px;
  transform: translateX(-50%);
}

/* -------------------------------------------------------------------------
 * Fund Profile Header
 * ------------------------------------------------------------------------- */
#header {
  z-index: 1201;
}

.profile-header {
  background-color: #fff;
  width: 100%;
  padding-top: 12px;
}
.profile-header.is-stuck {
  padding-top: 0;
}

#header-container {
  z-index: 1;
}

.header-tooltip {
  z-index: 1202;
}

.fund-title {
  font-size: 20px;
  font-weight: 700;
}

.fundgrade-logo {
  width: auto;
  height: 0.42in;
}

.list-management button {
  margin-left: 0.5em;
  margin-top: 16px;
  line-height: 23px;
  padding: 0 0.5em;
  white-space: nowrap;
}
.list-management button.has-tip {
  cursor: pointer;
}

.btn a.home-url {
  text-decoration: none;
  color: black;
}

.profile-facet-field-container {
  display: inline-block;
}
@media (max-width: 699px) {
  .profile-facet-field-container {
    display: block;
  }
}

.profile-facet-field {
  display: inline-block;
}
.profile-facet-field label {
  font-size: 12px;
  opacity: 0.8;
}

.profile-masthead {
  padding-bottom: 16px;
  position: relative;
  z-index: 2;
}

.header-row {
  display: table;
  position: relative;
  padding: 0 20px;
  width: 100%;
}
.header-row .left, .header-row .right {
  display: table-cell;
  vertical-align: top;
}
.header-row .right {
  text-align: right;
  vertical-align: bottom;
}
.header-row .left {
  width: 60%;
}
@media (max-width: 699px) {
  .header-row {
    display: block;
  }
  .header-row .left, .header-row .right {
    display: block;
  }
  .header-row .right {
    display: block;
    text-align: initial;
  }
  .header-row .right button {
    margin-left: 0;
  }
  .header-row .left {
    width: 100%;
  }
}

.header-row-1 {
  margin-top: 12px;
  margin-bottom: 8px;
}

.header-row-2 {
  margin-top: 8px;
}
.header-row-2 .left, .header-row-2 .right {
  vertical-align: bottom;
}

.header-download-btn {
  white-space: nowrap;
  margin-bottom: 0.5em;
}
@media (max-width: 699px) {
  .header-download-btn {
    margin-top: 20px;
    margin-bottom: 0;
  }
}
.header-download-btn .icon--blank-pdf {
  background-image: url("../icons/BlankPDF_60px_white.svg");
  fill: rgb(76.5, 76.5, 76.5);
  background-repeat: no-repeat;
  display: inline-block;
  width: 1.35em;
  height: 1.4em;
  vertical-align: text-bottom;
  position: relative;
}
.header-download-btn .icon-text {
  position: absolute;
  font-size: 8px;
  top: 5px;
  left: 5px;
}

@media only screen and (max-width: 699px) {
  .fundgrade-logo {
    height: 0.3in;
    margin-top: 0.2in;
  }
}
/* -- Navigation -------------------------------------------------------- */
.profile-navbar,
#mobile-navigation-menu-button {
  background: #ededed;
  border-left: none;
  border-right: none;
  border-top: 1px solid #bababa;
  border-bottom: 1px solid #bababa;
  position: relative;
  z-index: 1;
}

#mobile-navigation-menu-button {
  display: none;
  width: 100%;
  padding: 16px 12px;
  font-size: 16px;
}
#mobile-navigation-menu-button:hover {
  background-color: rgb(211.5, 211.5, 211.5);
}
@media (max-width: 699px) {
  #mobile-navigation-menu-button {
    display: block;
  }
}

.profile-navbar {
  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  *zoom: 1;
  /**
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    contenteditable attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that are clearfixed.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
}
.profile-navbar:before, .profile-navbar:after {
  display: table; /* 2 */
  content: " "; /* 1 */
}
.profile-navbar:after {
  clear: both;
}
.profile-navbar {
  margin: 0 20px;
  padding: 0;
  display: flex;
}
.profile-navbar li {
  list-style-type: none;
  text-align: center;
  width: 25%;
}
.profile-navbar a {
  display: block;
  padding: 5px;
  position: relative;
  color: #000;
  font-weight: 400;
}
.profile-navbar a:link, .profile-navbar a:visited, .profile-navbar a:hover, .profile-navbar a:active {
  text-decoration: none;
}
.is-stuck .profile-navbar li a.active:before {
  content: "";
  display: block;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 6px solid #424559;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 0;
  width: 0;
}
.profile-navbar li:hover a {
  background-color: rgb(211.5, 211.5, 211.5);
  color: #000;
}
.profile-navbar {
  /*  Mobile breakpoint */
}
@media (max-width: 699px) {
  .profile-navbar {
    position: absolute;
    width: 100%;
    box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.8);
    margin: 0;
  }
  .profile-navbar li {
    display: block;
    width: 100%;
    float: none;
    border-top: 1px solid #bababa;
  }
  .profile-navbar.opened {
    border-top: none;
  }
  .profile-navbar.closed {
    display: none;
  }
}

@media (max-width: 699px) {
  .etfprofile .profile-navbar li {
    width: 100%;
  }
}

/* -------------------------------------------------------------------------
 * Daily Price
 * ------------------------------------------------------------------------- */
.daily-price-container {
  text-align: center;
}

.daily-price {
  font-size: 34px;
  font-weight: 600;
}
.daily-price-container.has-change .daily-price {
  padding-top: 0.5em;
}

.daily-price-details {
  display: inline-block;
}

.daily-price,
.daily-price-change-container {
  white-space: nowrap;
}

.daily-price-arrow {
  font-family: "FontAwesome";
  display: inline-block;
  font-size: xx-large;
  vertical-align: sub;
}
.daily-price-arrow.arrow-up:before {
  content: "\f0d8";
  color: #06874e;
}
.daily-price-arrow.arrow-down:before {
  content: "\f0d7";
  color: #c14a36;
}

@media (max-width: 699px) {
  .fundprofile .daily-price-container {
    text-align: left;
  }
  .fundprofile .daily-price {
    text-align: right;
    padding-top: 0 !important;
  }
  .fundprofile .daily-price-details {
    font-size: 14px;
    padding-left: 0;
    padding-top: 0.25em;
  }
}
.etfprofile .ticker-box {
  background: #00a758;
  vertical-align: middle;
}
.etfprofile .ticker {
  text-align: center;
  color: #fff;
  display: inline-block;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1px;
  width: 100%;
}
.etfprofile .daily-price-container {
  position: relative;
  left: -10px;
  text-align: center;
}
.etfprofile .daily-price {
  padding-top: 0;
}

@media (max-width: 479px) {
  .etfprofile .daily-price-container {
    text-align: center;
    left: 10px;
    margin-top: 15px;
  }
  .etfprofile .daily-price {
    text-align: center;
    padding-top: 0 !important;
  }
  .etfprofile .daily-price-details {
    font-size: 14px;
    padding-left: 0;
    padding-top: 0.25em;
  }
}
#perf-chart {
  margin: 0px;
  padding: 0px;
  width: 100%;
  font-family: "Manulife JH Sans", Arial, Helvetica, sans-serif;
}
#perf-chart > svg {
  margin-top: -30px;
  min-height: 500px;
  margin-bottom: 20px;
}
#perf-chart > svg a {
  cursor: default;
}
#perf-chart .nv-focus .nv-x {
  display: none;
}
#perf-chart .nv-focus .nv-y1 .domain, #perf-chart .nv-focus .nv-y2 .domain {
  display: none;
}
#perf-chart .nv-focus .nv-y1 .tick text, #perf-chart .nv-focus .nv-y2 .tick text {
  font-size: 12px;
}
#perf-chart .nv-focus .nv-y1 text.nv-axislabel, #perf-chart .nv-focus .nv-y2 text.nv-axislabel {
  font-size: 12px;
  opacity: 0.8;
}
#perf-chart .nv-focus .nv-y2 .tick.zero line {
  stroke: black;
}
#perf-chart .nv-focus path.nv-line {
  stroke-width: 2px;
}
#perf-chart .nv-focus .nv-bars rect {
  fill-opacity: 1;
}
#perf-chart .nv-focus .nv-bars rect:hover {
  fill-opacity: 0.75;
}
#perf-chart .nv-focus .nv-x-bar-labels text.barLabel {
  font-size: 12px;
}
#perf-chart .nv-focus .nv-x-years .yearLabel {
  font-weight: 600;
}
#perf-chart .nv-x-viewfinder-years .yearLabel {
  font-size: 11px;
}
#perf-chart .nvd3 .nv-brushBackground rect {
  stroke: grey;
  fill: #ededed;
  stroke-width: 1.5px;
  stroke-opacity: 0.5;
  fill-opacity: 0.5;
}
#perf-chart .nv-context .nv-line .nv-area {
  fill-opacity: 1 !important;
}
#perf-chart .tooltip-area {
  padding-left: 50px;
  display: inline-block;
  font-weight: 600;
  /*  Mobile breakpoint */
}
@media (max-width: 699px) {
  #perf-chart .tooltip-area {
    height: 46.4px;
  }
}
#perf-chart .tooltip-area .label, #perf-chart .tooltip-area .swatch {
  display: inline-block;
}
#perf-chart .tooltip-area .swatch {
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
#perf-chart {
  /*& .nvtooltip {
  	font-size: 70%;
  	padding-top: 0.25em;
  	padding-bottom: 0.25em;
  	padding-left: 0.7em;
  	padding-right: 0.7em;
  	border-radius: 0;
  	border-color: #00695c;
  	border-width: 0.25px;
  }*/
}
#perf-chart .ending-investment-value-callout path {
  fill: none;
  stroke: #06874e;
}
#perf-chart .bg, #perf-chart .nvd3 .nv-brush .extent {
  stroke-width: 2;
  stroke: #2d69ff;
  fill-opacity: 0;
  stroke-opacity: 0;
}
#perf-chart .hover .bg, #perf-chart .nvd3 .nv-brush .hover .extent {
  stroke-opacity: 0.7;
}
#perf-chart .resize .hover path {
  stroke: #4D90FE;
  stroke-width: 1.5px;
}
#perf-chart .chart-input {
  display: inline-block;
  vertical-align: top;
  margin-right: 2em;
  margin-bottom: 1em;
}
#perf-chart .chart-input > .manulife-select {
  display: inline-block;
}
#perf-chart .chart-input-label {
  display: block;
}
#perf-chart {
  /* mobile breakpoint */
}
@media (max-width: 699px) {
  #perf-chart > svg {
    min-height: 250px;
  }
}

/* -------------------------------------------------------------------------
 * Growth Chart - Mini
 * ------------------------------------------------------------------------- */
#growth-mini-chart {
  position: absolute;
  height: 100%;
  width: 100%;
}
#growth-mini-chart .nv-y .domain,
#growth-mini-chart .nv-x .tick {
  display: none;
}
#growth-mini-chart .nv-x .nv-axisMin-x text {
  text-anchor: start !important;
}
#growth-mini-chart .nv-x .nv-axisMax-x text {
  text-anchor: end !important;
}
#growth-mini-chart .tick text,
#growth-mini-chart .nv-axisMaxMin text {
  font-size: 11px;
}
#growth-mini-chart .ending-investment-value-callout path {
  fill: none;
  stroke: #06874e;
}

#growth-mini-chart-container a.thumbnail {
  display: block;
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 60%;
  text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Pie Chart
 * ------------------------------------------------------------------------- */
.pie-chart svg.nvd3-svg {
  min-width: 100px;
  max-width: 300px;
  width: 70%;
  margin: auto;
}
.pie-chart .nvd3.nv-pie a {
  outline: none;
}
.pie-chart .nvd3.nv-pie .nv-slice path {
  fill-opacity: 1;
}
.pie-chart .nvd3.nv-pie .nv-slice.hover path {
  fill-opacity: 1;
}
.pie-chart .table-striped tr.highlight {
  background-color: #ace5c4;
}
.pie-chart .table-striped tr.highlight:nth-child(2n+1) {
  background-color: #caeed9;
}
.pie-chart .color-swatch {
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.5em;
  display: inline-block;
}
.pie-chart .fallback {
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* -------------------------------------------------------------------------
 * Quick facts formatting
 * ------------------------------------------------------------------------- */
a.quick-facts-heading {
  text-decoration: none;
  color: #000;
  display: block;
}
a.quick-facts-heading:hover, a.quick-facts-heading:focus {
  text-decoration: underline;
}

table.fund-traits-table {
  width: 100%;
  max-width: 100%;
}
table.fund-traits-table col:nth-child(1) {
  width: 30%;
}
table.fund-traits-table col:nth-child(2) {
  width: 70%;
}
table.fund-traits-table tr > * {
  padding-bottom: 0.5em;
  line-height: 20.8px;
  vertical-align: baseline;
}
table.fund-traits-table tr.align-b > * {
  vertical-align: bottom;
}
table.fund-traits-table tr.risk-row > * {
  padding-bottom: 0.5em;
}
table.fund-traits-table tr.geo-row th {
  vertical-align: top;
}
table.fund-traits-table th {
  font-weight: 600;
  padding-right: 1em;
  text-align: right;
  font-size: 16px;
}
table.fund-traits-table td {
  color: #000;
  font-size: 16px;
  font-weight: 300;
  position: relative;
}
table.fund-traits-table td .note {
  color: #424559;
  font-size: 12px;
  font-weight: 300;
}

.etfprofile .fund-traits-table col:nth-child(1),
.etfprofile .fund-traits-table col:nth-child(2) {
  width: 50%;
}
.etfprofile .fund-traits-table th {
  font-weight: 600;
  text-align: left;
}

.etf-fund-traits {
  padding: 0px 5%;
}
@media (max-width: 999px) {
  .etf-fund-traits {
    padding-left: 10px;
  }
  .etf-fund-traits th {
    padding: 0;
  }
}

#geographic-map img {
  width: 100%;
  display: block;
  /*  Mobile breakpoint */
}
@media (max-width: 699px) {
  #geographic-map img {
    max-width: 200px;
  }
}

.underlying-fund-box {
  padding-left: 0;
}

.overview-content {
  margin-bottom: 10px;
}

@media (max-width: 999px) {
  .fund-codes-resources-box {
    padding-left: 0;
  }
}

/* -------------------------------------------------------------------------
 * Risk rating formatting
 * ------------------------------------------------------------------------- */
.risk-rating-bar {
  padding-top: 0.2em;
  line-height: 0;
  clear: both;
}

.risk-rating-segment {
  display: inline-block;
  position: relative;
  width: 20%;
  height: 7px;
  border-left-width: 2px;
  border-right-width: 2px;
  border-top-width: 0;
  border-bottom-width: 0;
  border-color: white;
  border-style: solid;
}
.risk-rating-segment.seg1 {
  background-color: #06874e;
}
.risk-rating-segment.seg2 {
  background-color: #2d69ff;
}
.risk-rating-segment.seg3 {
  background-color: #76b0ff;
}
.risk-rating-segment.seg4 {
  background-color: #fcc457;
}
.risk-rating-segment.seg5 {
  background-color: #c14a36;
}

.risk-rating-arrow {
  display: block;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
}

.risk-rating-low-label, .risk-rating-high-label {
  color: #000;
  font-size: 13px;
  font-weight: normal;
  line-height: 1.5;
}

.risk-rating-low-label {
  float: left;
  padding-left: 2px;
}

.risk-rating-high-label {
  float: right;
  padding-right: 2px;
}

/*# sourceMappingURL=fundprofile.css.map */