* {
  box-sizing: border-box;
}

html {
  font-size: 1em;
  scroll-padding-top: 10em;
}

body {
  background-color: white;
  color: #5a6072;
  display: flex;
  flex-direction: column;
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
  margin: 0;
  min-height: 100vh;

  /* needed to keep offset imagery from causing horizontal scrolling */
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

body header.bootstrap {
  position: sticky;

  /* if we have a promo banner, top: -48px, otherwise top: 0 */

  top: -48px;

  /* top: 0; */
  z-index: 10000;
}

header.bootstrap.has-scroll-indicator {
  top: -64px;
}

header.bootstrap.has-scroll-indicator.promo-banner-hidden {
  top: -77px;
}

@media screen and (max-width: 62rem) {
  body header.bootstrap {
    top: 0;
  }
}

header.bootstrap.promo-banner-hidden {
  top: 0;
}

img,
svg,
object {
  max-width: 100%;
  vertical-align: bottom;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #22242b;
  font-weight: 900;
}

h1,
.h1 {
  font-size: 40px;
}

@media screen and (max-width: 60em) {
  h1,
  .h1 {
    font-size: 24px;
  }
}

h2 {
  font-size: 32px;
}

h1.xl,
h2.xl {
  font-size: 60px;
}

h1.large,
h2.large {
  font-size: 48px;
}

h3.large {
  font-size: 24px;
}

h2.medium {
  font-size: 36px;
}

@media screen and (max-width: 60em) {
  h1.xl,
  h1.large,
  h2.xl,
  h2.large {
    font-size: 36px;
  }
}

.pre-subheading {
  color: #509ee3;
  font-size: 16px;
  font-style: normal;
  font-weight: bold;
  line-height: 24px;
}

.text-white > h1,
.text-white > h2,
.text-white > h3,
.text-white > h4,
.text-white > h5,
.text-white > h6 {
  color: white;
}

ul,
ol {
  padding-inline-start: 20px;
}

/* ordered lists need a smidge more padding */
ol {
  padding-inline-start: 25px;
}

p,
/* not all blog post list items generate a p tag, so we need to match the type */
.blog-post li,
.MB-Legal li {
  font-size: 18px;
  line-height: 30px;
}

p {
  line-height: 26px;
}

p,
li {
  margin-bottom: 1.3em;
}

p.xs {
  font-size: 12px;
  line-height: 16px;
}

p.small {
  font-size: 16px;
  line-height: 20px;
}

p.large {
  font-size: 20px;
  line-height: 28px;
}

p.xl {
  font-size: 24px;
  line-height: 32px;
}

@media screen and (max-width: 60em) {
  p.xl {
    font-size: 16px;
    line-height: 20px;
  }
}

ol.large li {
  color: #000;
  font-size: 20px;
}

/* nested lists need a bit of top margin to accomodate for the line above */
li > ul,
li > ol {
  margin-top: 1.3em;
}

a {
  color: #509ee3;

  /* set a display context for links, helps prevent issues where titles
   * inside of links have odd formatting like
   * https://github.com/metabase/metabase.github.io/issues/573 */
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

p a {
  display: inline;
}

a:hover {
  color: #2d86d4;
  transition: color 0.3s ease-in-out;
}

.pseudo-link {
  color: #509ee3;
}

.pseudo-link.light {
  color: #8d93a5;
}

.container a:hover,
a:hover .pseudo-link {
  color: #509ee3;
  cursor: pointer;
}

.container div.no-card a,
.container div.no-card a:hover {
  color: inherit;
}

.container div.card.solid p {
  min-height: 52px;
}

.bg-alt {
  background-image: linear-gradient(to bottom, #f9fbfe, #fff);
}

.bg-neutral {
  background: #f9fafb;
}

.bg-off-white {
  background: #fcfcfd;
}

.bg-off-white-gradient {
  background: linear-gradient(0deg, white 0%, #fcfcfd 10%);
}

.bg-lightblue-tint {
  background: #ebf3fa;
}

.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card.solid {
  box-shadow: none;
}

/* In /data_sources, the cards would overflow to the right
 * when window widths ranged between 60 and 64em.
 */
@media screen and (min-width: 60em) {
  .card.col-md-4 {
    flex-basis: calc(100% / 3);
    -ms-flex-preferred-size: calc(100% / 3);
  }
}

.card.card--hover:hover {
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.12);
}

.course-card {
  max-width: 400px;
}

.no-card {
  background-color: inherit;
  border-radius: none;
  box-shadow: none;
}

.small-card {
  border-radius: 10px;
  height: 100%;
  padding: 16px;
  width: 100%;
}

.large-card {
  border-radius: 12px;
  height: 100%;
  padding: 32px;
  width: 100%;
}

.hover-card {
  transition: all 0.3s;
}

.hover-card:hover {
  transform: translateY(-10px);
  transition: all 0.3s;
}

.hover-card.small-vertical-raise:hover {
  transform: translateY(-4px);
}

.hover-card.hover-shadow:hover {
  box-shadow: 0 4px 24px 0 #0000001a;
}

@media screen and (min-width: 60em) {
  .sm-no-card {
    background-color: inherit;
    border-radius: none;
    box-shadow: none;
  }
}

.Button {
  background-color: transparent;
  border: 1px solid #5ea4e3;
  border-radius: 6px;
  color: #5ea4e3;
  display: block;
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.843rem;
  padding: 16px 20px;
  text-align: center;
}

@media screen and (min-width: 60em) {
  .Button {
    display: inline-block;
  }
}

.Button:hover {
  border-color: #5ea4e3;
  color: #5ea4e3;
  cursor: pointer;
  transition: all 0.3s linear;
}

.Button.Button--primary {
  background-color: #5ea4e3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: #fff;
  transition: background 0.3s ease;
}

.Button.Button--primary:hover {
  background-color: #2d86d4;
  border-color: #2d86d4;
  color: #fff;
}

.Button.Button--lightPrimary {
  background-color: #fff;
  border-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  color: #509ee3;
}

#mc-embedded-subscribe {
  display: block;
  text-align: center;
}

.Button--lightPrimary:hover {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  color: #2d86d4 !important;
  transition: box-shadow 300ms linear, color 200ms;
}

.Button.Button--light {
  border-color: #fff;
  color: #fff;
}

.Button--primary.Button--hollow {
  background-color: transparent;
  border-color: #509ee3;
  color: #509ee3;
}

.Button--purple {
  background-color: #5d60a2;
  border-color: #5d60a2;
  color: white;
}

.Button--purple:hover {
  background-color: #4b4c81;
  border-color: #4b4c81;
  color: white;
  transition: background 300ms linear;
}

.Button--play-video,
.Button--demo {
  background-color: #5ea4e3;
  border-radius: 2rem;
  box-shadow: 0 24px 24px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-weight: bold;
  left: 50%;
  padding: 12px 20px 12px 12px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s;
  z-index: 20;
}

.Button--demo {
  font-size: 1em;
  padding: 12px 20px;
  top: 55%;
}

.Button--demo:hover {
  background-color: #2d86d4;
  color: #fff;
}

.Button--play-video::before {
  border: 2px solid #fff;
  border-radius: 24px;
  color: #fff;
  content: "►";
  display: inline-block;
  margin: 0 12px 0 0;
  padding: 6px 7px 6px 10px;
}

.Button--play-video:hover {
  background-color: #2d86d4;
  border-color: #2d86d4;
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.2);
  color: #fff;
  transition: all 300ms linear;
}

.home-button-container {
  display: inline;
}

.Button--play-video-inline {
  color: #509ee3;
  margin-left: 30px;
  margin-top: 1rem;
}

.Button--play-video-inline-play {
  background: #fff;
  border: 1px solid #509ee3;
  border-radius: 14px;
  color: #509ee3;
  font-size: 0.6em;
  margin-left: 8px;
  padding: 3px 3px 2px 5px;
  position: relative;
  text-decoration: none !important;
  top: -1px;
}

@media screen and (max-width: 1199px) {
  .home-button-container {
    clear: both;
    display: block;
  }

  .Button--play-video-inline {
    margin-left: 0;
  }
}

@media screen and (max-width: 960px) {
  .home-button-container {
    text-align: center;
  }

  .Button--play-video-inline {
    display: inline-block;
    margin-top: 0;
    padding: 20px 0;
    text-align: center;
  }
}

/* everything below here should probably be audited */

.p0 {
  padding: 0;
}

.pt0 {
  padding-top: 0;
}

.pl0 {
  padding-left: 0;
}

.pl1 {
  padding-left: 1.2em;
}

.pl2 {
  padding-left: 1.728em;
}

.pl3 {
  padding-left: 2.488em;
}

.pl4 {
  padding-left: 4.3em;
}

.p1 {
  padding: 1.2em;
}

.pt1 {
  padding-top: 1.2em;
}

.pb1 {
  padding-bottom: 1.2em;
}

.p05 {
  padding: 0.6em;
}

.pt05 {
  padding-top: 0.6em;
}

.pb05 {
  padding-bottom: 0.6em;
}

.px0 {
  padding-left: 0;
  padding-right: 0;
}

.px1 {
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.py05 {
  padding-bottom: 0.6em;
  padding-top: 0.6em;
}

.py1 {
  padding-bottom: 1.2em;
  padding-top: 1.2em;
}

.p2 {
  padding: 1.728em;
}

.pt2 {
  padding-top: 1.728em;
}

.px2 {
  padding-left: 1.728em;
  padding-right: 1.728em;
}

.pb2 {
  padding-bottom: 1.728em;
}

.pb3 {
  padding-bottom: 2.488em;
}

.pb4 {
  padding-bottom: 4.3em;
}

.p3 {
  padding: 2.488em;
}

.px3 {
  padding-left: 2.488em;
  padding-right: 2.488em;
}

.pt3 {
  padding-top: 2.488em;
}

.p4 {
  padding: 4.3em;
}

.pt4 {
  padding-top: 4.3em;
}

.px4 {
  padding-left: 4.3em;
  padding-right: 4.3em;
}

.py4 {
  padding-bottom: 4.3em;
  padding-top: 4.3em;
}

.py5 {
  padding-bottom: 7.43em;
  padding-top: 7.43em;
}

.pb5 {
  padding-bottom: 7.43em;
}

.m0 {
  margin: 0;
}

.mt0 {
  margin-top: 0;
}

.mt-xs {
  margin-top: 8px;
}

.mt1 {
  margin-top: 1.2em;
}

.mt05 {
  margin-top: 0.6em;
}

.my0 {
  margin-bottom: 0;
  margin-top: 0;
}

.mt3 {
  margin-top: 2.488em;
}

.mb3 {
  margin-bottom: 2.488em;
}

.ml3 {
  margin-left: 2.488em;
}

.mr3 {
  margin-right: 2.488em;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.ml1 {
  margin-left: 1.2em;
}

.mb2 {
  margin-bottom: 1.728em;
}

.mx1 {
  margin-left: 1.2em;
  margin-right: 1.2em;
}

.mx2 {
  margin-left: 1.728em;
  margin-right: 1.728em;
}

.my05 {
  margin-bottom: 0.6em;
  margin-top: 0.6em;
}

.my1 {
  margin-bottom: 1.2em;
  margin-top: 1.2em;
}

.my2 {
  margin-bottom: 1.728em;
  margin-top: 1.728em;
}

.my3 {
  margin-bottom: 2.488em;
  margin-top: 2.488em;
}

.my4 {
  margin-bottom: 4.3em;
  margin-top: 4.3em;
}

.my5 {
  margin-bottom: 7.43em;
  margin-top: 7.43em;
}

.mb05 {
  margin-bottom: 0.6em;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb1 {
  margin-bottom: 1.2em;
}

.mt2 {
  margin-top: 1.728em;
}

.mt4 {
  margin-top: 4.3em;
}

.ml4 {
  margin-left: 4.3em;
}

.mr4 {
  margin-right: 4.3em;
}

.mb4 {
  margin-bottom: 4.3em;
}

.m05 {
  margin: 0.6em;
}

.m1 {
  margin: 1.2em;
}

.m2 {
  margin: 1.728em;
}

.mr05 {
  margin-right: 0.6em;
}

.mr1 {
  margin-right: 1.2em;
}

.mr2 {
  margin-right: 1.728em;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 4px;
}

.m-2 {
  margin: 8px;
}

.m-3 {
  margin: 16px;
}

.m-4 {
  margin: 32px;
}

.m-5 {
  margin: 64px;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 4px;
}

.mt-15 {
  margin-top: 6px;
}

.mt-2 {
  margin-top: 8px;
}

.mt-25 {
  margin-top: 12px;
}

.mt-3 {
  margin-top: 16px;
}

.mt-35 {
  margin-top: 24px;
}

.mt-4 {
  margin-top: 32px;
}

.mt-45 {
  margin-top: 48px;
}

.mt-5 {
  margin-top: 64px;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-25 {
  margin-bottom: 12px;
}

.mb-3 {
  margin-bottom: 16px;
}

.mb-35 {
  margin-bottom: 24px;
}

.mb-4 {
  margin-bottom: 32px;
}

.mb-5 {
  margin-bottom: 64px;
}

.mb-6 {
  margin-bottom: 128px;
}

.ml-1 {
  margin-left: 4px;
}

.ml-2 {
  margin-left: 8px;
}

.ml-25 {
  margin-left: 12px;
}

.ml-3 {
  margin-left: 16px;
}

.ml-4 {
  margin-left: 32px;
}

.ml-5 {
  margin-left: 64px;
}

.mr-1 {
  margin-right: 4px;
}

.mr-2 {
  margin-right: 8px;
}

.mr-25 {
  margin-right: 12px;
}

.mr-3 {
  margin-right: 16px;
}

.mr-4 {
  margin-right: 32px;
}

.mr-45 {
  margin-right: 48px;
}

.mr-5 {
  margin-right: 64px;
}

.mx-1 {
  margin-left: 4px;
  margin-right: 4px;
}

.mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.mx-3 {
  margin-left: 16px;
  margin-right: 16px;
}

.mx-4 {
  margin-left: 32px;
  margin-right: 32px;
}

.mx-5 {
  margin-left: 64px;
  margin-right: 64px;
}

.p-05 {
  padding: 2px;
}

.p-1 {
  padding: 4px;
}

.p-2 {
  padding: 8px;
}

.p-25 {
  padding: 12px;
}

.p-3 {
  padding: 16px;
}

.p-4 {
  padding: 32px;
}

.p-45 {
  padding: 48px;
}

.p-5 {
  padding: 64px;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 4px;
}

.pb-2 {
  padding-bottom: 8px;
}

.pb-25 {
  padding-bottom: 12px;
}

.pb-3 {
  padding-bottom: 16px;
}

.pb-35 {
  padding-bottom: 24px;
}

.pb-4 {
  padding-bottom: 32px;
}

.pb-5 {
  padding-bottom: 64px;
}

.pl-1 {
  padding-left: 4px;
}

.pl-2 {
  padding-left: 8px;
}

.pl-3 {
  padding-left: 16px;
}

.pl-4 {
  padding-left: 32px;
}

.pl-5 {
  padding-left: 64px;
}

.pr-1 {
  padding-right: 4px;
}

.pr-2 {
  padding-right: 8px;
}

.pr-25 {
  padding-right: 12px;
}

.pr-3 {
  padding-right: 16px;
}

.pr-4 {
  padding-right: 32px;
}

.pr-45 {
  padding-right: 48px;
}

.pr-5 {
  padding-right: 64px;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 4px;
}

.pt-2 {
  padding-top: 8px;
}

.pt-25 {
  padding-top: 12px;
}

.pt-3 {
  padding-top: 16px;
}

.pt-35 {
  padding-top: 24px;
}

.pt-4 {
  padding-top: 32px;
}

.pt-45 {
  padding-top: 48px;
}

.pt-5 {
  padding-top: 64px;
}

@media screen and (min-width: 48em) {
  .mt-sm-0 {
    margin-top: 0;
  }

  .mt-sm-1 {
    margin-top: 4px;
  }

  .mt-sm-2 {
    margin-top: 8px;
  }

  .mt-sm-3 {
    margin-top: 16px;
  }

  .mt-sm-4 {
    margin-top: 32px;
  }

  .mt-sm-5 {
    margin-top: 64px;
  }

  .mb-sm-0 {
    margin-bottom: 0;
  }

  .mb-sm-1 {
    margin-bottom: 4px;
  }

  .mb-sm-2 {
    margin-bottom: 8px;
  }

  .mb-sm-3 {
    margin-bottom: 16px;
  }

  .mb-sm-4 {
    margin-bottom: 32px;
  }

  .mb-sm-5 {
    margin-bottom: 64px;
  }

  .ml-sm-0 {
    margin-left: 0;
  }

  .ml-sm-1 {
    margin-left: 4px;
  }

  .ml-sm-2 {
    margin-left: 8px;
  }

  .ml-sm-3 {
    margin-left: 16px;
  }

  .ml-sm-4 {
    margin-left: 32px;
  }

  .ml-sm-5 {
    margin-left: 64px;
  }
}

@media screen and (min-width: 60em) {
  .sm-mt0 {
    margin-top: 0;
  }

  .sm-mt05 {
    margin-top: 0.5em;
  }

  .sm-mt1 {
    margin-top: 1.2em;
  }

  .sm-mt2 {
    margin-top: 1.728em;
  }

  .sm-mt3 {
    margin-top: 2.488em;
  }

  .sm-mr1 {
    margin-right: 1.2em;
  }

  .sm-mr2 {
    margin-right: 1.728em;
  }

  .sm-mt4 {
    margin-top: 4.3em;
  }

  .sm-ml2 {
    margin-left: 1.728em;
  }

  .sm-m0 {
    margin: 0;
  }
}

@media screen and (max-width: 60em) {
  .sm-ml-auto {
    margin-left: auto;
  }
}

.px1 {
  padding-left: 1.2em;
  padding-right: 1.2em;
}

.px2 {
  padding-left: 1.728em;
  padding-right: 1.728em;
}

.py2 {
  padding-bottom: 1.728em;
  padding-top: 1.728em;
}

.py4 {
  padding-bottom: 4.3em;
  padding-top: 4.3em;
}

.pb4 {
  padding-bottom: 4.3em;
}

.pt5 {
  padding-top: 7.43em;
}

.mt5 {
  margin-top: 7.43em;
}

@media screen and (max-width: 60em) {
  .sm-pt4 {
    padding-top: 4.3em;
  }

  .sm-py4 {
    padding-bottom: 4.3em;
    padding-top: 4.3em;
  }

  .sm-pt0 {
    padding-top: 0;
  }
}

.text-white {
  color: #fff;
}

.text-secondary {
  color: #aab7c3;
}

.text-small {
  font-size: 0.875em;
  line-height: 1.53em;
}

.text-underline {
  text-decoration: underline;
}

.text-dark {
  color: #6b7389;
}

.text-medium {
  color: #949aab;
}

/* @utils */

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

@media screen and (min-width: 60em) {
  .sm-relative {
    position: relative;
  }

  .sm-absolute {
    position: absolute;
  }
}

.top {
  top: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.bottom {
  bottom: 0;
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
}

.z4 {
  z-index: 4;
}

.z5 {
  z-index: 5;
}

.z6 {
  z-index: 6;
}

.zF {
  z-index: 999;
}

.flex {
  display: box;
  display: flex;
  display: flexbox;
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

@media screen and (min-width: 768px) {
  .flex-row-reverse-lg {
    flex-direction: row-reverse;
  }
}

.flex-column-reverse {
  flex-direction: column-reverse;
}

@media screen and (min-width: 60em) {
  .sm-flex-row {
    flex-direction: row;
  }
}

@media screen and (max-width: 60em) {
  .sm-flex-column {
    flex-direction: column;
  }

  .sm-mx1 {
    margin-left: 1.2em;
    margin-right: 1.2em;
  }

  .sm-mr0 {
    margin-right: 0;
  }

  .sm-mr-auto {
    margin-right: auto;
  }

  .sm-text-center {
    text-align: center;
  }
}

@media screen and (min-width: 60em) {
  .lg-mx1 {
    margin-left: 1.2em;
    margin-right: 1.2em;
  }
}

@media screen and (min-width: 60em) {
  .sm-flex {
    display: box;
    display: flex;
    display: flexbox;
    display: flex;
  }
}

@media screen and (min-width: 60em) {
  .sm-flex-row {
    flex-direction: row;
  }
}

.justify-around {
  justify-content: space-around;
}

.justify-between {
  justify-content: space-between;
}

.justify-start {
  justify-content: start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: end;
}

.flex-wrap {
  flex-wrap: wrap;
}

.align-center {
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.align-baseline {
  align-items: baseline;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
}

.align-end {
  align-items: end;
}

.inline-block {
  display: inline-block;
}

.no-list-style,
.no-list-style li {
  list-style-type: none;
}

.block {
  display: block;
}

@media screen and (min-width: 60em) {
  .sm-inline-block {
    display: inline-block;
  }
}

.hide {
  display: none;
}

.show {
  display: block;
}

@media screen and (min-width: 48em) {
  .hide-sm {
    display: none;
  }

  .show-sm {
    display: block;
  }

  .flex-row-sm {
    flex-direction: row;
  }

  .flex-row-reverse-sm {
    flex-direction: row-reverse;
  }

  .align-center-sm {
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
  }

  .align-baseline-sm {
    align-items: baseline;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
  }
}

@media screen and (min-width: 64em) {
  .hide-md {
    display: none;
  }

  .show-md {
    display: block;
  }

  .flex-row-md {
    flex-direction: row;
  }

  .flex-row-reverse-md {
    flex-direction: row-reverse;
  }

  .align-center-md {
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
  }
}

@media screen and (min-width: 60em) {
  .sm-hide {
    display: none;
  }

  .sm-show {
    display: block;
  }
}

@media screen and (min-width: 60em) {
  .md-hide {
    display: none;
  }

  .md-show {
    display: block;
  }
}

.no-overflow {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.text-centered {
  text-align: center;
}

.text-italic {
  font-style: italic;
}

@media screen and (min-width: 60em) {
  .sm-text-centered {
    text-align: center;
  }
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-brand,
.text-brand-hover:hover {
  color: #509ee3 !important;
}

.text-light {
  /* color: #8d93a5; */
  color: #a1a1a1;
}

.text-inherit {
  color: inherit;
}

.text-green {
  color: #84bb4c;
}

.text-yellow {
  color: #f9cf48;
}

.text-dark-yellow {
  color: #f7c217;
}

.bg-blue {
  background-color: #509ee3;
}

.bg-dark-blue {
  background-color: #12436e;
}

.bg-brand {
  background-color: #509ee3;
  transition: 300ms linear;

  /* fix for transitioning between this and bg-brand-dark-hover */
}

.bg-white {
  background-color: #fff;
}

.bg-light {
  background-color: #f9fbfe;
}

.bg-light-yellow {
  background-color: #fef9e6;
}

.bg-red {
  background-color: #ef8c8c;
}

@media screen and (min-width: 60em) {
  .sm-bg-transparent {
    background-color: transparent;
  }
}

@media screen and (min-width: 60em) {
  .sm-text-left {
    text-align: left;
  }
}

.border-top {
  border-top: 1px solid #e8e8e8;
}

.border-top--light {
  border-top: 1px solid #f0f0f0;
}

.border-bottom {
  border-bottom: 1px solid #e8e8e8;
}

.no-list-style .border-bottom:last-of-type {
  border-bottom: 0;
}

.border-left {
  border-left: 1px solid #e8e8e8;
}

.borderless {
  border: none;
  display: block;
}

.container {
  margin: 0 auto;
  max-width: 1640px;
  padding: 0 2.074em;
  position: relative;
}

.container::after,
.row::after {
  clear: both;
  content: "";
  display: table;
}

/* @code */

pre,
code {
  text-align: left;
}

pre code {
  display: block;
  overflow-x: auto;
}

code {
  background-color: #f9fbfe;
  border-radius: 6px;
  color: #2d86d4;
  display: inline;
  overflow-x: auto;
  padding: 8px;
  white-space: pre;
}

.column,
.columns {
  float: left;
  width: 100%;
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    padding: 0;
    width: 85%;
  }
}

/* For devices larger than 550px */
@media (min-width: 60em) {
  .container {
    max-width: 1440px;
    width: 80%;
  }

  .column,
  .columns {
    margin-left: 4%;
  }

  .column.ml0,
  .columns.ml0 {
    margin-left: 0;
  }

  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column,
  .one.columns {
    width: 4.6667%;
  }

  .two.columns {
    width: 13.3333%;
  }

  .three.columns {
    width: 22%;
  }

  .four.columns {
    width: 30.6667%;
  }

  .five.columns {
    width: 39.3333%;
  }

  .six.columns {
    width: 48%;
  }

  .seven.columns {
    width: 56.6667%;
  }

  .eight.columns {
    width: 65.3333%;
  }

  .nine.columns {
    width: 74%;
  }

  .ten.columns {
    width: 82.6667%;
  }

  .eleven.columns {
    width: 91.3333%;
  }

  .twelve.columns {
    margin-left: 0;
    width: 100%;
  }

  .one-third.column {
    width: 30.6667%;
  }

  .two-thirds.column {
    width: 65.3333%;
  }

  .one-half.column {
    width: 48%;
  }

  /* Offsets */
  .offset-by-half-one.column,
  .offset-by-half-one.columns {
    margin-left: 1.3335%;
  }

  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.6667%;
  }

  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.3333%;
  }

  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%;
  }

  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.6667%;
  }

  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.3333%;
  }

  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%;
  }

  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.6667%;
  }

  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.3333%;
  }

  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78%;
  }

  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.6667%;
  }

  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.3333%;
  }

  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.6667%;
  }

  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.3333%;
  }

  .offset-by-one-half.column,
  .offset-by-one-half.columns {
    margin-left: 52%;
  }
}

/* @header */

html body #LeadboosterContainer {
  bottom: 132px !important;
}

html body.cookies-accepted #LeadboosterContainer {
  bottom: 28px !important;
}

@media screen and (min-width: 1024px) {
  html body #LeadboosterContainer {
    bottom: 62px !important;
  }
}

.MB-Logo {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/logo.svg");
  background-repeat: no-repeat;
  height: 50px;
  width: 50px;
}

@media screen and (min-width: 992px) {
  .MB-Logo {
    background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/logo-with-wordmark.svg");
    background-position: 0 0;
    background-size: cover;
    height: 36px;
    position: relative;
    width: 148px;
  }
}

.MB-Logo-small {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/logo.svg");
  background-repeat: no-repeat;
  background-size: 32px;
  height: 32px;
  width: 32px;
}

/* responsive images in docs */

@media screen and (min-width: 60em) {
  .SQLIllustrationGroup {
    margin-top: 4rem;
  }

  .SQLIllustration {
    background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/homepage/sql-and-notebook.svg");
    background-repeat: no-repeat;
    height: 121px;
    width: 179px;
  }
}

.MB-Footer {
  color: #b9bbbb;
  margin-top: auto;
}

.MB-Footer a {
  color: currentcolor;
  transition: color 0.3s linear;
}

.MB-Footer a:hover {
  color: #509ee3;
}

.MB-Footer.MB-Footer--color a:hover {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.MB-Footer--color a,
.MB-Footer--color a:hover {
  color: #fff;
}

.MB-Twitter {
  margin-top: 3.2rem;
}

.MB-Footer.MB-Footer--color {
  background-color: #509ee3;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

#mc-embedded-subscribe-form {
  margin-top: 7px;
}

#mce-responses {
  margin-top: 0;
}

#mc_embed_signup div.mce_inline_error {
  background-color: #ed6e6e !important;
  border-color: #ed6e6e !important;

  /* override the mailchimp border color */
  border-radius: 4px;
}

.email.mce_inline_error {
  /* override the mailchimp border color */
  background-color: #fff;
  border-color: #ed6e6e !important;
}

.bg-blue#mc_embed_signup div.mce_inline_error {
  background-color: transparent !important;
  border-color: transparent !important;

  /* override the mailchimp border color */
  border-radius: 4px;
}

.bg-blue .email.mce_inline_error {
  border-color: #fff !important;

  /* override the mailchimp border color */
}

.bg-blue #mce-success-response {
  color: #fff;
  text-align: right;
}

.zoomImg-wrap img:hover {
  cursor: zoom-out;
}

.MB-Post img:hover {
  border-color: #509ee3;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.6rem;
  margin-bottom: 0;
  text-align: left;
  width: 100%;
}

table thead,
table tr {
  border-bottom: 1px solid #e7e9ec;
}

table tr:last-child {
  border-bottom: none;
}

table th,
table td {
  padding: 1em;
}

table td {
  vertical-align: top;
}

.MB-PostTableWrapper {
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow-y: scroll;
}

.container-small {
  margin: 0 auto 48px;
  max-width: 860px;
}

.flex-half {
  flex: 0 0 50%;
}

@media screen and (min-width: 60em) {
  .sm-flex-full {
    flex: 1;
  }
}

.checklist-outline {
  list-style-type: none;
  padding-left: 0;
}

.checklist-outline li {
  margin-bottom: 18px;
  padding-left: 28px;
  position: relative;
}

.checklist-outline li::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check-rounded-blue.svg");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;
  content: "";
  height: 20px;
  left: 0;
  position: absolute;
  top: 5px;
  width: 20px;
}

.check-list li {
  margin-bottom: 12px;
  padding-left: 24px;
  position: relative;
}

.check-list li::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check.svg");
  background-repeat: no-repeat;
  content: "";
  height: 10px;
  left: 0;
  position: absolute;
  top: 6px;
  width: 14px;
}

.MB-SimpleAction {
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  color: #2d86d4;
  display: inline-block;
  margin: 0 auto;
  padding: 10px 20px;
}

.MB-LineBreakWrapper {
  position: absolute;
  text-align: center;
  width: 100%;
}

.Select {
  display: inline-block;
  position: relative;
  width: 100%;
}

/* custom arrows */
.Select::before,
.Select::after {
  content: "";
  height: 0;
  pointer-events: none;
  position: absolute;
  right: 1em;
  top: 22px;
  width: 0;

  /* no clicks since arrow is just for appearance */
}

/* arrow pointing up */
.Select::before {
  border-bottom: 0.4rem solid #cacaca;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  margin-top: -0.25rem;
}

/* arrow pointing down */
.Select::after {
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.4rem solid #cacaca;
  margin-top: 0.25rem;
}

.Select select {
  appearance: none;
  background: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  display: inline-block;
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.834em;
  line-height: 1em;
  padding: 1rem 3rem 1rem 1rem;
  width: 100%;
}

.ContactSuccess {
  align-items: center;
  border: 1px solid #93ce57;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2em;
  padding-top: 5em;
  position: relative;
}

.ContactSuccess,
.ContactSuccess p {
  color: #84bb4c;
  text-align: center;
}

.ContactSuccess-icon {
  align-items: center;
  background-color: #84bb4c;
  border: 2px solid #84bb4c;
  border-radius: 99px;
  display: flex;
  height: 3.5em;
  justify-content: center;
  margin-bottom: 2em;
  padding: 1em;
  width: 3.5em;
}

.ServicesList li {
  line-height: 26px;
  max-width: 360px;
}

.pull-quote {
  color: #2d86d4;
  display: block;
  font-weight: 700;
  line-height: 3.1rem;
  padding-bottom: 1.5em;
  padding-top: 1.5em;
}

.bootstrap blockquote p {
  font-size: 19px;
}

.bootstrap blockquote p em,
.bootstrap blockquote p strong {
  font-size: 16px;
}

.bootstrap blockquote p em {
  color: #5a6072;
  font-style: normal;
}

.bootstrap .height-fit-content a {
  display: block;
}

@media screen and (min-width: 440px) {
  .pull-quote {
    float: right;
    margin-left: 2em;
    padding: 2em;
    width: 360px;
  }

  .pull-quote.pull-quote-left {
    float: left;
    margin-left: 0;
    margin-right: 2em;
  }
}

.tweet-link {
  color: #e8e8e8;
  display: block;
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
  margin-top: 1em;
}

.tweet-link::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/twitter.svg");
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  height: 22px;
  margin-right: 0.2em;
  width: 26px;
}

.measure {
  max-width: 38em;
}

.MB-DownloadPage {
  background-color: #509ee3;
  color: #fff;
  padding-bottom: 4rem;
}

.survey-section {
  margin-bottom: 2.488em;
}

.survey-section h4 {
  margin-bottom: 1.2em;
}

.survey-option {
  align-items: center;
  display: flex;
  margin-bottom: 1.2em;
  opacity: 1;
  position: relative;
  transition: opacity 0.3s linear 0.1s;
}

.survey-option:hover {
  cursor: pointer;
}

.survey-option textarea {
  display: block;
  width: 100%;
}

.survey-option::before {
  border: 1px solid #ced2d6;
  border-radius: 99px;
  content: "";
  display: inline-block;
  height: 26px;
  margin-right: 1em;
  width: 26px;
}

.survey-option::after {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check_white.svg");
  background-repeat: no-repeat;
  content: "";
  height: 26px;
  left: 0.5%;
  opacity: 0;
  position: absolute;
  top: 3px;
  width: 26px;
}

.survey-option.survey-option-selected::after {
  opacity: 1;
}

.survey-option-selected::before {
  background-color: #509ee3;
  border-color: #509ee3;
}

.survey-option:hover::before {
  border-color: #509ee3;
}

.full {
  width: 100%;
}

.justify-between {
  justify-content: space-between;
}

.survey-nps .survey-option {
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.survey-nps .survey-option::after {
  left: 8.5px;
}

.survey-nps .survey-option::before {
  margin-right: 0;
}

.survey-section-answered .survey-option {
  opacity: 0.4;
}

.survey-section-answered .survey-option:hover,
.survey-section-answered .survey-option-selected {
  opacity: 1;
}

.text-light {
  color: #afb8c1;
}

.text-light-grey {
  color: #8d93a5;
}

.LoadingSpinner {
  animation: loading-spinner-transition 0.8s infinite linear;
  border: 4px solid transparent;
  border-radius: 99px;
  border-top-color: currentcolor;
  box-sizing: border-box;
  display: inline-block;
  height: 32px;
  width: 32px;
}

.LoadingSpinner::after {
  border: inherit;
  border-color: currentcolor;
  border-radius: inherit;
  box-sizing: inherit;
  content: "";
  display: inherit;
  height: inherit;
  left: -4px;
  opacity: 0.25;
  position: relative;
  top: -4px;
  width: inherit;
}

.transition-all {
  transition: all 300ms linear;
}

@keyframes loading-spinner-transition {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.MB-Confirmation {
  text-align: justify;
}

.MB-Confirmation-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
}

section {
  padding: 60px 0;

  /* use relative units so the padding is not as dramatic on mobile */
  padding: 2rem 0;
}

.input {
  border: 1px solid #aab7c3;
  border-radius: 4px;
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.834em;
  padding: 1em 1.2em;
  transition: border 0.3s linear;
}

.input--lightPrimary {
  background: #509ee3;
  border: 1px solid #f1f2f4;
  border-radius: 8px;
  color: #fff;
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  padding: 16px;
}

.input--lightPrimary::placeholder {
  color: #fff;
}

.input:active,
.input:focus {
  border-color: #509ee3;
  outline: none;
}

.input--lightPrimary:active,
.input--lightPrimary:focus {
  border-width: 2px;
  outline: none;
}

.input-small {
  flex-grow: 1;
  padding: 0.834em 1em;
}

.Button--small {
  padding: 0.834em 1em;
}

@media screen and (min-width: 60em) {
  .sm-input-small {
    padding: 0.834em 1em;
  }

  .sm-Button--small {
    padding: 0.834em 1em;
  }
}

.rounded {
  border-radius: 10px;
}

.bg-lightblue {
  background-color: #6aace7;
}

.bordered {
  border: 1px solid #ddd;
}

.border-top {
  border-top: 1px solid #ddd;
}

.border-darkblue {
  border-color: #2d86d4;
}

.border-red {
  border-color: #ed6e6e;
}

.no-border {
  border: none !important;
}

.cursor-pointer {
  cursor: pointer;
}

.full-height {
  height: 100%;
}

.text-white-hover:hover {
  color: #fff;
}

.text-bold {
  font-weight: 700;
}

.fw-400 {
  font-weight: 400 !important;
}

.MB-DB-wrapper {
  align-items: center;
  border: 1px solid #e3e4e8;
  border-radius: 10px;
  display: flex;
  height: 80px;
  justify-content: center;
}

.MB-DB {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/db-sprite.png");
  background-repeat: repeat;
  height: 63px;
  width: 120px;
}

.MB-DB--MySql {
  background-position: 0 0;
}

.MB-DB--Postgres {
  background-position: 0 -63px;
}

.MB-DB--Mongo {
  background-position: 0 -123px;
}

.MB-DB--SQL-Server {
  background-position: 0 -983px;
  width: 86px;
}

.MB-DB--AWS-Redshift {
  background-position: 0 -182px;
  width: 139px;
}

.MB-DB--Druid {
  background-position: 0 -328px;
  width: 164px;
}

.MB-DB--H2 {
  background-position: -86px -971px;
  width: 107px;
}

.MB-DB--SQLite {
  background-position: 0 -387px;
  width: 127px;
}

.MB-DB--Oracle {
  background-position: 0 -450px;
  width: 140px;
}

.MB-DB--Google-Analytics {
  background-position: 0 -556px;
  height: 57px;
  width: 194px;
}

.MB-DB--Vertica {
  background-position: 0 -503px;
  width: 108px;
}

.MB-DB--Spark {
  background-position: 0 -612px;
  width: 108px;
}

.MB-DB--Presto {
  background-position: 0 -675px;
  width: 140px;
}

.MB-DB--Snowflake {
  background-position: 0 -734px;
  width: 150px;
}

.MB-DB--Amazon-Athena {
  background-position: 0 -798px;
  width: 97px;
}

.MB-DB--Cube-js {
  background-position: 0 -867px;
  width: 153px;
}

.MB-DB--Teradata {
  background-position: 0 -922px;
  height: 46px;
  width: 158px;
}

.MB-DB--Yandex {
  background-position: 0 -1047px;
  height: 62px;
  width: 172px;
}

.MB-DB--BigQuery {
  background-position: 0 -254px;
  width: 139px;
}

.ps {
  padding: 0.834em;
}

.psy {
  padding-bottom: 0.834em;
  padding-top: 0.834em;
}

.blog-callout {
  border-left: 3px solid #509ee3;
}

.text-orange {
  color: #f2a86f !important;
}

.text-purple {
  color: #509ee3 !important;
}

.Love .twitter-tweet {
  margin: 1.728em auto !important;
}

.circle {
  border-radius: 99px;
}

.text-default {
  color: currentcolor;
}

.shadowed {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.shadowed-md-hover:hover {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.12);
}

.description {
  font-size: 16px;
  line-height: 24px;
}

.flex-full {
  flex: 1;
}

@media screen and (min-width: 48em) {
  .flex-none-sm {
    flex: 0;
  }
}

.border-right {
  border-right: 1px solid #ddd;
}

.border-right-neutral-95 {
  border-right: 1px solid #f1f2f4;
}

.Search {
  background-color: white;
  border-radius: 99px;
  display: inline-block;
  padding-left: 18px;
  padding-right: 12px;
}

.Search .Search-Input {
  border: none;
  padding-left: 0;
}

.Search .Search-Button {
  appearance: none;
  background-color: #509ee3;
  border: none;
  border-radius: 99px;

  /* TODO - don't default to docs color, fine for now though */
  color: white;
  cursor: pointer;
  font-weight: 900;
  outline: none;
  padding: 0.75em;
  text-transform: uppercase;
}

.quote-block {
  font-size: 32px;
  margin-left: auto;
  margin-right: auto;
  max-width: 850px;
  text-align: center;
}

.intro-block,
.intro-block-alt {
  margin-left: auto;
  margin-right: auto;
  max-width: 630px;
  text-align: center;
}

.intro-block-alt {
  max-width: 690px;
}

.intro-block p.xl {
  padding-top: 12px;
}

.quote-attribution {
  letter-spacing: 1px;
  text-transform: uppercase;
}

.op-2 {
  opacity: 0.2;
}

.op-4 {
  opacity: 0.4;
}

.op-6 {
  opacity: 0.6;
}

.op-8 {
  opacity: 0.8;
}

.max-100 {
  max-width: 100%;
  width: 100%;
}

.fs-14,
.fs-14 p {
  font-size: 14px;
}

.fs-s {
  font-size: 12px;
}

.fs-sm {
  font-size: 0.75em;
}

.fs-n {
  font-size: 1em;
}

.fs-l {
  font-size: 15.912px;
}

.fs-18 {
  font-size: 18px;
}

/* default text */
.dt {
  color: #22242b;
}

/* light text */
.lt {
  color: #5a6072;
}

@media screen and (min-width: 60em) {
  .sm-fs-n {
    font-size: 1em;
  }
}

.hover-parent.hover--display .hover-child,
.hover-parent:hover.hover--display .hover-child--hidden {
  display: none;
}

.hover-parent:hover.hover--display .hover-child {
  display: block;
}

/*
  visibility
  hide and show a child element using visibility
*/
.hover-parent.hover--visibility .hover-child,
.hover-parent:hover.hover--visibility .hover-child--hidden {
  visibility: hidden;
}

.hover-parent:hover.hover--visibility .hover-child {
  visibility: visible;
}

.hover-parent:hover.hover--inherit > *,
.hover-parent:hover.hover--inherit .hover-child {
  color: inherit !important;
}

.fw-bold {
  font-weight: bold;
}

.fw-700 {
  font-weight: 700;
}

.fw-900 {
  font-weight: 900;
}

@media screen and (min-width: 60em) {
  .sm-fw-700 {
    font-weight: 700;
  }
}

.bg-grey-1 {
  background-color: #f1f5f7;
}

.CheckList {
  margin-left: 0;
}

.CheckList li {
  list-style-position: outside;
  list-style-type: none;
  position: relative;
}

.CheckList li::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check.svg");
  background-repeat: no-repeat;
  content: "";
  height: 26px;
  left: -28px;
  position: absolute;
  top: -2px;
  width: 26px;
}

.CheckList.CheckList--white li::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check_white.svg");
}

.CheckList.CheckList--blue li::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check_blue.svg");
}

.CheckList.CheckList--purple li::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check_purple.svg");
}

.CheckList.CheckList--gray li::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check.svg");
  opacity: 0.25;
}

.CheckList.CheckList--gray li.icon-plus::before {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/icons/plus-no-borders.svg");
  left: -21px;
  opacity: 0.35;
  top: 1px;
}

/* ensure blog posts images don't get too big */
.blog-post article img,
.blog-post article iframe {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.08);
  margin-top: 1.2em;
  max-width: 100%;
  overflow: hidden;
}

.blog-post article .lesson-listing img {
  border-radius: 0;
  box-shadow: initial;
  margin-top: 0;
}

.blog-post code {
  font-size: 14px;
  padding: 4px 6px;
}

/* util for making images 100 */
img.img-w100 {
  width: 100%;
}

@media screen and (min-width: 60em) {
  img.sm-img-auto {
    width: inherit;
  }
}

/*
Figure and figcaption used in _includes/image_and_caption.html
*/

figure {
  display: block;
  margin: 1em auto 1.8em;
  width: 100%;
}

figcaption {
  color: #6b7389;
  font-size: 0.85em;
}

.text-strikethrough {
  text-decoration: line-through;
}

@media screen and (min-width: 60em) {
  #qb-example {
    top: -100px;
  }
}

#hp-phone {
  width: 200px;
}

@media screen and (min-width: 60em) {
  .img-offset-l-50 {
    margin-left: -50%;
  }

  .img-offset-r-50 {
    margin-right: -50%;
  }

  #hp-phone {
    width: inherit;
  }
}

.Toggle {
  background-color: gray;
  border: 1px solid gray;
  border-radius: 99px;
  cursor: pointer;
  height: 34px;
  position: relative;
  width: 64px;
}

.Toggle--small {
  height: 18px;
  width: 32px;
}

.Toggle.Toggle--on {
  background-color: #509ee3;
  border-color: #509ee3;
}

.Toggle .ToggleSwitch {
  background-color: white;
  border-radius: 99px;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 16px;
}

.Toggle.Toggle--on .ToggleSwitch {
  left: auto;
  right: 0;
}

@media screen and (min-width: 60em) {
  .sm-ml-n-100 {
    margin-left: -100px;
  }
}

.glossary dt {
  font-weight: bold;
  line-height: 30px;
}

.glossary dd {
  line-height: 30px;
}

/* Leave display as none until learn redesign */
.learn-toc li {
  list-style: none;
}

#LearnSidebar-wrapper {
  display: none;
}

@media screen and (min-width: 64em) {
  #LearnSidebar-wrapper {
    display: block;
  }
}

#LearnSidebar-offset {
  opacity: 0;
  width: 278px;
}

#LearnSidebar {
  max-height: calc(100vh - 313px);
  max-width: 248px;
  min-width: 248px;
  padding-right: 30px;
  position: sticky;
  top: 180px;
}

#LearnSidebar span {
  color: rgb(107, 115, 137);
  font-size: 0.83em;
  font-weight: 700;
}

#LearnSidebar li {
  margin-bottom: 18px;
}

.text-inherit {
  color: inherit !important;
}

.SidebarChevron {
  margin-right: 14px;
  transform: rotate(-90deg);
  transition: transform 200ms linear;
}

.LearnSidebarSection.LearnSidebarSection--open .down-position img {
  transform: rotate(180deg);
  transition: transform 200ms linear;
}

.LearnSidebarSection.LearnSidebarSection--open .SidebarChevron {
  transform: rotate(0deg);
  transition: transform 200ms linear;
}

.LearnSidebarSection .LearnSidebarTracks {
  display: none;
}

.LearnSidebarSection.LearnSidebarSection--open .LearnSidebarTracks {
  display: block;
}

.LearnSidebarSection.LearnSidebarSection--open .LearnSidebarTracks.lessons-listing {
  border-left: 1px solid #e8e8e8;
}

.LearnSidebarTracks {
  margin-left: 5px;
  padding-left: 20px;
}

.chevron-up {
  transform: rotate(180deg);
}

.chevron-left {
  transform: rotate(90deg);
}

/* add a max width for article content */
.container.container--article {
  max-width: 1100px;
}

.blog-post h2,
.course-card h2 {
  font-size: 24px;
}

.blog-post article {
  margin-bottom: 64px;
}

/* add a hover state for learn images */
.ZoomImages article img:hover {
  cursor: zoom-in;
}

.LearnHero {
  bottom: -80px;
  max-width: 1040px;
}

.Logos {
  display: block;
  text-align: center;
}

.Logos .Logo {
  display: inline-block;
  margin: 0 0.7em;
  vertical-align: middle;
}

.Logo.text-centered {
  align-items: center;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .Logo.text-centered {
    margin: 0.5rem 0;
  }
}

@media screen and (min-width: 60em) {
  .Logos {
    margin: 0 auto;
    max-width: 800px;
  }
}

/* Get Started page */

.Start-Intro {
  margin-bottom: 2em;
  text-align: center;
}

.Start-Intro h1 {
  font-size: 36px;
}

.Start-Intro h2 {
  font-size: 24px;
  font-weight: normal;
  margin: 0 0 1em;
}

.Start-Main h2 {
  color: #5ea4e3;
  font-size: 26px;
  margin: 0 0 0.25em;
}

.Start-Main h2 svg {
  fill: currentcolor;
}

.Start-Main .Button {
  font-size: 1em;
  padding: 1em 2em;
}

.Start-Main-Description {
  font-size: 16px;
  margin: 0;
}

.Start-Main-Price {
  line-height: 1em;
  margin: 1em 0;
}

.Start-Main-Price strong {
  color: #4c5773;
  display: block;
  font-size: 18px;
}

.Start-Main-Price em {
  color: #949aab;
  font-size: 14px;
  font-style: normal;
}

.Start-Others ul {
  padding: 0;
}

.Start-Others li > a {
  display: block;
  padding: 1.5em 2em 1em;
}

.Start-Others li h3 {
  font-size: 18px;
  margin: 0 0 0.5em;
}

.Start-Others li p {
  color: #949aab;
  font-size: 15px;
  line-height: 1.35em;
  margin: 1em 0;
}

.Start-Others li p strong {
  color: #949aab;
  display: block;
  font-size: 16px;
  margin: 0 0 0.25em;
}

@media screen and (min-width: 60em) {
  .Start {
    padding: 6em 0;
  }

  .Start-Intro {
    margin-bottom: 0;
    text-align: left;
  }

  .Start-Others {
    margin-top: 5em;
  }

  .Start-Others li {
    margin: 0 0.5em;
    min-width: 340px;
  }

  .Start-Others li > a {
    padding-bottom: 0;
  }

  .Start-Others li p {
    margin: 1em 0 2em;
  }
}

/* Pricing page */

.Pricing {
  margin: 0 auto;
  max-width: 1320px;
}

.deploy-cloud .Pricing-Tiers:not(.deploy-cloud),
.deploy-self-host .Pricing-Tiers:not(.deploy-self-host) {
  display: none;
}

.deploy-cloud .Pricing-Switcher .deploy-cloud h3,
.deploy-cloud .Pricing-Switcher .deploy-cloud h3 svg,
.deploy-cloud .Pricing-Switcher .deploy-cloud p,
.deploy-self-host .Pricing-Switcher .deploy-self-host h3,
.deploy-self-host .Pricing-Switcher .deploy-self-host h3 svg,
.deploy-self-host .Pricing-Switcher .deploy-self-host p {
  color: #509ee3;
  fill: #509ee3;
}

.Pricing-Switcher > p {
  color: #4c5773;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  text-align: center;
}

.Pricing-Switcher div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-items: center;
  margin: 20px 0 40px;
  position: relative;
  width: 100%;
}

.Pricing-Switcher a {
  display: block;
  width: 170px;
  z-index: 3;
}

.bootstrap .Pricing-Switcher a:hover,
.bootstrap .Pricing-Switcher a:focus {
  text-decoration: none;
}

.Pricing-Switcher a h3,
.Pricing-Switcher a p {
  color: #4c5773;
  margin: 0;
}

.Pricing-Switcher a {
  display: block;
}

.Pricing-Switcher a h3 {
  display: flex;
  font-size: 20px;
  font-weight: bold;
  justify-content: flex-start;
}

.Pricing-Switcher a h3 svg {
  fill: currentcolor;
  margin: 0 8px;
  position: relative;
  top: 3px;
  width: 20px;
}

.Pricing-Switcher a p {
  font-size: 14px;
  font-weight: normal;
}

.Pricing-Switcher a:first-child {
  padding: 0 36px 0 0;
}

.Pricing-Switcher a:last-child {
  padding: 0 0 0 36px;
}

.Pricing-Switcher a:first-child h3,
.Pricing-Switcher a:first-child p {
  text-align: right;
}

.Pricing-Switcher a:first-child h3 {
  flex-direction: row-reverse;
}

.Pricing-Switcher div::before {
  background: #eff3f6;
  border-radius: 16px;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.08);
  content: " ";
  display: block;
  height: 32px;
  left: 50%;
  position: absolute;
  top: 7px;
  transform: translateX(-27px);
  width: 54px;
  z-index: 1;
}

.Pricing-Switcher div::after {
  background: #509ee3;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  content: " ";
  display: block;
  height: 28px;
  left: 50%;
  position: absolute;
  top: 9px;
  transform: translateX(-14px);
  transition: transform 0.15s;
  width: 28px;
  z-index: 2;
}

.deploy-cloud .Pricing-Switcher div::after {
  transform: translateX(-24px);
}

.deploy-self-host .Pricing-Switcher div::after {
  transform: translateX(-4px);
}

.Pricing-Tiers h2 {
  font-size: 26px;
  margin: 24px 24px 12px;
}

.Pricing-Tiers .Pricing-Tagline {
  font-size: 18px;
  font-weight: bold;
  margin: 0 24px 8px;
}

.Pricing-Tiers p {
  font-size: 14px;
  line-height: 1.35em;
}

.card.Pricing-Card {
  border: 1px solid #e4ecfb;
  overflow: visible;
}

.Pricing-Details.border-top {
  border-top: 1px solid #e4ecfb !important;
}

.Pricing-Highlights {
  flex-grow: 2;
  padding: 0 24px 12px;
}

.Pricing-Highlights .CheckList li {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0.75em;
}

.Pricing-Highlights .CheckList li::before {
  left: -20px;
  top: 5px;
}

.Pricing-Details {
  padding: 12px 24px 0;
}

.Pricing-Details dl {
  font-size: 14px;
  margin: 0 0 1.2em;
}

.Pricing-Details dl dt {
  margin: 0 0 0.25em;
  padding: 0;
}

.Pricing-Details dl dd {
  font-weight: bold;
  margin: 0 0 1.5em;
  padding: 0;
}

.highlight__button--empty {
  opacity: 0;
  visibility: hidden;
}

.Pricing-CTA p {
  margin-top: 8px;
}

.line-height-reduced {
  font-size: 14px;
  line-height: 1.1;
  margin-top: 0;
}

th.pricing-tier-oss,
.pricing-tier-oss h2,
.pricing-tier-oss .Pricing-Tagline {
  color: #f9cb39;
}

th.pricing-tier-starter,
.pricing-tier-starter h2,
.pricing-tier-starter .Pricing-Tagline {
  color: #88bf4d;
}

th.pricing-tier-pro,
.pricing-tier-pro h2,
.pricing-tier-pro .Pricing-Tagline {
  color: #509ee3;
}

.pricing-tier-enterprise h2,
.pricing-tier-enterprise .Pricing-Tagline {
  color: #7173ad;
}

@media screen and (min-width: 60em) {
  .sm-w-initial {
    width: initial;
  }
}

#lever-jobs-container {
  padding-bottom: 3em;
}

#lever-jobs-container:empty::after {
  color: #b9bbbb;
  content: "Making a sophisticated AJAX request...";
  display: block;
  height: 3em;
}

#lever-jobs-container ul,
#lever-jobs-container li {
  display: block;
  list-style: none;
  margin: 1em 0;
  padding: 0;
}

#lever-jobs-container h4 {
  margin: 3em 0 1em;
}

#lever-jobs-container li {
  font-size: 22px;
  font-weight: bold;
}

#lever-jobs-container .lever-job-tag {
  color: #b9bbbb;
  margin-left: 0.5em;
}

/** Cloud Login **/

body.cloud-login {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/homepage-bridge@2x.png");
  background-position: center bottom;
  background-repeat: no-repeat;
}

#Cloud-Login-Box {
  position: relative;
}

#Cloud-Login-Box .container {
  padding: 24px 12px;
  text-align: center;
  width: 100%;
}

#Cloud-Login-Box h2 {
  font-size: 20px;
  font-weight: bold;
  margin: 6px 0 24px;
}

#Cloud-Login-Box p {
  font-size: 14px;
  line-height: 1.35em;
  margin: 0;
}

#Cloud-Login-Box ul {
  display: block;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

#Cloud-Login-Box ul li {
  display: block;
  font-size: 16px;
  margin: 0 0 12px;
  text-align: left;
}

#Cloud-Login-Box ul li a {
  background: #f4faff;
  border-radius: 20px;
  display: block;
  padding: 12px 18px;
  position: relative;
}

#Cloud-Login-Box ul li a em {
  color: #8eaec9;
  font-style: normal;
}

#Cloud-Login-Box ul li a img {
  display: block;
  fill: #509ee3;
  position: absolute;
  right: 18px;
  top: 14px;
  transform: rotate(-90deg);
  width: 16px;
}

#Cloud-Login-Box ul li a:hover {
  background: #d3e8f9;
}

#Cloud-Login-Box #Cloud-Login-Alt {
  border-top: 1px solid #e8e8e8;
  font-size: 14px;
  margin: 0 -24px;
  padding: 20px 0 0;
}

#Cloud-Login-Box form {
  margin: 24px 0;
  position: relative;
}

#Cloud-Login-Box form input,
#Cloud-Login-Box form button {
  display: block;
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
}

#Cloud-Login-Box form button {
  background-color: #5ea4e3;
  border: 1px solid #5ea4e3;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  margin: 8px auto 0;
  padding: 12px 20px;
  text-align: center;
  width: 100%;
}

#Cloud-Login-Box form div {
  color: red;
  margin-top: 8px;
  width: 100%;
}

#Cloud-Login-Box form input {
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  color: #5ea4e3;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 11px 15px;
  width: 100%;
}

#Cloud-Login-Box form input::placeholder {
  color: #c9cdd5;
}

#Cloud-Login-Box form input:focus {
  border-color: #5ea4e3;
}

#Cloud-Login-Box form > span {
  content: ".metabaseapp.com";
  display: block;
  font-weight: bold;
  pointer-events: none;
  position: absolute;
  right: 18px;
  text-align: right;
  top: 11px;
  user-select: none;
}

dl.glossary dd.glossary {
  padding-bottom: 0.5rem;
}

@media screen and (min-width: 60em) {
  #Cloud-Login-Box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 500px;
  }

  #Cloud-Login-Box form {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 24px 0;
  }

  #Cloud-Login-Box form input {
    width: 300px;
  }

  #Cloud-Login-Box form button {
    margin: 0 0 0 14px;
    width: auto;
  }

  #Cloud-Login-Box form > span {
    right: 142px;
  }
}

body.with-modal {
  overflow: hidden;
}

.Modal-Wrapper {
  background: rgba(0, 0, 0, 0.8);
  bottom: -65px;
  cursor: auto;
  left: 0;
  outline: 0;
  position: fixed;
  right: 0;
  top: 0;
  user-select: none;
  z-index: 10000;
}

.Modal-Content {
  background: white;
  left: 50%;
  line-height: 0;

  /* Removes bottom space */
  margin-top: -40px;

  /* Compensates for .Modal-Close */
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.Modal-Close {
  color: #fff;
  font-size: 30px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  right: 10px;
  text-align: center;
  top: 10px;
  width: 30px;
}

.modal-video-get-started {
  bottom: -60px;
  left: 50%;
  opacity: 0;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity 1s;
}

.modal-video-get-started.shown {
  opacity: 1;
}

/* Learn Search Bar */

.search-bar input[type="text"] {
  border: 1px solid #5ea4e3;
  border-radius: 6px;
  margin-top: 50px;
  max-width: 190px;
  padding: 20px 80px 20px 20px;
  text-align: left;
}

.learn-search-index input[type="text"] {
  border: 1px solid #5ea4e3;
  width: 300px;
}

.search-bar input[type="text"]:focus {
  outline: #2d86d4;
}

.search-bar::placeholder {
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
}

.learn-search-bar {
  padding-left: 0;
  position: relative;
}

.learn-search-bar button {
  background-color: transparent;
  border: none;
  color: #5ea4e3;
  font-size: 0.843rem;
  left: 170px;
  overflow: hidden;
  position: absolute;
  top: 13px;
}

#LearnSidebar .input {
  border: 1px solid #5ea4e3;
}

#LearnSidebar .learn-search-bar button {
  left: 145px;
}

.learn-search-index button {
  left: 270px;
  top: 15px;
}

.blog-post h2.subtle-heading,
span.subtle-heading {
  color: #949aab;
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
}

/* Breadcrumb Trail Learn Page */

.breadcrumb-learn {
  align-items: center;
  color: #5ea4e3;
  display: flex;
  font-size: 0.9rem;
  list-style: none;
  margin-bottom: 1.5rem;
  margin-left: 0;
  padding-left: 0;
}

.breadcrumb-learn li {
  display: inline;
  padding-right: 0.25rem;
  text-transform: capitalize;
}

.breadcrumb-learn li:focus {
  color: #2d86d4;
}

.blog-post article .breadcrumb-learn img.SidebarChevron {
  cursor: inherit;
  display: inline;
  height: 10px;
  margin: 0 0.3rem 0.25rem 0.1rem;
}

.breadcrumb-learn li,
.breadcrumb-learn a {
  font-size: 0.85rem;
}

.breadcrumb-learn li {
  color: #509ee3;
}

.breadcrumb-learn a {
  color: #90c1ec;
}

/* Feedback widget styling, for both learn and docs */

#feedback-widget-container {
  margin-top: 50px;
}

p.feedback-widget-option {
  color: #fff;
  font-size: 14px;
  height: 16px;
  line-height: 16px;
  margin-bottom: 0 !important;
  margin-left: 8px;
  margin-top: 0 !important;
  width: 22px;
}

button.feedback-widget {
  height: 40px;
  margin-top: 10px;
  width: 78px;
}

.vote-button {
  border-radius: 6px !important;
  max-height: 40px;
}

.feedback-widget-docs,
p.feedback-widget-option {
  color: white !important;
  padding-top: 1px;
}

.feedback-widget-docs h4 {
  margin-top: 26px !important;
}

#feedback-comment-text {
  width: 100%;
}

textarea#feedback-comment-text:focus {
  border: 1px solid #5d60a2;
  outline: none;
}

p.page-feedback-title {
  color: #22242b;
  font-weight: 900;
  margin-top: 1rem;
  padding-top: 4px;
}

p.feedback-widget-docs {
  color: #22242b !important;
  font-weight: 900;
  margin-top: 18px !important;
}

#page-feedback-question {
  margin-bottom: 24px;
}

#page-feedback-message {
  margin-bottom: 75px;
}

#page-comment-submit {
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  height: 100%;
  margin: 0 8px 0 5px;
  padding: 12px 18px;
  width: 71px;
}

/* Newsletter CTA styling for learn pages */

.widget-separator {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 32px;
  margin-right: 8px;
  margin-top: 25px;
}

#mc_embed_signup-learn {
  margin-right: 2px;
}

#newsletter-cta-learn {
  color: #949aab;
  font-size: 14px;
  padding-top: 3px;
}

.cta-email-icon {
  margin-bottom: 5px;
  margin-right: 3px;
  padding-top: 2px;
  vertical-align: middle;
}

#mce-EMAIL-learn {
  height: 41px;
  margin-right: 5px;
  max-height: 41px;
  width: 248px;
}

#mc-embedded-subscribe-learn {
  height: 41px;
  margin-right: 5px;
  padding: 0;
  width: 76px;
}

.mc-field-group-learn {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-grow: 0;
  float: right;
  height: 40px;
  justify-content: flex-end;
  left: 407px;
  margin-top: 12px;
  order: 1;
  padding: 0;
  position: static;
  top: 0;
  width: 320px;
}

/* Sticky Header on scroll */
@keyframes fade-in-animation {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.remove-fixed {
  position: absolute;
}

.sticky-nav {
  animation-duration: 0.2s;
  animation-name: fade-in-animation;
  background: white;
  border-bottom: 1px solid #e7e9ec;
  padding-right: 2.4rem;
  position: fixed;
  right: 0;
  top: 70px;
  width: 100%;
  z-index: 2;
}

.sticky-nav th {
  text-align: center;
}

.sticky-nav th:first-child {
  width: 18%;
}

.sticky-nav ol,
.sticky-nav li {
  margin-bottom: 0;
  padding-bottom: 0;
}

ol.Pricing-Tiers,
.sticky-nav ol {
  display: flex;
  margin: auto;

  /* width: 102%; */
  width: auto;
}

.Upgrade-Features table tr {
  border: none;
}

.Upgrade-Features table tr:not(.borderless):hover {
  background: #fcfcfd;
}

.sticky-nav .Pricing-Tiers li {
  flex-basis: 21.2%;
  flex-basis: initial;
  max-width: none;
  width: 243px;
}

.sticky-nav .Pricing-Tiers li:first-child,
.sticky-nav .hide-sticky {
  display: none;
}

.sticky-nav h2 {
  font-size: 1rem;
  margin-bottom: 0;
}

.sticky-nav p {
  margin: 0;
}

.sticky-nav.Upgrade-Tier-Wrapper .Button {
  font-size: 0.7rem;
}

.Pricing-Tiers .hide-medium p:last-child {
  margin-top: 3rem;
}

/* Mobile Tabs */
.b-tab {
  border: 1px solid #000;
  display: none;
  padding: 20px;
}

.b-tab.active {
  display: block;
}

.table-header-tabs {
  border-bottom: 1px solid #f1f2f4;
  display: flex;
  justify-content: center;
  justify-content: space-evenly;
  list-style-type: none;
}

.table-header-tabs a.active {
  border-bottom: 4px solid;
  padding-bottom: 8px;
}

.Upgrade-Tier-Wrapper ol.Pricing-Tiers {
  align-items: baseline;
  display: flex;
  justify-content: end;
  margin: auto;
  padding-left: 50px;

  /* mobile only */
  padding-left: 14px;
  padding-right: 40px;
  padding-right: 47px;

  /* width: 102%; */
  width: auto;
}

.Upgrade-Tier-Wrapper .Pricing-Tiers li {
  box-sizing: border-box;
  flex-basis: initial;
  margin: 0;
  max-width: none;
  padding: 0 20px 0 0;
  width: 18.6667%;
}

.Upgrade-Tier-Wrapper .Pricing-Tiers li:first-child {
  width: 24.6667%;
}

.sticky-nav.Upgrade-Tier-Wrapper .Pricing-Tiers li {
  padding: 0;
}

@media screen and (min-width: 768px) {
  .Upgrade-Tier-Wrapper .Pricing-Tiers li {
    width: 18.6667%;
  }

  .sticky-nav.Upgrade-Tier-Wrapper .Pricing-Tiers li {
    padding: 0 0 0 25px;
  }

  .Upgrade-Tier-Wrapper .Pricing-Tiers li:first-child {
    width: 21%;
  }

  .Upgrade-Tier-Wrapper ol.Pricing-Tiers {
    max-width: 1370px;
    padding-left: 0;
  }

  .Upgrade-Tier-Wrapper .sticky-nav ol.Pricing-Tiers {
    padding-right: 0;
  }

  .Upgrade-Tier-Wrapper .sticky-nav .Pricing-Tiers li {
    width: 18.4%;
  }
}

@media screen and (min-width: 1300px) {
  .sticky-nav.Upgrade-Tier-Wrapper .Pricing-Tiers li {
    padding: 0;
  }

  .Upgrade-Tier-Wrapper .Pricing-Tiers li {
    padding: 0 20px 0 0;
    width: 241px;
  }

  .Upgrade-Tier-Wrapper .Pricing-Tiers li:first-child {
    width: 275px;
  }

  .sticky-nav .Pricing-Tiers li {
    flex-basis: initial !important;
    width: 19%;
    width: 243px;
  }

  .sticky-nav {
    padding-left: 0;
    padding-right: 0;
  }

  .Upgrade-Tier-Wrapper .sticky-nav ol.Pricing-Tiers {
    align-items: baseline;
    margin: auto;
    padding-right: 11px;
    width: 1320px;
  }
}

.table-header-tabs .pricing-tier-oss.active {
  border-color: #f9cf48;
}

.table-header-tabs .pricing-tier-oss {
  color: #f9cf48;
}

.table-header-tabs .pricing-tier-starter.active {
  border-color: #88bf4d;
}

.table-header-tabs .pricing-tier-starter {
  color: #88bf4d;
}

.table-header-tabs .pricing-tier-pro.active {
  border-color: #509ee3;
}

.table-header-tabs .pricing-tier-pro {
  color: #509ee3;
}

.table-header-tabs .pricing-tier-enterprise.active {
  border-color: #7173ad;
}

.table-header-tabs .pricing-tier-enterprise {
  color: #7173ad;
}

.show-medium {
  display: none;
}

@media screen and (min-width: 48em) {
  .table-header-tabs {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .hide-medium,
  .Pricing-Tiers li:first-child.hide-medium {
    display: none;
    width: 0;
  }

  .Upgrade-Tier-Wrapper.sticky-nav {
    padding-right: 0;
  }

  .Upgrade-Tier-Wrapper.sticky-nav .Pricing-Tiers li {
    width: 24.4%;
  }

  .Upgrade-Tier-Wrapper .Pricing-Tiers > li {
    width: 24%;
  }

  .sticky-nav.Upgrade-Tier-Wrapper .Pricing-Tiers > li {
    padding: 0 0 0 12px;
  }
}

@media screen and (max-width: 768px) {
  .show-medium {
    display: none;
  }

  /* hide all tabs by default */
  .Upgrade-Tier-Wrapper .Pricing-Tiers li,
  .tier-content {
    display: none;
  }

  /* show active tab */
  .Pricing-Tiers li.active,
  .tier-content.active {
    display: block;
    max-width: 90%;
    padding: 0;
    width: 90%;
  }

  /* Sticky Nav */
  .sticky-nav {
    padding-left: 0;
    padding-top: 20px;
  }

  .sticky-nav.Upgrade-Tier-Wrapper h2 {
    margin: 24px 0 12px;
  }

  .sticky-nav.Upgrade-Tier-Wrapper .Pricing-Highlights {
    padding: 0 0 12px;
  }

  .sticky-nav li {
    padding: 0;
  }

  .sticky-nav ol.Pricing-Tiers {
    justify-content: space-evenly;
    margin: auto;
    width: 93%;
  }

  .sticky-nav ol.Pricing-Tiers li {
    padding: 0 10px;
  }

  /* Mobile Pricing/Upgrade Table */
  .hide-mobile {
    display: none;
  }

  .yes-container {
    opacity: 0.7;

    /* width: 130px; */
  }

  .Upgrade-Tier-Wrapper h2 {
    margin: 24px 0 17px 12px;
  }
}

/* Upgrade Page */
.upgrade h2 {
  color: #509ee3;
  font-size: 24px;
}

.upgrade h2.h1 {
  font-size: 40px;
}

.Upgrade-Tier-Wrapper .Button {
  padding: 8px;
}

.Upgrade-Tier-Wrapper .Pricing-Highlights {
  padding: 0 8px 12px;
}

.Upgrade-Tier-Wrapper h2 {
  margin: 24px 8px 12px;
}

@media screen and (max-width: 60em) {
  .upgrade h2.h1 {
    font-size: 24px;
  }
}

/* Tooltip */
.tippy-arrow {
  color: #22242b;
}

.tippy-box {
  background: #22242b;
  border-radius: 8px;
  font-size: 12px;
}

.tippy-content {
  padding: 10px;
}

.info-icon {
  margin-left: 2px;
  vertical-align: bottom;
}

/* GDPR Cookie */
.gdpr-cookie-notice {
  background: #22242b;
  border-radius: 0.75rem;
  bottom: 0.5rem;
  box-shadow: 0 3px 24px rgb(0, 0, 0, 0.08);
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
  left: 0.5rem;
  margin: 0 0.25rem;
  padding: 0 0.5rem 0.5rem;
  position: fixed;
  right: 0;
  width: 75%;
}

.gdpr-cookie-notice-description {
  color: white;
  font-size: 13px;
  line-height: 14px;
}

.gdpr-cookie-notice-nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  width: 100%;
}

.gdpr-cookie-notice-modal-header,
.gdpr-cookie-notice-modal-cookies,
.gdpr-cookie-notice-modal-footer {
  padding-left: 22px;
  padding-right: 22px;
}

.gdpr-cookie-notice-modal-footer .gdpr-cookie-notice-modal-cookie-state {
  text-align: left;
}

.gdpr-cookie-notice-modal-cookie-row {
  padding-left: 0;
  padding-right: 0;
}

.gdpr-cookie-notice-modal-footer-item:hover {
  color: #1c6bb0;
}

.gdpr-cookie-notice-modal-cookie-state {
  text-align: right;
}

.gdpr-cookie-notice-modal-cookie-state,
.gdpr-cookie-notice-modal-footer-item {
  color: #509ee3;
  margin: 0.25rem 0;
  width: 100%;
}

.gdpr-cookie-notice-modal-footer-item-btn,
.gdpr-cookie-notice-modal-cookie-input:checked + .gdpr-cookie-notice-modal-cookie-input-switch {
  background: #509ee3;
  color: white;
}

.gdpr-cookie-notice-modal-cookie-input:checked + .gdpr-cookie-notice-modal-cookie-input-switch {
  box-shadow: inset 0 0 0 1px #509ee3;
}

.gdpr-cookie-notice-modal-cookie-title:hover,
.gdpr-cookie-notice-modal-close:hover {
  cursor: pointer;
}

.gdpr-cookie-notice-modal-cookie-title {
  padding-right: 1.125rem;
}

.gdpr-cookie-notice-modal-cookie-title::after {
  right: 0;
}

.gdpr-cookie-notice-nav-item {
  border-radius: 0.375rem;
  display: block;
  font-size: 0.938rem;
  font-weight: 600;
  height: 2.5rem;
  line-height: 2.5;
  margin: 0.313rem;
  padding: 0 1rem;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

.gdpr-cookie-notice-nav-item-settings {
  background-color: #22242b;
  border: 1px solid white;
  color: white;
}

.gdpr-cookie-notice-nav-item-settings:hover {
  border: 1px solid #f1f2f4;
  color: #f1f2f4;
}

.gdpr-cookie-notice-nav-item-accept {
  background-color: white;
  border-color: white;
  color: #000;
  transition: 300ms linear;
}

.gdpr-cookie-notice-nav-item-accept:hover {
  background-color: #f1f2f4;
  border-color: #f1f2f4;
  color: #000;
}

.gdpr-cookie-notice-modal-footer-item-save {
  transition: background-color 0.3s ease !important;
}

.gdpr-cookie-notice-modal-footer-item-save:hover {
  background-color: #1c6bb0;
  color: white;
}

@media screen and (min-width: 696px) {
  .gdpr-cookie-notice {
    bottom: 3rem;
    left: 2.5rem;
    margin: 0;
    max-width: 800px;
    position: fixed;
    right: 0;
    width: 70%;
    z-index: 20;
  }

  .gdpr-cookie-notice-nav-item {
    margin: 0 0.625rem;
    width: auto;
  }

  .gdpr-cookie-notice-nav {
    flex-direction: row;
    justify-content: flex-start;
  }

  .gdpr-cookie-notice {
    align-items: center;
    display: flex;
  }

  .gdpr-cookie-notice-description {
    margin-bottom: 0;
    padding: 1rem;
    width: 101%;
  }
}

@media screen and (min-width: 768px) {
  .gdpr-cookie-notice {
    padding-top: 0.5rem;
  }
}

@media screen and (min-width: 960px) {
  .gdpr-cookie-notice {
    left: 0;
    margin: auto;
    width: 73%;
  }

  .gdpr-cookie-notice-nav {
    justify-content: flex-end;
  }
}

@media screen and (min-width: 1024px) {
  .gdpr-cookie-notice-description {
    width: 148%;
  }

  .gdpr-cookie-notice {
    max-width: 1440px;
  }
}

/* -- Community -- */
.community-listing h2 {
  color: #509ee3;
  font-size: 24px;
}

.community-listing a:hover h2 {
  color: #1c6bb0;
}

.category-tags {
  margin-bottom: 20px;
}

a.category-tag,
span.category-tag {
  background: #f3f8fc;
  border-radius: 8px;
  color: #509ee3;
  font-size: 10px;
  padding: 8px;
}

span.category-tag.filter-button:hover {
  background: #509ee3;
  color: #f3f8fc;
  cursor: pointer;
}

span.category-tag:hover {
  background: #509ee3;
  color: #f3f8fc;
}

.small-card span.category-tag:hover {
  background: #f3f8fc;
  color: #509ee3;
}

span.category-tag.filter-button.filter-selected,
.bootstrap span.btn-filter.filter-selected {
  background: #12436e;
  color: #f3f8fc;
}

.author-pic {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  width: 45px;
}

.author-pic img {
  border-radius: 50%;
  width: 100%;
}

.author-credit {
  display: inline-block;
  margin-top: 10px;
  vertical-align: middle;
}

.author-credit p {
  color: #5a6072;
  font-size: 12px;
  line-height: 16px;
}

.author-name {
  font-size: 16px;
  font-weight: bold;
}

.community-post code {
  background: #fcfcfd;
  border: none;
  border-radius: 12px;
  color: #5a6072;
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 16px;
  padding: 24px;
}

.community-post p code,
.community-post li code {
  background-color: #f9fbfe;
  border: 1px solid #eceff2;
  color: #2d86d4;
  display: inline-block;
  margin: 1px 1px 0;
  padding: 4px 6px;
  vertical-align: bottom;
  white-space: pre;
}

.contributor-credit .author-pic,
.contributor-credit .contributed {
  display: inline-block;
  vertical-align: top;
}

.contributor-credit .contributed {
  width: 90%;
}

.contributor-credit .contributed p {
  color: #000;
  font-size: 12px;
}

.contributed .author-name {
  color: #5a6072;
  font-size: 24px;
  font-weight: 900;
}

.contributed .org-name {
  color: #509ee3;
  font-size: 16px;
  font-weight: 900;
}

.contributor-credit .contributed p.bio {
  font-size: 16px;
}

.contributor-credit .author-pic img {
  margin-top: 12px;
  width: 60px;
}

.community-post article img {
  display: block;
  margin-bottom: 0.5em;
}

.community-post img + em {
  color: #8d93a5;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 16px;
}

.community-post-content a {
  display: inline;
}

.contributor-credit {
  background: #fbfdfe;
  border-radius: 8px;
  height: auto;
  max-width: 740px;
  padding: 24px 16px;
}

.top-list {
  background: #fbfdfe;
  border-radius: 12px;
  max-width: 740px;
  padding: 36px 32px;
}

@media screen and (max-width: 60em) {
  h1.larger-mobile {
    font-size: 40px;
  }

  .contributor-credit .contributed {
    width: 80%;
  }
}

/* -- Product Page -- */
.product-intro {
  padding-top: 48px;
}

.product-intro .intro-block {
  margin-bottom: 36px;
}

@media screen and (min-width: 960px) {
  .product-intro .intro-block {
    margin-bottom: 36px;
  }
}

.bleed-off img {
  margin-left: 9%;
}

.get-started .pt0 {
  padding-top: 60px;
}

@media screen and (max-width: 768px) {
  .mobile-top-48 {
    margin-top: 48px;
  }

  .mobile-top-48 .my4,
  .mobile-top-48 h2.h1 {
    margin-top: 0;
  }

  .mobile-top-48 .my4,
  .mobile-top-48 .my2 {
    margin-bottom: 0;
  }

  .mobile-top-48 .pb3,
  .mobile-top-48 .py2 {
    padding-bottom: 0;
  }

  .mobile-top-48.pt4 {
    padding-top: 0;
  }

  .staggered .column.pb2 {
    padding-bottom: 0;
  }

  .staggered .columns.mt4 {
    margin-top: 0;
  }

  .get-started .pt0 {
    padding-top: 32px;
  }
}

@media screen and (max-width: 460px) {
  .staggered .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media screen and (min-width: 768px) {
  .bleed-off img {
    position: absolute;
    right: -20%;
    top: -7rem;
  }
}

@media screen and (min-width: 60em) {
  .bleed-off img {
    max-width: 120%;
    right: -30%;
    top: -9rem;
    width: 120%;
  }
}

@media screen and (min-width: 1024px) {
  .bleed-off img {
    position: relative;
    right: 0;
    top: 0;
  }
}

@media screen and (min-width: 80em) {
  .bleed-off img {
    position: relative;
    right: 0;
    top: 0;
  }

  .bleed-off {
    /* margin-bottom: 33rem; */
    top: 0;
  }

  /* .bleed-off img {
    right: -32%;
    top: 0;
    width: 120%;
    max-width: 120%;
  } */
}

.staggered .container {
  max-width: 1076px;
  width: 100%;
}

.staggered .card h3 {
  color: #22242b;
  font-size: 24px;
}

.staggered .card {
  border-radius: 24px;
  float: none;
  margin: 0 auto 2.4rem;
  max-width: 430px;
  overflow: hidden;
}

.crop-box {
  height: 290px;
  position: relative;
}

.crop-box img {
  position: absolute;
}

.crop-box.top-right img {
  right: -60px;
}

@media screen and (max-width: 460px) {
  .crop-box.top-right img {
    right: -140px;
  }
}

.crop-box.bottom-right {
  right: -5px;
}

.get-started {
  background-color: #12436e;
  box-shadow: inset 0 -10px 20px -10px rgb(0, 0, 0, 0.3);
}

.get-started .img-placeholder {
  background-image: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/stats-dashboard.svg");
  background-position: 0 top;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 -10px 20px -17px rgb(0, 0, 0, 0.3);
  height: 255px;
  width: 633px;
}

.get-started h2,
.get-started li {
  color: white;
}

ul.horizontal-checklist {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 3rem auto 1rem;
  max-width: 840px;
  padding-left: 0;
}

ul.horizontal-checklist li::before {
  background: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/check-solid-blue.svg") center no-repeat;
  content: "";
  display: inline-block;
  height: 20px;
  padding-right: 1.5rem;
  vertical-align: bottom;
  width: 22px;
}

@media screen and (max-width: 60em) {
  .horizontal-checklist {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.mini-box {
  border-radius: 4px;
  font-size: 12px;
  padding: 2px 6px 3px;
  width: fit-content;
}

.mini-circle {
  background-color: #c6c9d2;
  border-radius: 50%;
  height: 12px;
  width: 12px;
}

.mini-circle-xs {
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.plans-container {
  display: flex;
  padding: 2em;
}

.plans-warning {
  margin-right: 0.5em;
  margin-top: 1em;
}

.plans-col p {
  line-height: 1;
}

ul.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.pagination li {
  margin: 0;
}

ul.pagination li div {
  background-color: #f3f8fc;
  border-radius: 50%;
  color: #509ee3;
  cursor: pointer;
  height: 32px;
  padding-bottom: 1px;
  width: 32px;
}

ul.pagination li div:hover {
  background-color: #509ee3;
  color: white;
}

ul.pagination li.active div {
  background-color: #12436e;
  color: white;
}

.progress-bar {
  height: 4px;
  position: fixed;
  width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.rounded-4 {
  border-radius: 12px;
}

.content-container .image-wrapper {
  cursor: zoom-in;
}

.content-container .image-wrapper img {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  .content-container .image-wrapper::after {
    content: url("/National_Library/20160930123623oe_/https://www.metabase.com/images/expand.svg");
    cursor: pointer;
    display: flex;
    filter:
      invert(94%)
      sepia(8%)
      saturate(243%)
      hue-rotate(189deg)
      brightness(87%)
      contrast(87%);
    justify-content: flex-end;
    margin-top: 12px;
  }

  .content-container .image-wrapper:hover::after {
    filter:
      invert(62%)
      sepia(88%)
      saturate(2019%)
      hue-rotate(182deg)
      brightness(93%)
      contrast(91%);
  }
}

.body-footer {
  background-color: inherit;
  position: relative;
  z-index: 2;
}

.light-blue-footer-container {
  background-color: #fafbfe;
  overflow: auto;
}

@media screen and (max-width: 992px) {
  .light-blue-footer-container .body-footer {
    margin-top: 0;
  }
}

@media screen and (min-width: 60em) {
  .body-footer .row {
    padding-top: 2rem;
  }
}

.drop-shadow {
  box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.1);
}

.MB-Gallery {
  min-height: 400px;
}

.MB-Gallery-Header h1 {
  font-size: 26px;
  font-weight: bold;
  margin: 2rem 0 1rem;
}

.MB-Gallery-Header p {
  margin: 0 0 1rem;
}

div.vjs-player + p {
  margin-top: 30px;
}

[data-tippy-root].transparent {
  opacity: 0.3;
}