@import url(../node_modules/flag-icon-css/css/flag-icon.min.css);
@font-face {
  font-family: 'Cerebri Sans';
  src: url("/assets/fonts/Cerebri_Sans_Bold.ttf"); }

@font-face {
  font-family: 'Cerebri Sans';
  src: url("/assets/fonts/Cerebri_Sans_Medium.ttf"); }

@font-face {
  font-family: 'Cerebri Sans';
  src: url("/assets/fonts/Cerebri_Sans_Regular.ttf"); }

.tippy-touch {
  cursor: pointer !important; }

.tippy-notransition {
  transition: none !important; }

.tippy-popper {
  max-width: 400px;
  perspective: 800px;
  z-index: 9999;
  outline: 0;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none; }
  .tippy-popper.html-template {
    max-width: 96%;
    max-width: calc(100% - 20px); }
  .tippy-popper[x-placement^=top] [x-arrow] {
    border-top: 7px solid #333;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    bottom: -7px;
    margin: 0 9px; }
    .tippy-popper[x-placement^=top] [x-arrow].arrow-small {
      border-top: 5px solid #333;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      bottom: -5px; }
    .tippy-popper[x-placement^=top] [x-arrow].arrow-big {
      border-top: 10px solid #333;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      bottom: -10px; }
  .tippy-popper[x-placement^=top] [x-circle] {
    transform-origin: 0% 33%; }
    .tippy-popper[x-placement^=top] [x-circle].enter {
      transform: scale(1) translate(-50%, -55%);
      opacity: 1; }
    .tippy-popper[x-placement^=top] [x-circle].leave {
      transform: scale(0.15) translate(-50%, -50%);
      opacity: 0; }
  .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle] {
    background-color: white; }
  .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow] {
    border-top: 7px solid white;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent; }
    .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small {
      border-top: 5px solid white;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent; }
    .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big {
      border-top: 10px solid white;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent; }
  .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle] {
    background-color: rgba(0, 0, 0, 0.7); }
  .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow] {
    border-top: 7px solid rgba(0, 0, 0, 0.7);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent; }
    .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
      border-top: 5px solid rgba(0, 0, 0, 0.7);
      border-right: 5px solid transparent;
      border-left: 5px solid transparent; }
    .tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
      border-top: 10px solid rgba(0, 0, 0, 0.7);
      border-right: 10px solid transparent;
      border-left: 10px solid transparent; }
  .tippy-popper[x-placement^=top] [data-animation=perspective] {
    transform-origin: bottom; }
    .tippy-popper[x-placement^=top] [data-animation=perspective].enter {
      opacity: 1;
      transform: translateY(-10px) rotateX(0); }
    .tippy-popper[x-placement^=top] [data-animation=perspective].leave {
      opacity: 0;
      transform: translateY(0) rotateX(90deg); }
  .tippy-popper[x-placement^=top] [data-animation=fade].enter {
    opacity: 1;
    transform: translateY(-10px); }
  .tippy-popper[x-placement^=top] [data-animation=fade].leave {
    opacity: 0;
    transform: translateY(-10px); }
  .tippy-popper[x-placement^=top] [data-animation=shift].enter {
    opacity: 1;
    transform: translateY(-10px); }
  .tippy-popper[x-placement^=top] [data-animation=shift].leave {
    opacity: 0;
    transform: translateY(0); }
  .tippy-popper[x-placement^=top] [data-animation=scale].enter {
    opacity: 1;
    transform: translateY(-10px) scale(1); }
  .tippy-popper[x-placement^=top] [data-animation=scale].leave {
    opacity: 0;
    transform: translateY(0) scale(0); }
  .tippy-popper[x-placement^=bottom] [x-arrow] {
    border-bottom: 7px solid #333;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    top: -7px;
    margin: 0 9px; }
    .tippy-popper[x-placement^=bottom] [x-arrow].arrow-small {
      border-bottom: 5px solid #333;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      top: -5px; }
    .tippy-popper[x-placement^=bottom] [x-arrow].arrow-big {
      border-bottom: 10px solid #333;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      top: -10px; }
  .tippy-popper[x-placement^=bottom] [x-circle] {
    transform-origin: 0% -50%; }
    .tippy-popper[x-placement^=bottom] [x-circle].enter {
      transform: scale(1) translate(-50%, -45%);
      opacity: 1; }
    .tippy-popper[x-placement^=bottom] [x-circle].leave {
      transform: scale(0.15) translate(-50%, -5%);
      opacity: 0; }
  .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle] {
    background-color: white; }
  .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow] {
    border-bottom: 7px solid white;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent; }
    .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small {
      border-bottom: 5px solid white;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent; }
    .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big {
      border-bottom: 10px solid white;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent; }
  .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle] {
    background-color: rgba(0, 0, 0, 0.7); }
  .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow] {
    border-bottom: 7px solid rgba(0, 0, 0, 0.7);
    border-right: 7px solid transparent;
    border-left: 7px solid transparent; }
    .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
      border-bottom: 5px solid rgba(0, 0, 0, 0.7);
      border-right: 5px solid transparent;
      border-left: 5px solid transparent; }
    .tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
      border-bottom: 10px solid rgba(0, 0, 0, 0.7);
      border-right: 10px solid transparent;
      border-left: 10px solid transparent; }
  .tippy-popper[x-placement^=bottom] [data-animation=perspective] {
    transform-origin: top; }
    .tippy-popper[x-placement^=bottom] [data-animation=perspective].enter {
      opacity: 1;
      transform: translateY(10px) rotateX(0); }
    .tippy-popper[x-placement^=bottom] [data-animation=perspective].leave {
      opacity: 0;
      transform: translateY(0) rotateX(-90deg); }
  .tippy-popper[x-placement^=bottom] [data-animation=fade].enter {
    opacity: 1;
    transform: translateY(10px); }
  .tippy-popper[x-placement^=bottom] [data-animation=fade].leave {
    opacity: 0;
    transform: translateY(10px); }
  .tippy-popper[x-placement^=bottom] [data-animation=shift].enter {
    opacity: 1;
    transform: translateY(10px); }
  .tippy-popper[x-placement^=bottom] [data-animation=shift].leave {
    opacity: 0;
    transform: translateY(0); }
  .tippy-popper[x-placement^=bottom] [data-animation=scale].enter {
    opacity: 1;
    transform: translateY(10px) scale(1); }
  .tippy-popper[x-placement^=bottom] [data-animation=scale].leave {
    opacity: 0;
    transform: translateY(0) scale(0); }
  .tippy-popper[x-placement^=left] [x-arrow] {
    border-left: 7px solid #333;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    right: -7px;
    margin: 6px 0; }
    .tippy-popper[x-placement^=left] [x-arrow].arrow-small {
      border-left: 5px solid #333;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      right: -5px; }
    .tippy-popper[x-placement^=left] [x-arrow].arrow-big {
      border-left: 10px solid #333;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      right: -10px; }
  .tippy-popper[x-placement^=left] [x-circle] {
    transform-origin: 50% 0%; }
    .tippy-popper[x-placement^=left] [x-circle].enter {
      transform: scale(1) translate(-50%, -50%);
      opacity: 1; }
    .tippy-popper[x-placement^=left] [x-circle].leave {
      transform: scale(0.15) translate(-50%, -50%);
      opacity: 0; }
  .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle] {
    background-color: white; }
  .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow] {
    border-left: 7px solid white;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
    .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small {
      border-left: 5px solid white;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent; }
    .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big {
      border-left: 10px solid white;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent; }
  .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle] {
    background-color: rgba(0, 0, 0, 0.7); }
  .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow] {
    border-left: 7px solid rgba(0, 0, 0, 0.7);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
    .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
      border-left: 5px solid rgba(0, 0, 0, 0.7);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent; }
    .tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
      border-left: 10px solid rgba(0, 0, 0, 0.7);
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent; }
  .tippy-popper[x-placement^=left] [data-animation=perspective] {
    transform-origin: right; }
    .tippy-popper[x-placement^=left] [data-animation=perspective].enter {
      opacity: 1;
      transform: translateX(-10px) rotateY(0); }
    .tippy-popper[x-placement^=left] [data-animation=perspective].leave {
      opacity: 0;
      transform: translateX(0) rotateY(-90deg); }
  .tippy-popper[x-placement^=left] [data-animation=fade].enter {
    opacity: 1;
    transform: translateX(-10px); }
  .tippy-popper[x-placement^=left] [data-animation=fade].leave {
    opacity: 0;
    transform: translateX(-10px); }
  .tippy-popper[x-placement^=left] [data-animation=shift].enter {
    opacity: 1;
    transform: translateX(-10px); }
  .tippy-popper[x-placement^=left] [data-animation=shift].leave {
    opacity: 0;
    transform: translateX(0); }
  .tippy-popper[x-placement^=left] [data-animation=scale].enter {
    opacity: 1;
    transform: translateX(-10px) scale(1); }
  .tippy-popper[x-placement^=left] [data-animation=scale].leave {
    opacity: 0;
    transform: translateX(0) scale(0); }
  .tippy-popper[x-placement^=right] [x-arrow] {
    border-right: 7px solid #333;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    left: -7px;
    margin: 6px 0; }
    .tippy-popper[x-placement^=right] [x-arrow].arrow-small {
      border-right: 5px solid #333;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      left: -5px; }
    .tippy-popper[x-placement^=right] [x-arrow].arrow-big {
      border-right: 10px solid #333;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      left: -10px; }
  .tippy-popper[x-placement^=right] [x-circle] {
    transform-origin: -50% 0%; }
    .tippy-popper[x-placement^=right] [x-circle].enter {
      transform: scale(1) translate(-50%, -50%);
      opacity: 1; }
    .tippy-popper[x-placement^=right] [x-circle].leave {
      transform: scale(0.15) translate(-50%, -50%);
      opacity: 0; }
  .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle] {
    background-color: white; }
  .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow] {
    border-right: 7px solid white;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
    .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small {
      border-right: 5px solid white;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent; }
    .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big {
      border-right: 10px solid white;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent; }
  .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle] {
    background-color: rgba(0, 0, 0, 0.7); }
  .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow] {
    border-right: 7px solid rgba(0, 0, 0, 0.7);
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent; }
    .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small {
      border-right: 5px solid rgba(0, 0, 0, 0.7);
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent; }
    .tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big {
      border-right: 10px solid rgba(0, 0, 0, 0.7);
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent; }
  .tippy-popper[x-placement^=right] [data-animation=perspective] {
    transform-origin: left; }
    .tippy-popper[x-placement^=right] [data-animation=perspective].enter {
      opacity: 1;
      transform: translateX(10px) rotateY(0); }
    .tippy-popper[x-placement^=right] [data-animation=perspective].leave {
      opacity: 0;
      transform: translateX(0) rotateY(90deg); }
  .tippy-popper[x-placement^=right] [data-animation=fade].enter {
    opacity: 1;
    transform: translateX(10px); }
  .tippy-popper[x-placement^=right] [data-animation=fade].leave {
    opacity: 0;
    transform: translateX(10px); }
  .tippy-popper[x-placement^=right] [data-animation=shift].enter {
    opacity: 1;
    transform: translateX(10px); }
  .tippy-popper[x-placement^=right] [data-animation=shift].leave {
    opacity: 0;
    transform: translateX(0); }
  .tippy-popper[x-placement^=right] [data-animation=scale].enter {
    opacity: 1;
    transform: translateX(10px) scale(1); }
  .tippy-popper[x-placement^=right] [data-animation=scale].leave {
    opacity: 0;
    transform: translateX(0) scale(0); }
  .tippy-popper .tippy-tooltip.transparent-theme {
    background-color: rgba(0, 0, 0, 0.7); }
    .tippy-popper .tippy-tooltip.transparent-theme[data-animatefill] {
      background-color: transparent; }
  .tippy-popper .tippy-tooltip.light-theme {
    color: #26323d;
    box-shadow: 0 4px 20px 4px rgba(0, 20, 60, 0.1), 0 4px 80px -8px rgba(0, 20, 60, 0.2);
    background-color: white; }
    .tippy-popper .tippy-tooltip.light-theme[data-animatefill] {
      background-color: transparent; }

.tippy-tooltip {
  position: relative;
  color: white;
  border-radius: 4px;
  font-size: 0.95rem;
  padding: 0.4rem 0.8rem;
  text-align: center;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #333; }
  .tippy-tooltip--small {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem; }
  .tippy-tooltip--big {
    padding: 0.6rem 1.2rem;
    font-size: 1.2rem; }
  .tippy-tooltip[data-animatefill] {
    overflow: hidden;
    background-color: transparent; }
  .tippy-tooltip[data-interactive] {
    pointer-events: auto; }
  .tippy-tooltip[data-inertia] {
    -webkit-transition-timing-function: cubic-bezier(0.53, 1, 0.36, 0.85);
    transition-timing-function: cubic-bezier(0.53, 2, 0.36, 0.85); }
  .tippy-tooltip [x-arrow] {
    position: absolute;
    width: 0;
    height: 0; }
  .tippy-tooltip [x-circle] {
    position: absolute;
    will-change: transform;
    background-color: #333;
    border-radius: 50%;
    width: 130%;
    width: calc(110% + 2rem);
    left: 50%;
    top: 50%;
    z-index: -1;
    overflow: hidden;
    transition: all ease; }
    .tippy-tooltip [x-circle]::before {
      content: '';
      padding-top: 90%;
      float: left; }

@media (max-width: 450px) {
  .tippy-popper {
    max-width: 96%;
    max-width: calc(100% - 20px); } }

.check:hover .actions-trigger {
  visibility: visible;
  cursor: pointer; }

.check:hover .hover-domain {
  visibility: visible; }

.check:hover .select-ms {
  text-decoration: underline dashed; }

.check .actions {
  font-size: 14px; }

.check .actions-trigger {
  color: #929caf;
  margin-left: 8px;
  visibility: hidden;
  font-size: 12px;
  position: relative; }
  .check .actions-trigger:hover {
    color: #5762EF; }

.check .actions-modal {
  position: absolute; }

.check .hover-domain {
  visibility: hidden;
  font-size: 18px;
  line-height: 18px; }

.select-ms {
  -webkit-appearance: none;
  background-color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer; }

@media screen and (max-width: 1381px) {
  .check,
  .checks,
  .statuspage-dashboard {
    margin-bottom: 16px;
    border-radius: 3px;
    padding-left: 16px;
    padding-right: 16px; }
    .check .col-6,
    .checks .col-6,
    .statuspage-dashboard .col-6 {
      width: 100%; }
    .check .pull-right,
    .checks .pull-right,
    .statuspage-dashboard .pull-right {
      float: initial; }
    .check .domain,
    .checks .domain,
    .statuspage-dashboard .domain {
      margin-bottom: 16px; } }

.blocked {
  opacity: .5;
  pointer-events: none; }

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

.monitor-card {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
  text-align: left;
  display: inline-block;
  border-radius: 5px;
  width: 380px;
  height: 184px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.13);
  padding-top: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: white;
  vertical-align: top;
  transition: transform 0.1s ease-out !important; }
  .monitor-card.add {
    text-align: center;
    vertical-align: middle;
    line-height: 184px;
    padding-left: -10px;
    padding-top: 0;
    cursor: pointer;
    animation: all 0.2s ease; }
    .monitor-card.add:hover {
      transform: translateY(-1px);
      background-color: #f9f9f9; }
  .monitor-card .icon,
  .monitor-card .alias {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    color: #151618;
    white-space: nowrap; }
  .monitor-card .url {
    font-size: 14px;
    color: #575E66;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .monitor-card .header .arrow-cta {
    position: absolute;
    padding-top: 3px;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    transform: translate3d(-14px, 0, 0);
    transition: transform 200ms ease, opacity 200ms ease; }
  .monitor-card .header:hover .arrow-cta {
    opacity: 1;
    visibility: visible;
    transform: translate3d(4px, 0, 0); }
  .monitor-card .alias,
  .monitor-card .url {
    line-height: 1.5em; }
  .monitor-card .status {
    float: right;
    display: inline-block; }
    .monitor-card .status .status-check {
      width: 18px; }
  .monitor-card .icon {
    margin-right: 4px; }
  .monitor-card img {
    width: 16px;
    vertical-align: middle;
    margin-bottom: 0.25em; }
  .monitor-card .header-public {
    margin-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px; }
    .monitor-card .header-public .arrow-cta {
      display: none; }
  .monitor-card .header {
    cursor: pointer; }
  .monitor-card .header,
  .monitor-card .stats {
    margin-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px; }
  .monitor-card .stats .metric {
    font-size: 14px;
    color: #575E66; }
    .monitor-card .stats .metric:hover {
      cursor: pointer;
      color: #151618; }
    .monitor-card .stats .metric.selected {
      color: #0069FF; }
  .monitor-card .stats .value {
    color: #151618;
    font-weight: 600;
    font-size: 16px; }
  .monitor-card .ct-uptime,
  .monitor-card .ct-elapsed-time {
    min-height: 65px; }

.project-selector {
  margin-left: -14px;
  width: 200px;
  padding: 6px;
  border-radius: 5px;
  cursor: pointer;
  color: #151618;
  transition: background-color 0.15s ease-out; }
  .project-selector.open, .project-selector:hover {
    background-color: #e9ebed; }
  .project-selector .project-name {
    height: 32px;
    font-weight: 600;
    vertical-align: top;
    line-height: 32px; }
  .project-selector .project-name,
  .project-selector .project-avatar {
    display: inline-flex;
    pointer-events: none; }
  .project-selector .chevron-down {
    pointer-events: none; }
  .project-selector .project-avatar {
    pointer-events: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #6971ff;
    box-shadow: 0 2px 4px 0 rgba(30, 9, 54, 0.14);
    justify-content: center;
    align-content: center;
    align-items: center;
    margin-right: 10px;
    color: #b0b0b0;
    font-weight: 600; }
    .project-selector .project-avatar svg {
      stroke: #6971ff;
      fill: white;
      margin: 0;
      width: 18px; }
  .project-selector .chevron-down {
    height: 32px;
    vertical-align: top;
    line-height: 37px;
    float: right; }

.project-selector-dropdown {
  margin-left: -14px;
  position: absolute;
  width: 200px;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(30, 9, 54, 0.14);
  padding: 6px;
  transition: all cubic-bezier(0.62, 0.28, 0.23, 0.99) 0.15s;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px); }
  .project-selector-dropdown.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px); }
  .project-selector-dropdown .project-nav {
    line-height: 2em;
    padding-left: 6px;
    border-radius: 5px;
    margin-bottom: 2px;
    cursor: pointer; }
    .project-selector-dropdown .project-nav:hover {
      background-color: #e9ebed; }
    .project-selector-dropdown .project-nav.active {
      color: #4e57ff; }
  .project-selector-dropdown .divider {
    border-top: 1px solid #e9ebed;
    clear: both;
    width: 200px;
    margin-left: -6px;
    margin-top: 6px; }

.new-project-wrapper {
  margin-top: 10px;
  padding: 4px; }
  .new-project-wrapper .new-project {
    cursor: pointer;
    border-radius: 5px;
    background-color: #6971ff;
    color: white;
    padding: 2px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.15s ease-out; }
    .new-project-wrapper .new-project:hover {
      opacity: 0.9; }
    .new-project-wrapper .new-project svg {
      margin-left: -15px;
      vertical-align: middle;
      margin-bottom: 0.15em; }

.modal .modal-header {
  background: #f7f7f7;
  padding: 15px; }
  .modal .modal-header .text-left,
  .modal .modal-header .text-right {
    width: 50%;
    display: inline-block; }

.modal .modal-body {
  min-width: 640px; }
  .modal .modal-body .header-form {
    margin-bottom: 10px; }
  .modal .modal-body .field {
    width: 100%; }
  .modal .modal-body .form {
    padding-top: 5px;
    padding-bottom: 5px; }
  .modal .modal-body .collapse {
    margin-bottom: 10px;
    padding-top: 10px; }
    .modal .modal-body .collapse:hover {
      cursor: pointer; }
  .modal .modal-body .remove-header {
    line-height: 35px; }
  .modal .modal-body .clickable:hover,
  .modal .modal-body .more:hover {
    cursor: pointer; }
  .modal .modal-body .Select .select-ms {
    margin-left: 0;
    margin-right: 0;
    width: 95px; }
  .modal .modal-body .radio,
  .modal .modal-body .body-type {
    display: inline-block; }
  .modal .modal-body .body-type {
    font-size: 12px;
    font-weight: 400; }
  .modal .modal-body .more {
    color: #0069FF;
    font-size: 12px; }
  .modal .modal-body .chevron {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0.25em;
    margin-right: 4px; }
  .modal .modal-body textarea.form {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 110px; }

.modal.auto .modal-body {
  width: 480px;
  min-width: auto; }

#overlay {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  cursor: pointer; }

.stop-scrolling {
  height: 100%;
  overflow: hidden; }

.checksettings .Select,
.modal .Select {
  display: inline-block;
  position: relative; }
  .checksettings .Select.details-view-position,
  .modal .Select.details-view-position {
    top: -10px;
    right: -8px; }
  .checksettings .Select:after,
  .modal .Select:after {
    position: absolute;
    content: url("/assets/chevron-down-select.svg");
    color: red;
    text-align: center;
    font-size: .8rem;
    line-height: .5rem;
    top: 10px;
    right: 16px;
    pointer-events: none; }
  .checksettings .Select .select-ms,
  .modal .Select .select-ms {
    margin-left: 8px;
    border: 1px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.13);
    padding: 8px;
    margin-right: 8px;
    font-weight: 400;
    width: 130px;
    position: relative; }
  .checksettings .Select select:focus,
  .modal .Select select:focus {
    border: 1px solid #dadada; }

.areyousure {
  margin-right: 8px; }

.upgrade-usersettings {
  visibility: hidden; }

.disabled input {
  pointer-events: none;
  cursor: not-allowed; }

.disabled:hover .upgrade-usersettings {
  visibility: visible !important; }

.color-hint {
  width: 100%;
  height: 4px;
  background-color: #000; }

.product-hunt {
  width: 100%;
  height: 48px;
  background-image: linear-gradient(to right, #171F3B 0%, #2F4360 100%);
  color: white;
  font-weight: bold;
  padding-top: 6px;
  display: flex;
  justify-content: center;
  font-size: 14px;
  padding-top: 16px; }
  .product-hunt .product-hunt-text {
    color: white !important;
    text-decoration: none; }
  .product-hunt img {
    margin-right: 8px;
    width: 20px;
    height: 20px; }

.chevron {
  -webkit-transition: all .125s linear;
  transition: all .125s linear; }
  .chevron.active {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  .chevron:hover {
    cursor: pointer; }

.dropdown {
  transform-origin: 91px -20px 0px;
  transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  background-color: #fff;
  display: block;
  position: absolute;
  z-index: 999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #dfdfdf;
  padding: 4px;
  border-radius: 3px;
  margin-top: 16px;
  margin-right: 100px;
  text-align: left; }
  .dropdown .item {
    text-align: left;
    color: #000;
    opacity: .65;
    font-weight: 400;
    font-size: 14px;
    padding-top: 8px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 8px;
    border-radius: 3px;
    white-space: nowrap; }
    .dropdown .item:hover {
      background-color: #f1f3f7; }
    .dropdown .item.active {
      opacity: 1; }

.large .dropdown {
  left: -50px; }

.navbar-wrapper {
  padding-bottom: 24px;
  padding-top: 24px;
  display: block; }
  .navbar-wrapper .auth {
    display: inline-block; }
  .navbar-wrapper .left,
  .navbar-wrapper .right {
    display: inline-block; }
  .navbar-wrapper .left {
    float: left;
    width: 20%; }
  .navbar-wrapper .right {
    width: 80%;
    text-align: right; }
    .navbar-wrapper .right.large .link {
      display: none; }
  .navbar-wrapper .btn-submit,
  .navbar-wrapper .btn-cta,
  .navbar-wrapper .btn-cta-reversed {
    margin-left: 16px; }
  .navbar-wrapper .logo:hover {
    cursor: pointer; }
  .navbar-wrapper .link {
    color: #000;
    font-size: 14px;
    opacity: 0.65;
    line-height: 32px;
    display: inline-block; }
    .navbar-wrapper .link.active {
      opacity: 1; }
    .navbar-wrapper .link:not(.logo) {
      margin-left: 16px; }
    .navbar-wrapper .link.logo {
      vertical-align: middle; }
    .navbar-wrapper .link:hover {
      cursor: pointer;
      opacity: 0.85; }
  .navbar-wrapper .beta {
    font-size: 12px;
    background-color: orange;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 5px;
    background-color: #fbf2de;
    color: #ac7912;
    margin-left: 3px; }

.dropdown-container {
  display: inline-block;
  position: relative;
  z-index: 10; }

.night-mode .navbar-wrapper {
  background-color: #333; }

@media screen and (max-width: 500px) {
  .logo img {
    height: 24px;
    margin-top: 6px; } }

@media screen and (max-width: 991px) {
  .landing-page.container {
    margin-left: 3%;
    margin-right: 3%; }
  .navbar-wrapper .hidden-xs {
    display: none; }
  .container {
    margin-left: 3% !important;
    margin-right: 3% !important; } }

.large.navbar-wrapper {
  padding-bottom: 10px;
  padding-top: 10px;
  display: block; }

.large .container {
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 20px; }

.left-navbar {
  display: inline-block;
  padding: 10px;
  padding-left: 20px;
  width: 200px;
  margin-top: 30px;
  vertical-align: top;
  height: calc(100vh - 87px); }
  .left-navbar .bottom {
    position: absolute;
    bottom: 0;
    padding-bottom: 40px; }
  .left-navbar .select-ms {
    font-weight: 400;
    font-size: 18px;
    background-color: transparent; }
  .left-navbar .nav {
    display: block;
    font-size: 15px;
    line-height: 1.5em;
    font-weight: 400;
    animation: color 2s ease;
    color: #6F7A8F;
    height: 27.5px; }
    .left-navbar .nav.selector {
      color: #151618; }
      .left-navbar .nav.selector svg {
        stroke: #151618; }
    .left-navbar .nav svg {
      stroke: #6F7A8F; }
    .left-navbar .nav.active {
      color: #151618; }
      .left-navbar .nav.active svg {
        stroke: #151618; }
    .left-navbar .nav:hover {
      color: #151618;
      cursor: pointer; }
      .left-navbar .nav:hover svg {
        stroke: #151618; }
  .left-navbar .divider {
    margin-top: 20px;
    margin-bottom: 20px; }

.svg {
  width: 15px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0.25em; }
  .svg.small {
    width: 12px;
    margin-right: 3px;
    margin-bottom: -0.05em; }

@media screen and (max-width: 680px) {
  .left-navbar {
    padding-left: 10px; } }

.small .domain {
  font-size: 16px !important; }

.domain {
  font-weight: 700;
  font-size: 14px;
  vertical-align: top;
  margin-top: 25px; }
  .domain .edit-alias {
    margin-left: 8px;
    margin-top: 7px; }
  .domain .favicon {
    margin-right: 6px;
    width: 16px;
    margin-top: 8px; }
  .domain.details {
    cursor: pointer; }
  .domain.state {
    font-size: 12px !important;
    line-height: 28px;
    font-weight: 400;
    color: #929caf; }
  .domain .check-numbers {
    font-size: auto;
    font-weight: 700; }
  .domain .check-info {
    font-size: 12px;
    color: #929caf;
    font-weight: 400; }
  .domain.name:hover {
    opacity: .6; }
  .domain.name.down {
    color: #fa507b;
    opacity: .85; }
  .domain.threshold:hover {
    cursor: pointer;
    color: #929caf; }
  .domain.protocol {
    font-size: 14px; }
    .domain.protocol.valid {
      color: #3cbd9c; }
    .domain.protocol.warning {
      color: orange; }
    .domain.protocol.expired {
      color: #fa507b; }
  .domain:hover.name.down {
    color: #fa507b;
    opacity: 1; }
  .domain:hover.protocol {
    cursor: pointer; }

.statuspage .domain {
  margin-top: 0;
  margin-left: 10px; }

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

.field-raw {
  display: inline-block; }
  .field-raw .form-raw {
    border: 1px solid #0069ff;
    border-radius: 3px;
    padding-left: 8px;
    font-size: 24px;
    font-weight: 700; }
  .field-raw .offset-left {
    margin-left: 10px; }

.no-left-offset {
  padding-left: 0 !important; }

.month {
  display: inline-block;
  margin-left: 8px;
  vertical-align: top; }

.month-name {
  margin-bottom: 8px;
  font-weight: 700; }

.graph-day {
  width: 0px;
  height: 0px;
  -webkit-transition: height 0.85s ease-in-out;
  -moz-transition: height 0.85s ease-in-out;
  -o-transition: height 0.85s ease-in-out;
  transition: height 0.85s ease-in-out;
  -webkit-transition: width 0.85s ease-in-out;
  -moz-transition: width 0.85s ease-in-out;
  -o-transition: width 0.85s ease-in-out;
  transition: width 0.85s ease-in-out;
  display: inline-block;
  margin-left: 4px;
  width: 12px;
  height: 12px; }
  .graph-day.satisfied {
    background: #5fead7; }
  .graph-day.tolerated {
    background-image: linear-gradient(to bottom, #f7ce68 0%, #fbab7e 85%); }
  .graph-day.frustrated {
    background: #fa507b;
    background-image: linear-gradient(to bottom, #ff758c 0%, #ff7eb3 50%); }
  .graph-day.neutral {
    background-color: #f1f3f7; }
  .graph-day.ghost {
    opacity: 0; }

.linebreak {
  display: block;
  width: 0;
  height: 0;
  margin-bottom: 0; }

.details .geopinger .location {
  font-size: 15px; }

.geopinger {
  padding-left: 10px; }
  .geopinger .left {
    padding-right: 4px;
    width: 140px;
    white-space: nowrap;
    display: inline-block;
    text-align: right; }
  .geopinger .right {
    display: inline-block;
    text-align: left; }

.latency .geopinger .left {
  width: 25%; }

.latency .geopinger .right {
  width: 75%; }

.totalMs {
  margin-left: 8px; }

.geobar {
  height: 8px;
  display: inline-block;
  -webkit-transition: width 1.5s ease-in-out;
  -moz-transition: width 1.5s ease-in-out;
  -o-transition: width 1.5s ease-in-out;
  transition: width 1.5s ease-in-out; }
  .geobar.dns {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background: #ead45f; }
  .geobar.tcp {
    background: #ff8dd4; }
  .geobar.tls {
    background: #949CF9; }
  .geobar.firstByte {
    background: #24e8c6; }
  .geobar.wait {
    background: #fa507b;
    background-image: linear-gradient(to bottom, #ff758c 0%, #ff7eb3 50%); }
  .geobar.roundy-right-bar {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; }
  .geobar.roundy-left-bar {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px; }
  .geobar.download {
    background: #54baff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px; }
  .geobar.satisfied {
    background: #47ccaa;
    background-image: linear-gradient(to bottom, #38f9d7 0%, #43e97b 100%); }
  .geobar.tolerated {
    background-image: linear-gradient(to bottom, #f7ce68 0%, #fbab7e 85%); }
  .geobar.frustrated {
    background: #fa507b;
    background-image: linear-gradient(to bottom, #ff758c 0%, #ff7eb3 50%); }

.geopinger-wrapper {
  display: block;
  width: 100%; }

.faq-block {
  display: inline-block;
  width: 50%;
  padding-right: 32px;
  padding-top: 32px;
  padding-bottom: 32px;
  vertical-align: top; }
  .faq-block .header {
    font-size: 24px;
    font-weight: 500; }
  .faq-block ul {
    list-style-type: none; }
    .faq-block ul li {
      padding: 8px; }
  .faq-block p {
    font-size: 15px;
    line-height: 1.8em; }
  .faq-block:hover .hovered {
    color: #000; }

@media screen and (max-width: 991px) {
  .faq-block {
    width: 100%; } }

.home {
  padding-bottom: 8px; }
  .home h1 {
    color: #151618; }
  .home .header {
    color: #151618 !important;
    font-size: 48px;
    font-weight: 700; }
  .home .btn-cta, .home .btn-cta-reversed {
    margin-right: 20px;
    margin-bottom: 10px; }
  .home .text-cta {
    display: inline-block; }

@keyframes floating {
  from {
    transform: translate(0, 0px); }
  65% {
    transform: translate(0, 8px); }
  to {
    transform: translate(0, 0px); } }

.left-wrapper,
.right-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.feature-block-blue .header,
.feature-block-yellow .header,
.feature-block-green .header,
.feature-block .header {
  margin-bottom: 16px;
  width: 70%;
  color: #151618;
  display: block;
  font-size: 38px;
  font-weight: 600; }

.feature-block-blue .content,
.feature-block-yellow .content,
.feature-block-green .content,
.feature-block .content {
  color: #575E66;
  width: 70%;
  display: block;
  font-size: 18px;
  line-height: 1.5em; }

.feature-block .header {
  font-size: 24px; }

.feature-block .content {
  font-size: 16px; }

.feature-block-blue {
  margin-bottom: 10px; }
  .feature-block-blue .left-wrapper {
    height: 460px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #778DFF; }
  .feature-block-blue .right-wrapper {
    height: 460px;
    margin-left: 10px;
    margin-right: 10px; }

.feature-block-yellow {
  margin-bottom: 10px; }
  .feature-block-yellow .left-wrapper {
    height: 440px;
    margin-right: 10px;
    margin-left: 10px; }
  .feature-block-yellow .right-wrapper {
    height: 440px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #FFDE87; }

.feature-block-green {
  margin-bottom: 10px; }
  .feature-block-green .left-wrapper {
    height: 440px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: #A5F7E2; }
  .feature-block-green .right-wrapper {
    height: 440px;
    padding-left: 10px;
    margin-right: 10px; }

.feature-title {
  font-size: 28px;
  font-weight: 900; }

.feature-header {
  color: #151618;
  font-size: 28px;
  font-weight: 900; }

.feature-block {
  text-align: center; }
  .feature-block .feature-content {
    display: inline-block;
    text-align: left; }
    .feature-block .feature-content p {
      max-width: 300px;
      line-height: 1.5em; }

.landing-page {
  background: white !important; }
  .landing-page .home .subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em; }

@media screen and (min-width: 991px) {
  .responsive {
    display: none; }
  .landing-page .container {
    margin-left: 15%;
    margin-right: 15%; } }

@media screen and (max-width: 991px) {
  .desktop {
    display: none; }
  .responsive .feature-block-blue,
  .responsive .feature-block-green,
  .responsive .feature-block-yellow {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px; }
    .responsive .feature-block-blue .header,
    .responsive .feature-block-blue .content,
    .responsive .feature-block-green .header,
    .responsive .feature-block-green .content,
    .responsive .feature-block-yellow .header,
    .responsive .feature-block-yellow .content {
      width: 80%; }
    .responsive .feature-block-blue .right-wrapper,
    .responsive .feature-block-blue .left-wrapper,
    .responsive .feature-block-green .right-wrapper,
    .responsive .feature-block-green .left-wrapper,
    .responsive .feature-block-yellow .right-wrapper,
    .responsive .feature-block-yellow .left-wrapper {
      width: 100%;
      margin-bottom: 20px; }
  .responsive .feature-block-blue img,
  .responsive .feature-block-green img {
    width: 85%; }
  .container.home, .container.features {
    margin-left: 3%;
    margin-right: 3%; }
  .home {
    text-align: center; }
    .home .col-6 {
      width: 100%;
      text-align: center; }
      .home .col-6 img {
        width: 100%; }
    .home .col-5 {
      width: 100%; }
      .home .col-5 h1 {
        font-size: 28px; }
  .features .col-6 {
    width: 100%;
    text-align: center; }
  .features img {
    width: 100%; }
  .features .feature-header {
    font-size: 24px; }
  .features .feature-content {
    text-align: center; } }

.testimonial {
  background-color: #F3F3F3;
  padding: 16px;
  padding-left: 32px;
  padding-right: 32px; }
  @media screen and (max-width: 991px) {
    .testimonial.col-5 {
      width: 100%; } }
  .testimonial .quote {
    width: 28px;
    margin-right: 8px; }
  .testimonial .author {
    display: inline-block; }
  .testimonial .user-avatar {
    float: right;
    display: inline-block;
    text-align: right; }
    .testimonial .user-avatar img {
      border-radius: 100px;
      width: 42px; }
  .testimonial i {
    line-height: 1.5em; }

.feature-set .feature-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .feature-set .feature-block img {
    width: 85%; }

.bg-header {
  position: absolute;
  width: 100vw;
  height: 100%;
  z-index: -21;
  top: -190px;
  background: url("/assets/bg-header-tarif.svg") no-repeat center bottom;
  background-size: cover; }

.blog-container.post {
  margin-right: 30%;
  margin-left: 30%; }

.blog-container .col-6 {
  padding-left: 16px;
  padding-right: 16px; }

.blog-container .blog-posts {
  cursor: pointer;
  height: 260px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.13);
  border-radius: 5px;
  transition: all 0.1s ease-out !important; }
  .blog-container .blog-posts:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 23, 26, 0.15); }
    .blog-container .blog-posts:hover .blog-subtitle {
      color: #0069FF; }

.blog-container .blog-thumbnail {
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  margin-bottom: 16px; }
  .blog-container .blog-thumbnail img {
    flex-shrink: 0;
    width: 100%; }

.blog-container .blog-header,
.blog-container .blog-subtitle {
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 16px; }

.blog-container .blog-header {
  font-size: 22px;
  font-weight: 600; }

.blog-container .blog-subtitle {
  font-size: 15px; }

.blog-post-container span {
  line-height: 1.5em;
  font-size: 18px; }

.blog-post-container h1 {
  font-size: 38px; }

@media screen and (max-width: 891px) {
  .blog-container .blog-posts {
    margin-bottom: 32px; }
  .blog-container .col-6 {
    width: 100%; } }

.plans form {
  max-width: 400px; }

.plans .header,
.plans .pricing {
  font-size: 24px;
  font-weight: 700; }

.plans .monthly {
  font-size: 12px; }

.pricing-box {
  display: inline-block;
  vertical-align: top;
  padding: 16px;
  min-width: 400px;
  margin-left: 8px;
  margin-right: 8px; }
  .pricing-box.basic, .pricing-box.pro {
    transition: transform .1s ease; }
    .pricing-box.basic:hover, .pricing-box.pro:hover {
      transform: translate3d(0, -2px, 0); }
  .pricing-box.active {
    box-shadow: 0 4px 8px rgba(22, 23, 26, 0.15); }
  .pricing-box.basic {
    background-color: #F3F3F3; }
    .pricing-box.basic p {
      color: #000; }
  .pricing-box.pro {
    color: white;
    background-color: #778DFF; }
    .pricing-box.pro p {
      color: white; }
  .pricing-box.basic .header, .pricing-box.pro .header {
    margin-bottom: 8px; }
  .pricing-box.free .header {
    margin-bottom: 70px; }

.StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease; }

.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df; }

.StripeElement--invalid {
  border-color: #fa755a; }

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important; }

input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden; }

.toggle {
  cursor: pointer;
  text-indent: -9999px;
  width: 48px;
  height: 24px;
  background: #cecece;
  display: inline-block;
  border-radius: 100px;
  position: relative;
  border: 1px solid #FFFFFF;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle; }
  .toggle:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border-radius: 100px;
    transition: 0.15s; }
  .toggle.toggled {
    background: #43e97b; }
    .toggle.toggled:after {
      left: calc(100%);
      transform: translateX(-116%); }

.add-coupon {
  color: #0069FF;
  text-decoration: none;
  font-size: 13px; }
  .add-coupon:hover {
    cursor: pointer; }

.latency .btn-submit {
  max-width: 180px; }

.latency .geobar {
  height: 16px; }

.latency .geobar,
.latency .location-name {
  line-height: 24px; }

.latency .location-name {
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  font-size: 15px; }

.latency .try-again:hover {
  cursor: pointer; }

.latency .or {
  margin-left: 16px;
  margin-right: 16px; }

@keyframes ripple {
  from {
    transform: scale(0);
    opacity: 0.7; }
  to {
    transform: scale(1);
    opacity: 0; } }

.latency-map .map {
  position: relative;
  width: 700px; }
  .latency-map .map img {
    width: 100%;
    height: 100%; }
  .latency-map .map .locations {
    position: absolute; }
    .latency-map .map .locations .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      position: relative; }
      .latency-map .map .locations .dot.pending {
        background-color: #969696;
        box-shadow: 0 0 4px #969696; }
      .latency-map .map .locations .dot.pinging {
        background-color: orange;
        box-shadow: 0 0 4px orange; }
        .latency-map .map .locations .dot.pinging:after {
          content: "";
          display: block;
          width: 600%;
          height: 600%;
          position: absolute;
          left: -250%;
          top: -250%;
          border-radius: 50%;
          background-color: orange;
          animation: ripple 2s ease-out infinite; }
      .latency-map .map .locations .dot.pinged {
        background-color: #3ed2be;
        box-shadow: 0 0 4px #3ed2be; }

.regions-stats {
  width: 100%;
  text-align: left; }

.regions-stats {
  padding-right: 20px; }
  .regions-stats .bar-default,
  .regions-stats .bar-value {
    margin-top: 2px;
    width: 200px;
    max-width: 100%;
    height: 10px;
    border-radius: 10px;
    background-color: #ECECEC; }
  .regions-stats .bar-value {
    width: 0%;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition: width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out; }
  .regions-stats .bar-value.green {
    background-color: #56F6C2; }
  .regions-stats .bar-value.orange {
    background-color: #FFD877; }
  .regions-stats .bar-value.red {
    background-color: #FF7474; }

.checks .status-check {
  line-height: 36px;
  display: inline-block; }

.checks .status-info {
  text-align: left;
  vertical-align: top;
  display: inline-block;
  margin-left: 10px; }
  .checks .status-info .status {
    line-height: 24px;
    font-weight: 400; }

.checks .last-updated {
  font-size: 12px;
  color: #929caf; }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.checks-wrapper {
  width: calc(100vw - 220px);
  min-height: 400px;
  display: inline-block;
  margin-top: 30px;
  padding: 10px; }
  .checks-wrapper .monitor-card {
    animation: fadein 0.2s ease; }
  .checks-wrapper .protocol {
    font-size: 14px; }
    .checks-wrapper .protocol.valid {
      color: #3cbd9c; }
    .checks-wrapper .protocol.warning {
      color: orange; }
    .checks-wrapper .protocol.expired {
      color: #fa507b; }

.events .status-tag {
  display: inline-block;
  padding: 4px;
  border-radius: 3px;
  font-weight: 500; }
  .events .status-tag.success {
    color: #13c77f;
    background-color: rgba(37, 222, 148, 0.24); }
  .events .status-tag.error {
    color: #FF6363;
    background-color: rgba(255, 99, 99, 0.15); }

.events .channel {
  width: 16px;
  margin-right: 6px; }

.events .no-outage {
  padding: 10px; }

.events table {
  width: 100%;
  text-align: left;
  border-spacing: 0;
  border-collapse: collapse; }
  .events table .right {
    text-align: right; }
  .events table .header {
    background-color: #F5F7FD;
    border-top: 1px solid #d9dff0; }
  .events table th {
    padding: 16px;
    font-weight: semibold;
    font-size: 14px;
    text-transform: uppercase; }
  .events table .bold > a {
    color: black;
    font-weight: 700;
    text-decoration: none; }
  .events table .row td {
    padding: 8px;
    padding-right: 16px;
    padding-left: 16px;
    border-top: 1px solid #d9dff0; }
  .events table tr td {
    font-size: 15px; }
  .events table tr:hover .bold > a {
    color: #0069FF;
    cursor: pointer; }

.events .uptime-loss {
  color: #FF6363;
  font-size: 12px; }

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
  margin-top: 10px; }
  .pagination .previous,
  .pagination .next {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #d9dff0; }
    .pagination .previous:hover,
    .pagination .next:hover {
      cursor: pointer;
      background-color: #F5F7FD; }
    .pagination .previous.disabled,
    .pagination .next.disabled {
      opacity: .5;
      cursor: not-allowed; }
  .pagination .page {
    line-height: 40px;
    padding-right: 10px; }
  .pagination .next {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px; }
  .pagination .previous {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }

.event-block {
  width: 100%;
  height: 60px;
  padding: 10px;
  display: inline-block;
  margin-bottom: 10px;
  border: 2px solid #f1f1f1;
  border-radius: 5px; }
  .event-block.success {
    margin-bottom: -2px; }

.whiteboard.no-padding {
  padding: 0 !important; }

.locations .location {
  padding: 16px;
  display: inline-block;
  border: 1px solid #000;
  border-radius: 3px;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  width: 160px;
  opacity: 1; }
  .locations .location .city-name {
    margin-bottom: 8px;
    display: inline-block;
    font-weight: 600; }
  .locations .location.selected {
    border-color: #0069FF;
    color: #0069FF;
    background-color: #f5f9ff; }
  .locations .location .flag-icon {
    width: 52px;
    height: 39px;
    border-radius: 3px;
    margin-bottom: 8px; }
  .locations .location.disabled {
    color: #929caf;
    border: 1px solid #929caf; }
    .locations .location.disabled:hover {
      color: #7d90a9;
      border-color: #7d90a9;
      background-color: #f1f3f7; }

.statuspage-dashboard .monitor-card {
  height: 116px;
  padding-bottom: 8px; }
  .statuspage-dashboard .monitor-card.add {
    line-height: 116px; }
  .statuspage-dashboard .monitor-card .metric:hover {
    color: #575E66; }
  .statuspage-dashboard .monitor-card:hover {
    cursor: pointer; }

.statuspage .btn-cta, .statuspage .btn-cta-reversed,
.statuspage-dashboard .btn-cta,
.statuspage-dashboard .btn-cta-reversed {
  text-decoration: none; }

.statuspage .left,
.statuspage-dashboard .left {
  width: 50%;
  display: inline-block; }

.statuspage .right,
.statuspage-dashboard .right {
  width: 50%;
  display: inline-block;
  text-align: right; }

.drop-box .form {
  min-height: 80px;
  padding-left: 95px; }

.drop-box input {
  color: transparent; }
  .drop-box input:focus {
    outline: none; }

.drop-box:hover,
.drop-box .form {
  cursor: pointer; }

.drop-box .label {
  top: 25px !important; }

.drop-box img {
  max-height: 40px;
  border-radius: 3px; }

.drop-box.default img {
  max-height: 32px; }

.check-nav {
  width: 100%;
  list-style: none;
  padding-left: 10px;
  color: #999; }
  .check-nav .check-nav-tab {
    padding-bottom: 10px;
    margin-right: 16px; }
    .check-nav .check-nav-tab:hover {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.68); }
    .check-nav .check-nav-tab.active {
      color: #0069FF; }

.details-info .check-numbers {
  font-size: 28px;
  line-height: 24px;
  font-weight: 400; }

.details-info .check-info {
  font-weight: 500;
  font-size: 15px;
  color: #6f767e;
  margin-bottom: 8px; }

.go-back {
  display: inline-block; }
  .go-back img {
    width: 14px;
    margin-right: 4px; }
  .go-back:hover {
    opacity: .55;
    cursor: pointer; }

.details .large {
  line-height: 34px; }

.whiteboard {
  border-radius: 5px; }

.empty-state {
  position: absolute;
  width: 39%;
  height: 130px;
  background-color: #f3f3f3;
  border-radius: 5px; }

.details-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif !important;
  width: calc(100vw - 220px);
  display: inline-block;
  margin-top: 30px;
  padding: 10px;
  padding-top: 10px;
  border-radius: 5px;
  margin-bottom: 40px; }
  .details-wrapper .whiteboard {
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.13);
    padding-bottom: 10px; }
    .details-wrapper .whiteboard.events, .details-wrapper .whiteboard.locations, .details-wrapper .whiteboard.notifications, .details-wrapper .whiteboard.services, .details-wrapper .whiteboard.settings, .details-wrapper .whiteboard.usersettings {
      padding: 20px; }
  .details-wrapper .col-6 {
    padding-left: 10px;
    padding-right: 10px; }
  .details-wrapper .metric {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 5px;
    margin-top: 10px;
    margin-left: 6px; }
    .details-wrapper .metric.offset {
      padding-left: 10px; }
  .details-wrapper .value {
    line-height: 20px;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    margin-left: 6px;
    display: inline-block; }
    .details-wrapper .value.offset {
      padding-left: 10px; }
  .details-wrapper .previous-value {
    display: inline-block;
    background-color: #c4f1f9;
    color: #075996;
    float: right;
    margin-right: 10px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 4px;
    font-size: 12px; }
    .details-wrapper .previous-value.green {
      font-weight: 600;
      background-color: #cbf4c9;
      color: #0e6245; }
    .details-wrapper .previous-value.orange {
      font-weight: 600;
      color: #983705;
      background-color: #f8e5b9; }
  .details-wrapper .calendar {
    padding-left: 10px; }

.geopinger {
  z-index: 1000 !important; }

.col-half {
  width: 50%;
  display: inline-block;
  vertical-align: top; }

@media screen and (max-width: 1361px) {
  .details-wrapper .col-6 {
    width: 100%; }
  .details-wrapper .geopinger {
    margin-left: 0;
    margin: auto; } }

.footer {
  margin-top: 80px;
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 1.5em;
  margin-bottom: 20px; }
  .footer .footer-link {
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    margin-left: 16px;
    text-decoration: none;
    color: #333;
    opacity: .65; }
    .footer .footer-link.home {
      opacity: 1; }
  .footer .about {
    font-weight: 600;
    margin-bottom: 10px; }
  .footer a {
    text-decoration: none;
    color: #333; }

.auth .already {
  font-size: 14px; }
  .auth .already:active, .auth .already:link, .auth .already:hover, .auth .already:visited {
    color: #000; }

.notification {
  display: inline-block;
  padding: 8px;
  padding-left: 16px;
  padding-right: 16px;
  position: fixed;
  font-size: 14px;
  top: 100px;
  right: 20px;
  border-radius: 3px;
  color: #fff;
  z-index: 1; }
  .notification.success {
    background: #47ccaa;
    background-image: radial-gradient(ellipse farthest-corner at top left, rgba(71, 204, 170, 0.15) 0%, #47ccaa 100%); }
  .notification.danger {
    background: #fa507b;
    background-image: radial-gradient(ellipse farthest-corner at top left, rgba(250, 80, 123, 0.15) 0%, #fa507b 100%); }

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

.tippy-popper .tippy-tooltip {
  max-width: 250px;
  background-color: #0b0a33;
  color: white;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); }
  .tippy-popper .tippy-tooltip .tippy-title {
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 8px; }
  .tippy-popper .tippy-tooltip .left {
    text-align: left; }
  .tippy-popper .tippy-tooltip .right {
    text-align: right;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 300; }

.tippy-popper[x-placement=top] .tippy-tooltip [x-arrow] {
  display: none; }

.tippy-popper[x-placement=bottom] .tippy-tooltip [x-arrow] {
  display: none; }

.changelog-wrapper {
  background-color: #000;
  border-radius: 3px;
  padding-top: 16px;
  padding-bottom: 16px;
  padding-right: 16px;
  padding-left: 16px;
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  width: 100%;
  max-width: 280px;
  z-index: 287426;
  color: white; }
  .changelog-wrapper button {
    cursor: pointer;
    position: absolute;
    z-index: 2;
    text-align: center;
    right: -6px;
    top: -6px;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background-color: #000;
    transition: opacity .2s ease, transform .1s ease;
    border: none;
    outline: none; }
    .changelog-wrapper button:hover {
      transform: scale(1.1); }
    .changelog-wrapper button:active, .changelog-wrapper button:focus {
      transform: scale(0.9); }
    .changelog-wrapper button img {
      width: 13px;
      height: 13px;
      top: 4px;
      position: absolute;
      display: inherit;
      right: 4px; }

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

.stat-wrapper {
  display: flex;
  width: 100%;
  flex-wrap: wrap; }
  .stat-wrapper .header {
    width: 100%; }
    .stat-wrapper .header.separate {
      margin-bottom: 15px; }
    .stat-wrapper .header .key,
    .stat-wrapper .header .value {
      font-size: 18px;
      font-weight: 500; }
  .stat-wrapper .left {
    width: 85%;
    display: inline-flex; }
  .stat-wrapper .right {
    width: 15%;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end; }

.tooltip {
  background-color: #0b0a33;
  opacity: .85;
  padding: 10px;
  border-radius: 5px;
  color: white;
  width: 260px; }
  .tooltip .tooltip-separator {
    margin-top: 4px; }
  .tooltip .header {
    line-height: 1.5em;
    font-size: 15px;
    padding-left: 0;
    padding-right: 0; }
  .tooltip .tooltip-value {
    font-size: 13px; }
  .tooltip .left {
    width: 50%;
    display: inline-block;
    text-align: left;
    white-space: nowrap; }
  .tooltip .right {
    width: 50%;
    display: inline-block;
    text-align: right; }
  .tooltip .dot {
    height: 8px;
    width: 8px;
    margin-right: 6px;
    border-radius: 50%;
    display: inline-block; }
    .tooltip .dot.data {
      background-color: #6A6CFD; }
    .tooltip .dot.prevData {
      background-color: #d9d9fe; }

.left-5 .recharts-wrapper {
  left: -5px;
  bottom: -3px; }

.billing .card-box {
  width: auto;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  background-color: #f2f3f5;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease; }
  .billing .card-box .number {
    margin-right: 30px; }
  .billing .card-box .expiry {
    color: #6F7A8F;
    margin-right: 10px; }
  .billing .card-box .update {
    color: #0069FF;
    cursor: pointer; }

.billing .header {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 10px; }

.billing button.edit-credit-card {
  text-decoration: none;
  border: none;
  font-size: 15px;
  font-weight: 500; }

.billing #card-element,
.billing #card-element-modal {
  background-color: #f2f3f5; }

.billing .stripe-form {
  display: inline-block;
  width: 440px; }

.billing-plans .plan-wrapper {
  padding: 10px;
  border: 1px solid #f2f3f5;
  border-radius: 5px;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  width: 200px;
  display: inline-block;
  text-align: center;
  transition: all 0.1s ease-out !important; }
  .billing-plans .plan-wrapper:hover {
    cursor: pointer;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px 0 #e6ebf1; }
  .billing-plans .plan-wrapper .name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px; }
  .billing-plans .plan-wrapper .price {
    color: #6F7A8F;
    font-weight: 400;
    margin-bottom: 20px; }
  .billing-plans .plan-wrapper .features {
    line-height: 1.5em;
    margin-bottom: 20px; }
  .billing-plans .plan-wrapper .cta-choose {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #f2f3f5; }
    .billing-plans .plan-wrapper .cta-choose:hover {
      border-color: #0069FF;
      color: #0069FF; }
    .billing-plans .plan-wrapper .cta-choose.subscribed {
      background: #47ccaa;
      color: white;
      border: none; }

.billing-plans .offset-right {
  margin-right: 10px; }

.search-wrapper .form {
  width: 240px;
  line-height: 0;
  padding: 5px 10px;
  padding-left: 35px;
  border: 1px solid transparent; }
  .search-wrapper .form::-webkit-input-placeholder {
    color: #575E66; }

.search-wrapper .field .label {
  top: 6px; }

.alerts-wrapper {
  display: inline-block; }
  .alerts-wrapper .time-ago {
    width: 15px;
    margin-right: 4px;
    vertical-align: middle;
    margin-bottom: 0.25em; }

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  outline: none; }

html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-weight: 500;
  overflow-x: hidden; }
  html.large, body.large {
    background: #FAFBFC; }
  html.dark-mode, body.dark-mode {
    background-color: #333; }
    html.dark-mode .header, body.dark-mode .header {
      color: #fff; }
    html.dark-mode .navbar-wrapper, body.dark-mode .navbar-wrapper {
      background-color: #333;
      color: #929caf; }
      html.dark-mode .navbar-wrapper .link.active, html.dark-mode .navbar-wrapper .link:hover, body.dark-mode .navbar-wrapper .link.active, body.dark-mode .navbar-wrapper .link:hover {
        color: #fff; }
    html.dark-mode .apdex-wrapper, body.dark-mode .apdex-wrapper {
      background-color: #505050; }
    html.dark-mode .domain:hover .name, body.dark-mode .domain:hover .name {
      color: #fff; }
    html.dark-mode .timeline .time, body.dark-mode .timeline .time {
      color: #FFF; }
    html.dark-mode .tippy-popper .tippy-tooltip, body.dark-mode .tippy-popper .tippy-tooltip {
      color: #333;
      background: white; }
    html.dark-mode .check-numbers,
    html.dark-mode .ms, body.dark-mode .check-numbers,
    body.dark-mode .ms {
      color: #fff; }

p {
  color: #5e5e5e; }

.numberCircle {
  display: inline-block;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 8px;
  color: #fff;
  font-weight: 500;
  margin-left: 16px;
  background: #418fff;
  background-size: 40px;
  text-align: center;
  opacity: 1;
  transition: all 0.15s ease-out; }
  .numberCircle:hover {
    cursor: pointer;
    background: #579cff; }
  .numberCircle.night-mode {
    background: url("/assets/nightmode.svg");
    background-repeat: no-repeat; }

.gray {
  color: #929caf; }

.container {
  margin-left: 20%;
  margin-right: 20%; }
  .container.dashboard {
    margin-left: 5%;
    margin-right: 5%; }

.pull-right {
  float: right; }

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

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

.btn, .btn-cta, .btn-cta-reversed, .btn-default, .btn-submit, .btn-danger {
  padding: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border: 0;
  color: #fff;
  border-radius: 3px;
  display: inline-block;
  transition: all 0.15s ease-out;
  font-size: 14px;
  font-weight: 600; }
  .btn:hover:not(.disabled):not(.status), .btn-cta:hover:not(.disabled):not(.status), .btn-cta-reversed:hover:not(.disabled):not(.status), .btn-default:hover:not(.disabled):not(.status), .btn-submit:hover:not(.disabled):not(.status), .btn-danger:hover:not(.disabled):not(.status) {
    cursor: pointer;
    transition: all 0.15s ease-in;
    box-shadow: 0 6px 16px rgba(22, 23, 26, 0.15); }
  .btn.disabled, .disabled.btn-cta, .disabled.btn-cta-reversed, .disabled.btn-default, .disabled.btn-submit, .disabled.btn-danger {
    opacity: .7;
    cursor: not-allowed; }
  .btn.large, .large.btn-cta, .large.btn-cta-reversed, .large.btn-default, .large.btn-submit, .large.btn-danger {
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 32px;
    padding-right: 32px;
    font-size: 16px; }

.btn-cta, .btn-cta-reversed {
  background: #778DFF;
  transition: all 0s ease-out !important; }
  .btn-cta:hover, .btn-cta-reversed:hover {
    transform: translateY(-1px); }

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

.btn-default {
  color: #000;
  background: #e9ebed; }

.margin-left {
  margin-left: 10px; }

.btn-cta-reversed {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  box-shadow: none !important;
  padding-top: 7px;
  padding-bottom: 7px; }
  .btn-cta-reversed:hover {
    background: #000;
    color: #fff; }

.btn-submit {
  background: #47ccaa;
  background-image: radial-gradient(ellipse farthest-corner at top left, rgba(71, 204, 170, 0.15) 0%, #47ccaa 100%); }
  .btn-submit.block {
    text-align: center;
    display: block; }

.btn-danger {
  background: #fa507b; }
  .btn-danger.block {
    text-align: center;
    display: block; }

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

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

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

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

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

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

.mb-7 {
  margin-bottom: 48px; }

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

.mb-9 {
  margin-bottom: 72px; }

.mb-10 {
  margin-bottom: 80px; }

.mb-15 {
  margin-bottom: 120px; }

.mb-20 {
  margin-bottom: 160px; }

.modal {
  z-index: 10;
  left: 0;
  top: 0;
  animation: fadein .15s;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: auto;
  position: fixed;
  top: 10%;
  margin-left: -320px;
  left: 50%; }
  .modal .modal-body {
    padding: 20px; }

.field {
  position: relative;
  width: 340px; }
  .field.expand {
    width: 100%; }
  .field .label {
    position: absolute;
    top: 16px;
    left: 10px;
    font-size: 16px;
    color: #999; }

.help-text {
  font-size: 12px;
  line-height: 14px;
  color: #AAAAAA;
  display: block;
  padding-top: 4px;
  font-weight: 400; }
  .help-text.inline {
    display: inline-block;
    color: #AAAAAA !important; }
  .help-text a {
    font-size: 12px;
    line-height: 14px;
    color: #0069FF;
    display: inline-block;
    padding-top: 4px;
    font-weight: 400;
    text-decoration: none; }

.field:focus-within .help-text {
  color: #151618; }

.padding-left {
  padding-left: 10px; }

.form {
  width: 340px;
  border-radius: 3px;
  border: 1px solid #E5E5E5;
  line-height: 23px;
  font-size: 15px;
  padding: 12px 20px;
  padding-left: 40px;
  color: #000; }
  .form:focus {
    border: 1px solid #0069FF; }
  .form.multi {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px; }
  .form::-webkit-input-placeholder {
    color: #DEDEDE;
    font-weight: 400; }
  .form.expand {
    -webkit-transition: width .5s;
    /* Safari */
    transition: width .5s; }
    .form.expand:focus {
      width: 100%; }

.settings input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden; }

.settings .checkbox-button:hover {
  cursor: pointer; }

.settings .checkbox {
  margin-right: 8px;
  height: 22px;
  width: 22px;
  display: inline-block;
  padding: 0;
  background: #fff;
  border: 1px solid #dcdcdc;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  display: inline-block; }
  .settings .checkbox.toggled {
    border: 1px solid #0069FF; }
    .settings .checkbox.toggled:after {
      content: url("/assets/check-select.svg");
      text-align: center;
      font-size: .75rem;
      color: #0069ff;
      position: absolute;
      line-height: 1.3rem;
      left: 0;
      top: 0;
      width: 100%; }

.settings .radiobox {
  border-radius: 50%; }
  .settings .radiobox.toggled:after {
    content: url("/assets/check-circle.svg");
    display: block;
    top: 1px; }

.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1 {
  display: inline-block;
  vertical-align: top; }

.col-12 {
  width: 100%; }

.col-10 {
  width: 83.33%; }

.col-9 {
  width: 75%; }

.col-8 {
  width: 66.66%; }

.col-7 {
  width: 58.33%; }

.col-6 {
  width: 50%; }

.col-5 {
  width: 41.66%; }

.col-4 {
  width: 33.33%; }

.col-3 {
  width: 25%; }

.col-2 {
  width: 16.66%; }

.col-1 {
  width: 8.33%; }

.flag-icon-squared.rounded {
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.18);
  border: 1px solid #fff;
  width: 15px;
  height: 15px; }

.icon:hover {
  cursor: pointer; }

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

.animated {
  -webkit-animation-duration: .25s;
  animation-duration: .25s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

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

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

.edit-credit-card,
.text-cta {
  text-decoration: none;
  color: #0069ff; }
  .edit-credit-card:hover,
  .text-cta:hover {
    cursor: pointer; }
  .edit-credit-card.small,
  .text-cta.small {
    font-size: 12px;
    line-height: 34px;
    margin-left: 10px; }

.input {
  background-color: #f2f3f5;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 15px; }