html {
  font-family: "Source Sans Pro";
  font-size: 16px;
  background: #242323;
  color: #ffffff; }

body {
  margin: 0; }

::selection {
  background: #22e27f; }

::-moz-selection {
  background: #22e27f; }

.button {
  border: 1px solid #22e27f;
  border-radius: 4px;
  padding: 4px; }

a {
  text-decoration: none;
  font-weight: bold;
  color: #22e27f;
  font-size: 18px; }

a:hover {
  opacity: 0.5; }

.sayhello {
  text-align: center;
  margin: auto;
  font-size: 12px;
  font-family: "Source Code Pro";
  margin-top: 0;
  margin-bottom: 20px; }
  .sayhello a {
    font-size: 12px; }

.connection-line {
  height: 100px;
  background-color: #585858;
  width: 1px;
  margin: auto;
  margin-top: 0;
  margin-bottom: 0; }

.content-box {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  border-radius: 6px;
  justify-content: space-evenly;
  margin-bottom: 0;
  margin: auto;
  border: 1px solid #585858;
  padding: 16px; }
  .content-box .leading {
    text-align: left;
    padding-top: 0;
    margin-top: 16px;
    font-weight: bold;
    font-size: 24px;
    margin-left: 0;
    text-align: center;
    color: #22e27f; }
  .content-box .heading {
    margin-bottom: 8px;
    font-weight: 400;
    text-align: center;
    font-size: 16px;
    font-family: "Source Code Pro"; }

.gradient {
  background-image: linear-gradient(#585858, #22e27f); }

@media (min-width: 1000px) {
  .content-box {
    min-width: 800px; } }

#header-logo {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: -10px;
  height: 100px;
  width: 100px; }

.Logo {
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none; }
  .Logo a {
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    color: #22e27f;
    font-weight: 900;
    font-size: 40px; }
  .Logo a:hover {
    opacity: unset; }
  .Logo .api {
    font-weight: 400; }
  .Logo p {
    text-decoration: none;
    color: #22e27f;
    font-weight: 900;
    font-family: "Source Code Pro";
    font-size: 1em; }

.landing {
  display: flex;
  flex-direction: column; }
  .landing .title {
    text-align: center;
    padding-top: 0;
    display: flex;
    flex-direction: column; }
    .landing .title img {
      margin: 0;
      padding: 0;
      width: 36px;
      height: 36px; }
    .landing .title h1 {
      margin: 0;
      margin-bottom: 12px; }
    .landing .title h2 {
      margin-top: 0;
      color: #ffffff;
      font-weight: bold;
      font-size: 16px;
      font-family: "Source Code Pro"; }
  .landing .more-indicator {
    margin: auto;
    margin-bottom: 100px;
    margin-top: -8px;
    font-size: 40px;
    color: #585858;
    animation: jump 3s linear alternate infinite;
    animation-delay: 15s;
    opacity: 0.5; }

@keyframes jump {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(10px); }
  100% {
    transform: translateY(-10px); } }
  .landing .more-hide {
    animation: hide 0.25s linear forwards; }

@keyframes hide {
  0% {
    opacity: 0.5; }
  100% {
    opacity: 0; } }

.demo-selector {
  display: flex;
  flex-direction: row;
  margin: auto;
  justify-content: space-evenly;
  margin-top: 40px; }
  @media (max-width: 600px) {
    .demo-selector {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-row-gap: 20px; } }
  .demo-selector .button-content {
    display: flex;
    flex-direction: column;
    width: 60px; }
  .demo-selector .selected {
    border-color: #22e27f;
    background-color: #22e27f; }
  .demo-selector button:hover {
    opacity: 0.7; }
  .demo-selector button:active {
    transform: scale(0.98);
    opacity: 1.0; }
  .demo-selector button {
    outline: none;
    background: transparent;
    border: 1px solid #585858;
    color: #ffffff;
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    margin-right: 16px;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 40px;
    cursor: pointer; }
    .demo-selector button img {
      width: 32px;
      height: 32px;
      margin: auto; }
    .demo-selector button .push-icon {
      width: 34px;
      height: 34px; }
    .demo-selector button .slack-icon {
      border-radius: 6px;
      box-shadow: 0px 0px 4px #16161699;
      -webkit-box-shadow: 0px 0px 4px #16161699; }
    .demo-selector button .sms-icon {
      border-radius: 6px;
      box-shadow: 0px 0px 4px #16161699;
      -webkit-box-shadow: 0px 0px 4px #16161699; }
    .demo-selector button span {
      margin: auto;
      font-size: 12px;
      margin-top: 8px;
      font-weight: 500;
      font-family: "Source Code Pro";
      text-align: center; }

.nav {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  padding-top: 1em;
  padding-bottom: 1em;
  display: flex;
  flex-direction: row;
  z-index: 999;
  width: 100%;
  background-color: #242323; }
  .nav #nav-github-button {
    margin-left: 1em;
    margin-top: auto;
    margin-bottom: auto; }
  .nav ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 4px;
    margin: 0;
    margin-left: auto;
    margin-right: 0; }
  .nav li:first-child {
    margin-left: auto; }
  .nav li {
    padding: 6px;
    margin: 8px;
    font-weight: 600; }
    .nav li a i {
      padding-left: 4px;
      font-size: 14px; }
  .nav li:hover {
    opacity: 0.7; }
  .nav li:last-child:hover {
    opacity: 1.0; }

.cta {
  margin: auto;
  margin-left: 0;
  margin-right: 1em; }
  .cta a {
    padding: 6px;
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 30px;
    background-color: #22e27f;
    color: #242323;
    font-weight: 600;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    text-align: center; }
    .cta a .heading {
      margin-top: auto;
      font-weight: bold; }
    .cta a .subheading {
      opacity: 0.7;
      margin-bottom: auto;
      font-weight: normal;
      font-size: 12px; }
  .cta a:hover {
    opacity: 1.0; }
  .cta a:active {
    opacity: 0.7; }

.cta:hover {
  transform: scale(1.08);
  opacity: 1.0; }

.cta:active {
  transform: scale(1); }

#nav.fade {
  animation: hidebg 0.5s linear forwards;
  animation-delay: 0; }

@keyframes hidebg {
  0% {
    background-color: #242323; }
  100% {
    background-color: transparent; } }
  #nav.fade li {
    animation: hide 0.5s linear forwards;
    animation-delay: 0; }

@keyframes hide {
  0% {
    opacity: 1.0; }
  100% {
    opacity: 0.0; } }
  #nav.fade .cta a {
    -webkit-box-shadow: 0px 0px 8px #16161699;
    -moz-box-shadow: 0px 0px 8px #16161699;
    -o-box-shadow: 0px 0px 8px #16161699;
    -ms-box-shadow: 0px 0px 8px #16161699;
    box-shadow: 0px 0px 8px #16161699; }

#producthunt-phone {
  display: none; }

#producthunt {
  padding-left: 1em;
  margin-top: auto;
  margin-bottom: auto; }

@media (max-width: 750px) {
  #producthunt-phone {
    display: unset;
    margin-top: 1em;
    margin-left: auto;
    margin-right: 1em; }
  #producthunt {
    display: none;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto; }
  #nav-github-button {
    display: none; }
  .nav {
    margin: auto;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2em;
    padding-top: 1em;
    padding-bottom: 8px;
    flex-direction: column-reverse; }
  .nav ul {
    margin-right: 1em; }
  .nav li {
    margin: auto; }
  .nav li a {
    font-size: 0.9em;
    white-space: nowrap; }
    .nav li a i {
      font-size: 0.6em;
      padding-left: 2px; }
  .cta {
    margin-right: 2em;
    margin-bottom: 1em;
    margin-left: auto;
    font-size: 1em; } }

.fa-slack {
  font-weight: normal !important; }

@media (max-width: 350px) {
  .nav > ul {
    flex-direction: column; }
    .nav > ul li {
      margin: 0;
      margin-left: auto; } }

.demo {
  display: flex;
  flex-direction: row;
  margin: auto;
  margin-top: 80px; }
  .demo .term {
    border: 1px solid #22e27f;
    border-radius: 8px; }

.log-line {
  display: block;
  padding-left: 1em; }
  .log-line .status {
    color: #2af32a; }
  .log-line .status-error {
    color: #e34545; }
  .log-line .path {
    margin-left: 30px;
    color: lightgray; }

.log-line:last-child {
  margin-bottom: 1em; }

.term-container {
  margin-top: auto;
  margin-bottom: auto;
  display: flex;
  flex-direction: column; }

.terminal {
  min-height: 320px;
  width: 600px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border: 1px solid #585858;
  border-right: none;
  margin-right: 16px;
  overflow: hidden;
  position: relative;
  z-index: auto;
  font-size: 15px; }
  .terminal .header {
    width: 100%;
    height: 36px;
    display: flex; }
    .terminal .header span {
      margin: auto;
      margin-left: 8px;
      margin-right: 0;
      width: 12px;
      height: 12px;
      border-radius: 6px;
      background: #646464;
      top: 12px; }
  .terminal .screen {
    height: 100%;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    flex-direction: column; }
    .terminal .screen .lines {
      padding-top: 0;
      padding-left: 1em;
      display: flex;
      flex-direction: column; }
      .terminal .screen .lines .line {
        margin-top: 16px;
        color: #fff;
        font-family: "Source Code Pro";
        font-weight: 400;
        line-height: 24px; }
      .terminal .screen .lines .comment {
        opacity: 0.4;
        padding-left: 1em; }
      .terminal .screen .lines .form {
        color: #e4e45c; }
      .terminal .screen .lines .param {
        color: #22e27f; }
      .terminal .screen .lines .bang {
        content: ''; }
      .terminal .screen .lines .bang:before {
        content: '$';
        color: #ffffff;
        position: relative;
        font-weight: bold;
        opacity: 0.4; }
      .terminal .screen .lines .cursor:after {
        content: '';
        width: 8px;
        height: 16px;
        margin-top: 2px;
        margin-left: 4px;
        position: absolute;
        background-color: #22e27f;
        animation: blink .75s step-end infinite; }

.phone {
  width: 320px;
  border-radius: 42px;
  user-select: none;
  margin-right: auto;
  z-index: 2;
  border: 1px solid #585858;
  opacity: 1;
  transition: none;
  background-color: #242323;
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none; }
  .phone .ear {
    width: 64px;
    height: 8px;
    margin: auto;
    margin-top: 30px;
    border-radius: 4px;
    border: 1px solid #585858; }
  .phone .home {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    border: 1px solid #585858;
    margin: auto;
    margin-top: 16px;
    margin-bottom: 16px; }
  .phone .screen {
    background: #242323;
    height: 480px;
    margin: 20px;
    margin-left: 16px;
    margin-right: 16px;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    flex-direction: column; }
    .phone .screen .status {
      padding: 8px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 12px;
      opacity: 0.4; }
    .phone .screen .time {
      opacity: 0.4;
      display: flex;
      flex-direction: column;
      margin-top: 0px;
      text-align: center; }
      .phone .screen .time span:first-child {
        font-weight: 300;
        font-size: 60px; }
    .phone .screen p {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      color: #242323;
      text-align: left;
      padding-left: 8px;
      padding-right: 8px; }
    .phone .screen .notification:before {
      position: relative;
      height: 100%;
      width: 100%;
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px); }
    .phone .screen .notification {
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.95);
      margin-left: 8px;
      margin-right: 8px;
      margin-bottom: 0;
      border-radius: 8px;
      margin-top: 40px;
      margin-bottom: auto;
      padding: 2px;
      opacity: 0; }
      .phone .screen .notification .header {
        display: flex;
        justify-content: start;
        flex-direction: row; }
        .phone .screen .notification .header .gmail-logo {
          border: 1px solid rgba(88, 88, 88, 0.1);
          margin: 8px;
          margin-right: 0;
          border-radius: 4px;
          width: 20px;
          height: 20px;
          background-image: url("/static/img/demo/gmail_logo.png");
          background-size: 18px 18px;
          background-repeat: no-repeat;
          background-position: center; }
        .phone .screen .notification .header .sms-logo {
          margin: 8px;
          margin-right: 0;
          border-radius: 4px;
          width: 20px;
          height: 20px;
          background-image: url("/static/img/demo/messages_icon.png");
          background-size: 18px 18px;
          background-repeat: no-repeat;
          background-position: center; }
        .phone .screen .notification .header .push-logo {
          width: 20px;
          height: 20px;
          margin: 8px;
          margin-right: 0;
          border-radius: 4px;
          background: #242323;
          display: flex;
          padding: 2px; }
          .phone .screen .notification .header .push-logo i {
            z-index: 99;
            font-size: 16px;
            color: #ffffff;
            margin: auto; }
        .phone .screen .notification .header .slack-logo {
          border: 1px solid rgba(88, 88, 88, 0.1);
          margin: 8px;
          margin-right: 0;
          border-radius: 4px;
          width: 20px;
          height: 20px;
          background-image: url("/static/img/demo/slack_icon.jpg");
          background-size: 18px 18px;
          background-repeat: no-repeat;
          background-position: center; }
        .phone .screen .notification .header p {
          color: #242323;
          opacity: 0.5;
          vertical-align: middle;
          font-size: 12px;
          font-weight: 400;
          margin-top: auto;
          margin-bottom: auto; }
        .phone .screen .notification .header p:last-child {
          margin-left: auto;
          margin-right: 8px; }
      .phone .screen .notification p {
        font-size: 13px;
        margin: 0px; }
      .phone .screen .notification .sender {
        margin-top: 8px; }
      .phone .screen .notification .title {
        padding-top: 0;
        font-weight: bold; }
      .phone .screen .notification .body {
        word-wrap: break-word;
        font-weight: 300;
        margin-bottom: 8px; }
        .phone .screen .notification .body .link {
          color: #4141f5;
          text-decoration: underline; }
  .phone .mail {
    background: #fff;
    color: #242323;
    border-radius: 4px;
    margin-top: 8px;
    height: 100%;
    display: flex;
    flex-direction: column; }
    .phone .mail .navbar {
      height: 40px;
      background: #dd5347;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex; }
      .phone .mail .navbar img {
        width: 28px;
        height: 24px;
        margin: auto;
        padding-right: 16px; }
      .phone .mail .navbar .fa-angle-left {
        color: #ffffff;
        font-size: 24px;
        margin: auto;
        margin-left: 8px;
        margin-right: 0; }
    .phone .mail .subject {
      border-bottom: 1px solid #eeeeee; }
      .phone .mail .subject p {
        font-weight: bold;
        padding: 0;
        margin: 8px;
        font-size: 15px; }
    .phone .mail .sender {
      display: flex;
      flex-direction: row;
      margin: 8px; }
      .phone .mail .sender .logo {
        background: #e9e9e9;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin: auto;
        margin-left: 0;
        margin-right: 8px;
        display: flex; }
        .phone .mail .sender .logo span {
          margin: auto;
          color: #242323;
          opacity: 0.5;
          font-size: 20px; }
      .phone .mail .sender .name {
        font-size: 12px;
        font-weight: 600; }
        .phone .mail .sender .name span {
          font-size: 10px;
          font-weight: 300;
          color: #444444; }
    .phone .mail .approval {
      padding: 0;
      margin: auto;
      display: flex;
      flex-direction: column; }
      .phone .mail .approval img {
        width: 100%;
        height: auto; }
      .phone .mail .approval .logo {
        background: #242323;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: auto;
        margin-bottom: 8px;
        display: flex; }
        .phone .mail .approval .logo i {
          margin: auto;
          color: #ffffff;
          font-size: 20px; }
      .phone .mail .approval .request {
        text-align: center;
        font-weight: bold;
        font-size: 18px; }
      .phone .mail .approval .response {
        margin-top: 60px;
        display: flex;
        justify-content: space-around;
        margin-bottom: auto; }
        .phone .mail .approval .response span {
          font-weight: bold;
          color: #ffffff;
          border-radius: 4px;
          padding: 8px;
          width: 100px;
          text-align: center; }
        .phone .mail .approval .response .approve {
          background-color: #22e27f; }
        .phone .mail .approval .response .reject {
          background-color: #dd5347; }
  .phone .slack {
    background: #fff;
    color: #242323;
    border-radius: 4px;
    margin-top: 8px;
    height: 100%;
    display: flex;
    height: 440px;
    flex-direction: column; }
    .phone .slack .navbar::before {
      content: "1";
      font-size: 9px;
      line-height: 14px;
      vertical-align: middle;
      text-align: center;
      background-color: #e45050;
      color: #fff;
      height: 14px;
      width: 14px;
      margin-left: 24px;
      margin-top: 8px;
      box-shadow: 0px 0px 1px #16161699;
      border-radius: 7px;
      position: absolute;
      z-index: 99; }
    .phone .slack .navbar {
      height: 40px;
      background: #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      display: flex;
      padding-top: 4px;
      padding-bottom: 0px;
      border-bottom: 1px solid #e6e6e6; }
      .phone .slack .navbar img {
        width: 20px;
        height: 20px;
        margin: auto;
        margin-left: 12px;
        margin-right: 0; }
      .phone .slack .navbar span {
        margin: auto;
        margin-left: 16px;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 14px;
        vertical-align: bottom;
        color: #090924; }
      .phone .slack .navbar span::after {
        content: "";
        width: 8px;
        height: 8px;
        background-color: #049b48;
        border-radius: 4px;
        position: absolute;
        margin-top: 5px;
        margin-left: 8px; }
      .phone .slack .navbar .search {
        margin: auto;
        margin-right: 0;
        opacity: 0.7;
        font-size: 14px; }
      .phone .slack .navbar .dots {
        margin: auto;
        margin-left: 8px;
        margin-right: 8px;
        opacity: 0.7;
        font-size: 14px; }
    .phone .slack .message {
      margin-top: 20px;
      padding: 8px;
      display: flex;
      flex-direction: row; }
      .phone .slack .message .sender-logo {
        margin-top: 4px; }
        .phone .slack .message .sender-logo img {
          border-radius: 2px;
          width: 32px;
          height: 32px; }
      .phone .slack .message .contents {
        display: flex;
        flex-direction: column; }
        .phone .slack .message .contents .sender {
          display: flex;
          font-size: 14px; }
          .phone .slack .message .contents .sender .bot {
            font-weight: 600;
            margin-left: 8px; }
          .phone .slack .message .contents .sender .app-label {
            font-size: 10px;
            background: #dadada;
            border-radius: 4px;
            padding: 4px;
            padding-top: 1px;
            padding-bottom: 1px;
            font-weight: 300;
            text-transform: uppercase;
            margin-top: auto;
            margin-bottom: auto;
            margin-left: 8px;
            margin-right: 8px; }
          .phone .slack .message .contents .sender .date {
            text-transform: uppercase;
            font-weight: 300;
            font-size: 12px;
            opacity: 0.7;
            margin: auto;
            margin-bottom: 0;
            margin-left: 0; }
        .phone .slack .message .contents .approval {
          margin-left: 8px;
          margin-top: 4px;
          padding-left: 8px;
          border-left: 4px solid #bdbdbd;
          font-size: 14px;
          display: flex;
          flex-direction: column; }
          .phone .slack .message .contents .approval .title {
            text-align: unset;
            padding: unset;
            font-weight: 600; }
          .phone .slack .message .contents .approval .body {
            font-size: 13px;
            margin-top: 4px; }
          .phone .slack .message .contents .approval .response {
            font-weight: 600;
            font-size: 13px;
            color: #1cb566; }
          .phone .slack .message .contents .approval .actions {
            margin-top: 12px; }
            .phone .slack .message .contents .approval .actions span {
              border: 1px solid #bdbdbd;
              padding: 6px;
              padding-top: 2px;
              padding-bottom: 2px;
              border-radius: 4px;
              font-size: 13px; }
            .phone .slack .message .contents .approval .actions .approve {
              color: #22e27f;
              border-color: #22e27f; }
            .phone .slack .message .contents .approval .actions .approve-tap {
              background-color: #22e27f;
              color: #fff; }
            .phone .slack .message .contents .approval .actions .reject {
              color: #dd5347;
              border-color: #dd5347; }
            .phone .slack .message .contents .approval .actions span:first-child {
              margin-right: 4px; }
    .phone .slack .slack-input {
      margin: auto;
      margin-left: 0;
      margin-right: 0;
      margin-bottom: 0;
      padding: 8px;
      font-size: 14px;
      border-top: 1px solid #e6e6e6; }
      .phone .slack .slack-input .text-input {
        color: #bebebe;
        font-weight: 400;
        margin-bottom: 8px; }
      .phone .slack .slack-input .toolbar {
        margin-bottom: 4px;
        display: flex;
        opacity: 0.7; }
        .phone .slack .slack-input .toolbar .at {
          color: #242323;
          font-size: 18px;
          font-weight: 200;
          margin: auto;
          margin-left: 0;
          margin-right: 8px;
          line-height: 18px;
          vertical-align: middle; }
        .phone .slack .slack-input .toolbar .command {
          color: #242323;
          border: 1px solid #242323c4;
          font-family: "Source Code Pro";
          font-size: 10px;
          line-height: 14px;
          margin-top: auto;
          margin-bottom: auto;
          padding: 4px;
          padding-top: 0;
          padding-bottom: 0;
          border-radius: 4px;
          height: 14px;
          margin-top: 4px; }
        .phone .slack .slack-input .toolbar .send {
          margin: auto;
          margin-right: 4px;
          border: 1px solid #242323;
          padding: 6px;
          padding-top: 2px;
          padding-bottom: 2px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 600;
          opacity: 0.7; }

.json {
  display: flex;
  flex-direction: column; }
  .json span {
    line-height: 24px;
    font-size: 15px; }
  .json .cb, .json .colon, .json .comma {
    opacity: 0.3;
    font-weight: 500; }
  .json .colon, .json .comma {
    padding-left: 2px;
    padding-right: 4px; }
  .json .ind {
    padding-left: 24px; }
  .json .bool {
    color: #77bcd7; }
  .json .num {
    color: #afd84f; }
  .json .key {
    font-weight: 300;
    color: #22e27f; }
  .json .key::before {
    content: '"';
    font-size: 10px;
    vertical-align: top; }
  .json .key::after {
    content: '"';
    font-size: 10px;
    vertical-align: top; }
  .json .string::before {
    content: '"';
    font-size: 10px;
    vertical-align: top; }
  .json .string::after {
    content: '"';
    font-size: 10px;
    vertical-align: top; }
  .json .value {
    font-weight: 300; }
  .json .object .ind {
    display: block; }

.replay-button {
  outline: none;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  border: none;
  background-color: #242323;
  color: #22e27f;
  border: 1px solid #22e27f;
  z-index: 99;
  font-weight: 700;
  font-size: 16px;
  border-radius: 40px;
  margin-top: 2em;
  padding: 0 10px;
  text-align: center;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -o-border-radius: 40px;
  -ms-border-radius: 40px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: auto;
  margin-right: 8px;
  margin-top: -30px;
  margin-bottom: 15px; }

#replay-button {
  margin-left: auto; }

.replay-button:hover {
  opacity: 0.5; }

.replay-button:active {
  transform: scale(0.95); }

.languages-action {
  margin: auto;
  margin-left: 2px;
  font-family: "Source Code Pro";
  font-size: 15px;
  color: #585858;
  margin-right: 8px; }

.languages {
  display: flex;
  margin-right: 0;
  margin-left: 0;
  justify-content: start;
  margin-top: 8px;
  margin-left: 8px; }

.language-button {
  display: flex;
  margin: 0;
  border: none;
  font-weight: 300;
  font-family: "Source Code Pro";
  font-size: 14px; }
  .language-button img {
    width: 20px;
    height: 20px;
    margin: auto; }
  .language-button i {
    margin: auto;
    color: #22e27f;
    font-size: 20px;
    font-weight: bold; }
  .language-button .py {
    font-weight: lighter; }
  .language-button .go {
    width: 30px;
    margin-left: -4px; }

.language-button:hover i {
  opacity: 1; }

@keyframes blink {
  from, to {
    background-color: transparent; }
  50% {
    background-color: #22e27f; } }

.note-button-tap {
  animation: notetap 1s ease-out !important;
  animation-fill-mode: forwards !important; }

@keyframes notetap {
  0% {
    transform: scale(1);
    opacity: 1.0; }
  50% {
    transform: scale(0.95);
    opacity: 0.7; }
  100% {
    transform: scale(1);
    opacity: 1.0; } }

.remove-el {
  display: none !important; }

.notification-slidein {
  animation: notificationslidein 1s ease-out;
  animation-fill-mode: forwards; }

@keyframes notificationslidein {
  0% { }
  100% {
    opacity: 1; } }

.notification-slideout {
  animation: notificationslideout 1s ease-out;
  animation-fill-mode: forwards; }

@keyframes notificationslideout {
  0% {
    opacity: 1.0; }
  100% {
    opacity: 0.0; } }

.approve-tap {
  animation: approvetap 1.5s ease-out !important;
  animation-fill-mode: forwards !important; }

@keyframes approvetap {
  0% {
    transform: scale(1);
    opacity: 1.0; }
  50% {
    transform: translateY(-8px);
    opacity: 0.7; }
  100% {
    transform: scale(1);
    opacity: 1.0; } }

.slideout {
  animation: slideout 1s ease-out !important;
  animation-fill-mode: forwards !important; }

@keyframes slideout {
  0% {
    opacity: 1.0; }
  100% {
    opacity: 0.0; } }

@media (max-width: 1000px) {
  .demo {
    flex-direction: column-reverse;
    margin: 16px; }
    .demo .terminal {
      border: 1px solid #585858;
      border-radius: 6px;
      margin-left: 16px;
      margin-right: 16px;
      width: calc(100% - 32px);
      margin-top: -244px;
      z-index: 99;
      background: #242323; }
    .demo .languages {
      display: block;
      margin-left: 1em;
      margin-bottom: 20px; }
      .demo .languages span {
        font-size: 1em; }
      .demo .languages a {
        display: inline-flex;
        margin-top: auto;
        margin-bottom: auto; }
    .demo .phone {
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px; }
  .more-indicator {
    margin-top: 32px !important; } }

@media (max-width: 500px) {
  .demo .terminal {
    font-size: 0.8em; }
  .demo .json span {
    font-size: 1em; } }

.notification .link {
  color: #3737f7;
  text-decoration: underline; }

.web {
  background: #fff;
  color: #242323;
  border-radius: 4px;
  margin-top: 8px;
  height: 100%;
  display: flex;
  flex-direction: column; }
  .web .navbar {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    display: flex;
    border-bottom: 1px solid #e0e0e0; }
    .web .navbar .search {
      color: #242323;
      background: #e0e0e0;
      margin: 8px;
      height: 30px;
      border-radius: 8px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-evenly; }
      .web .navbar .search span {
        margin-top: auto;
        margin-bottom: auto;
        opacity: 0.5; }
      .web .navbar .search .fas {
        opacity: 0.5;
        font-size: 10px;
        margin-top: auto;
        margin-bottom: auto; }
    .web .navbar .fa-angle-left {
      color: #ffffff;
      font-size: 24px;
      margin: auto;
      margin-left: 8px;
      margin-right: 0; }
  .web .approval {
    padding: 0px;
    margin: auto;
    display: flex;
    flex-direction: column; }
    .web .approval img {
      width: 100%;
      height: auto; }
    .web .approval .sender {
      display: flex;
      flex-direction: column;
      margin-bottom: 40px; }
      .web .approval .sender .logo {
        background: #242323;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: auto;
        margin-bottom: 8px;
        display: flex;
        flex-direction: column; }
        .web .approval .sender .logo i {
          margin: auto;
          color: #ffffff;
          font-size: 20px; }
      .web .approval .sender span {
        text-align: center;
        font-size: 14px;
        font-weight: 600; }
    .web .approval .request {
      text-align: center;
      font-weight: bold;
      font-size: 22px; }
    .web .approval .response {
      margin-top: 60px;
      display: flex;
      justify-content: space-around;
      margin-bottom: auto; }
      .web .approval .response span {
        font-weight: bold;
        color: #ffffff;
        border-radius: 4px;
        padding: 8px;
        width: 100px;
        text-align: center; }
      .web .approval .response .approve {
        background-color: #22e27f; }
      .web .approval .response .reject {
        background-color: #dd5347; }

.push .notification {
  opacity: 1.0 !important; }

.push .notification-buttons {
  display: flex;
  flex-direction: column; }
  .push .notification-buttons span {
    background: rgba(255, 255, 255, 0.95);
    padding: 14px;
    margin: 8px;
    text-align: center;
    font-size: 14px;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif; }
  .push .notification-buttons span:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid rgba(119, 119, 119, 0.171);
    margin-bottom: 0;
    font-weight: 600;
    color: #242323; }
  .push .notification-buttons span:last-child {
    margin-top: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #dd5347;
    font-weight: 400; }
  .push .notification-buttons .selected {
    background: rgba(255, 255, 255, 0.8); }

.push .slideout {
  animation: none !important; }

.push .approve-tap {
  animation: approvetapnote 1.5s ease-out !important;
  animation-fill-mode: forwards !important; }

@keyframes approvetapnote {
  0% {
    opacity: 1.0; }
  50% {
    opacity: 0.7; }
  100% {
    opacity: 1.0; } }

.email-signup {
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  margin: auto;
  margin-top: 0;
  max-width: 800px; }
  .email-signup .embed {
    display: flex;
    flex-direction: column;
    margin: auto; }
    .email-signup .embed span {
      margin: auto;
      font-size: 12px;
      font-weight: normal;
      margin-bottom: 8px;
      font-family: "Source Code Pro"; }
  .email-signup form {
    display: flex;
    flex-direction: column;
    text-align: center; }
  .email-signup .inner-form {
    display: flex;
    flex-direction: row;
    margin: auto; }
  .email-signup .email-input {
    display: block;
    outline: none;
    border: none;
    border: 1px solid #22e27f;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: #ffffff;
    background: #242323;
    font-family: "Source Code Pro";
    width: 200px;
    font-weight: normal;
    text-align: left;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 1, 1, 0.06);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 1, 1, 0.06);
    -o-box-shadow: inset 0px 1px 3px 0px rgba(0, 1, 1, 0.06);
    -ms-box-shadow: inset 0px 1px 3px 0px rgba(0, 1, 1, 0.06);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 1, 1, 0.06);
    height: 40px;
    padding: 0 15px;
    font-size: 12px;
    margin-right: 0;
    border-right: none; }
    @media (max-width: 1000px) {
      .email-signup .email-input {
        width: auto; } }
  .email-signup .submit-email-button {
    outline: none;
    cursor: pointer;
    height: 42px;
    line-height: 42px;
    border: none;
    background-color: #22e27f;
    color: #242323;
    border: 1px solid #22e27f;
    font-family: "Source Sans Pro";
    font-weight: 500;
    font-size: 14px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 0 10px;
    text-align: center;
    -webkit-appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: auto;
    margin-right: 0; }
  .email-signup .clear i {
    color: #585858; }
  .email-signup .submit-email-button:hover {
    opacity: 0.5; }
  .email-signup .responses {
    font-size: 12px;
    margin-top: 8px; }
    .email-signup .responses a {
      font-size: 12px; }
  .email-signup input.mce_inline_error {
    border: 1px solid #dd5347 !important;
    background-color: #242323; }
  .email-signup div.mce_inline_error {
    text-align: center;
    border: none;
    padding-left: 0 !important;
    color: #dd5347 !important;
    background-color: transparent !important;
    font-weight: normal !important;
    margin-bottom: 0 !important; }
  .email-signup div#mce-success-response {
    color: #22e27f; }

.usecases .fa-code {
  font-size: 40px;
  color: #22e27f;
  margin: auto; }

.usecases .footer {
  margin-top: 32px;
  font-weight: 400;
  text-align: center;
  font-size: 16px;
  font-family: "Source Code Pro"; }

.usecases .case {
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-top: 32px;
  padding: 16px; }
  .usecases .case .head {
    display: flex; }
    .usecases .case .head .icon {
      margin-top: auto;
      margin-bottom: auto;
      font-size: 34px;
      color: #22e27f; }
      .usecases .case .head .icon img {
        width: 42px;
        height: 42px; }
    .usecases .case .head .type {
      margin-top: auto;
      margin-bottom: auto;
      font-size: 22px;
      font-weight: bold;
      margin-left: 16px;
      color: #22e27f; }
  .usecases .case .description {
    margin: 0;
    font-size: 16px;
    display: flex;
    font-size: 20px;
    flex-direction: column; }
    .usecases .case .description .footing {
      margin-top: 8px;
      font-weight: 300; }
    .usecases .case .description .type .category {
      font-weight: 900;
      color: #22e27f; }
    .usecases .case .description .type .category::after {
      content: ':'; }

.github {
  margin: auto;
  margin-top: 2em;
  margin-bottom: 2em; }

.approve-form .form {
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-top: 200px;
  border: 1px solid #585858;
  border-radius: 6px;
  padding: 32px;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; }
  .approve-form .form .title {
    color: #22e27f;
    font-size: 24px;
    text-align: center;
    font-weight: bold; }
  .approve-form .form .body {
    text-align: center;
    padding-top: 64px;
    padding-bottom: 32px;
    font-size: 18px; }
  .approve-form .form .check, .approve-form .form .fail, .approve-form .form .load {
    margin: auto;
    margin-top: 64px;
    margin-bottom: 64px;
    font-size: 80px;
    visibility: hidden; }
  .approve-form .form .check, .approve-form .form .fail {
    height: 0;
    margin: 0; }
  .approve-form .form .load {
    visibility: visible;
    animation: spin 3s linear infinite; }

@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

.approve-form .approved {
  background-color: #22e27f; }
  .approve-form .approved .check {
    margin: auto;
    margin-top: 64px;
    margin-bottom: 64px;
    visibility: visible; }
  .approve-form .approved .load {
    height: 0;
    margin: 0; }
  .approve-form .approved .title, .approve-form .approved .body, .approve-form .approved .load {
    visibility: hidden; }

.approve-form .rejected {
  background-color: #ef5c34; }
  .approve-form .rejected .load {
    height: 0;
    margin: 0; }
  .approve-form .rejected .fail {
    margin: auto;
    margin-top: 64px;
    margin-bottom: 64px;
    visibility: visible; }
  .approve-form .rejected .title, .approve-form .rejected .body, .approve-form .rejected .load {
    visibility: hidden; }

.features .feature-table {
  margin: 16px;
  margin: auto;
  margin-top: 48px;
  margin-bottom: 16px;
  border-collapse: collapse;
  font-size: 20px; }
  .features .feature-table td {
    padding: 16px;
    padding-top: 16px;
    padding-bottom: 16px; }
  .features .feature-table tr {
    border-bottom: 1px solid #585858; }
  .features .feature-table tr:last-child {
    border-bottom: none; }
  .features .feature-table td > i {
    color: #22e27f;
    font-size: 20px; }
  .features .feature-table td > a {
    font-size: 20px;
    text-decoration: underline; }
  .features .feature-table td:first-child {
    text-align: left;
    padding-right: 64px; }
  .features .feature-table td:nth-child(2) {
    padding-left: 8px;
    text-align: center; }
  .features .feature-table .language-support {
    margin-top: -6px;
    display: block; }
    .features .feature-table .language-support a {
      font-size: 13px;
      font-family: "Source Code Pro";
      color: #22e27f; }

.pricing {
  padding-bottom: 32px; }
  .pricing .price {
    display: flex;
    flex-direction: column;
    margin: auto;
    margin-top: 40px;
    text-align: center; }
    .pricing .price .num {
      font-family: "Source Code Pro";
      display: flex; }
      .pricing .price .num .per-month {
        margin-top: auto;
        margin-bottom: 0;
        margin-left: 4px;
        font-size: 1.5em;
        line-height: 80px; }
      .pricing .price .num .big-dol {
        font-size: 44px;
        line-height: 120px;
        margin-top: 0;
        margin-bottom: auto;
        margin-left: auto;
        font-weight: 200;
        font-style: italic;
        padding-right: 8px;
        color: #22e27f; }
      .pricing .price .num .dol {
        font-size: 24px;
        vertical-align: middle;
        font-weight: lighter;
        font-style: italic;
        padding-top: 4px;
        line-height: 100px; }
      .pricing .price .num .dot {
        letter-spacing: -10px; }
      .pricing .price .num .cent {
        margin: auto;
        margin-left: -20px;
        font-size: 60px;
        font-weight: 300;
        font-style: italic;
        margin-top: 10px; }
      .pricing .price .num .amt {
        font-size: 100px;
        margin: 0;
        margin-top: auto;
        margin-bottom: auto;
        margin-right: 0;
        font-weight: normal;
        color: #22e27f; }
    .pricing .price .limit {
      font-size: 22px;
      margin-top: -8px;
      margin-bottom: 8px; }
    .pricing .price .upto {
      margin-top: 64px;
      margin-left: auto;
      margin-right: auto;
      padding-bottom: 1px;
      font-size: 16px; }
      .pricing .price .upto .amt {
        font-weight: normal;
        font-family: "Source Code Pro"; }
        .pricing .price .upto .amt .unit {
          font-weight: bold;
          font-size: 14px;
          padding-left: 0px; }
    .pricing .price .sms {
      font-size: 22px;
      display: flex;
      margin: auto;
      color: #22e27f; }
      .pricing .price .sms .plus {
        font-weight: lighter;
        padding-right: 16px;
        color: #ffffff;
        font-size: 28px;
        vertical-align: middle; }
      .pricing .price .sms .sms-cost {
        line-height: 28px;
        font-family: "Source Code Pro";
        margin-top: auto;
        margin-bottom: auto; }
        .pricing .price .sms .sms-cost .dol {
          font-weight: lighter;
          font-style: italic;
          font-size: 12px;
          padding-right: 2px;
          vertical-align: top;
          color: #ffffff; }
      .pricing .price .sms .sms-per {
        font-size: 14px;
        padding-left: 2px;
        color: #ffffff; }
    .pricing .price .contact {
      padding-top: 4px;
      font-size: 16px;
      color: #22e27f; }
      .pricing .price .contact a {
        font-size: 16px;
        text-decoration: underline; }

html.legal {
  background: #fff;
  color: #242323; }

.legal {
  padding: 1em; }
  .legal a {
    color: #242323;
    text-decoration: underline;
    font-size: 16px; }
  .legal .operated {
    font-size: 12px;
    margin-top: -1em;
    margin-bottom: 3em; }
  .legal .title {
    display: flex;
    flex-direction: column;
    margin: auto;
    text-align: center; }
    .legal .title img {
      width: 200px; }
    .legal .title span {
      margin: auto;
      font-weight: bold;
      font-size: 22px; }
  .legal .date {
    margin-left: auto;
    text-align: center; }

.legal .content {
  max-width: 900px;
  font-size: 16px;
  border: 1px solid #ebebeb8f;
  padding: 2em;
  margin-top: 2em;
  margin-left: auto;
  margin-right: auto; }
  .legal .content h1:first-child {
    margin-top: 0; }
  .legal .content h1 {
    margin-top: 2em; }

html.status-page {
  background-color: #ebebeb8f; }

.status-page > body {
  margin: 0; }

.status-page .site-header {
  padding: 2em;
  background-color: #242323;
  display: flex;
  flex-direction: column; }
  .status-page .site-header .back-to {
    border-bottom: 1px solid rgba(173, 173, 173, 0.342);
    padding-bottom: 1em; }
    .status-page .site-header .back-to a {
      font-size: 16px; }
      .status-page .site-header .back-to a i {
        font-size: 14px;
        padding-right: 4px; }
  .status-page .site-header img {
    height: 60px;
    margin: auto;
    margin-bottom: 0;
    padding-top: 3em; }
  .status-page .site-header .line-sep {
    background: linear-gradient(#22e27f, #ffffff);
    width: 4px;
    height: 0;
    margin-right: auto;
    margin-left: 30px;
    margin-top: -12px; }
  .status-page .site-header .status-title {
    max-width: 800px;
    font-size: 36px;
    font-weight: normal;
    font-family: "Source Code Pro";
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2em;
    text-align: left; }
  .status-page .site-header .description {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    font-weight: lighter; }

.status-page .status-body {
  display: flex;
  flex-direction: column;
  padding: 2em;
  margin: auto;
  max-width: 800px; }
  .status-page .status-body .summary {
    display: flex;
    background: #ffffff;
    color: #242323;
    padding: 1em;
    border-radius: 4px;
    border: 1px solid #d2cdcd; }
    .status-page .status-body .summary .ok {
      color: #22e27f; }
    .status-page .status-body .summary i {
      font-size: 30px; }
    .status-page .status-body .summary .message {
      margin: auto;
      margin-left: 1em;
      font-size: 20px;
      font-weight: 600; }
  .status-page .status-body .systems {
    margin-top: 2em;
    border-top: 1px solid #d2cdcd;
    padding-top: 2em; }
    .status-page .status-body .systems ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-direction: column; }
      .status-page .status-body .systems ul li {
        display: flex;
        background: #ffffff;
        color: #242323;
        font-size: 18px;
        padding: 1em;
        border: 1px solid #d2cdcd;
        border-top: none; }
        .status-page .status-body .systems ul li .ind {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin: auto;
          margin-left: 0;
          margin-right: 0; }
        .status-page .status-body .systems ul li .name {
          margin-left: 1em;
          margin-right: auto; }
        .status-page .status-body .systems ul li .ind {
          background-color: #eb4f4f; }
        .status-page .status-body .systems ul li .ind.ok {
          background-color: #22e27f; }
        .status-page .status-body .systems ul li .ok {
          color: #22e27f; }
        .status-page .status-body .systems ul li .status {
          font-weight: 600; }
      .status-page .status-body .systems ul li:first-child {
        border-top: 1px solid #d2cdcd; }
  .status-page .status-body .incidents {
    margin-top: 2em;
    border-top: 1px solid #d2cdcd;
    padding-top: 1em; }
    .status-page .status-body .incidents span:first-child {
      color: #242323;
      text-transform: capitalize;
      font-size: 16px;
      opacity: 0.7; }
    .status-page .status-body .incidents ul {
      display: flex;
      font-size: 18px;
      padding: 0;
      list-style: none;
      color: #242323; }
      .status-page .status-body .incidents ul li {
        margin-top: 2em; }
        .status-page .status-body .incidents ul li .when {
          font-size: 22px;
          font-weight: bold; }
        .status-page .status-body .incidents ul li p {
          margin-top: 1em; }
        .status-page .status-body .incidents ul li .nothing {
          opacity: 0.7; }

.page-footer {
  margin: auto;
  margin-top: 6em;
  border-top: 1px solid rgba(209, 209, 209, 0.11);
  display: flex;
  padding-top: 1em;
  width: auto; }
  .page-footer img {
    margin-left: auto;
    height: 36px;
    opacity: 0.5; }
  .page-footer .map {
    display: flex;
    flex-direction: row;
    margin-right: auto; }
  .page-footer ul {
    list-style: none;
    font-size: 12px;
    color: #585858; }
    .page-footer ul a {
      font-size: 12px;
      font-weight: lighter;
      color: #22e27f; }
    .page-footer ul li:first-child {
      font-weight: normal; }

@media (max-width: 600px) {
  .page-footer {
    flex-direction: column; }
    .page-footer .Logo {
      margin-left: auto;
      margin-right: auto; }
    .page-footer ul {
      margin-left: auto;
      margin-right: auto; }
    .page-footer ul {
      padding: 1em; }
    .page-footer .map {
      margin-left: auto;
      margin-right: auto; } }

#install {
  margin-top: 2em;
  text-align: center;
  margin-left: auto;
  margin-right: auto; }
  #install .instruction {
    text-align: left;
    font-family: "Source Code Pro";
    background-color: rgba(255, 255, 255, 0.85);
    padding: 1em;
    color: #000;
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex; }
    #install .instruction .dolla {
      color: rgba(0, 0, 0, 0.502);
      font-weight: normal; }
    #install .instruction .copy-button {
      margin-left: auto;
      margin-right: 0;
      color: black;
      opacity: 0.5; }
    #install .instruction .copy-button:hover {
      opacity: 1; }
    #install .instruction .copy-button:active {
      opacity: 0.5; }
  #install #tabs {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    margin: 1em; }
    #install #tabs .tab {
      font-family: "Source Code Pro" !important;
      font-weight: normal;
      font-size: 14px;
      padding: 4px;
      margin: 4px;
      border-radius: 4px;
      cursor: pointer; }