@import url('https://rsms.me/inter/inter.css');

html {
  --color-black: #1E272E;
  --color-default: #34383b;
  --color-brand: #C88E69;
  --color-brand-text: #B77A54;
  --color-brand-light: #FFF7F2;
  --color-grey: #6d6d6d;
  --color-light-grey: #ccc;
  --color-lightest-grey: #e7e7e7;
  --color-red: #c55353;
}

* {box-sizing: border-box;border:0;margin:0;}

body {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

h1, h2, h3 {margin-bottom: 0.5em;margin-top:1em;font-family: 'neue-haas-grotesk-display', sans-serif; font-weight: 900;color: var(--color-black) }
h2 {font-size: 1.8em;}
h3 {font-size: 1.5em;}
p {margin-bottom: 1em}

a, button.button-link {color: var(--color-brand-text)}
button.button-link { display: inline; text-decoration: underline; font-size: inherit; background:none; width:auto;cursor: pointer; padding: 0 }
a.no-link {color: var(--color-default)}

hr {margin:3rem 0;border:0;border-top: 1px solid var(--color-light-grey);}

.font-normal {font-family: neue-haas-grotesk-text, sans-serif;}
.font-title {font-family: 'neue-haas-grotesk-display', sans-serif; font-weight: 900;}
.color-grey { color: var(--color-grey); }
.color-brand { color: var(--color-brand-text); }
.color-red { color: var(--color-red); }
.color-green { color: green; }
.tc {text-align:center;}
.tr {text-align:right;}
.tl {text-align:left;}
.normal { font-weight: normal }
.lh1 {line-height: 1}
.b {font-weight: bold}

.mb0 {margin-bottom: 0}
.mbhalf {margin-bottom: 0.5rem}
.mb1 {margin-bottom: 1rem}
.mb2 {margin-bottom: 2rem}
.mb3 {margin-bottom: 3rem}
.mt0 {margin-top: 0}
.mt1 {margin-top: 1rem}
.mthalf {margin-top: 0.5rem}
.mt2 {margin-top: 2rem}
.mt3 {margin-top: 3rem}
.mt4 {margin-top: 4rem}
.mt6 {margin-top: 6rem}

.fssmall {font-size: 0.875rem}
.fs16 {font-size: 1rem}
.fs18 {font-size: 1.13rem}
.fs20 {font-size: 1.25rem}
.fs24 {font-size: 1.5rem}
.fs40 {font-size: 2.5rem}
.fs48 {font-size: 3rem}

.ttu {text-transform: uppercase;}
.tdn {text-decoration: none}

.text--title {
  display:block;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-grey);
  font-size: 0.8rem;
  font-weight: bold;
  height: 2rem;
}
.text--figure {
  display:inline-block;
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-black);
  font-family:neue-haas-grotesk-display;
}

.tag { 
  padding: 2px 4px;
  color: #fff;
  background-color: var(--color-brand);
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: bold;
  position: relative;
  top: -1px;
}

svg { vertical-align: middle;position: relative;top: -2px; }
img {max-width: 100%}

input:not([type=checkbox]):not([type=radio]), button:not(.button-link), select {appearance: none; -webkit-appearance:none;font-size: inherit;font-family: inherit;}
.button, input:not([type=checkbox]):not([type=radio]), button:not(.button-link), select {border-radius: 3px;padding: 0.5rem 0.75rem;text-decoration: none;}
input:not([type=checkbox]):not([type=radio]), select {border: 2px solid #ccc;}
label, input:not([type=checkbox]):not([type=radio]), button, select {display: block;width: 100%;max-width: 400px}
label {font-weight: bold; margin-bottom: 4px;}
button:not(.button-link), .button {background-color: var(--color-brand);color: #fff; font-weight: bold;cursor: pointer}
.helptext { display: block;color: var(--color-grey);font-size: 0.89em;margin-top: 4px; }

.container {padding-left: 1rem;padding-right: 1rem}

.header { padding: 1rem 0; position: sticky;top: 0; background: #fff; z-index: 1000; border-bottom: 1px solid #efefef}
.header .container {display: flex; justify-content: space-between;flex-wrap: nowrap;}
.header__col {width: 65%;align-self: baseline;}
.header__col:nth-of-type(2n) {width:35%;text-align: right;}
@media (max-width: 460px) {
  .nav__tagline {display: none}
}

.header .mobile-only {display: none}
@media (max-width: 589px) {
  .nav-link {display: none}
  .header .mobile-only {display: block}
}
.nav-link {
  padding: 0.5rem;
}

.menu-trigger { padding: 4px 8px; margin-left: 8px; position: relative; display: inline-block; cursor: pointer; }
.menu__list {display: none; cursor: default;}
.menu__list a,
.menu__list span {display: block; padding: 4px 16px;}
.menu-trigger:hover .menu__list {
  display: block;
  position: absolute;
  top: 28px;
  right: -4px;
  width: 200px;
  background-color: #fff;
  padding: 8px 0;
  border: 1px solid var(--color-lightest-grey);
  border-radius: 10px;
}

.logo-wink {display: none}
.logo-hover:hover .logo-eye {display: none}
.logo-hover:hover .logo-wink {display: block}

.avatar {
  width: 32px;
  border-radius: 50%;
  vertical-align: middle;
  position: relative;
  top: -3px;
}

.cols {display: flex; justify-content: space-between;flex-wrap: wrap;}
.cols > div {width: 100%;}
@media (min-width: 530px) {
  .cols {flex-wrap: nowrap;}
  .cols > div {width: 48%;}
}

.toolbar {padding: 2rem 0 0; display: flex; justify-content: space-between;flex-wrap: wrap;}
@media (min-width: 530px) {
  .toolbar {flex-wrap: nowrap;}
  .toolbar div {width: 50%;}
}
@media (min-width: 680px) {
  .toolbar div {width: 63%}
  .toolbar div+div {width: 37%}
}


.hero-box {
  position: relative;
  border-radius: 10px;
  background-color: var(--color-brand-light);
  padding: 1.5rem 2rem;
}
.hero-switch {
  position: absolute;
  right: 2rem;
  top:2.5rem;
}

@media (max-width: 640px) {
  .hero-box { padding-top: 3rem; }
  .hero-switch { text-align: center; top: 1.5rem; left: 2rem; }
  .hero-box > h2 { text-align: center; }
}


.boxes {display: flex; justify-content: space-between;flex-wrap: wrap; margin: 0 -1rem;}
.boxes div {
  background: #fff; 
  margin:1rem;
  flex: 0 0 calc(100% - 2rem);
  text-align: center; 
  border: 1px solid var(--color-light-grey);
  padding: 1rem 0 0;
  border-radius: 1rem
}
.boxes.nocharts div {
  padding-bottom: 1rem;
}
@media (min-width: 361px) {
  .boxes div {flex: 0 1 calc(50% - 2rem);}
  .boxes div:first-of-type { flex: 1 0 calc(100% - 2rem); }
}
@media (min-width: 361px) and (max-width: 450px) {
  .boxes .text--title { letter-spacing: normal !important; }
  .boxes .hide-text {display: none}
}
@media (min-width: 701px) {
  .boxes div {flex: 0 1 calc(33.333333% - 2rem);}
  .boxes div:first-of-type, .boxes div:nth-of-type(0n+2) { flex: 1 0 calc(50% - 2rem); }
}
@media (min-width: 991px) {
  .boxes div, .boxes div:first-of-type, .boxes div:nth-of-type(0n+2) { flex: 0 0 calc(20% - 2rem) !important; }
}

.box__subtitle {
  margin-left: 0.5rem;
}
@media (max-width: 450px) {
  .box__subtitle {
    display: block;
    margin: 0;
  }
}

.boxes div canvas {
  border-radius: 0 0 1rem 1rem;
}


.switch {
  display: inline-block;
  padding: 4px 8px;
  margin-bottom: 1rem;
  border: 1px solid var(--color-brand);
  border-radius: 3px;
  text-decoration: none;
}
.switch.active {
  background-color: var(--color-brand);
  color: #fff;
}


.table-wrap {width: 100%;}
@media (max-width: 940px) {
  .table-wrap {
    overflow: auto
  }
}
table {font-size: 0.875rem;width: 100%;}
table th, table td {padding: 4px;}
table td.date_cell {width: 100px;text-align: center;}
table td.tweet_cell {
  display: block;
  width: 320px;
  position: relative;
}
table td.follower_cell {
  width: 160px;
}
table td.tweet_cell .nooverflow {
  margin-left: 1.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tweet_full, .tweet_full--dummy {
  display: none; position: absolute;;
  border-radius: 1rem;
  z-index: 3;
  font-size: 0.875rem;
}
.tweet_full--dummy {z-index: 2}
.tweet_full {
  left: 28px;top: -12px; width: 457px; padding: 1rem 1rem 1rem 0;
}
.tweet_full--dummy {
  left:-13px;top: -13px; width: 500px; padding: 1rem 1rem 1rem 40px; background: #fff;border:1px solid var(--color-light-grey)
}
.tweet_full--dummy div {visibility: hidden;}
.tweet_cell .trigger { position: absolute;left: -3px;top:0;height: 30px; width: 30px;text-align: center; padding-top: 5px; }
@media (max-width: 940px) {
  .tweet_cell .trigger {display: none}
}
.tweet_cell .trigger:hover {z-index:3;cursor: alias;}
.tweet_cell .trigger:hover ~ .tweet_full,
.tweet_cell .trigger:hover ~ .tweet_full--dummy,
.tweet_cell .tweet_full:hover, 
.tweet_cell .tweet_full:hover ~ .tweet_full--dummy {display: block;}

.figures {font-feature-settings: "zero", "tnum";font-family: Inter, monospace;}

.header-sorter {color: var(--color-default)}
.header-sorter:not(.active) {text-decoration:none;}
.header-sorter:not(.active) svg {display: none}
.header-sorter.asc svg {transform: rotate(180deg);}

.top-metric { font-weight: bold; padding: 2px 4px;  border-radius: 3px; background-color: var(--color-lightest-grey);}

#search {
  width: auto;
  display: inline-block;
  height: 29px;
  border-width: 1px;
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 1rem;
}

footer {margin-top: 6rem;padding: 3rem 0 1rem;font-size: 0.89rem; border-top: 1px solid #efefef}

@media (min-width: 530px) {
  footer .container {
    display: flex;
    flex-wrap: nowrap;
  }
  .footer-col--logo {
    width: 100px;
    flex-shrink: 0;
    text-align: left;
  }
  .footer-col--links {
    flex-grow: 1;
    text-align: left;
  }
  .footer-col--extra {
    width: 30%;
    text-align: right;
  }
}

.footer-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer-list li {
  margin-bottom: 0.5rem;
}

.plan-box {
  margin-bottom: 3rem;
  border-radius: 10px;
  border: 1px solid var(--color-brand);
  padding: 0 1rem 1rem;
}
.plan-box--grey {
  border-color: var(--color-light-grey);
}
.plan-button {
  padding: 0.7rem 1rem;
  font-weight: normal;
  width: 90%;
  display: inline-block;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.plan-box--grey .plan-button {
  background-color: var(--color-grey);
}


.plan-list {
  list-style: none;
  padding-left: 0;
}
.plan-list li {
  padding-left: 1.5rem;
  margin: 0.25rem 0;
  position: relative;
}
.plan-list li::after {
  font-family: system-ui, sans-serif;
  position: absolute;
  top: 0px;
  left: 2px;
  text-align: center;
  width: 1rem;
  content: "✓";
  font-weight: bold;
  color: var(--color-brand-text)
}

.intercom-lightweight-app,
#intercom-container {display: none}


.countdown {
  display: flex;
  align-items: center;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.countdown-bar {
  position: relative;
  width: 100%;
  margin: 0 8px;
  background: #ccc;
  height: 1rem;
  border-radius: 1rem;
}
.countdown-bar-inner {
  position: absolute;
  right: 0;
  top: 0;
  background: var(--color-brand);
  height: 100%;
  border-radius: 1rem;
}


.settings-section  {
  padding: 0.5rem;
  border: 1px solid var(--color-light-grey);
  border-radius: 10px;
  margin-bottom: 0.25rem;
  cursor: move;
  background-color: #fff;
}


/**
 * Tooltip Styles
 */

/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
  position: relative;
  cursor: help;
}

/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
  position: absolute;
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 
  opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition:    
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition:         
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform:    translate3d(0, 0, 0);
  transform:         translate3d(0, 0, 0);
  pointer-events: none;
}

/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
  z-index: 1001;
  border: 6px solid transparent;
  background: transparent;
  content: "";
}

/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
  z-index: 1000;
  padding: 8px;
  width: 160px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  font-size: 14px;
  line-height: 1.2;
}

/* Directions */

/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
  bottom: 100%;
  left: 50%;
}

[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
  margin-left: -6px;
  margin-bottom: -12px;
  border-top-color: #000;
  border-top-color: hsla(0, 0%, 20%, 0.9);
}

/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
  margin-left: -80px;
}

[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
  -webkit-transform: translateY(-12px);
  -moz-transform:    translateY(-12px);
  transform:         translateY(-12px); 
}

/* Left */
.tooltip-left:before,
.tooltip-left:after {
  right: 100%;
  bottom: 50%;
  left: auto;
}

.tooltip-left:before {
  margin-left: 0;
  margin-right: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-left-color: #000;
  border-left-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
  -webkit-transform: translateX(-12px);
  -moz-transform:    translateX(-12px);
  transform:         translateX(-12px); 
}

/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
  top: 100%;
  bottom: auto;
  left: 50%;
}

.tooltip-bottom:before {
  margin-top: -12px;
  margin-bottom: 0;
  border-top-color: transparent;
  border-bottom-color: #000;
  border-bottom-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
  -webkit-transform: translateY(12px);
  -moz-transform:    translateY(12px);
  transform:         translateY(12px); 
}

/* Right */
.tooltip-right:before,
.tooltip-right:after {
  bottom: 50%;
  left: 100%;
}

.tooltip-right:before {
  margin-bottom: 0;
  margin-left: -12px;
  border-top-color: transparent;
  border-right-color: #000;
  border-right-color: hsla(0, 0%, 20%, 0.9);
}

.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after {
  -webkit-transform: translateX(12px);
  -moz-transform:    translateX(12px);
  transform:         translateX(12px); 
}

/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before {
  top: 3px;
}

/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after {
  margin-left: 0;
  margin-bottom: -16px;
}



[data-tippy] {
  position: relative;
  top: 1px;
  margin-left: 4px;
}
.tippy-content a {
  color: #fff;
}