html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/* One-off breakpoints (consider consolidation)*/
/* Mayflower Color Tokens */
.ma__tooltip__inner {
  display: inline-block;
  position: relative; }

.ma__tooltip__open {
  border-bottom-style: dotted;
  border-bottom-width: 2px;
  cursor: pointer;
  font-size: 1rem;
  transition: border ease .4s; }
  .ma__tooltip__open > svg {
    margin-bottom: -.2em;
    width: 16px;
    height: 16px; }

.ma__tooltip__control {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

.ma__tooltip__modal {
  margin-top: 10px;
  max-width: 280px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 1000; }
  .ma__tooltip__modal--below:before {
    border-style: solid;
    border-width: 10px;
    border-top: none;
    content: "";
    height: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0; }

.ma__tooltip__control:not(:focus) ~ .ma__tooltip__modal {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0; }

.ma__tooltip__container {
  box-shadow: 2px 2px 4px rgba(1, 1, 1, 0.1), -2px 2px 4px rgba(1, 1, 1, 0.1);
  position: absolute;
  left: 0;
  top: 0;
  width: 280px; }

.ma__tooltip__close {
  border: 2px solid;
  display: block;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1.2rem;
  margin: 0;
  padding: 8px;
  text-align: right;
  text-transform: uppercase;
  width: 100%; }
  .ma__tooltip__close:after {
    content: "+";
    display: inline-block;
    font-size: 2.5em;
    line-height: 1.2rem;
    margin-left: .2rem;
    transform: rotate(45deg);
    vertical-align: top; }

.ma__tooltip__title {
  font-size: 1.375rem;
  line-height: 1.4;
  margin-bottom: .25em;
  margin: 15px 20px 0; }

.ma__tooltip__message {
  font-size: 18px;
  margin: 15px 20px 15px; }

.ma__tooltip__open {
  border-color: transparent;
  font-weight: bold; }
  .ma__tooltip__open:hover {
    border-color: rgba(20, 85, 143, 0.5) !important; }
  .ma__tooltip__open > svg {
    fill: #8aaac7; }

.ma__tooltip__control:focus ~ .ma__tooltip__open,
.ma__tooltip__control:checked + .ma__tooltip__open {
  border-color: rgba(20, 85, 143, 0.5); }

.ma__tooltip__control:not(:focus) ~ .ma__tooltip__open {
  border-color: transparent; }

.ma__tooltip__modal--below:before {
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #14558f; }

.ma__tooltip__container {
  background-color: #F2F2F2; }

.ma__tooltip__close {
  background-color: #14558f;
  border-color: transparent;
  color: white;
  font-weight: bold; }
  .ma__tooltip__close:after {
    font-weight: 500; }

.ma__tooltip__control:focus ~ .ma__tooltip__modal .ma__tooltip__close {
  border-color: Highlight !important;
  /* WebKit gets its native focus styles.
     */ }
  @media (-webkit-min-device-pixel-ratio: 0) {
    .ma__tooltip__control:focus ~ .ma__tooltip__modal .ma__tooltip__close {
      outline-color: -webkit-focus-ring-color; } }

.ma__tooltip__open > svg {
  margin-bottom: -.2em;
  margin-left: .2em;
  width: 16px;
  height: 16px; }