.tooltip {
  position: relative;
  background: #036cb6;
  color: white;
  text-align: center;
  box-shadow: 3px 3px 0 rgba(3, 108, 182, 0.2);
  font-family: "WebDin", Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-size: 1.25rem;
  text-transform: none;
  font-weight: 400;
  padding: 0.75em 1em;
  border-radius: 3px;
  white-space: nowrap; }
  .tooltip:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0; }
  .tooltip--left {
    margin-left: 9px; }
    .tooltip--left:before {
      right: 100%;
      top: 50%;
      margin-top: -9px;
      border-style: solid;
      border-width: 9px 9px 9px 0;
      border-color: transparent #036cb6 transparent transparent; }
    .form-field .tooltip--left {
      position: absolute;
      top: 50%;
      left: 100%;
      margin-left: -20px;
      margin-top: -30px; }
  .tooltip--right {
    margin-right: 9px; }
    .tooltip--right:before {
      left: 100%;
      top: 50%;
      margin-top: -9px;
      border-style: solid;
      border-width: 9px 0 9px 9px;
      border-color: transparent transparent transparent #036cb6; }
    .form-field .tooltip--right {
      position: absolute;
      top: 50%;
      right: 100%;
      margin-right: -20px;
      margin-top: -30px; }
  .tooltip--top {
    margin-top: 9px; }
    .tooltip--top:before {
      bottom: 100%;
      left: 50%;
      margin-left: -9px;
      border-style: solid;
      border-width: 0 9px 9px 9px;
      border-color: transparent transparent #036cb6 transparent; }
  .tooltip--bottom {
    margin-bottom: 9px; }
    .tooltip--bottom:before {
      top: 100%;
      left: 50%;
      margin-left: -9px;
      border-style: solid;
      border-width: 9px 9px 0 9px;
      border-color: #036cb6 transparent transparent transparent; }
  .tooltip--popup {
    position: absolute !important;
    right: auto !important;
    margin-top: -0.5em;
    text-align: left;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.25em;
    color: #fff;
    margin-bottom: 9px;
    opacity: 1;
    transition: opacity 0.4s ease-in-out; }
    .tooltip--popup > * {
      opacity: 1 !important; }
    .tooltip--popup:before {
      top: 100%;
      left: 50%;
      margin-left: -9px;
      border-style: solid;
      border-width: 9px 9px 0 9px;
      border-color: #036cb6 transparent transparent transparent; }
  .tooltip__question-mark {
    display: inline-block;
    height: 1em;
    position: relative;
    top: 3px;
    height: 20px;
    width: 20px; }
    .tooltip__question-mark svg {
      width: 20px;
      height: 20px; }

.helptip-link {
  text-decoration: none;
  font-weight: inherit !important;
  border-bottom: 1px solid #60bbfc; }

.helptip {
  display: none;
  position: absolute;
  background: #ede9e8;
  box-shadow: 3px 3px 0 rgba(109, 111, 113, 0.3);
  max-width: 440px;
  padding: 2em;
  border-radius: 3px;
  margin-top: 10px; }
  @media screen and (max-width: 48em) {
    .helptip {
      width: 100%;
      left: 0 !important;
      right: 0 !important;
      top: 0px !important;
      bottom: 0px !important;
      max-width: none;
      margin-top: 0;
      overflow-y: scroll;
      position: fixed; } }
  .helptip .divider {
    font-size: 40px;
    font-size: 2.5rem;
    margin-bottom: 1em; }
  .helptip__close {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    width: 25px;
    height: 25px; }
    .helptip__close svg path {
      fill: #6d6f71; }
  .helptip__note {
    font-family: "WebDin", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-size: 1.25rem;
    margin-bottom: 1em; }
  .helptip__rate {
    display: block;
    font-size: 80px;
    font-size: 5rem;
    line-height: 1;
    font-weight: 200; }
  .helptip__footer {
    text-align: center;
    font-family: "WebDin", Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-size: 1.25rem;
    margin-top: 1.5em;
    line-height: 1; }
    .helptip__footer a {
      margin: 0 10px; }