@charset "UTF-8";
.bgAccent {
  background: #f66c00;
  color: #fff;
}

.midLight {
  color: #c3c9cd;
}

.lowLight, .services-landing p, .feature-paragraph, .create-alert-heading {
  color: #8C969E;
}

.bgComplementLight {
  background: white;
  color: #8C969E;
}

.bgWarningLight {
  background: #fbf7da;
  color: #8C969E;
}

.bgDangerLight, .beta-label {
  background: #f18181;
  color: #3c3f42;
}

.bgTranslucent, .card--header, .topBar, .modal--header, .dropdown--menu {
  background: #fff;
  background: rgba(255, 255, 255, 0.98);
}

.bgTranslucentLight {
  background: #fff;
  background: rgba(255, 255, 255, 0.86);
}

.bgTranslucentDark, #confirmModalOverlay {
  background: rgba(17, 17, 17, 0.8);
}

.bgWhite, .card--icon-hint, .card, .card-full, .card-SM, .card-S, .card-MS, .card-M, .modal {
  background: #fff;
}
.bgWhite .lowLight, .bgWhite .services-landing p, .services-landing .bgWhite p, .bgWhite .feature-paragraph, .card--icon-hint .lowLight, .card--icon-hint .services-landing p, .services-landing .card--icon-hint p, .card--icon-hint .feature-paragraph, .card .lowLight, .card .services-landing p, .services-landing .card p, .card .feature-paragraph, .card-full .lowLight, .card-full .services-landing p, .services-landing .card-full p, .card-full .feature-paragraph, .card-SM .lowLight, .card-SM .services-landing p, .services-landing .card-SM p, .card-SM .feature-paragraph, .card-S .lowLight, .card-S .services-landing p, .services-landing .card-S p, .card-S .feature-paragraph, .card-MS .lowLight, .card-MS .services-landing p, .services-landing .card-MS p, .card-MS .feature-paragraph, .card-M .lowLight, .card-M .services-landing p, .services-landing .card-M p, .card-M .feature-paragraph, .modal .lowLight, .modal .services-landing p, .services-landing .modal p, .modal .feature-paragraph, .bgWhite .create-alert-heading, .card--icon-hint .create-alert-heading, .card .create-alert-heading, .card-full .create-alert-heading, .card-SM .create-alert-heading, .card-S .create-alert-heading, .card-MS .create-alert-heading, .card-M .create-alert-heading, .modal .create-alert-heading {
  color: #8C969E;
}

.bgGDark {
  background: #3c3f42;
}

.bgLight, .cardContainer, .activityLog, .modal--footer {
  background: #f2f3f6;
}
.bgLight .lowLight, .bgLight .services-landing p, .services-landing .bgLight p, .bgLight .feature-paragraph, .cardContainer .lowLight, .cardContainer .services-landing p, .services-landing .cardContainer p, .cardContainer .feature-paragraph, .activityLog .lowLight, .activityLog .services-landing p, .services-landing .activityLog p, .activityLog .feature-paragraph, .modal--footer .lowLight, .modal--footer .services-landing p, .services-landing .modal--footer p, .modal--footer .feature-paragraph, .bgLight .create-alert-heading, .cardContainer .create-alert-heading, .activityLog .create-alert-heading, .modal--footer .create-alert-heading {
  color: #8C969E;
}

.bgLighter {
  background: #fbfbfc;
}
.bgLighter .lowLight, .bgLighter .services-landing p, .services-landing .bgLighter p, .bgLighter .feature-paragraph, .bgLighter .create-alert-heading {
  color: #8C969E;
}

.bgSolarized, .code-agnostic, code {
  background: #fdf6e3;
}
.bgSolarized .lowLight, .bgSolarized .services-landing p, .services-landing .bgSolarized p, .code-agnostic .lowLight, .code-agnostic .services-landing p, .services-landing .code-agnostic p, .bgSolarized .feature-paragraph, .code-agnostic .feature-paragraph, code .lowLight, code .services-landing p, .services-landing code p, code .feature-paragraph, .bgSolarized .create-alert-heading, .code-agnostic .create-alert-heading, code .create-alert-heading {
  color: #8C969E;
}

.bgBlackGradient, .agent-codebox, .card-codebox {
  background: #26292c;
  background-image: url("../../assets/img/tile.png"); /* fallback */
  background-image: url("../../assets/img/tile.png"), radial-gradient(circle at bottom center, #555, #222); /* Saf4+, Chrome */
  color: #fff;
}
.bgBlackGradient .lowLight, .bgBlackGradient .services-landing p, .services-landing .bgBlackGradient p, .bgBlackGradient .feature-paragraph, .agent-codebox .lowLight, .agent-codebox .services-landing p, .services-landing .agent-codebox p, .agent-codebox .feature-paragraph, .card-codebox .lowLight, .card-codebox .services-landing p, .services-landing .card-codebox p, .card-codebox .feature-paragraph, .bgBlackGradient .create-alert-heading, .agent-codebox .create-alert-heading, .card-codebox .create-alert-heading {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.5;
}

.bgCareers {
  background: #26292c;
  background-image: url("../../assets/img/careers/Careers-bg-big.png");
  background-size: cover;
  color: #fff;
  height: 600px;
  overflow: hidden;
}

.bgHeroku {
  background: #764fa9;
  color: #fff;
}
.bgHeroku .lowLight, .bgHeroku .services-landing p, .services-landing .bgHeroku p, .bgHeroku .feature-paragraph, .bgHeroku .create-alert-heading {
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.7;
}

.bgMetricfire {
  background: #101036;
}

.bgDark {
  background: #333;
}

.bgGrafana {
  background: #eb7851;
  color: #fff;
}
.bgGrafana .lowLight, .bgGrafana .services-landing p, .services-landing .bgGrafana p, .bgGrafana .feature-paragraph, .bgGrafana .create-alert-heading {
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.7;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.beta-label {
  padding: 2px 4px;
  border: none;
  border-radius: 3px;
}

.for-mobile {
  display: inline;
}
@media (min-width: 680px) {
  .for-mobile {
    display: none;
  }
}

.for-tablet-and-above {
  display: none;
}
@media (min-width: 1020px) {
  .for-tablet-and-above {
    display: initial;
  }
}

.for-vert-tablet-and-above {
  display: none;
}
@media (min-width: 900px) {
  .for-vert-tablet-and-above {
    display: initial;
  }
}

.for-desktop {
  display: none;
}
@media (min-width: 680px) {
  .for-desktop {
    display: initial;
  }
}

.soft-shadow, .landing-page-topbar.active {
  -webkit-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
}

.darkGreyText {
  color: #76828b;
}

.blackText {
  color: #42494f;
}

.whiteText {
  color: #f0f0f0;
}

hr.greyHR {
  border-top: 1px solid #c3c9cd;
  border-bottom: none;
}

a {
  cursor: pointer;
}

/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*!
Chosen, a Select Box Enhancer for jQuery and Prototype
by Patrick Filler for Harvest, http://getharvest.com

Version 1.4.2
Full source at https://github.com/harvesthq/chosen
Copyright (c) 2011-2015 Harvest http://getharvest.com

MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md
This file is generated by `grunt build`, do not edit it by hand.
*/
/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.chosen-container * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}

.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}

.chosen-container a {
  cursor: pointer;
}

.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
  margin-right: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: inherit;
  color: #999999;
}

.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
  content: ":";
  padding-left: 2px;
  vertical-align: top;
}

/* @end */
/* @group Results */
.chosen-container .chosen-results {
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 4px 4px 0;
  padding: 0 0 0 4px;
  max-height: 120px;
  -webkit-overflow-scrolling: touch;
}

.chosen-container .chosen-results li {
  display: none;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
  line-height: 15px;
  word-wrap: break-word;
  -webkit-touch-callout: none;
}

.chosen-container .chosen-results li.active-result {
  display: list-item;
  cursor: pointer;
  color: #444;
}

.chosen-container .chosen-results li.disabled-result {
  display: list-item;
  color: #ccc;
  cursor: default;
}

.chosen-container .chosen-results li.highlighted {
  background-color: #3875d7;
  color: #fff;
}

.chosen-container .chosen-results li.no-results {
  color: #777;
  display: list-item;
  background: #f4f4f4;
}

.chosen-container .chosen-results li.group-result {
  display: list-item;
  cursor: default;
}

.chosen-container .chosen-results li.group-option {
  padding-left: 15px;
}

.chosen-container .chosen-results li em {
  font-style: normal;
  text-decoration: underline;
}

/* @end */
/* @group Multi Chosen */
.chosen-container-multi .chosen-choices {
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 5px;
  width: 100%;
  height: 1%;
  border: 1px solid #aaa;
  background-color: #fff;
  cursor: text;
  border: 1px solid #e0e2e9;
  border-top-color: #b6bbcc;
  font-weight: inherit;
}
.chosen-container-multi .chosen-choices:focus {
  border-color: #b6bbcc;
  box-shadow: inset 0 1px 0 #e0e2e9;
}

.chosen-container-multi .chosen-choices li {
  float: left;
  list-style: none;
}

.chosen-container-multi .chosen-choices li.search-field {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
  margin: 2px;
  padding: 0;
  height: 35px;
  outline: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  color: #AAA;
  font-size: 14px;
  line-height: 100%;
  line-height: normal;
  font-weight: 600;
}

.chosen-container-multi .chosen-choices li.search-choice {
  position: relative;
  margin: 3px;
  padding: 8px 22px 8px 8px;
  border: none;
  max-width: 100%;
  border-radius: 3px;
  background-color: #F0F0F0;
  color: #444;
  height: 80%;
  line-height: 80%;
  cursor: default;
  box-shadow: 0px 1px 2px 0px rgba(175, 175, 175, 0.5);
}

.chosen-container-multi .chosen-choices li.search-choice span {
  word-wrap: break-word;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  position: absolute;
  top: 9px;
  right: 3px;
  display: block;
  width: 12px;
  height: 12px;
  background: url("chosen-sprite.png") -42px 1px no-repeat;
  font-size: 12px;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-choices li.search-choice-disabled {
  padding-right: 5px;
  border: none;
  background-color: #e4e4e4;
  color: #666;
}

.chosen-container-multi .chosen-choices li.search-choice-focus {
  background: #d4d4d4;
}

.chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close {
  background-position: -42px -10px;
}

.chosen-container-multi .chosen-results {
  margin: 0;
  padding: 0;
}

.chosen-container-multi .chosen-drop .result-selected {
  display: list-item;
  color: #ccc;
  cursor: default;
}

.chosen-container-active .chosen-choices {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* @end */
/* @group Retina compatibility */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
  .chosen-rtl .chosen-search input[type=text],
  .chosen-container-single .chosen-single abbr,
  .chosen-container-single .chosen-single div b,
  .chosen-container-single .chosen-search input[type=text],
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
  .chosen-container .chosen-results-scroll-down span,
  .chosen-container .chosen-results-scroll-up span {
    background-image: url("chosen-sprite@2x.png") !important;
    background-size: 52px 37px !important;
    background-repeat: no-repeat !important;
  }
}
/* @end */
.bgAccent {
  background: #f66c00;
  color: #fff;
}

.midLight {
  color: #c3c9cd;
}

.lowLight, .services-landing p, .feature-paragraph, .create-alert-heading {
  color: #8C969E;
}

.bgComplementLight {
  background: white;
  color: #8C969E;
}

.bgWarningLight {
  background: #fbf7da;
  color: #8C969E;
}

.bgDangerLight, .beta-label {
  background: #f18181;
  color: #3c3f42;
}

.bgTranslucent, .card--header, .topBar, .modal--header, .dropdown--menu {
  background: #fff;
  background: rgba(255, 255, 255, 0.98);
}

.bgTranslucentLight {
  background: #fff;
  background: rgba(255, 255, 255, 0.86);
}

.bgTranslucentDark, #confirmModalOverlay {
  background: rgba(17, 17, 17, 0.8);
}

.bgWhite, .card--icon-hint, .card, .card-full, .card-SM, .card-S, .card-MS, .card-M, .modal {
  background: #fff;
}
.bgWhite .lowLight, .bgWhite .services-landing p, .services-landing .bgWhite p, .bgWhite .feature-paragraph, .card--icon-hint .lowLight, .card--icon-hint .services-landing p, .services-landing .card--icon-hint p, .card--icon-hint .feature-paragraph, .card .lowLight, .card .services-landing p, .services-landing .card p, .card .feature-paragraph, .card-full .lowLight, .card-full .services-landing p, .services-landing .card-full p, .card-full .feature-paragraph, .card-SM .lowLight, .card-SM .services-landing p, .services-landing .card-SM p, .card-SM .feature-paragraph, .card-S .lowLight, .card-S .services-landing p, .services-landing .card-S p, .card-S .feature-paragraph, .card-MS .lowLight, .card-MS .services-landing p, .services-landing .card-MS p, .card-MS .feature-paragraph, .card-M .lowLight, .card-M .services-landing p, .services-landing .card-M p, .card-M .feature-paragraph, .modal .lowLight, .modal .services-landing p, .services-landing .modal p, .modal .feature-paragraph, .bgWhite .create-alert-heading, .card--icon-hint .create-alert-heading, .card .create-alert-heading, .card-full .create-alert-heading, .card-SM .create-alert-heading, .card-S .create-alert-heading, .card-MS .create-alert-heading, .card-M .create-alert-heading, .modal .create-alert-heading {
  color: #8C969E;
}

.bgGDark {
  background: #3c3f42;
}

.bgLight, .cardContainer, .activityLog, .modal--footer {
  background: #f2f3f6;
}
.bgLight .lowLight, .bgLight .services-landing p, .services-landing .bgLight p, .bgLight .feature-paragraph, .cardContainer .lowLight, .cardContainer .services-landing p, .services-landing .cardContainer p, .cardContainer .feature-paragraph, .activityLog .lowLight, .activityLog .services-landing p, .services-landing .activityLog p, .activityLog .feature-paragraph, .modal--footer .lowLight, .modal--footer .services-landing p, .services-landing .modal--footer p, .modal--footer .feature-paragraph, .bgLight .create-alert-heading, .cardContainer .create-alert-heading, .activityLog .create-alert-heading, .modal--footer .create-alert-heading {
  color: #8C969E;
}

.bgLighter {
  background: #fbfbfc;
}
.bgLighter .lowLight, .bgLighter .services-landing p, .services-landing .bgLighter p, .bgLighter .feature-paragraph, .bgLighter .create-alert-heading {
  color: #8C969E;
}

.bgSolarized, .code-agnostic, code {
  background: #fdf6e3;
}
.bgSolarized .lowLight, .bgSolarized .services-landing p, .services-landing .bgSolarized p, .code-agnostic .lowLight, .code-agnostic .services-landing p, .services-landing .code-agnostic p, .bgSolarized .feature-paragraph, .code-agnostic .feature-paragraph, code .lowLight, code .services-landing p, .services-landing code p, code .feature-paragraph, .bgSolarized .create-alert-heading, .code-agnostic .create-alert-heading, code .create-alert-heading {
  color: #8C969E;
}

.bgBlackGradient, .agent-codebox, .card-codebox {
  background: #26292c;
  background-image: url("../../assets/img/tile.png"); /* fallback */
  background-image: url("../../assets/img/tile.png"), radial-gradient(circle at bottom center, #555, #222); /* Saf4+, Chrome */
  color: #fff;
}
.bgBlackGradient .lowLight, .bgBlackGradient .services-landing p, .services-landing .bgBlackGradient p, .bgBlackGradient .feature-paragraph, .agent-codebox .lowLight, .agent-codebox .services-landing p, .services-landing .agent-codebox p, .agent-codebox .feature-paragraph, .card-codebox .lowLight, .card-codebox .services-landing p, .services-landing .card-codebox p, .card-codebox .feature-paragraph, .bgBlackGradient .create-alert-heading, .agent-codebox .create-alert-heading, .card-codebox .create-alert-heading {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.5;
}

.bgCareers {
  background: #26292c;
  background-image: url("../../assets/img/careers/Careers-bg-big.png");
  background-size: cover;
  color: #fff;
  height: 600px;
  overflow: hidden;
}

.bgHeroku {
  background: #764fa9;
  color: #fff;
}
.bgHeroku .lowLight, .bgHeroku .services-landing p, .services-landing .bgHeroku p, .bgHeroku .feature-paragraph, .bgHeroku .create-alert-heading {
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.7;
}

.bgMetricfire {
  background: #101036;
}

.bgDark {
  background: #333;
}

.bgGrafana {
  background: #eb7851;
  color: #fff;
}
.bgGrafana .lowLight, .bgGrafana .services-landing p, .services-landing .bgGrafana p, .bgGrafana .feature-paragraph, .bgGrafana .create-alert-heading {
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.7;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.beta-label {
  padding: 2px 4px;
  border: none;
  border-radius: 3px;
}

.for-mobile {
  display: inline;
}
@media (min-width: 680px) {
  .for-mobile {
    display: none;
  }
}

.for-tablet-and-above {
  display: none;
}
@media (min-width: 1020px) {
  .for-tablet-and-above {
    display: initial;
  }
}

.for-vert-tablet-and-above {
  display: none;
}
@media (min-width: 900px) {
  .for-vert-tablet-and-above {
    display: initial;
  }
}

.for-desktop {
  display: none;
}
@media (min-width: 680px) {
  .for-desktop {
    display: initial;
  }
}

.soft-shadow, .landing-page-topbar.active {
  -webkit-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
}

.darkGreyText {
  color: #76828b;
}

.blackText {
  color: #42494f;
}

.whiteText {
  color: #f0f0f0;
}

hr.greyHR {
  border-top: 1px solid #c3c9cd;
  border-bottom: none;
}

a {
  cursor: pointer;
}

#confirmModalOverlayWrapper {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 9999;
}

#confirmModalOverlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

#confirmModalContentFixed {
  max-width: 90%;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 99999;
}

#confirmModalPopbox {
  box-shadow: 0px 1px 2px 1px rgba(135, 135, 135, 0.5);
  border-radius: 4px;
  width: 580px;
  max-width: 100%;
  padding: 30px;
  border: 0px solid;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  background: white;
}

#confirmModalMessage {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-align: center;
  max-width: 80%;
  margin: 20px 0 30px 0;
}

#confirmModalButtonWrap {
  width: 100%;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cf:after, .pricePoints-pane:after, .card--header:after, .card:after, .card-full:after, .card-SM:after, .card-S:after, .card-MS:after, .card-M:after, .dropdown:after, .paddedlist > li:after, .paddedlist:after, .list > li:after, .list:after, .inline:after, .grid-Sm:after, .grid-Lg:after {
  content: "";
  display: table;
  clear: both;
}

.floatL, .card--title, .modal--note {
  float: left;
}

.floatR, .card--controls, .activityLog--time {
  float: right;
}

.floatN {
  float: none;
}

.center-contents {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.grid-fullHeight {
  height: 100%;
}
.grid-fullHeight .card-L {
  height: 100%;
  min-height: 700px;
}

.grid-Lg {
  font-size: 0;
  margin-top: -40px;
  margin-left: -40px;
}
.grid-Lg > * {
  margin-top: 40px;
  margin-left: 40px;
}
@media (min-width: 680px) {
  .grid-Lg > * {
    display: inline-block;
    vertical-align: top;
  }
}
@media (min-width: 680px) {
  .grid-Lg.grid-1 > * {
    width: calc(100% - 40px);
  }
  .grid-Lg.grid-2 > * {
    width: calc(47% - 40px);
  }
  .grid-Lg.grid-3 > * {
    width: calc(33.33% - 40px);
  }
  .grid-Lg.grid-4 > * {
    width: calc(25% - 40px);
  }
}

.grid-Sm {
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -ms-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  margin-top: -10px;
  margin-left: -10px;
}
.grid-Sm > * {
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.grid-Sm.grid-home-row .card-overview {
  width: calc(100% - 10px);
}
.grid-Sm.grid-home-row .card-overview-counter {
  display: none;
}
@media (min-width: 900px) {
  .grid-Sm.grid-home-row .card-overview {
    width: calc(100% - 10px);
  }
  .grid-Sm.grid-home-row .card-overview-counter {
    display: block;
    width: calc(33% - 8px);
  }
}
@media (min-width: 1180px) {
  .grid-Sm.grid-home-row .card-overview {
    width: calc(50% - 10px);
  }
  .grid-Sm.grid-home-row .card-overview-counter {
    width: calc(16.6% - 10px);
  }
}
.grid-Sm.grid-1 > * {
  width: calc(100% - 10px);
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -ms-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}
.grid-Sm.grid-2 > * {
  width: 100%;
}
@media (min-width: 900px) {
  .grid-Sm.grid-2 > * {
    width: calc(50% - 10px);
  }
}
.grid-Sm.grid-3 > * {
  width: 100%;
}
@media (min-width: 900px) {
  .grid-Sm.grid-3 > * {
    width: calc(33.3333% - 10px);
  }
}
.grid-Sm.grid-4 > * {
  width: calc(25% - 10px);
}
.grid-Sm.grid-cards > * {
  width: calc(100% - 10px);
}
@media (min-width: 1180px) {
  .grid-Sm.grid-cards > * {
    width: calc(50% - 10px);
  }
}
@media (min-width: 1800px) {
  .grid-Sm.grid-cards > * {
    width: calc(33.3333% - 10px);
  }
}
@media (min-width: 2300px) {
  .grid-Sm.grid-cards > * {
    width: calc(25% - 10px);
  }
}

.inline > * {
  float: left;
}

.ilb {
  display: inline-block;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

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

.soft-container {
  overflow: hidden;
}

.invisible, .toggleVisibility--target {
  visibility: hidden;
}

.dn {
  display: none;
}

.cf:after, .pricePoints-pane:after, .card--header:after, .card:after, .card-full:after, .card-SM:after, .card-S:after, .card-MS:after, .card-M:after, .dropdown:after, .paddedlist > li:after, .paddedlist:after, .list > li:after, .list:after, .grid-Lg:after, .grid-Sm:after, .inline:after {
  content: "";
  display: table;
  clear: both;
}

.fixedTL, .card--content, .card--header, .topBar, .sideBar--mini, div.whiteout {
  position: absolute;
  top: 0;
  left: 0;
}

.fixedTR, .cardContainer {
  position: absolute;
  top: 0;
  right: 0;
}

.u-posRelative {
  position: relative;
}

.pass {
  padding: 5px;
}

.ptss {
  padding-top: 5px;
}

.prss {
  padding-right: 5px;
}

.pbss {
  padding-bottom: 5px;
}

.plss {
  padding-left: 5px;
}

.pas, .user-notification {
  padding: 10px;
}

.pts, .decnone > * {
  padding-top: 10px;
}

.prs {
  padding-right: 10px;
}

.pbs {
  padding-bottom: 10px;
}

.pls {
  padding-left: 10px;
}

.pam, .card--icon-hint, .card--content-expandable, .card--content {
  padding: 15px;
}

.ptm {
  padding-top: 15px;
}

.prm, .card--header {
  padding-right: 15px;
}

.pbm {
  padding-bottom: 15px;
}

.plm, .card--header {
  padding-left: 15px;
}

.pal, .modal--body, .onboarding-step {
  padding: 30px;
}

.ptl {
  padding-top: 30px;
}

.prl, .modal--footer, .pos-bottom-right, .pos-bottom-left {
  padding-right: 30px;
}

.pbl {
  padding-bottom: 30px;
}

.pll, .modal--footer, .pos-bottom-right, .pos-bottom-left {
  padding-left: 30px;
}

.paxl {
  padding: 60px;
}

.ptxl, .notificationPanel, .onboarding-step {
  padding-top: 60px;
}

.prxl {
  padding-right: 60px;
}

.pbxl, .notificationPanel, .onboarding-step {
  padding-bottom: 60px;
}

.plxl {
  padding-left: 60px;
}

.mass {
  margin: 5px;
}

.mtss {
  margin-top: 5px;
}

.mrss {
  margin-right: 5px;
}

.mbss {
  margin-bottom: 5px;
}

.mlss {
  margin-left: 5px;
}

.mas {
  margin: 10px;
}

.mts {
  margin-top: 10px;
}

.mrs {
  margin-right: 10px;
}

.mbs {
  margin-bottom: 10px;
}

.mls, a.card-hint,
.card--icon {
  margin-left: 10px;
}

.mam {
  margin: 15px;
}

.mtm, .roadmap-item-wrapper, .roadmap-line, .roadmap-status-line {
  margin-top: 15px;
}

.mrm {
  margin-right: 15px;
}

.mbm, .inputWrap {
  margin-bottom: 15px;
}

.mlm, .modal--footer [class*=btn-] {
  margin-left: 15px;
}

.mamm {
  margin: 20px;
}

.mtmm {
  margin-top: 20px;
}

.mrmm {
  margin-right: 20px;
}

.mbmm {
  margin-bottom: 20px;
}

.mlmm {
  margin-left: 20px;
}

.mal {
  margin: 30px;
}

.mtl {
  margin-top: 30px;
}

.mrl {
  margin-right: 30px;
}

.mbl {
  margin-bottom: 30px;
}

.mll {
  margin-left: 30px;
}

.mral {
  margin: 60px;
}

.mrxl {
  margin-right: 60px;
}

.mlxl {
  margin-left: 60px;
}

.mbxl {
  margin-bottom: 60px;
}

.mtxl {
  margin-top: 60px;
}

.mln {
  margin-left: 0;
}

.mtn {
  margin-top: 0;
}

.mbn {
  margin-bottom: 0;
}

.mrn {
  margin-right: 0;
}

.mla {
  margin-left: auto;
}

.mta {
  margin-top: auto;
}

.mba {
  margin-bottom: auto;
}

.mra {
  margin-right: auto;
}

.lhs {
  line-height: 5px;
}

.lhm {
  line-height: 15px;
}

.lhl {
  line-height: 30px;
}

.lhmm {
  line-height: 20px;
}

.gap-xs {
  gap: 5px;
}

.gap-s {
  gap: 10px;
}

.gap-m {
  gap: 15px;
}

.gap-l {
  gap: 30px;
}

.gap-xl {
  gap: 60px;
}

.pull-right {
  float: right;
}

.fullsize {
  width: 100%;
  display: block;
}

.threequarter {
  max-width: 74%;
}

.halfwidth {
  max-width: 50%;
  width: 50%;
}

.halfpage {
  max-width: 49%;
}

.pos-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding-top: 20px;
}

.pos-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding-top: 20px;
}

.onboard-spacing-left {
  margin-left: 27%;
}

.onboard-spacing-right {
  margin-right: 15%;
}

.verticallyCenter-con {
  height: 100%;
}

.verticallyCenter {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}

.toggleVisibility:hover .toggleVisibility--target {
  visibility: visible;
}

.textAlign-L, .roadmap-section, .card--icon-hint, th {
  text-align: left;
}

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

.textAlign-C, .user-notification, .notificationPanel, a.card-hint, .card--icon, .onboarding-step, i.circleBorder {
  text-align: center;
}

.vab {
  vertical-align: bottom;
}

.vam {
  vertical-align: middle;
}

.vat {
  vertical-align: top;
}

.truncated-width-A {
  width: 125px;
}

.grid-1 .truncated-width-A {
  width: 300px;
}

.truncate {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-spacing {
  line-height: 20px;
}

.pageWrap {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

.flex, .signupLogoHolder, .flex-sb, .flex-sa, .flex-c, .flex-nw {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  flex-wrap: wrap;
}
.flex .flex-fixed, .signupLogoHolder .flex-fixed, .flex-sb .flex-fixed, .flex-sa .flex-fixed, .flex-c .flex-fixed, .flex-nw .flex-fixed {
  flex: 0 0 100%;
}
.flex .flex-none, .signupLogoHolder .flex-none, .flex-sb .flex-none, .flex-sa .flex-none, .flex-c .flex-none, .flex-nw .flex-none {
  flex: 0 0 0;
}
.flex .flex-xs, .signupLogoHolder .flex-xs, .flex-sb .flex-xs, .flex-sa .flex-xs, .flex-c .flex-xs, .flex-nw .flex-xs {
  flex: 1 0 0;
}
.flex .flex-s, .signupLogoHolder .flex-s, .flex-sb .flex-s, .flex-sa .flex-s, .flex-c .flex-s, .flex-nw .flex-s {
  flex: 2 0 0;
}
.flex .flex-m, .signupLogoHolder .flex-m, .flex-sb .flex-m, .flex-sa .flex-m, .flex-c .flex-m, .flex-nw .flex-m {
  flex: 3 0 0;
}
.flex .flex-l, .signupLogoHolder .flex-l, .flex-sb .flex-l, .flex-sa .flex-l, .flex-c .flex-l, .flex-nw .flex-l {
  flex: 4 0 0;
}
.flex .flex-xl, .signupLogoHolder .flex-xl, .flex-sb .flex-xl, .flex-sa .flex-xl, .flex-c .flex-xl, .flex-nw .flex-xl {
  flex: 5 0 0;
}
.flex .flex-xxl, .signupLogoHolder .flex-xxl, .flex-sb .flex-xxl, .flex-sa .flex-xxl, .flex-c .flex-xxl, .flex-nw .flex-xxl {
  flex: 6 0 0;
}
.flex > *, .signupLogoHolder > *, .flex-sb > *, .flex-sa > *, .flex-c > *, .flex-nw > * {
  flex: 1 1 0;
}
.flex-nw {
  flex-wrap: nowrap;
}
.flex-c {
  flex-direction: column;
}
.flex-sa {
  justify-content: space-around;
}
.flex-sa > * {
  flex: 0 1 auto;
}
.flex-sb {
  justify-content: space-between;
}
.flex-sb > * {
  flex: 0 1 auto;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline-block;
}

.htmx-request.htmx-indicator {
  display: inline-block;
}

.tabbed-table {
  border: 1px solid rgb(255, 255, 255);
  position: relative;
  bottom: 25px;
}
.tabbed-table__tabs {
  display: flex;
  height: 25px;
  align-items: center;
}
.tabbed-table__tabs-tab {
  padding: 3px;
  cursor: pointer;
  border: 1px solid #e0e2e9;
  background-color: #f3f3f3;
  border-radius: 4px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  text-align: center;
  vertical-align: middle;
  width: 20%;
  font-size: 16px;
}
.tabbed-table__tabs-tab.active {
  background-color: #fff;
  border-bottom: none;
}
.tabbed-table__content {
  display: none;
  padding: 20px;
  border: 1px solid #e0e2e9;
  margin-top: -1px;
  height: 225px;
}
.tabbed-table__content.active {
  display: block;
}
.tabbed-table__content-table {
  width: 100%;
}
.tabbed-table__content-table-header {
  display: flex;
}
.tabbed-table__content table {
  table-layout: fixed;
  display: block;
  width: 100%;
  max-height: 40px;
  overflow-y: auto;
  max-height: 175px;
}
.tabbed-table__content thead {
  width: 100%;
}
.tabbed-table__content th {
  width: 50%;
}
.tabbed-table__content th.metrics {
  width: 75%;
}
.tabbed-table__content td {
  vertical-align: middle;
}
.tabbed-table__content tbody tr {
  border: none;
}

h1, h2, h3, h4, h5, h6, p, small, time, span {
  margin: 0;
  font-size: 100%;
  line-height: 1;
}

body, html, input, textarea, button, select {
  font-family: "source sans pro", "Helvetica Neue", arial, sans-serif;
  color: #3c3f42;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.bold, #prom-inhibit-rule-overview .prom-overview-header, #prom-route-overview .prom-overview-header, .prom-alert-overview-container .prom-overview-header {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.normal {
  font-weight: normal;
}

.fs-xxl {
  font-size: 46px;
  line-height: 1.2;
}

.fs-Xl {
  font-size: 26px;
  line-height: 1.2;
}

.fs-Lg, .customers-testimonial-quote,
.grid-1 .fs-A {
  font-size: 21px;
  line-height: 1.2;
}

.fs-M, .card--empty p, .card--title, .activityLog--heading, .create-alert-heading,
.grid-cards .fs-A {
  font-size: 18px;
  line-height: 1.3;
}

.fs-Sm, .activityLog--message, .activityLog--title, .topBar, .modal--note {
  font-size: 14px;
  line-height: 1.4;
}

.fs-Xs, .activityLog--time {
  font-size: 12px;
  line-height: 1;
}

.fs-Xxs {
  font-size: 11px;
  line-height: 1;
}

.fs-Xs-L {
  font-size: 12px;
  line-height: 1.2;
}

.longFormText p {
  margin-bottom: 30px;
}

.longFormText p:last-child {
  margin-bottom: 0;
}

.outside-card {
  width: 850px;
  max-width: 80%;
}

a {
  text-decoration: none;
  color: #20B9F7;
  font-weight: 600;
}
a:hover {
  text-decoration: underline;
}

a.danger,
a.danger:visited {
  color: #ec5353;
}
a.danger:hover,
a.danger:visited:hover {
  color: #f5a1a1;
}

a.danger-hover:hover {
  color: #ec5353 !important;
}

a.warning,
a.warning:visited {
  color: #ebb32d;
}

a.success,
a.success:visited {
  color: #28c489;
}

a.contrast,
a.contrast:visited {
  color: #f2f3f6;
}

.link-subdued, .link-subdued:visited {
  color: #8C969E;
  font-weight: 600;
  cursor: pointer;
}
.link-subdued:hover, .link-subdued:visited:hover {
  color: #3c3f42;
  text-decoration: none;
}

.link-complement, .link-complement:visited {
  color: #20B9F7;
  font-weight: 600;
  cursor: pointer;
}
.link-complement:hover, .link-complement:visited:hover {
  padding-bottom: 2px;
  border-bottom: 1px dashed;
  text-decoration: none;
}

@font-face {
  font-family: "graphite";
  src: url("../../assets/icons/graphite.eot");
  src: url("../../assets/icons/graphite.eot?#iefix") format("embedded-opentype"), url("../../assets/icons/graphite.ttf") format("truetype"), url("../../assets/icons/graphite.woff") format("woff"), url("../../assets/icons/graphite.svg#graphite") format("svg");
  font-weight: normal;
  font-style: normal;
}
[data-icon]:before {
  font-family: "graphite";
  content: attr(data-icon);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
}

[data-icon] {
  cursor: pointer;
}

.default-traffic-status {
  color: #20B9F7;
  font-size: 22px;
  position: relative;
  top: -8px;
}

.clickable, .ordering-btn, .expandable-row {
  cursor: pointer;
}

.icon-space {
  width: 14px;
}

.icon-vert-mid:before {
  vertical-align: middle;
}

.icon-Xs {
  font-size: 10px;
  vertical-align: middle;
}

.icon-Sm, a.card-hint,
.card--icon {
  font-size: 16px;
  vertical-align: middle;
}

.align-icon-Sm {
  line-height: 16px;
}

.icon-Md, .modal--close:before {
  font-size: 20px;
  vertical-align: middle;
}

.icon-Lg {
  font-size: 26px;
  vertical-align: middle;
}

.icon-Xl {
  display: block;
  font-size: 48px;
  vertical-align: middle;
}

.i {
  display: inline-block;
  font-family: "graphite";
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

i.circleBorder {
  border: 2px solid;
  border-color: transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  height: 30px;
  width: 30px;
  line-height: 28px;
  cursor: pointer;
  color: #20B9F7;
  -webkit-transition: border-color 0.1s linear;
  -moz-transition: border-color 0.1s linear;
  -ms-transition: border-color 0.1s linear;
  -o-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
}
i.circleBorder:hover {
  border-color: #74d3fa;
}

.icon-HG:before {
  content: "\e600";
}

.icon-qr:before {
  content: "\e601";
}

.icon-mail:before {
  content: "\e602";
}

.icon-uniE603:before {
  content: "\e603";
}

.icon-user:before {
  content: "\e604";
}

.icon-users:before {
  content: "\e605";
}

.icon-add_user:before {
  content: "\e606";
}

.icon-url:before {
  content: "\e607";
}

.icon-speech:before {
  content: "\e608";
}

.icon-home:before {
  content: "\e609";
}

.icon-search:before {
  content: "\e60a";
}

.icon-bell:before {
  content: "\e60b";
}

.icon-link:before {
  content: "\e60c";
}

.icon-cog:before {
  content: "\e60d";
}

.icon-tools:before {
  content: "\e60e";
}

.icon-hat:before {
  content: "\e60f";
}

.icon-text:before {
  content: "\e610";
}

.icon-clock:before {
  content: "\e611";
}

.icon-calendar:before {
  content: "\e612";
}

.icon-lightning:before {
  content: "\e613";
}

.icon-lightcloud:before {
  content: "\e614";
}

.icon-dash:before {
  content: "\e615";
}

.icon-key:before {
  content: "\e616";
}

.icon-chevrons:before {
  content: "\e617";
}

.icon-card:before {
  content: "\e618";
}

.icon-flag:before {
  content: "\e619";
}

.icon-chart:before {
  content: "\e61a";
}

.icon-pie:before {
  content: "\e61b";
}

.icon-bar:before {
  content: "\e61c";
}

.icon-fillchart:before {
  content: "\e61d";
}

.icon-lock:before {
  content: "\e61e";
}

.icon-check:before {
  content: "\e61f";
}

.icon-x:before {
  content: "\e620";
}

.icon-plus:before {
  content: "\e621";
}

.icon-info:before {
  content: "\e622";
}

.icon-question:before {
  content: "\e623";
}

.icon-warn:before {
  content: "\e624";
}

.icon-reload:before {
  content: "\e626";
}

.icon-random:before {
  content: "\e627";
}

.icon-reset:before {
  content: "\e628";
}

.icon-squares:before {
  content: "\e629";
}

.icon-lines:before {
  content: "\e62a";
}

.icon-trash:before {
  content: "\e62b";
}

.icon-cloud:before {
  content: "\e62c";
}

.icon-resize_out:before {
  content: "\e62d";
}

.icon-resize_in:before {
  content: "\e62e";
}

.icon-tree:before {
  content: "\e62f";
}

.icon-dag:before {
  content: "\e630";
}

.icon-copy:before {
  content: "\e63e";
}

.icon-downcarat:before {
  content: "\e631";
}

.icon-upcarat:before {
  content: "\e632";
}

.icon-leftarrow:before {
  content: "\e633";
}

.icon-downarrow:before {
  content: "\e634";
}

.icon-uparrow:before {
  content: "\e635";
}

.icon-rightarrow:before {
  content: "\e636";
}

.icon-adjust:before {
  content: "\e637";
}

.icon-expand:before {
  content: "\e638";
}

.icon-github:before {
  content: "\e639";
}

.icon-twitter:before {
  content: "\e63b";
}

.icon-facebook:before {
  content: "\e63a";
}

.icon-googplus:before {
  content: "\e63c";
}

.icon-earth:before {
  content: "\e678";
}

.icon-feed:before {
  content: "\e679";
}

.icon-file-pdf:before {
  content: "\e67a";
}

.icon-globe:before {
  content: "\e67b";
}

.icon-icomoon:before {
  content: "\e67c";
}

.icon-lock2:before {
  content: "\e67d";
}

.icon-unlocked:before {
  content: "\e681";
}

.icon-play:before {
  content: "\e67e";
}

.icon-podcast:before {
  content: "\e67f";
}

.icon-truck:before {
  content: "\e680";
}

.icon-positive {
  color: #28c489;
}
.icon-positive:hover {
  text-decoration: none;
}

.icon-negative, .icon-danger {
  color: #ec5353;
}
.icon-negative:hover, .icon-danger:hover {
  text-decoration: none;
}

.icon-pending {
  color: #ebb32d;
}
.icon-pending:hover {
  text-decoration: none;
}

.icon-warning {
  color: #ebb32d;
}
.icon-warning:hover {
  text-decoration: none;
}

.azuread-login, .contact-sales, .google-login, .btn-S, .btn-SM, .btn-M, .btn-M-no-corners, .btn-LM, .btn-Lg, .btn-xl {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
  vertical-align: top;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-weight: normal;
  flex-shrink: 0;
}
.azuread-login:hover, .contact-sales:hover, .google-login:hover, .btn-S:hover, .btn-SM:hover, .btn-M:hover, .btn-M-no-corners:hover, .btn-LM:hover, .btn-Lg:hover, .btn-xl:hover {
  text-decoration: none;
}

.btn-xl {
  font-size: 20px;
  height: 62px;
  line-height: 62px;
  padding: 0 26px;
}
.btn-xl.btn-hollow {
  line-height: 60px;
}

.btn-Lg {
  font-size: 17px;
  height: 62px;
  line-height: 62px;
  padding: 0 40px;
}
.btn-Lg.btn-hollow {
  line-height: 60px;
}

.btn-M, .btn-M-no-corners, .btn-LM {
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  padding: 0 28px;
}
.btn-M.btn-hollow, .btn-hollow.btn-M-no-corners, .btn-hollow.btn-LM {
  line-height: 38px;
}
.btn-M.btn-M-copy, .btn-M-copy.btn-M-no-corners, .btn-M-copy.btn-LM {
  height: 36px;
  line-height: 36px;
  padding: 0 20px;
}

.btn-M-no-corners, .btn-LM {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  margin: 0px -10px 15px;
}

.btn-LM {
  height: 50px;
}

.btn-SM {
  font-size: 14px;
  height: 34px;
  line-height: 34px;
  padding: 0 12px;
  text-align: center;
}
.btn-SM.btn-hollow {
  line-height: 32px;
}

.btn-S {
  font-size: 12px;
  height: 26px;
  line-height: 26px;
  padding: 0 12px;
}
.btn-S.btn-hollow {
  line-height: 24px;
}

.matchBtn-L {
  line-height: 62px;
}

.matchBtn-M {
  line-height: 40px;
}

.matchBtn-S {
  line-height: 26px;
}

.btn-accent {
  color: #fff;
  background-color: #f66c00;
  color: #fff;
}
.btn-accent:hover {
  background-color: #c35600;
}
.btn-accent:active {
  background-color: #903f00;
}
.btn-accent:disabled {
  background-color: #e0e2e9;
}

.btn-positive,
.btn-success {
  color: #fff;
  background-color: #2acc8f;
}
.btn-positive:hover,
.btn-success:hover {
  background-color: #21a271;
}
.btn-positive:active,
.btn-success:active {
  background-color: #187854;
}
.btn-positive:disabled,
.btn-success:disabled {
  background-color: #e0e2e9;
}

.btn-negative,
.btn-danger, .btn-warning {
  color: #fff;
  background-color: #ec5353;
  color: #fff;
}
.btn-negative:hover,
.btn-danger:hover, .btn-warning:hover {
  background-color: #e72525;
}
.btn-negative:active,
.btn-danger:active, .btn-warning:active {
  background-color: #c31616;
}
.btn-negative:disabled,
.btn-danger:disabled, .btn-warning:disabled {
  background-color: #e0e2e9;
}

.btn-plain {
  color: #fff;
  background-color: #858c92;
}
.btn-plain:hover {
  background-color: #6c7278;
}
.btn-plain:active {
  background-color: #54595d;
}
.btn-plain:disabled {
  background-color: #e0e2e9;
}

.btn-plain.selected {
  background-color: #bbbfc2;
}

.btn-info {
  color: #fff;
  background-color: #20B9F7;
}
.btn-info:hover {
  background-color: #089fdc;
}
.btn-info:active {
  background-color: #067bab;
}
.btn-info:disabled {
  background-color: #e0e2e9;
}

button.btn-info.deselected {
  background-color: #20B9F7;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#20B9F7), to(#39c1f8));
  background-image: -webkit-linear-gradient(top, #20B9F7, #39c1f8);
  background-image: -moz-linear-gradient(top, #20B9F7, #39c1f8);
  background-image: -ms-linear-gradient(top, #20B9F7, #39c1f8);
  background-image: -o-linear-gradient(top, #20B9F7, #39c1f8);
  color: #fff;
}
button.btn-info.deselected:hover {
  background-color: #39c1f8;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#39c1f8), to(#51c8f9));
  background-image: -webkit-linear-gradient(top, #39c1f8, #51c8f9);
  background-image: -moz-linear-gradient(top, #39c1f8, #51c8f9);
  background-image: -ms-linear-gradient(top, #39c1f8, #51c8f9);
  background-image: -o-linear-gradient(top, #39c1f8, #51c8f9);
}

.btn-hollow {
  background: none;
  box-shadow: none;
  border: 1px solid;
  border-color: #b6bbcc;
  color: #8C969E;
}
.btn-hollow:hover {
  border-color: #a7adc2;
  color: #76828b;
  background-color: #f2f3f6;
  box-shadow: none;
}

.signup-buttons {
  -webkit-padding-start: 0px;
}

.google-login {
  background: #ec5353;
  color: #FFF;
  margin: 10px auto;
}

.contact-sales {
  color: #fff;
  background-color: #009bd0;
  width: 213.5px;
}
.contact-sales:hover {
  background-color: #00759d;
}
.contact-sales:active {
  background-color: #004f6a;
}
.contact-sales:disabled {
  background-color: #e0e2e9;
}

#api-key-modal {
  margin: 0 auto;
  width: 50%;
}

.copy-button-container {
  display: inline-flex;
  font-size: 0;
  width: 100%;
}
.copy-button-container .input, .copy-button-container .btn-plain {
  color: #3c3f42;
  background-color: #fff;
  margin: 0px;
  padding: 8px;
  font-size: 13px;
  height: 33px;
  line-height: 18px;
  border: 1px solid #c3c9cd;
}
.copy-button-container .btn-plain {
  border-left: none;
}
.copy-button-container .btn-plain:last-of-type {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.copy-button-container .input {
  width: 100%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.azuread-login {
  background: #20b9f7;
  color: #FFF;
  margin: 10px auto;
}

.signup-fix {
  margin-right: 33px;
}

.button-padding {
  padding-bottom: 5px;
}

.onboarding-tabs.current-tab {
  border-bottom: 2px solid #f66c00;
}

.code-btn {
  min-width: 100%;
}

.code-btn.disabled {
  background-color: #e0e2e9;
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e0e2e9), to(#d1d4df));
  background-image: -webkit-linear-gradient(top, #e0e2e9, #d1d4df);
  background-image: -moz-linear-gradient(top, #e0e2e9, #d1d4df);
  background-image: -ms-linear-gradient(top, #e0e2e9, #d1d4df);
  background-image: -o-linear-gradient(top, #e0e2e9, #d1d4df);
  color: #fff;
}

.pricing-period-btn {
  z-index: 2;
  text-align: center;
  margin-top: 10px;
  position: absolute;
  width: 100%;
}

.tagnames button {
  display: inline-block;
  height: 30px;
  background: #808080;
  color: #fff;
  line-height: 30px;
  font-size: 12px;
  border-radius: 5px;
  margin-left: 0;
  cursor: pointer;
  outline: none;
  font-weight: bold;
  border: none;
  margin-right: 2px;
  margin-top: 4px;
  padding: 1px 20px;
}

#lieb button {
  font-size: 19px;
  color: grey;
}

.onboarding-step {
  position: relative;
  margin-bottom: 10px;
  background: #35373a;
  color: #e0e2e9;
}
.onboarding-step span, .onboarding-step p {
  font-size: 14px;
  line-height: 1.5;
}

.onboarding-step-title {
  line-height: 1.2;
  font-size: 20px;
  padding: 40px 0px;
  color: #e0e2e9;
}

.onboarding-btn {
  font-size: 15px;
  height: 42px;
  line-height: 40px;
  padding: 0 28px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -khtml-border-radius: 3px;
}

.onboarding-tabs {
  cursor: pointer;
}

.onboarding-tabs.current-tab {
  border-bottom: 2px solid #f66c00;
}

.inner-codepanel-select {
  cursor: pointer;
  padding: 5px;
}
.inner-codepanel-select.active {
  padding: 5px 10px;
  border-radius: 3px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.48);
  background: white;
  color: #3c3f42;
}

.onboarding-step .outer-codepanel-select {
  border-bottom: 3px solid #6d7277;
}

a.outer-codepanel-select {
  text-decoration: none;
  font-weight: normal;
}

.outer-codepanel-select {
  cursor: pointer;
  padding: 5px;
  color: #3c3f42;
}
.outer-codepanel-select.active {
  font-weight: bold;
  border-bottom: 3px solid #ec7952;
}
.outer-codepanel-select:hover {
  border-bottom: 3px solid #ec7952;
}

.onboarding-step .outer-codepanel-select {
  color: #e0e2e9;
}

.code-chooser {
  margin: 0 0 20px 0;
  padding: 0;
}
.code-chooser li {
  display: inline-block;
}

.inner-tabs-container {
  font-size: 14px;
  width: 100%;
  text-align: center;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.onboarding-content {
  width: 80%;
}

.card-codebox {
  max-width: 100%;
  overflow-y: auto;
  overflow-x: auto;
  padding: 20px 5%;
  background: #f2f3f6;
}

.agent-codebox {
  min-height: 100px;
  max-width: 100%;
  overflow-y: auto;
  overflow-x: auto;
  padding: 20px 5%;
  background: #f2f3f6;
}

.onboarding-step .card-codebox .agent-codebox {
  padding: 40px 15%;
  background: #373a3d;
}

.card-code {
  display: none;
  background-color: rgba(100, 100, 100, 0);
}

table.table.carbon-table, table.carbon-table.table-expandable, table.carbon-table.table-large {
  width: 100%;
  text-align: left;
}

/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
code.prettyprint {
  background: rgba(0, 0, 0, 0) !important;
}

.onboarding-step-counter {
  position: absolute;
  color: #54595d;
  top: 50px;
  right: 50px;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list > li {
  display: block;
  clear: both;
}

ul.half > li {
  width: calc(50% - 10px);
  display: inline-block;
  padding-left: 10px;
}

.paddedlist {
  list-style: none;
  margin-top: 30px;
  padding: 0;
}
.paddedlist > li {
  display: block;
  clear: both;
}

.list-separators > li {
  border-top: 1px solid;
  border-color: #f2f3f6;
}
.list-separators > li:first-child {
  border-top: 0;
}

.list-Sm > li {
  padding-top: 10px;
  padding-bottom: 10px;
}

.list-Ss > li {
  padding-top: 5px;
  padding-bottom: 5px;
}

.list-Lg > li {
  padding-top: 15px;
  padding-bottom: 15px;
}

.decnone > * {
  list-style: none;
}

.list-hoverHighlight > li:hover {
  background-color: #f2f3f6;
}

.search-bar, .input-Lg, .input-Xl {
  width: 100%;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
  line-height: 1;
}

.select-Lg, .input-Xln, .input-10, .input-30, .input-40, .input-50, .input-80, .input-60, .input-email, .input-Md {
  width: 80%;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  line-height: 1;
}

.select-Sm, .select-30, .select-60, .select-Md-inline, .select-Md, .select-Lg-inline, .select-Sm-Px, .select-Med-Px, .input-Med-Px {
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  line-height: 1;
}

.input-Xl {
  padding: 11px;
  font-size: 14px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.input-Lg {
  padding: 8px;
  font-size: 13px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.input-Sm, .input-Sm-Px {
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  font-size: 13px;
  height: 35px;
  line-height: 18px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.input-taller {
  height: 40px;
}

.input-Md {
  padding: 8px;
  font-size: 13px;
  line-height: 18px;
}

.input-60, .input-email {
  padding: 8px;
  font-size: 13px;
  line-height: 18px;
  width: 60%;
}

.input-email {
  height: 50px;
  width: 200px;
}

.input-80 {
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  padding: 8px;
  font-size: 13px;
  line-height: 18px;
  width: 80%;
}

.input-Sm-Px {
  width: 40px;
}

.input-expandable {
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  font-size: 13px;
}

.input-Med-Px {
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  font-size: 13px;
  height: 35px;
  line-height: 18px;
  width: 100px;
}

.input-Lrg-Perc {
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  font-size: 13px;
  width: 80%;
  margin-left: 10%;
}

.select-Med-Px {
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #fff;
  font-size: 14px;
  height: 35px;
  line-height: 18px;
  width: 250px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.select-Sm-Px {
  padding: 8px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #fff;
  font-size: 14px;
  height: 35px;
  line-height: 18px;
  width: 100px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.input-50 {
  padding: 8px;
  font-size: 13px;
  width: 50%;
}

.input-40 {
  padding: 8px;
  font-size: 13px;
  width: 40%;
}

.input-30 {
  padding: 8px;
  font-size: 13px;
  width: 30%;
}

.input-10 {
  padding: 8px;
  font-size: 13px;
  width: 10%;
}

.cb-40 {
  padding: 8px;
}

.input-60-matchpad {
  padding: 8px 0 8px 0;
}

.input-Xln {
  padding: 11px;
  font-size: 14px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.select-Lg {
  padding: 8px;
  background: #fff;
  font-size: 16px;
  height: 40px;
  line-height: 20px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.select-Lg-inline {
  background: #fff;
  padding: 2px;
  font-size: 14px;
  height: 26px;
  line-height: 14px;
  max-width: 100%;
  width: 200px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.select-Mdrn {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  font-size: 16px;
  color: #444;
  background: #F0F0F0;
  box-shadow: 0px 1px 2px 0px rgba(175, 175, 175, 0.5);
}

.select-Mdrn-icon {
  position: relative;
  display: inline-block;
}

.select-Mdrn-icon::after {
  content: "";
  width: 0;
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -3px;
  border-width: 6px 4px;
  border-style: solid;
  pointer-events: none;
  border-color: #555 transparent transparent transparent;
}

.input_Mdrn {
  border: none;
  background: #FFFFFF;
  box-shadow: inset 0px 1px 1px 0px rgba(82, 82, 82, 0.5);
}

.select-Md {
  padding: 8px;
  background: #fff;
  font-size: 14px;
  height: 35px;
  line-height: 18px;
  width: 30%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.select-Md-inline {
  background: #fff;
  padding: 2px;
  font-size: 14px;
  height: 26px;
  line-height: 14px;
  max-width: 100%;
  width: 140px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.select-60 {
  padding: 8px;
  background: #fff;
  font-size: 14px;
  height: 35px;
  line-height: 18px;
  width: 60%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.select-30 {
  padding: 8px;
  background: #fff;
  font-size: 14px;
  height: 35px;
  line-height: 18px;
  width: 20%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

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

.select-Sm {
  padding: 8px;
  background: #fff;
  font-size: 14px;
  height: 23px;
  line-height: 23px;
  width: 30%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
}

.input-default, .input-Sm, .input-email, .input-Sm-Px, .input-expandable, .input-Lrg-Perc {
  -moz-appearance: textfield;
  border-radius: 3px;
  border: 1px solid #e0e2e9;
  border-top-color: #b6bbcc;
  font-weight: 600;
}
.input-default:focus, .input-Sm:focus, .input-email:focus, .input-Sm-Px:focus, .input-expandable:focus, .input-Lrg-Perc:focus {
  border-color: #b6bbcc;
  box-shadow: inset 0 1px 0 #e0e2e9;
}
.input-default:focus :before, .input-Sm:focus :before, .input-email:focus :before, .input-Sm-Px:focus :before, .input-expandable:focus :before, .input-Lrg-Perc:focus :before {
  color: #b6bbcc;
}

.input-like {
  border: 0;
  box-shadow: -8px 10px 0px -7px #ebebeb, 8px 10px 0px -7px #ebebeb;
  font-weight: 600;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
  padding: 4px;
}

.input-mini {
  width: 50px;
}

.input-hollow {
  border: 1px solid #e0e2e9;
  font-weight: 600;
  border-radius: 4px;
}
.input-hollow:focus {
  border-color: #b6bbcc;
  box-shadow: inset 0 1px 0 #e0e2e9;
}

::-webkit-input-placeholder {
  color: #b6bbcc;
  padding-top: 2px;
}

:-moz-placeholder {
  color: #b6bbcc;
}

:-ms-input-placeholder {
  color: #b6bbcc;
}

.placeholder {
  color: #b6bbcc;
}

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

.formError {
  color: #ec5353;
  background: #fbdddd;
  border-color: #da1818;
}

.listNoStyle {
  list-style-type: none;
}

input:disabled,
select:disabled {
  pointer-events: none;
  cursor: default;
  background: #e0e2e9;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[readonly=readonly] {
  background: #fafafa;
  font-weight: normal;
  cursor: text;
}

input.secure {
  text-security: disc;
  -webkit-text-security: disc;
  -mox-text-security: disc;
}

input.error {
  border-color: #ec5353;
}

label.error {
  display: block;
  width: 80%;
  padding: 5px 10px;
  border: 0px solid;
  color: #ec5353;
  border-bottom: 1px #ec5353;
  border-radius: 5px;
}

div.error {
  width: 80%;
  margin: 3px 10px;
  padding: 5px 10px;
  border: 0px solid;
  color: #ec5353;
  border-bottom: 1px #ec5353;
  border-radius: 5px;
}

.listWrapperM {
  text-align: center;
  margin-top: 20px;
}
.listWrapperM > div {
  width: 80%;
  display: inline-block;
}
.listWrapperM > div div {
  width: 80%;
  display: inline-block;
  vertical-align: middle;
}
.listWrapperM ul {
  text-align: left;
}
.listWrapperM table {
  text-align: left;
  margin: 40px 0px 20px 0px;
}
.listWrapperM table tr:last-child {
  border-bottom: 2px solid #8C969E;
}
.listWrapperM div.formButtons {
  text-align: left;
}

#searchbutton {
  display: none;
}

#box {
  display: flex;
  flex-direction: row;
  text-align: center;
  width: 100%;
}

#more {
  display: none;
}

* {
  padding: 0px;
  margin: 0px;
}

.addons-form__column--right-table::-webkit-scrollbar, .addons-form::-webkit-scrollbar, .metric-table td::-webkit-scrollbar, #series-name::-webkit-scrollbar, #my-output::-webkit-scrollbar, #series-content::-webkit-scrollbar, #searchbox::-webkit-scrollbar, .tagnames::-webkit-scrollbar, .card--content::-webkit-scrollbar, .heroku-config__aggregate table::-webkit-scrollbar, .cardContainer::-webkit-scrollbar, .activityLog::-webkit-scrollbar, td.scrollable div::-webkit-scrollbar, .modal--body::-webkit-scrollbar, .tabbed-table__content table::-webkit-scrollbar, .card-codebox::-webkit-scrollbar {
  width: 7px;
  height: 6px;
}
.addons-form__column--right-table::-webkit-scrollbar-track, .addons-form::-webkit-scrollbar-track, .metric-table td::-webkit-scrollbar-track, #series-name::-webkit-scrollbar-track, #my-output::-webkit-scrollbar-track, #series-content::-webkit-scrollbar-track, #searchbox::-webkit-scrollbar-track, .tagnames::-webkit-scrollbar-track, .card--content::-webkit-scrollbar-track, .heroku-config__aggregate table::-webkit-scrollbar-track, .cardContainer::-webkit-scrollbar-track, .activityLog::-webkit-scrollbar-track, td.scrollable div::-webkit-scrollbar-track, .modal--body::-webkit-scrollbar-track, .tabbed-table__content table::-webkit-scrollbar-track, .card-codebox::-webkit-scrollbar-track {
  background: transparent;
}
.addons-form__column--right-table::-webkit-scrollbar-thumb, .addons-form::-webkit-scrollbar-thumb, .metric-table td::-webkit-scrollbar-thumb, #series-name::-webkit-scrollbar-thumb, #my-output::-webkit-scrollbar-thumb, #series-content::-webkit-scrollbar-thumb, #searchbox::-webkit-scrollbar-thumb, .tagnames::-webkit-scrollbar-thumb, .card--content::-webkit-scrollbar-thumb, .heroku-config__aggregate table::-webkit-scrollbar-thumb, .cardContainer::-webkit-scrollbar-thumb, .activityLog::-webkit-scrollbar-thumb, td.scrollable div::-webkit-scrollbar-thumb, .modal--body::-webkit-scrollbar-thumb, .tabbed-table__content table::-webkit-scrollbar-thumb, .card-codebox::-webkit-scrollbar-thumb {
  background: transparent;
  border-right: 1px solid #f2f3f6;
}
.addons-form__column--right-table:hover::-webkit-scrollbar-thumb, .addons-form:hover::-webkit-scrollbar-thumb, .metric-table td:hover::-webkit-scrollbar-thumb, #series-name:hover::-webkit-scrollbar-thumb, #my-output:hover::-webkit-scrollbar-thumb, #series-content:hover::-webkit-scrollbar-thumb, #searchbox:hover::-webkit-scrollbar-thumb, .tagnames:hover::-webkit-scrollbar-thumb, .card--content:hover::-webkit-scrollbar-thumb, .heroku-config__aggregate table:hover::-webkit-scrollbar-thumb, .cardContainer:hover::-webkit-scrollbar-thumb, .activityLog:hover::-webkit-scrollbar-thumb, td.scrollable div:hover::-webkit-scrollbar-thumb, .modal--body:hover::-webkit-scrollbar-thumb, .tabbed-table__content table:hover::-webkit-scrollbar-thumb, .card-codebox:hover::-webkit-scrollbar-thumb {
  background: #b6bbcc;
}

.dropdown {
  position: relative;
}

.dropdown--menu {
  position: absolute;
  top: 40px;
  width: 190px;
  padding: 5px 0;
  border: 1px solid;
  border-color: #e0e2e9 #b6bbcc #8C969E;
  box-shadow: 0 3px 8px rgba(60, 63, 66, 0.16);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -khtml-border-radius: 4px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 50ms ease-in;
  -moz-transition: all 50ms ease-in;
  -ms-transition: all 50ms ease-in;
  -o-transition: all 50ms ease-in;
  transition: all 50ms ease-in;
}
.dropdown--menu:after, .dropdown--menu:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
}
.dropdown--menu:after {
  border-color: rgba(246, 108, 0, 0);
  border-bottom-color: #fff;
  border-width: 12px;
  margin-left: -12px;
}
.dropdown--menu:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #e0e2e9;
  border-width: 13px;
  margin-left: -13px;
}
.dropdown--menu.active {
  z-index: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 230ms cubic-bezier(0.34, 1.61, 0.7, 1);
  -moz-transition: all 230ms cubic-bezier(0.34, 1.61, 0.7, 1);
  -ms-transition: all 230ms cubic-bezier(0.34, 1.61, 0.7, 1);
  -o-transition: all 230ms cubic-bezier(0.34, 1.61, 0.7, 1);
  transition: all 230ms cubic-bezier(0.34, 1.61, 0.7, 1);
}

.dropdown-left .dropdown--menu {
  left: -15px;
  right: auto;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
}
.dropdown-left .dropdown--menu:after, .dropdown-left .dropdown--menu:before {
  left: 230px;
}

.dropdown-right .dropdown--menu {
  right: -15px;
  left: auto;
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
}
.dropdown-right .dropdown--menu:after, .dropdown-right .dropdown--menu:before {
  left: calc(100% - 230px);
}

.dropdown-login .dropdown--menu {
  right: 15px;
  left: auto;
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
}
.dropdown-login .dropdown--menu:after, .dropdown-login .dropdown--menu:before {
  left: calc(100% - 230px + 168px);
}
@media (min-width: 1020px) {
  .dropdown-login .dropdown--menu:after, .dropdown-login .dropdown--menu:before {
    left: 290px;
  }
}

.dropdown--item {
  display: block;
  padding: 10px 15px;
  white-space: nowrap;
  line-height: 1;
}
.dropdown--item:hover {
  background: #f2f3f6;
}

.dropdown--separator {
  height: 1px;
  background: #f2f3f6;
  margin: 5px 0;
  line-height: 1;
  white-space: nowrap;
}
.dropdown--separator:hover {
  background: #f2f3f6;
}

a.dd-selected {
  color: #28c489;
  cursor: default;
  /* Adds an icon for selected menu items
  &:before {
     font-family: 'graphite';
     content: "\e613";
     margin-right:5px;
  }*/
}
a.dd-selected:hover {
  text-decoration: none;
  background: #ffffff;
}

.dropdown--break {
  margin: 20px auto;
  width: 80%;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.flat-dropdown {
  margin: 1% 0;
  padding: 3%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: left;
}

.dropdown-heading {
  cursor: default;
  color: #3c3f42;
}
.dropdown-heading:hover {
  background: #fff;
}

.features-dropdown {
  float: left;
  overflow: hidden;
}
.features-dropdown:hover .features-dropdown-content {
  display: block;
}

.features-dropdown-content {
  display: none;
  position: relative;
  padding: 5px;
  margin-top: 50px;
  background-color: #3c3f42;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 2.5px;
}
.features-dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.features-dropdown-content a:hover {
  color: #f66c00;
}

h1, h2, h3, h4, h5, h6, p, small, time, span {
  margin: 0;
  font-size: 100%;
  line-height: 1;
}

body, html, input, textarea, button, select {
  font-family: "source sans pro", "Helvetica Neue", arial, sans-serif;
  color: #3c3f42;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.bold, #prom-inhibit-rule-overview .prom-overview-header, #prom-route-overview .prom-overview-header, .prom-alert-overview-container .prom-overview-header {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.normal {
  font-weight: normal;
}

.fs-xxl {
  font-size: 46px;
  line-height: 1.2;
}

.fs-Xl {
  font-size: 26px;
  line-height: 1.2;
}

.fs-Lg, .customers-testimonial-quote,
.grid-1 .fs-A {
  font-size: 21px;
  line-height: 1.2;
}

.fs-M, .card--empty p, .card--title, .activityLog--heading, .create-alert-heading,
.grid-cards .fs-A {
  font-size: 18px;
  line-height: 1.3;
}

.fs-Sm, .activityLog--message, .activityLog--title, .topBar, .modal--note {
  font-size: 14px;
  line-height: 1.4;
}

.fs-Xs, .activityLog--time {
  font-size: 12px;
  line-height: 1;
}

.fs-Xxs {
  font-size: 11px;
  line-height: 1;
}

.fs-Xs-L {
  font-size: 12px;
  line-height: 1.2;
}

.longFormText p {
  margin-bottom: 30px;
}

.longFormText p:last-child {
  margin-bottom: 0;
}

.outside-card {
  width: 850px;
  max-width: 80%;
}

.bgAccent {
  background: #f66c00;
  color: #fff;
}

.midLight {
  color: #c3c9cd;
}

.lowLight, .services-landing p, .feature-paragraph, .create-alert-heading {
  color: #8C969E;
}

.bgComplementLight {
  background: white;
  color: #8C969E;
}

.bgWarningLight {
  background: #fbf7da;
  color: #8C969E;
}

.bgDangerLight, .beta-label {
  background: #f18181;
  color: #3c3f42;
}

.bgTranslucent, .card--header, .topBar, .modal--header, .dropdown--menu {
  background: #fff;
  background: rgba(255, 255, 255, 0.98);
}

.bgTranslucentLight {
  background: #fff;
  background: rgba(255, 255, 255, 0.86);
}

.bgTranslucentDark, #confirmModalOverlay {
  background: rgba(17, 17, 17, 0.8);
}

.bgWhite, .card--icon-hint, .card, .card-full, .card-SM, .card-S, .card-MS, .card-M, .modal {
  background: #fff;
}
.bgWhite .lowLight, .bgWhite .services-landing p, .services-landing .bgWhite p, .bgWhite .feature-paragraph, .card--icon-hint .lowLight, .card--icon-hint .services-landing p, .services-landing .card--icon-hint p, .card--icon-hint .feature-paragraph, .card .lowLight, .card .services-landing p, .services-landing .card p, .card .feature-paragraph, .card-full .lowLight, .card-full .services-landing p, .services-landing .card-full p, .card-full .feature-paragraph, .card-SM .lowLight, .card-SM .services-landing p, .services-landing .card-SM p, .card-SM .feature-paragraph, .card-S .lowLight, .card-S .services-landing p, .services-landing .card-S p, .card-S .feature-paragraph, .card-MS .lowLight, .card-MS .services-landing p, .services-landing .card-MS p, .card-MS .feature-paragraph, .card-M .lowLight, .card-M .services-landing p, .services-landing .card-M p, .card-M .feature-paragraph, .modal .lowLight, .modal .services-landing p, .services-landing .modal p, .modal .feature-paragraph, .bgWhite .create-alert-heading, .card--icon-hint .create-alert-heading, .card .create-alert-heading, .card-full .create-alert-heading, .card-SM .create-alert-heading, .card-S .create-alert-heading, .card-MS .create-alert-heading, .card-M .create-alert-heading, .modal .create-alert-heading {
  color: #8C969E;
}

.bgGDark {
  background: #3c3f42;
}

.bgLight, .cardContainer, .activityLog, .modal--footer {
  background: #f2f3f6;
}
.bgLight .lowLight, .bgLight .services-landing p, .services-landing .bgLight p, .bgLight .feature-paragraph, .cardContainer .lowLight, .cardContainer .services-landing p, .services-landing .cardContainer p, .cardContainer .feature-paragraph, .activityLog .lowLight, .activityLog .services-landing p, .services-landing .activityLog p, .activityLog .feature-paragraph, .modal--footer .lowLight, .modal--footer .services-landing p, .services-landing .modal--footer p, .modal--footer .feature-paragraph, .bgLight .create-alert-heading, .cardContainer .create-alert-heading, .activityLog .create-alert-heading, .modal--footer .create-alert-heading {
  color: #8C969E;
}

.bgLighter {
  background: #fbfbfc;
}
.bgLighter .lowLight, .bgLighter .services-landing p, .services-landing .bgLighter p, .bgLighter .feature-paragraph, .bgLighter .create-alert-heading {
  color: #8C969E;
}

.bgSolarized, .code-agnostic, code {
  background: #fdf6e3;
}
.bgSolarized .lowLight, .bgSolarized .services-landing p, .services-landing .bgSolarized p, .code-agnostic .lowLight, .code-agnostic .services-landing p, .services-landing .code-agnostic p, .bgSolarized .feature-paragraph, .code-agnostic .feature-paragraph, code .lowLight, code .services-landing p, .services-landing code p, code .feature-paragraph, .bgSolarized .create-alert-heading, .code-agnostic .create-alert-heading, code .create-alert-heading {
  color: #8C969E;
}

.bgBlackGradient, .agent-codebox, .card-codebox {
  background: #26292c;
  background-image: url("../../assets/img/tile.png"); /* fallback */
  background-image: url("../../assets/img/tile.png"), radial-gradient(circle at bottom center, #555, #222); /* Saf4+, Chrome */
  color: #fff;
}
.bgBlackGradient .lowLight, .bgBlackGradient .services-landing p, .services-landing .bgBlackGradient p, .bgBlackGradient .feature-paragraph, .agent-codebox .lowLight, .agent-codebox .services-landing p, .services-landing .agent-codebox p, .agent-codebox .feature-paragraph, .card-codebox .lowLight, .card-codebox .services-landing p, .services-landing .card-codebox p, .card-codebox .feature-paragraph, .bgBlackGradient .create-alert-heading, .agent-codebox .create-alert-heading, .card-codebox .create-alert-heading {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.5;
}

.bgCareers {
  background: #26292c;
  background-image: url("../../assets/img/careers/Careers-bg-big.png");
  background-size: cover;
  color: #fff;
  height: 600px;
  overflow: hidden;
}

.bgHeroku {
  background: #764fa9;
  color: #fff;
}
.bgHeroku .lowLight, .bgHeroku .services-landing p, .services-landing .bgHeroku p, .bgHeroku .feature-paragraph, .bgHeroku .create-alert-heading {
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.7;
}

.bgMetricfire {
  background: #101036;
}

.bgDark {
  background: #333;
}

.bgGrafana {
  background: #eb7851;
  color: #fff;
}
.bgGrafana .lowLight, .bgGrafana .services-landing p, .services-landing .bgGrafana p, .bgGrafana .feature-paragraph, .bgGrafana .create-alert-heading {
  color: #fff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0.7;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.beta-label {
  padding: 2px 4px;
  border: none;
  border-radius: 3px;
}

.for-mobile {
  display: inline;
}
@media (min-width: 680px) {
  .for-mobile {
    display: none;
  }
}

.for-tablet-and-above {
  display: none;
}
@media (min-width: 1020px) {
  .for-tablet-and-above {
    display: initial;
  }
}

.for-vert-tablet-and-above {
  display: none;
}
@media (min-width: 900px) {
  .for-vert-tablet-and-above {
    display: initial;
  }
}

.for-desktop {
  display: none;
}
@media (min-width: 680px) {
  .for-desktop {
    display: initial;
  }
}

.soft-shadow, .landing-page-topbar.active {
  -webkit-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
}

.darkGreyText {
  color: #76828b;
}

.blackText {
  color: #42494f;
}

.whiteText {
  color: #f0f0f0;
}

hr.greyHR {
  border-top: 1px solid #c3c9cd;
  border-bottom: none;
}

a {
  cursor: pointer;
}

.base-notification, .hg-notification-container, .hg-notification, .hg-pusher-notification {
  position: absolute;
  top: 0;
  font-weight: 600;
  text-align: center;
  font-size: 15px;
  z-index: 999999;
  box-sizing: border-box;
}

.hg-notification, .hg-pusher-notification {
  color: #fff;
  padding: 20px 40px;
  margin-top: 5px;
  width: 100%;
  margin-left: -50%;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  -khtml-border-radius: 3px 3px 3px 3px;
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -ms-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  transform: translateY(-100px);
}
.hg-notification.active, .active.hg-pusher-notification {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  position: static;
}

.hg-notification-container {
  margin-left: 50%;
  padding: 0px;
  display: inline-block;
  width: 500px;
  max-width: 80%;
}

.hg-pusher-notification {
  background: #fff;
  color: #3c3f42;
}

.hg-status-notification {
  text-align: left;
  font-weight: normal;
}

.hg-notification-icon-close {
  position: absolute;
  top: 7px;
  right: 7px;
  font-size: 16px;
  cursor: pointer;
}
.hg-notification-icon-close:hover {
  color: #999;
}

table.alerting-table {
  width: 100%;
}
table.alerting-table td, table.alerting-table th {
  word-wrap: break-word;
}
table.alerting-table .limited-column {
  max-width: 120px;
  white-space: nowrap;
}

.alert-action-label {
  text-transform: capitalize;
}

.hg-alert-positive,
.hg-alert-success {
  background: #28c489;
  color: #fff;
}

.hg-alert-plight {
  background: #c5f3e2;
}

.hg-alert-warning {
  background: #ebb32d;
  color: #fff;
}

.hg-alert-negative,
.hg-alert-danger {
  background: #ec5353;
  color: #fff;
}

.hg-alert-info {
  background: #20B9F7;
  color: #fff;
}

.success {
  color: #28c489;
}

.danger {
  color: #ec5353;
}

.info {
  color: #20B9F7;
}

p.danger {
  color: #ec5353;
}

.warning {
  color: #ebb32d;
}

.no-alert-message {
  min-width: 800px;
}

.alert-il {
  -webkit-border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  -khtml-border-radius: 3px 3px 3px 3px;
  padding: 12px 0;
  font-weight: 600;
  text-align: center;
  font-size: 15px;
  color: #fff;
  z-index: 999999;
  margin-left: 10px;
  width: calc(100% - 20px);
}

.create-alert-heading {
  font-weight: bold;
  padding: 15px 0px;
}

.criteria-actions {
  padding-left: 20px;
}

.criteriaTemplate {
  padding-bottom: 10px;
  width: 90%;
}

.criteriaTemplate:not(:first-child) {
  border-top: 2px solid #DDD;
}

#criteriaList {
  margin: 0;
  padding-left: 20px;
}

.icon-wrapper {
  width: 120px;
}

.alert-card-content {
  width: 95%;
}

.alertInfoContainer {
  margin-left: 0%;
}

.prom-alert-overview-container {
  margin-top: 10px;
}
.prom-alert-overview-container .prom-overview-header {
  font-size: 14px;
}
.prom-alert-overview-container .mtss {
  padding-left: 10px;
}

#prom-route-overview {
  width: 750px;
  max-height: 80vh;
  overflow: auto;
  margin-top: 10px;
}
#prom-route-overview .prom-overview-header {
  font-size: 14px;
}
#prom-route-overview #prom-route-overview-match-container {
  padding-left: 10px;
}
#prom-route-overview #prom-route-overview-match-container .prom-overview-match-block {
  margin: 5px 0;
}
#prom-route-overview #prom-route-overview-match-container .prom-overview-match-block-item {
  margin: 0;
}
#prom-route-overview .mtss {
  margin: 5px 0;
}

#prom-inhibit-rule-overview {
  width: 750px;
  max-height: 80vh;
  overflow: auto;
  margin-top: 10px;
}
#prom-inhibit-rule-overview .prom-overview-header {
  font-size: 14px;
}
#prom-inhibit-rule-overview #prom-inhibit-rule-overview-match-target-container, #prom-inhibit-rule-overview #prom-inhibit-rule-overview-match-source-container {
  padding-left: 10px;
}
#prom-inhibit-rule-overview #prom-inhibit-rule-overview-match-target-container .prom-overview-match-block, #prom-inhibit-rule-overview #prom-inhibit-rule-overview-match-source-container .prom-overview-match-block {
  margin: 5px 0;
}
#prom-inhibit-rule-overview #prom-inhibit-rule-overview-match-target-container .prom-overview-match-block-item, #prom-inhibit-rule-overview #prom-inhibit-rule-overview-match-source-container .prom-overview-match-block-item {
  margin: 0;
}
#prom-inhibit-rule-overview .mtss {
  margin: 5px 0;
}

#addPromAlertForm .prom-alert-input-container, #addPromInhibitRuleForm .prom-alert-input-container, #editPromInhibitRuleForm .prom-alert-input-container, #addPromRouteForm .prom-alert-input-container, #editPromAlertForm .prom-alert-input-container, #editPromRouteForm .prom-alert-input-container {
  margin-bottom: 10px;
}
#addPromAlertForm .prom-alert-input, #addPromInhibitRuleForm .prom-alert-input, #editPromInhibitRuleForm .prom-alert-input, #addPromRouteForm .prom-alert-input, #editPromAlertForm .prom-alert-input, #editPromRouteForm .prom-alert-input {
  margin-left: 0;
}
#addPromAlertForm .save-button, #addPromInhibitRuleForm .save-button, #editPromInhibitRuleForm .save-button, #addPromRouteForm .save-button, #editPromAlertForm .save-button, #editPromRouteForm .save-button {
  position: static;
}

#addPromRouteForm, #editPromAlertForm, #editPromRouteForm {
  max-height: 80vh;
  overflow: auto;
  width: 750px;
}
#addPromRouteForm label, #addPromRouteForm select, #addPromRouteForm input, #editPromAlertForm label, #editPromAlertForm select, #editPromAlertForm input, #editPromRouteForm label, #editPromRouteForm select, #editPromRouteForm input {
  font-size: 14px;
}
#addPromRouteForm .prom-alert-input-container .select-Sm, #editPromAlertForm .prom-alert-input-container .select-Sm, #editPromRouteForm .prom-alert-input-container .select-Sm {
  height: 80px;
  overflow: auto;
  width: 400px;
}
#addPromRouteForm .prom-alert-input-container input, #editPromAlertForm .prom-alert-input-container input, #editPromRouteForm .prom-alert-input-container input {
  border-color: #a9a9a9;
  font-weight: normal;
}
#addPromRouteForm .prom-alert-input-container select, #editPromAlertForm .prom-alert-input-container select, #editPromRouteForm .prom-alert-input-container select {
  height: 35px;
  padding-bottom: 6px;
  padding-top: 6px;
  margin: 5px 0;
}
#addPromRouteForm .prom-alert-receiver-container, #editPromAlertForm .prom-alert-receiver-container, #editPromRouteForm .prom-alert-receiver-container {
  width: 500px;
}
#addPromRouteForm .prom-match-block, #editPromAlertForm .prom-match-block, #editPromRouteForm .prom-match-block {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  border-top: 1px solid #e9ebed;
  display: flex;
  margin: 0 0 10px -10px;
  padding: 10px 0 0 10px;
}
#addPromRouteForm .prom-match-block div:first-child, #editPromAlertForm .prom-match-block div:first-child, #editPromRouteForm .prom-match-block div:first-child {
  width: 500px;
}
#addPromRouteForm #addNewMatchBlockButton, #editPromAlertForm #addNewMatchBlockButton, #editPromRouteForm #addNewMatchBlockButton {
  margin-bottom: 10px;
}

.prom-mini-card .mini-card-controls-overlay {
  justify-content: space-evenly !important;
  width: 30% !important;
}

#editPromAlertForm .tab-content {
  width: 80%;
}
#editPromAlertForm .create-alert-heading {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 99%;
  white-space: nowrap;
}
#editPromAlertForm input, #editPromAlertForm textarea {
  max-width: 80%;
}

.modal-prom-alert-overview h3, .modal-prom-route-overview h3, .modal-prom-inhibit-rule-overview h3 {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 99%;
  white-space: nowrap;
}
.modal-prom-alert-overview .modal--body, .modal-prom-route-overview .modal--body, .modal-prom-inhibit-rule-overview .modal--body {
  min-height: auto;
}
.modal-prom-alert-overview .alert-text, .modal-prom-route-overview .alert-text, .modal-prom-inhibit-rule-overview .alert-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 80%;
}

#addPromInhibitRuleForm, #editPromInhibitRuleForm {
  max-height: 80vh;
  overflow: auto;
  width: 750px;
}
#addPromInhibitRuleForm label, #addPromInhibitRuleForm select, #addPromInhibitRuleForm input, #editPromInhibitRuleForm label, #editPromInhibitRuleForm select, #editPromInhibitRuleForm input {
  font-size: 14px;
}
#addPromInhibitRuleForm .prom-alert-input-container .select-Sm, #editPromInhibitRuleForm .prom-alert-input-container .select-Sm {
  height: 80px;
  overflow: auto;
  width: 400px;
}
#addPromInhibitRuleForm .prom-alert-input-container input, #editPromInhibitRuleForm .prom-alert-input-container input {
  border-color: #a9a9a9;
  font-weight: normal;
}
#addPromInhibitRuleForm .prom-alert-input-container select, #editPromInhibitRuleForm .prom-alert-input-container select {
  height: 35px;
  padding-bottom: 6px;
  padding-top: 6px;
  margin: 5px 0;
}
#addPromInhibitRuleForm .prom-alert-receiver-container, #editPromInhibitRuleForm .prom-alert-receiver-container {
  width: 500px;
}
#addPromInhibitRuleForm .prom-match-block, #editPromInhibitRuleForm .prom-match-block {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  border-top: 1px solid #e9ebed;
  display: flex;
  margin: 0 0 10px -10px;
  padding: 10px 0 0 10px;
}
#addPromInhibitRuleForm .prom-match-block div:first-child, #editPromInhibitRuleForm .prom-match-block div:first-child {
  width: 500px;
}
#addPromInhibitRuleForm .label, #editPromInhibitRuleForm .label {
  padding-bottom: 5px;
}
#addPromInhibitRuleForm #addNewTriggeredAlertMatchBlockButton, #addPromInhibitRuleForm #addNewInhibitAlertMatchBlockButton, #addPromInhibitRuleForm #addNewEditInhibitAlertMatchBlockButton, #addPromInhibitRuleForm #addNewEditTriggeredAlertMatchBlockButton, #editPromInhibitRuleForm #addNewTriggeredAlertMatchBlockButton, #editPromInhibitRuleForm #addNewInhibitAlertMatchBlockButton, #editPromInhibitRuleForm #addNewEditInhibitAlertMatchBlockButton, #editPromInhibitRuleForm #addNewEditTriggeredAlertMatchBlockButton {
  margin-bottom: 10px;
}

.info-icon {
  vertical-align: middle;
  cursor: pointer;
}

.center {
  text-align: center;
}

.pagination {
  width: 100%;
  min-width: 100%;
  display: inline-block;
  font-size: 0;
  margin-top: 10px;
  margin-bottom: 10px;
}

.pagination a {
  color: #0786ba;
  font-size: 15px;
  padding: 5px 10px;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s;
  border: 1px solid #e0e2e9;
}

.pagination a:first-child {
  border-top-left-radius: 5px solid #f2f3f6;
  border-bottom-left-radius: 5px solid #f2f3f6;
}

.pagination a:last-child {
  border-top-right-radius: 5px solid #f2f3f6;
  border-bottom-right-radius: 5px solid #f2f3f6;
}

.pagination a.active {
  cursor: default;
  background-color: #0786ba;
  color: white;
  border: 1px solid #0786ba;
}

.pagination a.disabled {
  cursor: default;
  background-color: #f2f3f6;
  color: #b6bbcc;
}

.pagination a:hover:not(.active, .disabled) {
  background-color: #e0e2e9;
}

@media all and (max-width: 1116px) {
  .pagination .hideable {
    display: none;
  }
}
.input-container {
  position: relative;
}

.eye-icon {
  position: absolute;
  background-repeat: no-repeat;
  right: 16px;
  top: 13px;
  transform: translateY(-50%);
  cursor: pointer;
}

.eye-icon.closed {
  background-image: url("../../assets/img/auth_pages/mf-auth-hide.svg");
  width: 18px;
  height: 18px;
}

.eye-icon.open {
  background-image: url("../../assets/img/auth_pages/mf-auth-show.svg");
  width: 18px;
  height: 18px;
  top: 14px;
}

input[type=text] + .eye-icon.open {
  background-image: url("../../assets/img/auth_pages/mf-auth-show.svg");
  width: 18px;
  height: 18px;
}

input[type=password] {
  position: relative;
  padding-right: 30px;
}

.modal-wrapper {
  position: absolute;
  width: 100%;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  -webkit-transform: translateY(-999px);
  -moz-transform: translateY(-999px);
  -ms-transform: translateY(-999px);
  -o-transform: translateY(-999px);
  transform: translateY(-999px);
  -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.49, 1.18);
  -moz-transition: all 0.5s cubic-bezier(0.42, 0, 0.49, 1.18);
  -ms-transition: all 0.5s cubic-bezier(0.42, 0, 0.49, 1.18);
  -o-transition: all 0.5s cubic-bezier(0.42, 0, 0.49, 1.18);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.49, 1.18);
  z-index: 999998;
  top: -1000px;
}
.modal-wrapper.active {
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);
  top: 0px;
  left: 0px;
  position: fixed;
}
.modal-wrapper.active .modal {
  opacity: 1;
  position: relative;
}

.modal {
  opacity: 0;
  width: 600px;
  overflow: auto;
  z-index: 999999;
  box-shadow: 0px 1px 2px 1px rgba(135, 135, 135, 0.5);
  border: none;
  border-radius: 4px;
  top: 60px;
  max-width: 90%;
  max-height: 90%;
}

.modal--close {
  background-color: transparent;
  border: none;
  position: absolute;
  top: 15px;
  right: 15px;
  text-align: center;
  color: #8C969E;
}
.modal--close:hover {
  color: #3c3f42;
}

p.metricLabel {
  word-wrap: break-word;
}

.modal--header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px 30px;
  border-bottom: 1px solid #f2f3f6;
}

.modal--body {
  padding-top: 20px;
  margin: 65px 0;
  min-height: 420px;
  max-height: 600px;
  overflow-y: scroll;
}

.modal--footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding-top: 20px;
}
.modal--note {
  margin-top: 11px;
}

.modal.wide-modal {
  padding: 35px;
  width: 1000px;
  z-index: 10000;
  min-height: 350px;
}
.modal.wide-modal #tab-2 {
  margin-bottom: 50px;
}
.modal.wide-modal #tab-1 {
  display: inline-block;
}
.modal.wide-modal .save-button {
  position: absolute;
  right: 0;
}

div.whiteout {
  display: none;
  background-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 100%;
  z-index: 9998;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}
div.whiteout.active {
  display: block;
  background-color: rgba(255, 255, 255, 0.85);
}

div.whiteout {
  background-color: rgba(17, 17, 17, 0);
}
div.whiteout.active {
  display: block;
  background-color: rgba(17, 17, 17, 0.8);
}

code {
  padding: 5px 10px;
  font-family: "source code pro", Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 15px;
  color: #d33682;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -khtml-border-radius: 3px;
}

code.prettyprint {
  display: none;
  width: auto;
  white-space: nowrap;
  word-wrap: normal;
}

code.traffic-code {
  display: block;
  padding-left: 15px;
  width: auto;
  white-space: pre;
  word-wrap: normal;
}

.card-codebox {
  background: #4d5155;
}
.card-codebox code {
  padding: 0px 0px 0px 0px;
  white-space: pre;
}

.agent-codebox {
  background: #4d5155;
}
.agent-codebox code {
  padding: 0px 0px 0px 0px;
  white-space: pre;
}

th {
  vertical-align: bottom;
}

td {
  vertical-align: top;
}

.table, .table-expandable, .table-large {
  width: 100%;
  max-width: 100%;
  font-size: 14px;
}

.table th, .table-expandable th, .table-large th, .table td, .table-expandable td, .table-large td {
  padding: 10px 5px;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

td.scrollable {
  height: fit-content;
}
td.scrollable div {
  text-overflow: clip;
  overflow: auto;
  padding-bottom: 3px;
}

td.accessCell {
  overflow: visible;
}

.table td.actions, .table-expandable td.actions, .table-large td.actions {
  width: 400px;
  min-width: 100px;
}

.table th, .table-expandable th, .table-large th {
  border-bottom: 2px solid #8C969E;
}
.table th.mid-table-header, .table-expandable th.mid-table-header, .table-large th.mid-table-header {
  border-bottom: none;
  font-size: 14px;
  color: #657078;
  padding-top: 20px;
}

.table tr, .table-expandable tr, .table-large tr {
  border-top: 1px solid #f2f3f6;
}

.table--icon, .table--icon:visited {
  color: #8C969E;
  vertical-align: middle;
}
.table--icon:hover, .table--icon:visited:hover {
  color: #20B9F7;
  text-decoration: none;
}
.table--icon.danger, .table--icon:visited.danger {
  color: #ec5353;
}
.table--icon.info, .table--icon:visited.info {
  color: #20B9F7;
}

.table-large {
  font-size: 16px;
}

#teamAccessTable {
  overflow: visible;
}

.no-top-line-on-first tr:first-child {
  border-top: none;
}

table.table thead tr, table.table-expandable thead tr, table.table-large thead tr {
  border-top: none;
}

.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  visibility: visible;
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  opacity: 0;
  filter: alpha(opacity=0);
}

.tooltip.in {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}

.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}

.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}

.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}

.tooltip-inner {
  max-width: 800px;
  padding: 6px 10px;
  color: #fff;
  text-align: center;
  background: #202024;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -khtml-border-radius: 3px;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}

.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}

.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}

.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000000;
}

.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000000;
}

.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}

.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}

.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}

/**
 * GRID LAYOUT
 */
.grid {
  display: block;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: -20px;
  font-size: 0;
}

.grid__cell {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  padding: 0;
  padding-left: 20px;
  margin: 0;
  vertical-align: top;
  font-size: 1rem;
}

.grid--center {
  text-align: center;
}
.grid--center > .grid__cell {
  text-align: left;
}

.grid__cell--center {
  display: block;
  margin: 0 auto;
}

.grid--right {
  text-align: right;
}
.grid--right > .grid__cell {
  text-align: left;
}

.grid--middle > .grid__cell {
  vertical-align: middle;
}

.grid--bottom > .grid__cell {
  vertical-align: bottom;
}

.grid--flush {
  margin-left: 0;
}
.grid--flush > .grid__cell {
  padding-left: 0;
}

.grid--tiny {
  margin-left: -5px;
}
.grid--tiny > .grid__cell {
  padding-left: 5px;
}

.grid--small {
  margin-left: -10px;
}
.grid--small > .grid__cell {
  padding-left: 10px;
}

.grid--large {
  margin-left: -40px;
}
.grid--large > .grid__cell {
  padding-left: 40px;
}

.grid--huge {
  margin-left: -80px;
}
.grid--huge > .grid__cell {
  padding-left: 80px;
}

.grid--auto > .grid__cell {
  width: auto;
}

.grid--rev {
  direction: rtl;
}
.grid--rev > .grid__cell {
  direction: ltr;
}

[class~="1/1"] {
  width: 100%;
}

[class~="1/2"], [class~="2/4"] {
  width: 50%;
}

[class~="1/3"] {
  width: 33.3333333333%;
}

[class~="2/3"] {
  width: 66.6666666667%;
}

[class~="1/4"] {
  width: 25%;
}

[class~="3/4"] {
  width: 75%;
}

@media screen and (max-width: 499px) {
  [class~="1/1--thumb"] {
    width: 100%;
  }
  [class~="1/2--thumb"], [class~="2/4--thumb"] {
    width: 50%;
  }
  [class~="1/3--thumb"] {
    width: 33.3333333333%;
  }
  [class~="2/3--thumb"] {
    width: 66.6666666667%;
  }
  [class~="1/4--thumb"] {
    width: 25%;
  }
  [class~="3/4--thumb"] {
    width: 75%;
  }
}
@media screen and (min-width: 500px) {
  [class~="1/1--handheld-and-up"] {
    width: 100%;
  }
  [class~="1/2--handheld-and-up"], [class~="2/4--handheld-and-up"] {
    width: 50%;
  }
  [class~="1/3--handheld-and-up"] {
    width: 33.3333333333%;
  }
  [class~="2/3--handheld-and-up"] {
    width: 66.6666666667%;
  }
  [class~="1/4--handheld-and-up"] {
    width: 25%;
  }
  [class~="3/4--handheld-and-up"] {
    width: 75%;
  }
}
@media screen and (max-width: 800px) {
  [class~="1/1--pocket"] {
    width: 100%;
  }
  [class~="1/2--pocket"], [class~="2/4--pocket"] {
    width: 50%;
  }
  [class~="1/3--pocket"] {
    width: 33.3333333333%;
  }
  [class~="2/3--pocket"] {
    width: 66.6666666667%;
  }
  [class~="1/4--pocket"] {
    width: 25%;
  }
  [class~="3/4--pocket"] {
    width: 75%;
  }
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
  [class~="1/1--lap"] {
    width: 100%;
  }
  [class~="1/2--lap"], [class~="2/4--lap"] {
    width: 50%;
  }
  [class~="1/3--lap"] {
    width: 33.3333333333%;
  }
  [class~="2/3--lap"] {
    width: 66.6666666667%;
  }
  [class~="1/4--lap"] {
    width: 25%;
  }
  [class~="3/4--lap"] {
    width: 75%;
  }
}
@media screen and (min-width: 801px) {
  [class~="1/1--lap-and-up"] {
    width: 100%;
  }
  [class~="1/2--lap-and-up"], [class~="2/4--lap-and-up"] {
    width: 50%;
  }
  [class~="1/3--lap-and-up"] {
    width: 33.3333333333%;
  }
  [class~="2/3--lap-and-up"] {
    width: 66.6666666667%;
  }
  [class~="1/4--lap-and-up"] {
    width: 25%;
  }
  [class~="3/4--lap-and-up"] {
    width: 75%;
  }
}
@media screen and (max-width: 1024px) {
  [class~="1/1--portable"] {
    width: 100%;
  }
  [class~="1/2--portable"], [class~="2/4--portable"] {
    width: 50%;
  }
  [class~="1/3--portable"] {
    width: 33.3333333333%;
  }
  [class~="2/3--portable"] {
    width: 66.6666666667%;
  }
  [class~="1/4--portable"] {
    width: 25%;
  }
  [class~="3/4--portable"] {
    width: 75%;
  }
}
@media screen and (min-width: 1025px) {
  [class~="1/1--desk"] {
    width: 100%;
  }
  [class~="1/2--desk"], [class~="2/4--desk"] {
    width: 50%;
  }
  [class~="1/3--desk"] {
    width: 33.3333333333%;
  }
  [class~="2/3--desk"] {
    width: 66.6666666667%;
  }
  [class~="1/4--desk"] {
    width: 25%;
  }
  [class~="3/4--desk"] {
    width: 75%;
  }
}
@media screen and (max-width: 1159px) {
  [class~="1/1--down-wide"] {
    width: 100%;
  }
  [class~="1/2--down-wide"], [class~="2/4--down-wide"] {
    width: 50%;
  }
  [class~="1/3--down-wide"] {
    width: 33.3333333333%;
  }
  [class~="2/3--down-wide"] {
    width: 66.6666666667%;
  }
  [class~="1/4--down-wide"] {
    width: 25%;
  }
  [class~="3/4--down-wide"] {
    width: 75%;
  }
}
@media screen and (min-width: 1160px) {
  [class~="1/1--wide"] {
    width: 100%;
  }
  [class~="1/2--wide"], [class~="2/4--wide"] {
    width: 50%;
  }
  [class~="1/3--wide"] {
    width: 33.3333333333%;
  }
  [class~="2/3--wide"] {
    width: 66.6666666667%;
  }
  [class~="1/4--wide"] {
    width: 25%;
  }
  [class~="3/4--wide"] {
    width: 75%;
  }
}
@media screen and (min-width: 500px) and (max-width: 1159px) {
  [class~="1/1--palm"] {
    width: 100%;
  }
  [class~="1/2--palm"], [class~="2/4--palm"] {
    width: 50%;
  }
  [class~="1/3--palm"] {
    width: 33.3333333333%;
  }
  [class~="2/3--palm"] {
    width: 66.6666666667%;
  }
  [class~="1/4--palm"] {
    width: 25%;
  }
  [class~="3/4--palm"] {
    width: 75%;
  }
}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  [class~="1/1--retina"] {
    width: 100%;
  }
  [class~="1/2--retina"], [class~="2/4--retina"] {
    width: 50%;
  }
  [class~="1/3--retina"] {
    width: 33.3333333333%;
  }
  [class~="2/3--retina"] {
    width: 66.6666666667%;
  }
  [class~="1/4--retina"] {
    width: 25%;
  }
  [class~="3/4--retina"] {
    width: 75%;
  }
}
.sideBar {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: fixed;
  top: 0;
  left: 0;
  background: #35373a;
  height: 100%;
  width: 80px;
  z-index: 1000;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.23);
}
.sideBar.sidebarExpanded {
  width: 242px;
}

.sidebar--row, .sidebar--row-home {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  flex-direction: row;
  -webkit-flex-direction: row;
  -webkit-transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  -ms-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
  overflow-x: clip;
  min-height: 66px;
  background-color: #43474a;
}
.sidebar--row-icon {
  background: #35373a;
}
.sidebar--row-name {
  min-width: 162px;
  color: #868c91;
}
.sidebar--row-name a {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  height: 66px;
  text-decoration: none;
  font-size: 16px;
  color: #868c91;
}
.sidebar--row-name a:hover {
  color: #e0e2e9;
}
.sidebar--row-home {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  align-items: center;
  -webkit-align-items: center;
  background: #35373a;
  min-height: 80px;
}

.sideBar--column {
  overflow-y: scroll;
  height: 100%;
  scrollbar-gutter: stable;
}
.sideBar--column::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sideBar--collapse {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  padding-right: 16px;
  background: #35373a;
}
.sideBar--collapse span {
  -webkit-transition: rotate 0.2s ease-out;
  -moz-transition: rotate 0.2s ease-out;
  -ms-transition: rotate 0.2s ease-out;
  -o-transition: rotate 0.2s ease-out;
  transition: rotate 0.2s ease-out;
}
.sideBar--collapse.expanded span {
  rotate: 180deg;
}
.sideBar--collapse.expanded ~ .sideBar--collapse-list {
  height: auto;
}
.sideBar--collapse-list {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: flex-start;
  -webkit-align-items: flex-start;
  flex-direction: column;
  -webkit-flex-direction: column;
  width: 100%;
  overflow: clip;
  height: 0;
}
.sideBar--collapse-list a {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  height: 46px;
  width: 100%;
  font-size: 14px;
}
.sideBar--collapse-list a i {
  font-size: 20px;
  padding-right: 8px;
}

div.sidebar--gap, main.sidebar--gap, section.sidebar--gap {
  padding-left: 272px;
}

.sideBar--toggle {
  position: absolute;
  text-decoration: none;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 66px;
  width: 28px;
  height: 28px;
  right: -14px;
  background: #3e4245;
  border-radius: 50%;
  z-index: 1000;
  transition: all 0.3s ease-out;
}
.sideBar--toggle:hover {
  text-decoration: none;
}
.sideBar--toggle.sidebarExpanded {
  rotate: 180deg;
}

.currentPagePadding {
  padding-left: 270px !important;
}

.sideBar--mini {
  background: #3c3f42;
  width: 80px;
  z-index: 1000;
}

.sideBar--element {
  position: relative;
  color: #858c92;
  background: #35373a;
  padding: 0px;
  word-spacing: 133.3333333333px;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-content: center;
  -webkit-align-content: center;
  flex-direction: column;
  -webkit-flex-direction: column;
  -webkit-transition: color 0.1s ease-out;
  -moz-transition: color 0.1s ease-out;
  -ms-transition: color 0.1s ease-out;
  -o-transition: color 0.1s ease-out;
  transition: color 0.1s ease-out;
  min-width: 80px;
  height: 66px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  line-height: 14px;
}
.sideBar--element:before {
  display: block;
  font-size: 28px;
}
.sideBar--element:hover {
  color: #e0e2e9;
  text-decoration: none;
}
.sideBar--element.danger {
  color: #ec5353;
}

.current--popoutmenu {
  color: #e0e2e9;
}

.sideBar--element.current--page,
.sideBar--element.current--page + .sidebar--row-name a.sideBar--collapse {
  color: #e0e2e9;
  background: #f66c00;
}

a.current--page {
  color: #f66c00;
}

.sidebar--popoutmenu {
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 80px;
  z-index: 1001;
  width: 182px;
  background: #35373a;
}
.sidebar--popoutmenu > * {
  padding-left: 20px;
}
.sidebar--popoutmenu > .sideBar--collapse {
  border-bottom: #657078 1px solid;
  background-color: transparent;
  pointer-events: none;
  font-size: 20px;
  color: #f66c00;
}
.sidebar--popoutmenu > .sideBar--collapse .sideBar--collapse-icon {
  display: none;
}

.sideBar--logo {
  color: #f66c00;
  height: 80px;
  width: 80px;
}
.sideBar--logo:hover {
  color: #ff882a;
}
.sideBar--logo:before {
  font-size: 40px;
}
.sideBar--logo-desc {
  font-size: 20px;
  color: #f66c00;
}
.sideBar--logo-desc:hover {
  text-decoration: none;
}

.status-circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  height: 16px;
  width: 16px;
  box-shadow: 0 0 0 4px;
  animation: 4s ease infinite pulse;
  -moz-animation: none;
  transition: transform ease 0.5s, box-shadow ease 0.5s;
}
.status-circle:hover {
  transform: scale(0.9);
  box-shadow: 0 0 0 8px;
}
.status-container {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  height: 80px;
  min-width: 80px;
}
.status-wrapper {
  width: 100%;
  height: 80px;
  overflow-x: clip;
  margin-top: auto;
  border-top: 1px solid #666666;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: left;
  -webkit-justify-content: left;
  align-items: center;
  -webkit-align-items: center;
}
.status-description {
  min-width: 162px;
  color: #868c91;
}
.status .critical, .status .downtime {
  background-color: #e74c3c;
  color: #921e12;
}
.status .major {
  background-color: #e67e22;
  color: #7b410e;
}
.status .minor, .status .degraded {
  background-color: #f1c40f;
  color: #796307;
}
.status .maintenance {
  background-color: #3498DB;
  color: #16527a;
}
.status .no_status, .status .unknown {
  background-color: #731f67;
  color: #0f040d;
}
.status .none, .status .operational {
  background-color: #2ecc71;
  color: #176437;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 4px;
  }
  50% {
    box-shadow: 0 0 0 8px;
    scale: 0.9;
  }
  100% {
    box-shadow: 0 0 0 4px;
  }
}
.topBar {
  height: 80px;
  width: 100%;
  padding: 0 30px 0 110px;
  border-bottom: 1px solid #e0e2e9;
  z-index: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.topBar--link-alt {
  font-family: Source Sans Pro, sans serif;
  font-size: 16px;
  color: #858c92;
  float: left;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
@media screen and (max-width: 1020px) {
  .topBar--link-alt {
    display: none;
  }
}
.topBar--account-impersonation {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: Source Sans Pro;
  color: #f66c00;
}
@media screen and (max-width: 1020px) {
  .topBar {
    justify-content: flex-end;
  }
}

.topBar--upgrade {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  font-family: Source Sans Pro;
  gap: 15px;
  height: 38px;
}
.topBar--upgrade .trial-status, .topBar--upgrade .trial-status-orange, .topBar--upgrade .trial-status-red {
  padding: 12px 16px;
  border-radius: 4px;
  font-family: Source Sans Pro, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
}
.topBar--upgrade .trial-status-red {
  background-color: rgba(236, 83, 83, 0.1);
  border: 1px solid #ec5353;
  color: #ec5353;
}
.topBar--upgrade .trial-status-orange {
  background-color: rgba(246, 108, 0, 0.1);
  border: 1px solid #f66c00;
  color: #f66c00;
}
@media screen and (max-width: 1020px) {
  .topBar--upgrade {
    display: none;
  }
}

.topBar--nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 25px;
}
.topBar--nav a {
  text-decoration: none;
}
.topBar--nav a:hover {
  color: #f66c00;
}
.topBar--nav a:hover .support-icon, .topBar--nav a:hover .docs-icon {
  background-color: #f66c00;
}
.topBar--nav .support-icon {
  width: 20px;
  height: 20px;
  background-color: #858c92;
  -webkit-mask: url("../../assets/icons/support-icon.svg") no-repeat center;
  mask: url("../../assets/icons/support-icon.svg") no-repeat center;
}
.topBar--nav .docs-icon {
  width: 20px;
  height: 20px;
  background-color: #858c92;
  -webkit-mask: url("../../assets/icons/docs-icon.svg") no-repeat center;
  mask: url("../../assets/icons/docs-icon.svg") no-repeat center;
}
@media screen and (max-width: 1020px) {
  .topBar--nav {
    gap: 0px;
  }
}

.topBar--dropdown {
  display: flex;
  position: relative;
  background-color: #f2f3f6;
  border-radius: 40px;
  padding: 5px 15px 5px 5px;
  height: 48px;
  min-width: 165px;
  text-decoration: none;
}
.topBar--dropdown a {
  color: #858c92;
}
.topBar--dropdown:has(.active) {
  border-radius: 25px 25px 0 0;
}
.topBar--dropdown .account-name {
  font-weight: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-family: Source Sans Pro;
}
.topBar--dropdown .account-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  color: #ffffff;
  background-color: #f66c00;
}
.topBar--dropdown .account-dropdown {
  display: none;
  position: absolute;
  top: -5px;
  width: 100%;
  z-index: -1;
  border-radius: 25px;
  padding: 54px 18px 10px 18px;
  right: 0;
}
.topBar--dropdown .account-dropdown a {
  font-weight: 100;
}
.topBar--dropdown .account-dropdown.active {
  display: flex;
  gap: 5px;
  flex-direction: column;
  background-color: #f2f2f2;
  box-shadow: 0px 1px 35px rgba(0, 0, 0, 0.2);
}

.footer__section {
  width: 100%;
  min-height: 350px;
  background: #333;
  background-size: cover;
  background-repeat: repeat-x;
  margin: auto;
}
.footer__section .whiteLight {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
}

.activityLog {
  position: fixed;
  top: 80px;
  right: -320px;
  bottom: 0;
  width: 320px;
  padding: 30px;
  border-left: 1px solid #e0e2e9;
  overflow-y: scroll;
  -webkit-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -ms-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.3s cubic-bezier(1, 0, 0, 1);
  transition: all 0.3s cubic-bezier(1, 0, 0, 1);
}
.activityLogActive .activityLog {
  right: 0;
}

.activityLog--item {
  position: relative;
  padding-left: 40px;
}

.activityLog--heading {
  margin-bottom: 30px;
}

.activityLog--icon {
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  display: block;
  margin-top: -4px;
  font-size: 16px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
}
.activityLog--icon.info {
  background: #20B9F7;
}
.activityLog--icon.success {
  background: #28c489;
}
.activityLog--icon.warning {
  background: #ebb32d;
}
.activityLog--icon.error {
  background: #ec5353;
}

.activityLog--title {
  display: inline-block;
  color: #3c3f42;
  margin-bottom: 3px;
  font-weight: 600;
}

.activityLog--time {
  padding-top: 4px;
}

.pricing__section {
  width: 100%;
  min-height: 1205px;
  background-color: #333333;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.pricing__section .container {
  width: 100%;
  max-width: 1240px;
  padding-left: 20px;
  padding-right: 20px;
}
.pricing__section .pricing__title {
  width: 100%;
  max-width: 505px;
  margin: 25px 0px 20px 0px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 48px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  font-weight: 400;
}
.pricing__section .pricing__info {
  width: 100%;
  max-width: 364px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  line-height: 27px;
  font-weight: 400;
  margin: 0px 0px 45px 0px;
}
.pricing__section .plan-btn-wrapper {
  margin: 0px 0px 45px 0px;
}
.pricing__section .plan-btn-wrapper .btn-plan {
  width: 90px;
  height: 43px;
  fill: #ea6a41;
  border: none;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  text-decoration: none solid rgb(255, 255, 255);
  line-height: 27px;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
}
.pricing__section .plan-btn-wrapper .btn-yearly {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  margin-right: -5px;
}
.pricing__section .plan-btn-wrapper .btn-monthly {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  margin-left: -5px;
}
.pricing__section .plan-btn-wrapper .btn--orange {
  background: #ea6a41;
  color: #ffffff;
}
.pricing__section .plan-btn-wrapper .btn--white {
  background: #fff;
  color: #000;
}
.pricing__section .cards__grid .grid__cell {
  margin-bottom: 40px;
}
.pricing__section .pricing__card-wrapper {
  position: relative;
  z-index: auto;
  width: 100%;
  max-width: 296px;
  height: 580px;
  background: rgba(51, 51, 51, 0.2);
  border-radius: 2px;
  background-size: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: auto;
}
.pricing__section .pricing__card-wrapper .pricing__card-title {
  width: 236px;
  height: 30px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 24px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  line-height: 27px;
  font-weight: 400;
  margin: 31px 31px 5px 21px;
}
.pricing__section .pricing__card-wrapper .pricing__card-info {
  margin: 0px 68px 20px 22px;
  width: 198px;
  height: 60px;
  opacity: 0.8;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  font-weight: 400;
  line-height: normal;
}
.pricing__section .pricing__card-wrapper .pricing__card-btn {
  display: inline-block;
  width: 95%;
  max-width: 236px;
  height: 51px;
  border-radius: 6px;
  background-image: linear-gradient(0deg, #ea6b40 0%, #ec7952 100%);
  background-position: center center;
  background-size: cover;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-align: center;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0px auto 40px auto;
}
.pricing__section .pricing__card-wrapper .pricing__card-btn .pricing__card-text {
  color: #ffffff;
}
.pricing__section .pricing__card-wrapper .pricing__card-btn:hover {
  background-image: linear-gradient(0deg, #d64a1c 0%, #e36c44 100%);
  background-position: center center;
  background-size: cover;
}
.pricing__section .pricing__card-wrapper .pricing__card-list {
  width: 230px;
  height: 196px;
  list-style-image: url("../../img/check.svg");
  margin: 0px 31px 28px 47px;
  line-height: normal;
}
.pricing__section .pricing__card-wrapper .pricing__card-list .pricing__card-list-item {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 15px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  margin: 15px 0px;
}
.pricing__section .pricing__card-wrapper .pricing__card-list .pricing__card-list-item:first-child {
  font-weight: 700;
}
.pricing__section .pricing__card-wrapper .pricing__price-wrapper {
  width: 187px;
  height: 65px;
  margin: 0px 59px 55px 51px;
  line-height: normal;
}
.pricing__section .pricing__card-wrapper .pricing__price-wrapper .pricing__price-currency {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-align: center;
}
.pricing__section .pricing__card-wrapper .pricing__price-wrapper .pricing__price-title {
  height: 41px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 30px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-align: center;
  margin: 5px auto;
  font-weight: 400;
}
.pricing__section .pricing__card-wrapper .pricing__price-wrapper .pricing__price-title .pricing__price-currency {
  vertical-align: top;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-align: center;
  font-weight: 400;
}
.pricing__section .pricing__card-wrapper .pricing__price-wrapper .pricing__price-info {
  width: 100%;
  max-width: 187px;
  height: 19px;
  opacity: 0.4;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-align: center;
  font-weight: 400;
  margin: auto;
}
.pricing__section .pricing__card-wrapper .pricing__promo-label {
  position: absolute;
  top: -13px;
  left: 25%;
  width: 149px;
  height: 26px;
  padding: 0px 0px 2px 2px;
  border-radius: 3px;
  background-image: linear-gradient(0deg, #ec7952 0%, #ea6b40 100%);
  background-position: center center;
  background-size: cover;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  text-decoration: none solid rgb(255, 255, 255);
  text-align: center;
}
.pricing__section .pricing__card-wrapper .pricing__promo-label div {
  display: block;
  margin-top: 5px;
}
.pricing__section .pricing__card-wrapper .pricing__promo-label div .pricing__promo-label-text {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  display: inline !important;
}
.pricing__section .border--orange {
  border: 2px solid #ea6b40;
  background-color: rgba(255, 255, 255, 0.2);
}
.pricing__section .plans__grid {
  width: 100%;
  max-width: 838px;
  margin: auto;
}
.pricing__section .plans__grid .plans__wrapper {
  margin: 71px auto 80px auto;
  min-height: 185px;
  width: 100%;
}
.pricing__section .plans__grid .plans__wrapper .plans__title {
  white-space: nowrap;
  width: 100%;
  height: 38px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 30px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-align: center;
  margin: 0px auto 20px auto;
  font-weight: 400;
}
.pricing__section .plans__grid .plans__wrapper .plans-feature__list {
  width: 100%;
  max-width: 250px;
  list-style-image: url("../../img/check.svg");
  margin: auto;
}
.pricing__section .plans__grid .plans__wrapper .plans-feature__list-item {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  margin: 20px auto;
  font-weight: 400;
  line-height: normal;
}
@media screen and (max-width: 1024px) {
  .pricing__section .cards__grid .grid__cell {
    margin-top: 40px;
  }
  .pricing__section .plans__title {
    max-width: none;
  }
}
@media screen and (max-width: 499px) {
  .pricing__section .pricing__title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .pricing__section .pricing__info {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .pricing__section .plan-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .pricing__section .plans__title {
    max-width: none;
  }
}

.pricing {
  background-color: #333333;
  padding: 50px 20px;
  position: relative;
  overflow: hidden;
}
.pricing-radio {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.pricing__wrapper {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
}
.pricing__error {
  font-weight: bold;
  margin: 20px auto;
  padding: 20px;
  position: relative;
  border-radius: 5px;
  background-color: #f7a7a3;
  border-left: 8px solid #ed372e;
}
.pricing__container {
  display: grid;
  width: 100%;
  overflow: hidden;
  grid-template-columns: 26% 1fr;
  padding: 20px 0px;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .pricing__container {
    display: none;
  }
}
.pricing__container--mobile {
  max-width: 700px;
  margin: auto;
  display: none;
}
@media (max-width: 900px) {
  .pricing__container--mobile {
    display: block;
  }
}
.pricing__container-left {
  display: flex;
  margin-bottom: 33px;
  flex-direction: column;
  padding-right: 20px;
  margin-top: 70px;
}
.pricing__container-left-header-heading {
  font-size: 46px;
  color: #fff;
  width: 265px;
}
.pricing__container-left-header-text {
  font-size: 18px;
  color: #fff;
  opacity: 0.5;
  margin-top: 8px;
  width: 265px;
  line-height: 24px;
}
.pricing__container-left-selector {
  display: grid;
  width: 100%;
  max-width: 300px;
  height: 46px;
  border: solid 1px #ebebeb;
  border-radius: 100px;
  background-color: #fff;
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
}
.pricing__container-left-selector--mobile {
  margin: 24px auto 0px;
}
.pricing__container-left-selector-item {
  display: flex;
  width: 100%;
  height: 100%;
  border: none;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  color: #000;
}
.pricing__container-left-selector-item:active {
  color: inherit;
}
.pricing__container-left-selector-item--active {
  border: solid 3px #fff;
  border-radius: 100px;
  background-color: #f66c00;
  color: #fff;
}
.pricing__container-left-features {
  padding-top: 25px;
  display: grid;
  grid-row-gap: 0;
}
.pricing__container-left-features-list-feature {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  margin-right: -1000px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.pricing__container-left-features-list-feature:last-child {
  background-color: rgba(255, 255, 255, 0.31);
}
.pricing__container-left-features-list-feature:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}
.pricing__container-plans {
  display: grid;
  width: 100%;
  grid-gap: 20px;
  transition: transform 0.4s ease-in-out;
  grid-template-columns: repeat(3, 1fr);
}
.pricing__container-plans--mobile {
  display: block;
}
.pricing__container-plans--mobile-header {
  text-align: center;
}
.pricing__container-plans--mobile-header h1 {
  width: 100%;
}
.pricing__container-plans--mobile-header p {
  width: 100%;
  margin-top: 15px;
}
.pricing__container-plans-option {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 30px 20px;
  text-align: center;
}
.pricing__container-plans-option--mobile {
  margin: 50px 20px;
}
.pricing__container-plans-option--mobile span {
  font-weight: bold;
}
.pricing__container-plans-option-popular {
  border: 2px solid #fff;
  position: relative;
}
.pricing__container-plans-option-popular-tag {
  background-color: #f66c00;
  width: max-content;
  top: -19px;
  left: 50%;
  margin-left: -80px;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  position: absolute;
  padding: 10px 15px;
  border-radius: 10px;
}
.pricing__container-plans-option-name {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
}
.pricing__container-plans-option-for {
  color: #fff;
  opacity: 0.5;
  font-size: 18px;
  height: 43px;
  line-height: 24px;
  padding: 10px 0px;
}
.pricing__container-plans-option-dropdown {
  height: 51px;
}
.pricing__container-plans-option-dropdown-select {
  width: 100%;
  height: 51px;
  border: 1px solid #fff;
  border-radius: 6px;
  color: #0a0a0a;
  padding-left: 10px;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 1em;
}
.pricing__container-plans-option-dropdown-select option {
  background-color: white;
}
.pricing__container-plans-option-select {
  height: 280px;
  display: flex;
  flex-direction: column;
}
.pricing__container-plans-option-select > button {
  margin-top: auto;
}
.pricing__container-plans-option-select > a {
  margin-top: auto;
}
.pricing__container-plans-option-select > a button {
  margin-top: 0;
}
.pricing__container-plans-option-btn {
  background-color: #f66c00;
  border-radius: 6px;
  border: none;
  margin-top: 30px;
  height: 51px;
  width: 100%;
  background-position: center center;
  background-size: cover;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
}
@media screen and (max-width: 900px) {
  .pricing__container-plans-option-btn {
    margin-top: 20px;
  }
}
.pricing__container-plans-option-features {
  color: rgba(255, 255, 255, 0.5);
  font-size: 16px;
  margin-top: 25px;
}
.pricing__container-plans-option-features-list {
  list-style: none;
  margin-top: 26px;
}
.pricing__container-plans-option-features-list--mobile {
  max-height: 255px;
  overflow: hidden;
}
.pricing__container-plans-option-features-list-item {
  line-height: 26px;
  padding: 5px;
  position: relative;
  margin: 0px -20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (max-width: 900px) {
  .pricing__container-plans-option-features-list-item:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .pricing__container-plans-option-features-list-item:last-child {
    background-color: rgba(255, 255, 255, 0.31);
  }
}
.pricing__container-plans-option-features-list-item-yes {
  display: block;
  margin: auto;
  height: 26px;
  background-image: url("../../assets/img/pricing/orange-tick.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
.pricing__container-plans-option-features-list-item-no {
  display: block;
  margin: auto;
  height: 26px;
  background-image: url("../../assets/img/pricing/grey-x.svg");
  background-repeat: no-repeat;
  background-position: center center;
}
.pricing__container-plans-option-show {
  color: #f66c00;
  font-weight: bold;
  font-size: 16px;
  background: none;
  border: none;
  margin: 20px 0px;
}
.pricing__container-plans-option-show .show-more {
  position: relative;
}
.pricing__container-plans-option-show .show-more::before {
  content: "+";
  position: absolute;
  font-weight: bold;
  font-size: 25px;
  left: -20px;
  top: -4px;
}
.pricing__container-plans-option-show .show-less {
  position: relative;
  display: none;
}
.pricing__container-plans-option-show .show-less::before {
  content: "−";
  position: absolute;
  font-weight: bold;
  font-size: 25px;
  left: -20px;
  top: -4px;
}
.pricing__container-plans-option-price {
  color: #fff;
  padding: 15px 0px;
}
.pricing__container-plans-option-price-dollar {
  font-size: 18px;
  position: relative;
  top: -20px;
}
.pricing__container-plans-option-price-num {
  font-weight: bold;
  font-size: 48px;
  padding-left: 2px;
}
.pricing__container-plans-option-price-contact {
  font-weight: bold;
  font-size: 48px;
  padding-left: 2px;
}
.pricing__container-plans-option-price-per {
  font-weight: bold;
  font-size: 12px;
  padding-top: 2px;
  text-transform: uppercase;
  opacity: 0.5;
}
.pricing__container-features {
  text-align: center;
}
.pricing__container-features-heading {
  color: #fff;
  font-weight: bold;
  font-size: 36px;
  margin: 50px 0px;
}
@media (max-width: 550px) {
  .pricing__container-features-heading {
    font-size: 32px;
  }
}
.pricing__container-features-boxes {
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  display: grid;
}
@media (max-width: 1000px) {
  .pricing__container-features-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 550px) {
  .pricing__container-features-boxes {
    display: block;
  }
}
.pricing__container-features-boxes-box {
  border-radius: 25px;
  background-color: #fff;
  padding: 56px 23px;
}
@media (max-width: 1000px) {
  .pricing__container-features-boxes-box {
    margin-top: 15px;
  }
}
@media (max-width: 550px) {
  .pricing__container-features-boxes-box {
    margin-top: 40px;
  }
}
.pricing__container-features-boxes-box-img {
  display: block;
  width: 65px;
  height: 66px;
  margin: -75px auto 0px;
}
.pricing__container-features-boxes-box-img-affordable {
  background-image: url("../../assets/img/pricing/affordable.png");
}
.pricing__container-features-boxes-box-img-customized {
  background-image: url("../../assets/img/pricing/customized.png");
}
.pricing__container-features-boxes-box-img-transparent {
  background-image: url("../../assets/img/pricing/transparent.png");
}
.pricing__container-features-boxes-box-img-simple {
  background-image: url("../../assets/img/pricing/simple.png");
}
.pricing__container-features-boxes-box-title {
  font-weight: bold;
  line-height: 34px;
  color: #151515;
  margin: 20px auto 10px;
  font-size: 22px;
}
.pricing__container-features-boxes-box-text {
  color: #151515;
  opacity: 0.5;
  font-size: 18px;
  line-height: 26px;
}
.pricing-testimonials {
  background-color: rgba(51, 51, 51, 0.05);
}
.pricing-testimonials__wrapper {
  max-width: 1240px;
  padding: 50px 0px;
  margin: auto;
}
.pricing-testimonials-heading {
  font-size: 48px;
  color: #151515;
  text-align: center;
  margin-bottom: 50px;
}
@media (max-width: 450px) {
  .pricing-testimonials-heading {
    margin: 0px 15px 50px;
  }
}
.pricing-testimonials__container {
  grid-gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  margin: 0px 20px;
}
@media (max-width: 1000px) {
  .pricing-testimonials__container {
    display: block;
  }
}
.pricing-testimonials__container-box {
  background-color: #fff;
  border-radius: 10px;
  padding: 30px;
  margin: 10px 0px;
}
@media (max-width: 1000px) {
  .pricing-testimonials__container-box {
    margin: 20px 10px;
  }
}
@media (max-width: 450px) {
  .pricing-testimonials__container-box {
    padding: 25px;
    margin: 20px 0px;
  }
}
.pricing-testimonials__container-box-stars {
  display: block;
  height: 35px;
  background-repeat: no-repeat;
}
.pricing-testimonials__container-box-stars-4 {
  background-image: url("../../assets/img/pricing/4-stars.svg");
}
.pricing-testimonials__container-box-stars-5 {
  background-image: url("../../assets/img/pricing/5-stars.svg");
}
.pricing-testimonials__container-box-quote {
  font-size: 22px;
  color: #333;
  line-height: 32px;
  letter-spacing: -0.4px;
}
@media (max-width: 450px) {
  .pricing-testimonials__container-box-quote {
    font-size: 20px;
  }
}
.pricing-testimonials__container-box-customer {
  display: flex;
  margin: 50px 0px 10px;
}
.pricing-testimonials__container-box-customer-img {
  display: block;
  width: 60px;
  height: 60px;
  margin-right: 10px;
}
.pricing-testimonials__container-box-customer-img-martin {
  background-image: url("../../assets/img/pricing/martin-cozzi.svg");
}
.pricing-testimonials__container-box-customer-img-maxime {
  background-image: url("../../assets/img/pricing/maxime-audet.svg");
}
.pricing-testimonials__container-box-customer-img-shahar {
  background-image: url("../../assets/img/pricing/shahar-kobrinsky.svg");
}
.pricing-testimonials__container-box-customer-img-jim {
  background-image: url("../../assets/img/pricing/jim-davies.svg");
}
.pricing-testimonials__container-box-customer-name {
  font-size: 24px;
  color: #333;
  line-height: 34px;
  letter-spacing: -0.8px;
}
@media (max-width: 450px) {
  .pricing-testimonials__container-box-customer-name {
    font-size: 22px;
  }
}
.pricing-testimonials__container-box-customer-job {
  font-size: 18px;
  color: #333;
  opacity: 0.5;
  line-height: 28px;
  letter-spacing: -0.4px;
}
@media (max-width: 450px) {
  .pricing-testimonials__container-box-customer-job {
    font-size: 16px;
  }
}
.pricing-faq__wrapper {
  max-width: 1240px;
  padding: 50px 30px;
  margin: auto;
}
.pricing-faq-heading {
  font-size: 48px;
  color: #151515;
  margin: 50px 0px;
  text-align: center;
}
.pricing-faq__container {
  max-width: 1131px;
  margin: auto;
}
.pricing-faq__container a {
  color: #f66c00;
  font-weight: bold;
  text-decoration: none;
}
.pricing-faq__container-question-collapsible {
  cursor: pointer;
  padding: 23px 0px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-weight: bold;
  color: #151515;
  border-top: 1px solid #d9dce3;
}
.pricing-faq__container-question-collapsible::after {
  content: url("../../assets/img/pricing/plus-icon.svg");
  font-size: 20px;
  float: right;
  margin-left: 5px;
}
.pricing-faq__container-question .active::after {
  content: url("../../assets/img/pricing/minus-icon.svg");
}
.pricing-faq__container-question-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.pricing-faq__container-question-answer p {
  padding: 0px 20px 20px 0px;
}
.pricing-faq__container-question-answer ul {
  padding: 0 20px;
}
.pricing-faq__container-contact {
  border-top: 1px solid #d9dce3;
  color: #333;
  padding: 20px 0px;
}

.cardContainer {
  bottom: 0;
  width: 100%;
  padding: 110px 30px 30px 110px;
  overflow-y: scroll;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.activityLogActive .cardContainer {
  width: calc(100% - 320px);
}
.sidebarSubmenuActive .cardContainer {
  width: calc(100% - 160px);
}
.cardContainer .sidebarExpanded ~ .cardContainer {
  width: calc(100% - 242px);
}

.cardContainer.card-grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  grid-gap: 20px;
}
.cardContainer.card-grid-container.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(250px, 1fr));
}
.cardContainer.card-grid-container.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(250px, 1fr));
}
.cardContainer.card-grid-container.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(250px, 1fr));
}
.cardContainer.card-grid-container.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(250px, 1fr));
}
.cardContainer.card-grid-container.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(250px, 1fr));
}
.cardContainer.card-grid-container.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(250px, 1fr));
}
.cardContainer.card-grid-container.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
}
.cardContainer.card-grid-container.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(250px, 1fr));
}
.cardContainer.card-grid-container .col-span-full {
  grid-column: 1/-1;
}
.cardContainer.card-grid-container .col-span-2 {
  grid-column: span 2;
}
.cardContainer.card-grid-container .col-span-3 {
  grid-column: span 3;
}
.cardContainer.card-grid-container .col-span-4 {
  grid-column: span 4;
}
.cardContainer.card-grid-container .row-span-2 {
  grid-row: span 2;
}
.cardContainer.card-grid-container .row-span-3 {
  grid-row: span 3;
}
.cardContainer.card-grid-container .row-span-4 {
  grid-row: span 4;
}

body.heroku > .cardContainer,
body.heroku > .topBar,
body.heroku > .sideBar,
body.heroku > .activityLog {
  margin-top: 142px;
}

.heroku-config code {
  display: grid;
  font-size: 13px;
  margin-left: 10px;
}
.heroku-config code.heroku-router-code {
  margin-left: 20px;
}
.heroku-config label {
  margin-left: 10px;
}
.heroku-config__appname-checkbox {
  margin-left: 10px;
}
.heroku-config__router-radios {
  margin-left: 10px;
}
.heroku-config__description {
  margin-left: 10px;
  margin-top: 10px;
}
.heroku-config__aggregate table {
  margin-top: 10px;
  display: block;
  max-height: 195px;
  overflow: auto;
}
.heroku-config__aggregate table td {
  width: 100%;
}

.heroku_add_row {
  position: relative;
  right: 25px;
  margin-top: 10px;
}

.heroku__onboarding--dash-link {
  color: #42494f;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 120px;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  overflow: hidden;
  padding: 15px;
  text-decoration: none;
}
.heroku__onboarding--dash-link img {
  width: 40px;
}
.heroku__onboarding--dash-link:hover {
  background-color: #f2f2f2;
  text-decoration: none;
}
.heroku__onboarding--vertical-line {
  border-left: 1px solid #cdcdcd;
  height: 112px;
  flex: 0 0 1px;
  margin-left: 12px;
  margin-right: 12px;
}
.heroku__onboarding-description {
  font-size: 12px;
  color: #76828b;
}
.heroku__onboarding-unloaded {
  height: 100%;
  width: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.heroku__onboarding-unloaded span {
  width: 48px;
  height: 48px;
}

.card-Sm-vert-top {
  padding-top: 40px;
  height: 50%;
  display: flex;
  align-items: flex-start;
  -webkit-align-items: flex-start;
}

.card-Sm-horiz-half-left {
  width: 0%;
  display: inline-block;
}
@media (min-width: 900px) {
  .card-Sm-horiz-half-left {
    width: 40%;
  }
}

.card-sm-as-link {
  text-decoration: none;
  cursor: pointer;
}
.card-sm-as-link.card-overview-counter:hover {
  -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

.card-Sm-horiz-half-right {
  width: 100%;
  display: inline-block;
  text-align: center;
}
@media (min-width: 900px) {
  .card-Sm-horiz-half-right {
    width: 55%;
    text-align: left;
  }
}

span.card-Sm-icon {
  display: none;
  text-decoration: none;
}
@media (min-width: 900px) {
  span.card-Sm-icon {
    display: inline-block;
    font-size: 35px;
    color: #76828b;
  }
}

.card-Sm-hint-wrapper {
  align-items: flex-start;
  -webkit-align-items: flex-start;
  padding-top: 45px;
  height: 50%;
  display: flex;
  font-size: 12px;
}

.card-Sm-hint {
  font-weight: normal;
  margin-bottom: 20px;
}

.card-Sm-counter-number {
  font-size: 26px;
  margin-bottom: 6px;
  color: #42494f;
}

.card-Sm-counter-message {
  color: #8C969E;
  font-size: 12px;
}

.card, .card-full, .card-SM, .card-S, .card-MS, .card-M {
  position: relative;
  height: 420px;
  border: 1px solid;
  border-color: #eff0f4 #e6e8ee #ced2dd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -khtml-border-radius: 4px;
  overflow: auto;
}
.card .traffic-iframe, .card-full .traffic-iframe, .card-SM .traffic-iframe, .card-S .traffic-iframe, .card-MS .traffic-iframe, .card-M .traffic-iframe {
  border: none;
  width: 100%;
  height: 100%;
  margin-bottom: 8%;
}
.card.homepage-traffic-card, .homepage-traffic-card.card-full, .homepage-traffic-card.card-SM, .homepage-traffic-card.card-S, .homepage-traffic-card.card-MS, .homepage-traffic-card.card-M {
  overflow: hidden;
  padding: 15px;
}
.card.homepage-traffic-card .traffic-spinner, .homepage-traffic-card.card-full .traffic-spinner, .homepage-traffic-card.card-SM .traffic-spinner, .homepage-traffic-card.card-S .traffic-spinner, .homepage-traffic-card.card-MS .traffic-spinner, .homepage-traffic-card.card-M .traffic-spinner {
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  z-index: 9999;
}

.home-traffic-container-click-jack {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.home-traffic-container-click-jack > div {
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.7);
  transition: opacity 0.1s linear;
}
.home-traffic-container-click-jack:hover {
  text-decoration: none;
}
.home-traffic-container-click-jack:hover > div {
  opacity: 1;
}

.homepage-traffic-container {
  height: 450px;
}

.card--content .traffic-card {
  overflow: hidden;
  height: 100%;
}
.card--content .traffic-card .traffic-spinner {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.card--content .traffic-card .traffic-iframe-container {
  height: calc(100% - 28px);
}

.card-width-100 {
  width: calc(100% - 10px);
}

.card-M {
  height: 500px;
}

.card-MS {
  height: 250px;
}

.card-S {
  height: 195px;
}

.card-SM {
  height: 180px;
}

.card-L {
  height: 700px;
}

.card-full {
  height: 100%;
}

.card-L-expandable {
  min-height: 600px;
  overflow: visible;
  height: auto;
}

.card--header {
  width: 100%;
  height: 44px;
  line-height: 44px;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
  -khtml-border-radius: 4px 4px 0 0;
  z-index: 2;
  box-shadow: 0 1px 3px -1px rgba(60, 63, 66, 0.06);
}
.card--header:after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  content: "";
  background-image: linear-gradient(to right, #fff, #e0e2e9, #fff);
}

.card--content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-top: 59px;
}
.card--content.expiry-rules-content {
  overflow-y: hidden;
}

.card--content-expandable {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 59px;
}

.prom-card-section {
  min-height: 450px;
  overflow: visible;
  height: auto;
}

.no-scroll-card {
  overflow-y: hidden;
}

.card-SM .card--content {
  padding-top: 15px;
}

.card--title {
  line-height: inherit;
}

.card--controls {
  display: flex;
  align-items: center;
  height: 100%;
}

a.card-hint,
.card--icon {
  cursor: pointer;
  color: #20B9F7;
}

.card--icon {
  height: 30px;
  width: 30px;
  line-height: 28px;
  border: 2px solid;
  border-color: transparent;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -khtml-border-radius: 50%;
  -webkit-transition: border-color 0.1s linear;
  -moz-transition: border-color 0.1s linear;
  -ms-transition: border-color 0.1s linear;
  -o-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
}
.card--icon:hover {
  border-color: #20B9F7;
}

a.card-hint:hover {
  text-decoration: none;
  border: none;
}

a.card-hint .card--icon {
  padding: 1px;
  display: inline-block;
  margin-top: -15px !important;
}

.card--icon-hint {
  clip: rect(0, 0, 0, 0);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0;
  position: absolute;
  right: 0;
  margin-top: 16px;
  width: 300px;
  border: 1px solid;
  border-color: #e0e2e9 #b6bbcc #8C969E;
  box-shadow: 0 3px 8px rgba(60, 63, 66, 0.16);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -khtml-border-radius: 4px;
  color: #8C969E;
  font-size: 15px;
  z-index: 9999999999;
  line-height: 1.5;
  cursor: auto;
  -webkit-transition: opacity 0.1s linear;
  -moz-transition: opacity 0.1s linear;
  -ms-transition: opacity 0.1s linear;
  -o-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
.card--icon-hint:after, .card--icon-hint:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  right: 16px;
}
.card--icon-hint:after {
  border-color: rgba(246, 108, 0, 0);
  border-bottom-color: #fff;
  border-width: 12px;
  margin-left: -12px;
}
.card--icon-hint:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #e0e2e9;
  border-width: 13px;
  margin-left: -13px;
}

.heroku-hint {
  bottom: 20%;
  right: 10%;
}

.heroku-hint::after, .heroku-hint::before {
  display: none;
}

.heroku-hint-router {
  right: 10%;
  top: 0%;
}

.heroku-hint-router::after, .heroku-hint-router::before {
  display: none;
}

.heroku_appname_submit {
  position: absolute;
  right: 30%;
  bottom: 1%;
}

.card-footer {
  margin: 20px;
}

.card-hint-trigger:hover .card--icon-hint {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 1;
  clip: auto;
}

.card--empty {
  text-align: center;
}
.card--empty [class*=icon-] {
  display: block;
  margin-bottom: 10px;
}

.border-adaptive {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -khtml-border-radius: 6px;
  border: 1px solid;
  border-color: #fbfbfc #f8f9fa #e0e2e9;
  padding: 15px;
}

.card-logo {
  height: 29px;
}

.account-settings-site-links {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  padding: 20px 10%;
}

.card-api-right-portion {
  height: 100%;
  width: 25%;
  float: right;
}
@media (min-width: 900px) {
  .card-api-right-portion {
    width: 44%;
  }
}

.card-api-left-portion {
  padding-top: 5px;
  height: 100%;
  width: 75%;
  float: left;
}
@media (min-width: 900px) {
  .card-api-left-portion {
    width: 65%;
  }
}

.upgrade-plan-div {
  width: 100%;
}

.upgrade-plan-btn {
  width: 100%;
}
@media (max-width: 500px) {
  .upgrade-plan-btn {
    display: none;
  }
}

.card-api-key-text-all {
  text-overflow: ellipsis;
  max-width: 85%;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 600px) {
  .card-api-key-text-all {
    max-width: 60%;
  }
}

.input-floating-button {
  position: absolute;
  top: 6px;
  right: 10px;
}

.card-api-key-input {
  font-size: 12px;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.card-api-key-input.input-Sm, .card-api-key-input.input-Sm-Px {
  padding-right: 60px;
  position: relative;
}

.mini-card, .mini-card-full-width {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 280px;
  background-color: #fff;
  padding: 5px 10px;
  margin: 0px;
  box-shadow: 0px 1px 2px 1px rgba(135, 135, 135, 0.5);
  overflow: visible;
}
.mini-card.expanded, .expanded.mini-card-full-width {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  width: 100%;
  min-height: 400px;
  max-height: 100%;
  display: block;
  overflow: auto;
}

.prom-mini-card {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 280px;
  background-color: #fff;
  padding: 5px 10px;
  margin: 0px;
  box-shadow: 0px 1px 2px 1px rgba(135, 135, 135, 0.5);
  overflow: visible;
}
.prom-mini-card.expanded {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  width: 100%;
  min-height: 400px;
  max-height: 100%;
  display: block;
  overflow: auto;
}
.prom-mini-card .alert-text {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.mini-card:not(:first-child), .mini-card-full-width:not(:first-child) {
  border-top: 1px solid #f2f3f6;
}

.prom-mini-card:not(:first-child) {
  border-top: 1px solid #f2f3f6;
}

.mini-card-controls-overlay {
  position: absolute;
  border-radius: 5px;
  display: none;
}

.prom-mini-card-controls-overlay {
  position: absolute;
  border-radius: 5px;
  display: none;
}

.mini-card:hover .mini-card-controls-overlay, .mini-card-full-width:hover .mini-card-controls-overlay {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  align-items: center;
  -webkit-align-items: center;
  width: 60%;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.22);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 0.22)), color-stop(15%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgb(255, 255, 255)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
}

.prom-mini-card:hover .prom-mini-card-controls-overlay {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: space-evenly;
  -webkit-justify-content: space-evenly;
  align-items: center;
  -webkit-align-items: center;
  width: 40%;
  top: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.22);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 255, 255, 0.22)), color-stop(15%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgb(255, 255, 255)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
  background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.85) 15%, rgb(255, 255, 255) 100%);
}

.cardContainer.expanded .addons-heading {
  display: none;
}

.mini-card-container {
  min-height: 30px;
  position: relative;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  border-radius: 4px;
}

/* Start of grid screens screens */
@media (min-width: 900px) {
  .mini-card-container {
    margin-top: 0px;
  }
  .mini-card:not(.expanded), .mini-card-full-width:not(.expanded) {
    max-width: 45%;
    flex: 1 1 48%;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    background-color: #fff;
    padding: 10px;
    margin: 10px 5px;
    border-radius: 3px;
    border-top: none;
  }
  .prom-mini-card:not(.expanded) {
    max-width: 45%;
    flex: 1 1 48%;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    background-color: #fff;
    padding: 10px;
    margin: 10px 5px;
    border-radius: 3px;
    border-top: none;
  }
  .prom-mini-card:not(.expanded) {
    max-width: 45%;
    flex: 1 1 48%;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    background-color: #fff;
    padding: 10px;
    margin: 10px 5px;
    border-radius: 3px;
    border-top: none;
  }
}
/* Large screens */
@media (min-width: 1120px) {
  .mini-card:not(.expanded), .mini-card-full-width:not(.expanded) {
    max-width: 30%;
    flex: 1 1 32%;
  }
  .prom-mini-card:not(.expanded) {
    max-width: 30%;
    flex: 1 1 32%;
  }
}
.mini-card .card--content, .mini-card-full-width .card--content {
  display: none;
}
.mini-card.expanded .card--content, .expanded.mini-card-full-width .card--content {
  display: block;
}
.mini-card.expanded .card--content p, .expanded.mini-card-full-width .card--content p {
  line-height: 1.2;
}
.mini-card.expanded .mini-card-contents, .expanded.mini-card-full-width .mini-card-contents {
  display: none;
}
.mini-card .mini-card-contents, .mini-card-full-width .mini-card-contents {
  height: 60px;
}
.mini-card.expanded .mini-card-contents, .expanded.mini-card-full-width .mini-card-contents {
  display: none;
}

.prom-mini-card .card--content {
  display: none;
}
.prom-mini-card.expanded .card--content {
  display: block;
}
.prom-mini-card.expanded .card--content p {
  line-height: 1.2;
}
.prom-mini-card.expanded .mini-card-contents {
  display: none;
}
.prom-mini-card .mini-card-contents {
  height: 60px;
}
.prom-mini-card.expanded .mini-card-contents {
  display: none;
}

.mini-card-description {
  font-size: 12px;
  clear: left;
  padding-top: 8px;
}

.alert-card .mini-card-contents {
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.mini-card .card--header, .mini-card-full-width .card--header {
  display: none;
}
.mini-card.expanded .card--header, .expanded.mini-card-full-width .card--header {
  display: block;
}

.prom-mini-card .card--header {
  display: none;
}
.prom-mini-card.expanded .card--header {
  display: block;
}

.card--title img {
  height: 18px;
  width: auto;
  padding-bottom: 3px;
  margin-right: 8px;
  margin-left: 4px;
}

.mini-card-contents .card--title img {
  padding-top: 2px;
  padding-bottom: 0px;
}

.mini-card.addon-card:not(.expanded), .addon-card.mini-card-full-width:not(.expanded) {
  padding: 12px;
  cursor: pointer;
}
.mini-card.addon-card:not(.expanded):not(.expanded):hover, .addon-card.mini-card-full-width:not(.expanded):not(.expanded):hover {
  -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

.prom-mini-card.addon-card:not(.expanded) {
  cursor: pointer;
}
.prom-mini-card.addon-card:not(.expanded):not(.expanded):hover {
  -webkit-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

.card-top-right-float-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #b6bbcc;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.addon-card:hover .card-top-right-float-icon {
  font-size: 20px;
  color: #20B9F7;
  text-decoration: none;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

.mini-card-expand-overlay {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.expanded .mini-card-expand-overlay {
  display: none;
}

a.vam {
  vertical-align: middle;
}

.width-80 {
  width: 80%;
}

.mini-card-full-width {
  min-width: 100%;
}

.addon-card-row {
  height: 100%;
  width: 100%;
  padding: 2px;
  display: flex;
}

.addon-card-column {
  overflow: visible;
  min-width: 70px;
  flex-basis: min-content;
}

.addon-card-column img {
  padding: 6px;
  height: 100%;
}

.addon-card-icon {
  height: 100%;
  text-align: center;
  font-size: 38px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.hgagent-link span.addon-card-icon {
  color: #f66c01;
}

/* Main page styles */
div.admin-search {
  width: 100%;
  background: #fff;
  padding: 0px 20px 20px 20px;
  /* Pager icon styles */
  /* Switches section styles */
  /* Tablesorter styles */
}
div.admin-search .table-container {
  position: relative;
}
div.admin-search div.section {
  background-color: #f2f2f2;
  margin: 10px 0px;
  padding: 10px;
}
div.admin-search div.section h4 {
  margin-top: 0px;
}
div.admin-search div.section h4 a {
  font-size: 13px;
  margin-left: 5px;
  display: none;
}
div.admin-search div.section h4 a:hover {
  cursor: pointer;
  text-decoration: none;
}
div.admin-search div.section.minimised {
  height: 40px;
  overflow: hidden;
}
div.admin-search div.section.minimised h6, div.admin-search div.section.minimised span {
  display: none;
}
div.admin-search div.section div h3 {
  margin-top: 10px;
}
div.admin-search .pager .pagedisplay {
  margin: 0px 3px;
}
div.admin-search .pager i {
  padding: 3px;
}
div.admin-search .pager i:hover {
  cursor: pointer;
}
div.admin-search .pager i.disabled {
  color: #aaa;
}
div.admin-search .pager i.disabled:hover {
  cursor: default;
}
div.admin-search .pager, div.admin-search .switches {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
div.admin-search #switches-selected {
  display: none;
  margin-top: 10px;
}
div.admin-search .switches-toggle {
  position: absolute;
  top: 0px;
  right: 0px;
}
div.admin-search .switches {
  min-height: 60px;
}
div.admin-search .switches h6 {
  margin: 3px 0px 5px 0px;
}
div.admin-search .switches div.heading {
  font-size: 18px;
  margin-bottom: 10px;
}
div.admin-search .switches span.sub-heading {
  font-size: 11px;
}
div.admin-search .switches > span {
  background: #dfdfdf;
  padding: 7px 9px;
  display: inline-block;
  margin: 0 5px 5px 0;
  border-radius: 3px;
}
div.admin-search .switches > span:hover {
  background: #cfcfcf;
  cursor: pointer;
}
div.admin-search .switches > span.disabled {
  color: #999;
  background: inherit;
}
div.admin-search .switches > span.disabled:hover {
  background: inherit;
}
div.admin-search .switches span span {
  padding: 5px 6px;
  font-weight: bold;
}
div.admin-search .switches span span:first-child:hover {
  cursor: pointer;
  color: red;
}
div.admin-search .tablesorter {
  min-height: 120px;
}
div.admin-search .tablesorter .tablesorter-errorRow {
  text-align: center;
}
div.admin-search .tablesorter td {
  position: relative;
  /* Switches table cells */
}
div.admin-search .tablesorter td:nth-child(7) {
  font-size: 13px;
  font-family: "Courier New", Courier, monospace;
}
div.admin-search .tablesorter td:nth-child(7) div {
  overflow: auto;
  text-overflow: initial;
}
div.admin-search .tablesorter td:hover a.switches-link {
  display: inline-block;
}
div.admin-search .tablesorter td a {
  font-weight: initial;
}
div.admin-search .tablesorter td a.switches-link {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  padding: 5px;
  top: 2px;
  right: 2px;
  background-color: white;
  font-size: 12px;
  display: none;
}
div.admin-search .tablesorter td a.switches-link i {
  margin: 0 3px;
}
div.admin-search .tablesorter td a.impersonate-link {
  float: right;
  font-size: 14px;
}
div.admin-search .tablesorter td span.invited-by, div.admin-search .tablesorter td span.real-email {
  font-size: 12px;
  font-style: italic;
  display: block;
  line-height: 1.2;
}
div.admin-search .tablesorter td span.invited-by span:hover, div.admin-search .tablesorter td span.real-email span:hover {
  cursor: pointer;
  text-decoration: underline;
}
div.admin-search .tablesorter td span.plan-name:hover {
  cursor: pointer;
  text-decoration: underline;
}
div.admin-search select.pagesize {
  background: #fff;
  padding: 1px;
  position: absolute;
  right: 5px;
}
div.admin-search #loading {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  position: absolute;
  background-image: linear-gradient(transparent 38px, rgba(255, 255, 255, 0.8) 38px);
  width: 100%;
  height: 100%;
}
div.admin-search #loading .text {
  max-width: 100px;
  font-size: 16px;
}
div.admin-search #loading .text img {
  margin: 5px;
}

/* Tablesorter icon styles */
.tablesorter-default .tablesorter-header.sorter-true {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==);
  background-position: center right;
  background-repeat: no-repeat;
  cursor: pointer;
  white-space: normal;
  padding: 4px 20px 4px 4px;
}

.tablesorter-default thead .tablesorter-headerAsc.sorter-true {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
  border-bottom: #000 2px solid;
}

.tablesorter-default thead .tablesorter-headerDesc.sorter-true {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
  border-bottom: #000 2px solid;
}

.notificationPanel {
  position: relative;
  margin-bottom: 10px;
  background: #35373a;
  color: #e0e2e9;
}
.notificationPanel span, .notificationPanel p {
  font-size: 14px;
  line-height: 1.5;
}
.notificationPanel .notificationPanel--heading {
  display: block;
  font-weight: bold;
  color: #e0e2e9;
}

.user-notification {
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -khtml-border-radius: 4px;
  margin-bottom: 10px;
  background: white;
  color: #8C969E;
}
.user-notification span {
  font-size: 16px;
  line-height: 26px;
}
.user-notification > a {
  color: #20B9F7;
}
.user-notification .icon {
  font-weight: bold;
  position: absolute;
  left: 15px;
  top: 10px;
}
.user-notification .icon i {
  vertical-align: text-bottom;
}
.user-notification.critical {
  background: #ec5353;
  padding-left: 115px;
  color: white;
}
.user-notification.critical i:before {
  content: "\e624";
}
.user-notification.critical a {
  color: white;
}
.user-notification.warning {
  background: #ff882a;
  color: white;
}
.user-notification.warning a {
  color: white;
}

.notificationPanel--title {
  font-size: 34px;
  color: #20B9F7;
}

.notificationPanel--icon {
  display: block;
  margin-bottom: 5px;
  color: #20B9F7;
  line-height: 1;
}
.notificationPanel--icon:before {
  font-size: 60px;
}
.notificationPanel--icon.danger {
  color: #ec5353;
}
.notificationPanel--icon.warning {
  color: #ebb32d;
}

#enableAutoResolveSelectDiv {
  display: none;
}

#opsgenieRegionSelectDiv {
  display: none;
}

.onboarding-wrapper {
  height: 100vh;
  align-items: center;
  overflow: auto;
}
.onboarding-wrapper .onboard-h4 {
  color: #f66c00;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.onboarding-wrapper .onboard-h2 {
  font-size: 30px;
  letter-spacing: 0.2px;
  font-weight: 400;
  line-height: 30px;
  padding-bottom: 10px;
}

.modal-onboarding-steps {
  width: 750px;
  height: fit-content;
  max-height: unset;
  top: auto;
  overflow: auto;
}
.modal-onboarding-steps .modal--close {
  background-color: #f2f3f6;
  border-radius: 3px;
  padding: 5px;
  color: #c3c9cd;
}
.modal-onboarding-steps .modal--close:hover {
  background-color: #c3c9cd;
  color: #f2f3f6;
}
.modal-onboarding-steps .onbDetails-active {
  display: block;
}
.modal-onboarding-steps .modal--header,
.modal-onboarding-steps .modal--body,
.modal-onboarding-steps .modal--footer {
  padding: 40px 70px;
  border-bottom: none;
}
.modal-onboarding-steps .modal--header {
  padding-right: 90px;
  padding-bottom: 0px;
}
.modal-onboarding-steps .modal--body {
  padding-bottom: 0px;
  margin-bottom: 0;
  margin-top: 175px;
  padding-top: 0px;
  min-height: unset;
  max-height: unset;
}
.modal-onboarding-steps h4,
.modal-onboarding-steps h3,
.modal-onboarding-steps span,
.modal-onboarding-steps p {
  line-height: 22px;
}

.onboarding-buttons-container {
  display: flex;
  justify-content: end;
  justify-content: space-between;
}

.onboarding-steps-desc {
  position: relative;
  margin-top: 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.onboarding-steps-desc .onb-step-Line {
  position: absolute;
  z-index: -1;
  top: 12px;
  width: 80%;
  border-top: 1px solid #c3c9cd;
}
.onboarding-steps-desc .onboarding-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.onboarding-steps-desc .onboarding-steps .onboard-step {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.onboarding-steps-desc .onboarding-steps .onbSteps {
  background-color: #fff;
  outline: #fff solid 20px;
  width: 24px;
  height: 24px;
  color: #c3c9cd;
  border-radius: 5px;
  border: 1px solid #c3c9cd;
  color: #c3c9cd;
  cursor: pointer;
}
.onboarding-steps-desc .onboarding-steps .step-active {
  background-color: #8C969E;
  border: 1px solid #8C969E;
  color: #fff;
  font-weight: 600;
}
.onboarding-steps-desc .onboarding-steps .step-visited:not(.step-active) {
  background-color: #c3c9cd;
  border: 1px solid #c3c9cd;
  color: #fff;
  font-weight: 600;
}
.onboarding-steps-desc .onboarding-steps .onbDescs {
  margin-top: 6px;
  color: #c3c9cd;
  font-size: 14px;
}
.onboarding-steps-desc .onboarding-steps .desc-active {
  font-weight: 600;
  color: #3c3f42;
}

.onboarding-details {
  border: 1px solid #c3c9cd;
  border-radius: 3px;
  padding: 25px;
  margin-top: 20px;
  display: none;
}
.onboarding-details h3 {
  font-size: 23px;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}
.onboarding-details .emoji {
  padding-right: 10px;
}
.onboarding-details-arrow {
  color: #f66c00;
  font-size: 14px;
}
.onboarding-details-arrow::after {
  display: inline-block;
  padding-left: 5px;
  font-size: 20px;
  content: "→";
  -webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  -ms-transition: transform 0.2s ease-in-out;
  -o-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}
.onboarding-details-arrow:hover {
  text-decoration: none;
}
.onboarding-details-arrow:hover::after {
  -webkit-transform: translateX(6px);
  -moz-transform: translateX(6px);
  -ms-transform: translateX(6px);
  -o-transform: translateX(6px);
  transform: translateX(6px);
}
.onboarding-details .copyable {
  margin-top: 15px;
  display: flex;
  flex-direction: row;
  border: 1px solid #c3c9cd;
  border-radius: 3px;
  background-color: #f2f3f6;
  overflow: hidden;
  width: 100%;
  justify-content: space-between;
}
.onboarding-details .copyable button {
  border: none;
  border-left: 1px solid #c3c9cd;
  height: 100%;
  padding: 5px 8px;
  background-image: linear-gradient(0deg, #e0e0e0 0%, #ffffff 100%);
}
.onboarding-details .copyable .hidden,
.onboarding-details .copyable textarea {
  position: fixed;
  bottom: 0;
  right: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
}
.onboarding-details .copyable-code {
  background-color: #222222;
  color: #fff;
  padding: 25px;
  border-radius: 3px;
  margin-top: 15px;
}
.onboarding-details .copyable-code .languages {
  display: flex;
  flex-direction: row;
  padding: 0;
  border: 1px solid #8C969E;
  border-radius: 3px;
  font-size: 14px;
  width: fit-content;
}
.onboarding-details .copyable-code .languages .lang {
  padding: 5px 10px;
  height: 100%;
}
.onboarding-details .copyable-code .languages .lang:hover {
  background-color: #3c3f42;
  cursor: pointer;
}
.onboarding-details .copyable-code .languages .lang:not(:last-child) {
  border-right: 1px solid #8C969E;
}
.onboarding-details .copyable-code .languages .active {
  background-image: linear-gradient(0deg, #e0e0e0 0%, #ffffff 100%);
  color: #3c3f42;
}
.onboarding-details .copyable-code .languages .active:hover {
  cursor: unset;
}
.onboarding-details .copyable-code .copyOnboardingButton {
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 3px;
  font-weight: 600;
}
.onboarding-details .copyable-code .codeExamples {
  min-width: 100%;
  width: fit-content;
  padding: 10px;
  border: 1px solid #8C969E;
  border-radius: 3px;
  margin: 15px 0;
  background-color: #000000;
}
.onboarding-details .copyable-code .codeExamples code {
  font-size: 10px;
}
.onboarding-details .copyable-code .codeExamples .active {
  display: inline-block;
}

.onboarding-columns {
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
}
.onboarding-columns .onboarding-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 48%;
  border: 1px solid #c3c9cd;
  border-radius: 3px;
  padding: 15px;
}
.onboarding-columns .onboarding-column .desc {
  padding-bottom: 10px;
}
.onboarding-columns .onboarding-column h4 {
  margin-top: 0;
  padding-top: 0;
  font-size: 15px;
  letter-spacing: 0.6px;
}
.onboarding-columns .onboarding-column p {
  font-size: 14px;
  line-height: initial;
}

.preventScroll {
  overflow: hidden;
}

.preventScrollX {
  overflow-x: hidden;
}
.preventScrollX body {
  overflow-x: hidden;
}

.card .verticallyCenter, .card-M .verticallyCenter, .card-MS .verticallyCenter, .card-S .verticallyCenter, .card-SM .verticallyCenter, .card-full .verticallyCenter {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.positionBottom {
  position: relative;
  bottom: -90%;
}

.buttonTopNav {
  margin-top: -5px;
}

.stripeButtonForm {
  margin-left: 12.5%;
}

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

.alert-controls-overlay .view-alert, .alert-controls-overlay .dropdown, .alert-controls-overlay .un-pause, .alert-controls-overlay .edit-alert, .alert-controls-overlay .delete-alert {
  position: absolute;
  top: 40%;
}
.alert-controls-overlay .view-alert {
  left: 10%;
}
.alert-controls-overlay .dropdown, .alert-controls-overlay .un-pause {
  left: 33%;
}
.alert-controls-overlay .dropdown {
  top: 37%;
}
.alert-controls-overlay .edit-alert {
  right: 33%;
}
.alert-controls-overlay .delete-alert {
  right: 10%;
}

.expiry-btns {
  position: relative;
  bottom: 20px;
  height: 35px;
}

.landing-fs--title {
  font-size: 30px;
  line-height: 1.2;
}
@media (min-width: 680px) {
  .landing-fs--title {
    font-size: 40px;
  }
}

.landing-fs--xxl, .sales-heading {
  font-size: 36px;
  line-height: 1.2;
}
@media (min-width: 1180px) {
  .landing-fs--xxl, .sales-heading {
    font-size: 46px;
    line-height: 1.2;
  }
}

.landing-fs--xl {
  font-size: 26px;
  line-height: 1.05;
}
@media (min-width: 680px) {
  .landing-fs--xl {
    font-size: 36px;
    line-height: 1.2;
  }
}
@media (min-width: 1180px) {
  .landing-fs--xl {
    font-size: 46px;
    line-height: 1.2;
  }
}

.landing-fs--Lg {
  font-size: 15px;
  line-height: 1.15;
}
@media (min-width: 680px) {
  .landing-fs--Lg {
    font-size: 21px;
    line-height: 1.2;
  }
}
@media (min-width: 1180px) {
  .landing-fs--Lg {
    font-size: 21px;
    line-height: 1.2;
  }
}

.landing-fs--h {
  font-size: 24px;
  line-height: 1.15;
  font-weight: normal;
}
@media (min-width: 680px) {
  .landing-fs--h {
    font-weight: normal;
    font-size: 36px;
    line-height: 1.15;
  }
}

h1.landing-fs--h {
  font-weight: bold;
}

.landing-fs--mh, .services-landing .section-heading {
  font-size: 20px;
  line-height: 1.15;
  font-weight: normal;
}
@media (min-width: 680px) {
  .landing-fs--mh, .services-landing .section-heading {
    font-size: 30px;
    line-height: 1.15;
  }
}

.landing-fs--sh {
  font-size: 13px;
  line-height: 1;
  font-family: "source code pro", Menlo, Monaco, Consolas, "Courier New", monospace;
}
@media (min-width: 680px) {
  .landing-fs--sh {
    font-size: 12px;
  }
}

.landing-fs--s {
  font-size: 14px;
  line-height: 1.45;
}
@media (min-width: 680px) {
  .landing-fs--s {
    font-size: 18px;
    line-height: 1.45;
  }
}

.landing-fs--xs {
  font-size: 13px;
  line-height: 1.45;
}
@media (min-width: 680px) {
  .landing-fs--xs {
    font-size: 14px;
    line-height: 1.4;
  }
}

.landing-fs--xxs {
  font-size: 12px;
  line-height: 1;
}

.landing-pad {
  padding: 40px 0;
}
@media (min-width: 680px) {
  .landing-pad {
    padding: 70px 0;
  }
}

.landing-top {
  width: 100%;
  padding: 60px 0;
}
@media (min-width: 680px) {
  .landing-top {
    padding-top: 80px 0;
  }
}

.landing-pad-heading, .services-landing .section-heading {
  padding: 10px 0;
}
@media (min-width: 680px) {
  .landing-pad-heading, .services-landing .section-heading {
    padding: 20px 0;
  }
}

.landing-pad-heading--big {
  padding: 20px 0;
}
@media (min-width: 680px) {
  .landing-pad-heading--big {
    padding: 40px 0;
  }
}

.landing-pad-faded {
  color: #b0b0b0;
}

.landing-pad-img {
  width: 35%;
  padding-bottom: 35px;
}
@media (min-width: 680px) {
  .landing-pad-img {
    padding-bottom: 70px;
  }
}

.signup-container {
  font-family: "Helvetica Neue";
}

.hero,
.hero-s {
  overflow: hidden;
  height: 700px;
}
@media (min-width: 680px) {
  .hero,
  .hero-s {
    height: auto;
  }
}
.hero h1,
.hero-s h1 {
  margin-bottom: 5px;
}
@media (min-width: 680px) {
  .hero h1,
  .hero-s h1 {
    margin-bottom: 0;
  }
}
.hero h2,
.hero-s h2 {
  margin-bottom: 15px;
  font-weight: normal;
}
@media (min-width: 680px) {
  .hero h2,
  .hero-s h2 {
    margin-bottom: 30px;
  }
}
.hero .pageWrap,
.hero-s .pageWrap {
  position: relative;
  height: 100%;
}

.landing-top.pageWrap {
  display: block;
}

.landing-top-image-wrapper {
  width: 55%;
  float: left;
}

.landing-top-image {
  width: 90%;
  height: auto;
}

.marketing-layout .landing-top {
  position: relative;
}

.landing-top > .side-by-side, .landing-top > .description, .landing-top > .aws-services-icon {
  width: 100%;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  margin-bottom: 40px;
}

.explainer-wrapper {
  float: right;
  width: 50%;
}

.feature-grid {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
}

.single-feature {
  margin-top: 40px;
}
@media (min-width: 680px) {
  .single-feature {
    max-width: 40%;
  }
}

.team-feature-section .single-feature,
.alerting-feature-section .single-feature {
  margin-top: 40px;
}
@media (min-width: 680px) {
  .team-feature-section .single-feature,
  .alerting-feature-section .single-feature {
    max-width: 30%;
  }
}

.feature-metrics .single-feature-heading-icon {
  color: #3498db;
}

.feature-alerts .single-feature-heading-icon {
  color: #e74c3c;
}

.feature-team .single-feature-heading-icon {
  color: #8e44ad;
}

.feature-graphing .single-feature-heading-icon {
  color: #27ae60;
}

.single-feature-heading {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  padding-bottom: 10px;
}

.single-feature-heading-icon {
  font-size: 30px;
}

.single-feature-heading-text {
  font-weight: normal;
}

.feature-paragraph {
  font-size: 14px;
  line-height: 180%;
}

.hero-s {
  height: 450px;
}

a.interlink-top {
  color: #46ff9d;
}

ul.il li {
  display: inline-block;
}

.landing-graph {
  position: absolute;
  bottom: -370px;
}
@media (min-width: 680px) {
  .landing-graph {
    display: none;
  }
}
.landing-graph.is-visible {
  bottom: 95px;
}

.landing-graph-1 {
  left: 50%;
  margin-left: -168px;
  z-index: 1;
  -webkit-transition: bottom 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: bottom 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: bottom 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: bottom 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: bottom 0.9s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.landing-graph-2 {
  display: none;
  left: 0;
  -webkit-transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.landing-graph-3 {
  display: none;
  right: 0;
  -webkit-transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: bottom 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.cta p {
  margin: 0 0 20px 0;
}
@media (min-width: 680px) {
  .cta p {
    margin: 16px 15px 0 0;
  }
}
@media (min-width: 680px) {
  .cta p,
  .cta a {
    display: inline-block;
  }
}

.note {
  display: block;
  font-size: 13px;
  margin-top: 7px;
}

img {
  max-width: 100%;
}

.ribbon {
  border: 0;
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, #fff, #e0e2e9, #fff);
}

@media (min-width: 680px) {
  .zag {
    float: right;
  }
}

.partner {
  min-height: 175px;
}
.partner a:hover {
  text-decoration: none;
}
.partner div {
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  -khtml-border-radius: 5px 5px 5px 5px;
  padding: 30px;
  font-weight: normal;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -ms-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}
@media (min-width: 680px) {
  .partner div:hover {
    -webkit-transform: scale(1.03);
  }
}
.partner img {
  vertical-align: middle;
  margin: 10px 0 25px 0;
}

.code-agnostic {
  position: relative;
  background-image: url("../../assets/img/code.png");
  background-repeat: no-repeat;
}
.code-agnostic > div:first-child {
  position: absolute;
  top: 0;
  left: 0;
  background: -moz-linear-gradient(left, transparent 1%, #fdf6e3 50%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(1%, transparent), color-stop(50%, #fdf6e3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, transparent 1%, #fdf6e3 50%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, transparent 1%, #fdf6e3 50%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, transparent 1%, #fdf6e3 50%); /* IE10+ */
  background: linear-gradient(to right, transparent 1%, #fdf6e3 50%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="transparent", endColorstr="#fdf6e3",GradientType=1 ); /* IE6-9 */
  height: 100%;
  width: 100%;
  z-index: 1;
}

.zIndex-10 {
  position: relative;
  z-index: 10;
}

.testimonials-simple img {
  float: left;
  width: 80px;
  height: 80px;
  padding: 5px;
  border: 1px solid #dbdbdf;
  border-radius: 4px;
  margin-right: 15px;
}
.testimonials-simple p {
  margin-bottom: 5px;
}
.testimonials-simple a.tweetlink,
.testimonials-simple a.tweetlink:visited {
  display: block;
}

.testimonial-big img {
  text-align: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
}
.testimonial-big p {
  margin-bottom: 5px;
}
blockquote {
  margin: 0;
}

.codeAgnostic-text {
  box-shadow: 0 0 100px 100px #fdf6e3;
}

@media (min-width: 1020px) {
  .feature-heading {
    padding-top: 80px;
  }
}

.landingFooter div {
  font-size: 14px;
}
.landingFooter p {
  line-height: 1.5;
}
.landingFooter a,
.landingFooter a:visited {
  display: inline;
  margin-bottom: 20px;
  margin-left: 10px;
}
@media (min-width: 680px) {
  .landingFooter a,
  .landingFooter a:visited {
    display: block;
    margin-left: 0px;
  }
}

.testimonial-bubble {
  border: 2px solid #20B9F7;
  padding: 30px;
  -webkit-border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  -khtml-border-radius: 5px 5px 5px 5px;
  color: #20B9F7;
  min-height: 175px;
}

.landingFeatures h3,
.landingFeatures p {
  padding-left: 104px;
}

.pricePoints {
  width: 100%;
  -webkit-transition: all 0.35s cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 0.35s cubic-bezier(1, 0, 0, 1);
  -ms-transition: all 0.35s cubic-bezier(1, 0, 0, 1);
  -o-transition: all 0.35s cubic-bezier(1, 0, 0, 1);
  transition: all 0.35s cubic-bezier(1, 0, 0, 1);
  text-align: center;
}
@media (min-width: 680px) {
  .pricePoints {
    width: 2000px;
  }
}

.landingPricing-center {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.landingPricing-container {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.landingPricing-pricepoint {
  border-left: 2px solid #fff;
  max-width: 300px;
  min-width: 200px;
  background: #f2f3f6;
  padding: 20px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border-radius: 4px;
}
@media (min-width: 680px) {
  .landingPricing-pricepoint {
    float: left;
  }
}

@media (min-width: 680px) {
  .panel-large {
    float: left;
    width: 33.3333%;
  }
}

@media (min-width: 680px) {
  .panel-small {
    float: left;
    width: 25%;
  }
}

.monthlyPriceGroup {
  margin: 10px 0;
  color: #20B9F7;
}

.pricePoints-pane {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 0;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
}
.pricePoints-pane.is-active {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$value);
  opacity: 1;
}
.pricePoints-pane:not(.is-active) {
  display: none;
}
@media (min-width: 680px) {
  .pricePoints-pane:not(.is-active) {
    display: block;
  }
}
@media (min-width: 680px) {
  .pricePoints-pane {
    float: left;
  }
}

.landingPricing-pricecontainer {
  padding: 10px 0;
  margin: 20px 0 10px 0;
  border: 1px solid;
  border-left: none;
  border-right: none;
  color: #98a0b7;
}

.landingPricing-price {
  font-size: 25px;
  font-weight: 700;
  color: #20B9F7;
}

.landingPricing-contact {
  font-size: 25px;
  font-weight: 700;
  color: #20B9F7;
}
.landingPricing-contact a {
  color: #20B9F7;
}

.landingPricing-frequency {
  font-size: 20px;
  color: #20B9F7;
}

.landingPricing-features {
  height: 200px;
  list-style: none;
  margin: 0;
}
.landingPricing-features li {
  padding: 10px 0;
}

.landingPricing-name {
  font-weight: 700;
  font-size: 24px;
  white-space: nowrap;
  color: #98a0b7;
}

.landingPricing-description {
  font-size: 20px;
  height: 80px;
  margin: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid;
  border-bottom: 1px solid;
  color: #98a0b7;
}

.landingPricing-button,
.landingPricing-button:visited {
  border: 2px solid #b6bbcc;
  padding: 18px 0;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  font-size: 15px;
  margin: 10px 0 0 0;
  border-radius: 3px;
  outline: none;
  font-weight: 700;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
.landingPricing-button:hover,
.landingPricing-button:visited:hover {
  text-decoration: none;
  border-color: #20B9F7;
}

.landingPricing-button.disabled,
.pricepoint-recommended .landingPricing-button.disabled {
  pointer-events: none;
  cursor: default;
  background-color: #f2f3f6 !important;
  color: #3c3f42 !important;
  border-color: #3c3f42 !important;
}

.stripeAnnual {
  text-align: center;
  background: #31d597;
}

.landingPricing-pricepoint.pricepoint-recommended {
  margin-top: -3px;
  border: 3px solid #28c489;
  background: #fff;
  border-radius: 4px;
}
.landingPricing-pricepoint.pricepoint-recommended .landingPricing-button,
.landingPricing-pricepoint.pricepoint-recommended .landingPricing-button:visited {
  background: #28c489;
  border-color: #28c489;
  color: #fff;
}
.landingPricing-pricepoint.pricepoint-recommended .landingPricing-button:hover,
.landingPricing-pricepoint.pricepoint-recommended .landingPricing-button:visited:hover {
  background: #2bd192;
  border-color: #2bd192;
}
.landingPricing-pricepoint.pricepoint-recommended .landingPricing-price,
.landingPricing-pricepoint.pricepoint-recommended .landingPricing-frequency {
  color: #28c489;
}
.landingPricing-pricepoint.landingPricing-pricepoint-s {
  box-sizing: initial;
  margin: 10px 2px 0px;
  padding: 10px 0px;
}

.landingPricing-details {
  margin: 20px 10px 10px 10px;
}

.landingPricing-plan {
  padding: 0px 10px;
}

.landingPricing-arrow {
  display: none;
  position: absolute;
  font-size: 50px;
  top: 296px;
  cursor: pointer;
  padding: 20px;
  color: #20B9F7;
  z-index: 999999;
}
@media (min-width: 680px) {
  .landingPricing-arrow {
    display: block;
  }
}

.landingPricing-arrow--left {
  left: -100px;
}

.landingPricing-arrow--right {
  right: -100px;
}

.bubble-author img {
  float: left;
  padding: 5px;
  border: 1px solid #dbdbdf;
  border-radius: 4px;
  margin: 15px 15px 0 0;
}
.bubble-author span {
  float: left;
  line-height: 115px;
}

.testimonial-author img {
  padding: 5px;
  border: 1px solid #dbdbdf;
  border-radius: 4px;
  margin: 15px 15px 0 0;
  vertical-align: middle;
}

a.socialIcon {
  font-size: 20px;
  color: #b6bbcc;
  margin-left: 24px;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
a.socialIcon:hover {
  text-decoration: none;
  color: #20B9F7;
}

.for-landing-top-bar {
  display: none;
}
.for-landing-top-bar.active {
  display: inline-block;
  float: left;
}

.landing-page-topbar.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #3c3f42;
  padding: 20px;
  color: white;
  z-index: 999999999;
}
.landing-page-topbar.active .site-nav-links {
  display: none;
}

.landing-top-links, .loginDropdown, .site-nav-links {
  color: #f2f3f6;
  z-index: 9;
}
.landing-top-links span, .loginDropdown span, .site-nav-links span {
  color: #e0e2e9;
  font-weight: 600;
  cursor: pointer;
}
.landing-top-links span:hover, .loginDropdown span:hover, .site-nav-links span:hover {
  color: #fff;
}
.landing-top-links .input-default, .loginDropdown .input-default, .site-nav-links .input-default, .landing-top-links .input-Sm, .loginDropdown .input-Sm, .site-nav-links .input-Sm, .landing-top-links .input-email, .loginDropdown .input-email, .site-nav-links .input-email, .landing-top-links .input-Sm-Px, .loginDropdown .input-Sm-Px, .site-nav-links .input-Sm-Px, .landing-top-links .input-expandable, .loginDropdown .input-expandable, .site-nav-links .input-expandable, .landing-top-links .input-Lrg-Perc, .loginDropdown .input-Lrg-Perc, .site-nav-links .input-Lrg-Perc {
  margin-bottom: 5px;
}
.landing-top-links .dropdown--menu, .loginDropdown .dropdown--menu, .site-nav-links .dropdown--menu {
  width: 350px;
  padding: 18px;
}
.landing-top-links a:not(.btn), .loginDropdown a:not(.btn), .site-nav-links a:not(.btn) {
  color: #f2f3f6;
  margin: 5px 0 0 0;
}
.landing-top-links .aInner, .loginDropdown .aInner, .site-nav-links .aInner {
  color: #8C969E;
}
.landing-top-links .dd, .loginDropdown .dd, .site-nav-links .dd {
  margin-left: 30px;
}

.site-nav-links {
  position: absolute;
  top: 30px;
  left: 30px;
  text-align: left;
}

.login-menu {
  top: 90px;
}

.loginDropdown {
  top: 30px;
  right: 30px;
}

.forgotLink {
  float: left;
  margin-top: 12px;
}

.greyDivider {
  margin: 20px 0px 5px;
  width: 100%;
  border: 0;
  height: 0;
  border-top: 1px solid #cccccc;
}

.headerPlain {
  padding: 5px 0 0 0;
}
@media (min-width: 680px) {
  .headerPlain {
    padding: 10px 0 4px 0;
  }
}
.headerPlain nav {
  padding-top: 20px;
}
@media (min-width: 680px) {
  .headerPlain nav {
    padding-top: 26px;
  }
}
.headerPlain nav a,
.headerPlain nav a:visited {
  margin-left: 20px;
  color: #b6bbcc;
  font-size: 14px;
}
.headerPlain nav a:hover,
.headerPlain nav a:visited:hover {
  text-decoration: none;
  color: #20B9F7;
}
@media (min-width: 680px) {
  .headerPlain nav a,
  .headerPlain nav a:visited {
    margin-left: 40px;
  }
}

.landingLogo {
  background-image: url("../../assets/img/hg-logo.png");
  background-repeat: no-repeat;
  float: left;
  text-indent: -99999px;
  width: 54px;
  height: 49px;
  background-size: 80%;
}
@media (min-width: 680px) {
  .landingLogo {
    background-size: 100%;
    height: 62px;
  }
}

.formCentered {
  width: 90%;
  max-width: 340px;
  margin: 0 auto;
}

.testimonial-pad {
  width: 90%;
  max-width: 840px;
  margin: 0 auto;
}

.jobspage-jobheading a {
  color: #3c3f42;
}
.jobspage-jobheading a:hover {
  text-decoration: none;
}

.jobspage-jobbody {
  overflow: hidden;
  max-height: 10000px;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 1, 1);
}

.jobspage-jobbody-minimised {
  max-height: 0;
}

.navbar {
  margin: 0;
  padding: 0;
  background-color: #26292c;
  background-size: cover;
  height: 95px;
  z-index: 3;
  position: fixed;
  width: 100%;
}

.navbar-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding: 25px;
  z-index: 5;
  position: fixed;
  width: 100%;
}

.navItem {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
  display: block;
  float: left;
}

.navItem-desktop {
  display: none;
}
@media (min-width: 1020px) {
  .navItem-desktop {
    display: inline-block;
  }
}

.mobile-margin {
  margin-left: 60px;
}
@media (min-width: 1020px) {
  .mobile-margin {
    margin-left: 0px;
  }
}

.home-button {
  color: #fff;
  height: initial;
  background-color: #333;
  border: solid 3px #ec7952;
}

.pricing-butt {
  color: #009bd0;
  background-color: #fff;
}
.pricing-butt.leftb {
  border-radius: 8px 0px 0px 8px;
}
.pricing-butt.rightb {
  border-radius: 0px 8px 8px 0px;
}
.pricing-butt.activeb {
  background-color: #009bd0;
  color: #fff;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 21px;
  float: right;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #009bd0;
}

input:checked + .slider:before {
  transform: translateX(17px);
}

.navbar-logo {
  position: fixed;
  top: 0px;
  z-index: 5;
  bottom: 0px;
  text-align: center;
  left: 48%;
  height: 100px;
  margin-top: 18px;
  margin-left: auto;
  margin-right: auto;
}

.trusted-logo {
  vertical-align: middle;
  margin-right: 15px;
}

.integrations-cell {
  background: #fff;
  width: 20%;
  text-align: center;
  vertical-align: middle;
  border: 3px solid #f2f3f6;
  padding: 15px 10px;
}

.integrations-table {
  table-layout: fixed;
  background: #fff;
  border-collapse: separate;
  border-spacing: 2px;
}

.integrations-text {
  color: white;
  font-size: 15px;
  position: absolute;
  padding: 0px 5px;
  font-weight: initial;
}

.integrations-overlay {
  opacity: 0;
  position: absolute;
  background-color: #f66c00;
  display: flex;
  text-align: center;
  align-items: center;
  top: -15px;
  left: -10px;
  bottom: -15px;
  right: -10px;
}
.integrations-overlay:hover {
  opacity: 1;
}

.integrations-container {
  position: relative;
}

.plans-table {
  text-align: left;
  table-layout: fixed;
  width: 100%;
}

.accent {
  color: #f66c00;
}

.small-print {
  font-size: 12px;
}

.monthly {
  display: none;
}

.small-panel {
  padding: 10px;
  margin-bottom: 0px;
}

.pricing-switch-block {
  display: flex;
  white-space: nowrap;
}

.pricing-text {
  margin-right: auto;
}

.pricing-header {
  display: flex;
}

.mtxxl {
  margin-top: 70px;
}

.mt110 {
  margin-top: 110px;
}

.collage-table {
  border-collapse: separate;
  border-spacing: 1px;
}

.collage-cell {
  width: 200px;
  height: 100%;
  padding: 1px 2px;
}

.double-wide {
  width: 400px;
}

.careers-cornertext {
  margin-top: 175px;
  margin-left: 20px;
  text-align: left;
  position: absolute;
}

.half-opacity {
  opacity: 0.5;
}

.careers-table {
  text-align: center;
  border-spacing: 70px;
  border-collapse: initial;
}

.jobslist {
  margin-top: 30px;
  border: 2px;
  border-style: solid none;
  border-color: #f2f3f6;
  text-align: left;
}

.jobspage-jobbody h1 {
  margin-top: 30px;
  line-height: 1.45;
  font-size: 18px;
}

.jobspage-jobbody p {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.4;
}

.jobspage-jobbody ul {
  margin-bottom: 30px;
  font-size: 16px;
  line-height: 1.4;
}

.promo-video {
  max-width: 900px;
  width: 100%;
  object-fit: fit;
  margin-bottom: 30px;
}

.hoverFade {
  opacity: 0.3;
  transition: opacity 200ms ease;
}
.hoverFade:hover {
  opacity: 1;
}

.get-started {
  width: 130px;
  height: 40px;
  padding: 10px 30px;
  border-radius: 4px;
  background-color: #f66c00;
  background-position: center center;
  background-size: cover;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-transform: uppercase;
  text-align: center;
  border: none;
}

.auth, .auth-r, .auth-l {
  background-color: #BEC0C2;
  border-radius: 8px;
  padding: 0px;
}
.auth-l {
  margin-right: 5px;
}
.auth-r {
  margin-left: 5px;
}

.signupForm {
  width: 80%;
  margin: auto;
}
.signupFormFooter {
  grid-column: 2/3;
}
.signupCard {
  height: auto;
  margin: 0px;
  padding: 30px;
  background-color: white;
  border: 1px grey solid;
  border-radius: 8px;
}
.signupInput {
  width: 100%;
  border: 1px solid #CCCCCC;
  font-weight: 600;
}
.signupRegisterBtn {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  text-transform: uppercase;
  background-color: #EC7952;
  padding: 0px;
}
.signupStatusBox {
  display: inline-block;
}
.signupTestimonialHolder {
  min-width: 215px;
}
.signupLogoHolder {
  justify-content: space-around;
}
.signupLogo {
  width: auto;
  height: 35px;
}
.signupQuestionBlock {
  color: #ecf0f1;
  font-size: 40px;
  font-weight: 400;
}
.signup-formGrid {
  display: grid;
  column-gap: 10px;
  row-gap: 15px;
  grid-template-columns: min-content auto;
  grid-template-rows: auto min-content min-content auto;
}
.signupQuestions {
  font-size: 20px;
  font-family: "Helvetica Neue";
}
.signupQuestionsRow {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
}
.signupQuestionsItem {
  width: 50%;
  min-width: 300px;
  color: #adadad;
  line-height: 28px;
}

.services-landing {
  text-align: center;
}
.services-landing .section-heading {
  padding: 40px 10px;
  margin: 0px 0px 20px 0px;
}
.services-landing section.hero-banner {
  position: relative;
  padding: 2% 0 5% 0;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.sales-heading {
  color: #444;
  font-weight: normal;
  margin-bottom: 20px;
}
@media (min-width: 1180px) {
  .sales-heading {
    margin-bottom: 30px;
  }
}

.team-hero {
  width: 80%;
  margin: 40px auto;
}
.team-hero span {
  color: #8e44ad;
}

.AWS-Sales-Icon {
  max-height: 420px;
  width: auto;
  opacity: 0.8;
}

.flex, .flex-nw, .flex-c, .flex-sa, .flex-sb, .signupLogoHolder {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}

.giant-icon {
  font-size: 110px;
}

.left-sales-banner p {
  padding-bottom: 20px;
}
@media (min-width: 1180px) {
  .left-sales-banner p {
    padding-bottom: 30px;
  }
}

.left-sales-banner {
  text-align: center;
}
@media (min-width: 680px) {
  .left-sales-banner {
    width: 55%;
    float: left;
  }
}
.right-sales-banner {
  display: none;
  vertical-align: bottom;
}
@media (min-width: 680px) {
  .right-sales-banner {
    display: inline;
    float: right;
    width: 45%;
    margin-left: 2%;
  }
}
@media (min-width: 1380px) {
  .right-sales-banner {
    padding-right: 5%;
  }
}

.page-break {
  padding-top: 40px;
}

.graph-screenshot {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
@media (min-width: 680px) {
  .graph-screenshot {
    width: 85%;
  }
}

.features-table {
  margin: 0px auto;
  max-width: 1000px;
}
@media (min-width: 700px) {
  .features-table {
    max-width: 95%;
  }
}
@media (min-width: 900px) {
  .features-table {
    max-width: 1000px;
  }
}

.description-row {
  text-align: center;
  vertical-align: top;
}
@media (min-width: 1180px) {
  .description-row {
    padding-bottom: 10px;
  }
}

.description, .aws-services-icon {
  vertical-align: top;
  width: 100%;
}
@media (min-width: 700px) {
  .description, .aws-services-icon {
    width: 40%;
  }
}

.description {
  text-align: left;
}
@media (min-width: 1180px) {
  .description {
    margin: 0 20px;
  }
}
.description div {
  margin: 10px 0px;
}

.cloud-services-btn {
  margin-top: 2%;
}

.aws-services {
  margin: 0px auto;
}
@media (min-width: 1180px) {
  .aws-services {
    width: 1000px;
  }
}

.aws-services-heading {
  margin: 10px 0;
}

.aws-card {
  max-width: 95%;
  width: 300px;
  height: 175px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 2px #aaa;
  margin: 10px;
  padding: 0px 20px;
  vertical-align: top;
  display: inline-block;
}

.aws-services-icon {
  width: 35%;
  height: auto;
  margin-top: 40px;
  float: left;
}

.aws-services-description {
  width: 60%;
  text-align: left;
  float: right;
}

.screenshot-and-description {
  text-align: left;
}

.aws-table-row {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aws-cloudwatch-table-wrapper {
  display: inline-block;
  margin-top: 40px;
  max-width: 95%;
}

.aws-cloudwatch-table-cloudwatch-column {
  display: none;
}
@media (min-width: 900px) {
  .aws-cloudwatch-table-cloudwatch-column {
    display: inline;
  }
}

.aws-cloudwatch-table-label-column {
  display: none;
}
@media (min-width: 700px) {
  .aws-cloudwatch-table-label-column {
    display: inline;
  }
}

.aws-cloudwatch-table-cloudwatch-column, .aws-cloudwatch-table-label-column {
  width: 200px;
  float: left;
}
.aws-cloudwatch-table-cloudwatch-column .aws-table-row:nth-child(even), .aws-cloudwatch-table-label-column .aws-table-row:nth-child(even) {
  background: #EEE;
}
.aws-cloudwatch-table-cloudwatch-column .aws-table-row:nth-child(odd), .aws-cloudwatch-table-label-column .aws-table-row:nth-child(odd) {
  background: transparent;
}

.aws-cloudwatch-table-label-column {
  font-weight: bold;
  text-align: left;
}

.aws-cloudwatch-responsive-label {
  display: inline;
}
@media (min-width: 900px) {
  .aws-cloudwatch-responsive-label {
    display: none;
  }
}

.heading-wrapper {
  height: 100%;
  line-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aws-cloudwatch-table-hg-column .aws-table-row:first-child, .aws-cloudwatch-table-cloudwatch-column .aws-table-row:first-child, .aws-cloudwatch-table-label-column .aws-table-row:first-child {
  font-weight: bold;
}
.aws-cloudwatch-table-hg-column .aws-table-row div, .aws-cloudwatch-table-cloudwatch-column .aws-table-row div, .aws-cloudwatch-table-label-column .aws-table-row div {
  padding: 30px 20px;
}

.aws-cloudwatch-table-hg-column {
  width: 100%;
  max-width: 400px;
  float: left;
  border-radius: 4px;
  box-shadow: 1px 2px 4px #000;
  background: #6c7379;
  color: #fff;
}
.aws-cloudwatch-table-hg-column .aws-table-row:nth-child(n+2) {
  border-top: solid 1px #5a5a5a;
}

.table-sell-text {
  margin: 0 auto 20px auto;
  max-width: 800px;
}

.table-signup-btn {
  margin-top: 20px;
}

.pop-up-front {
  position: relative;
  z-index: 100;
}

hr {
  display: block;
  position: relative;
  padding: 0;
  margin: 8px auto;
  height: 0;
  width: 100%;
  max-height: 0;
  line-height: 0;
  clear: both;
  border: none;
  border-top: 2px solid #F9A242;
  border-bottom: 1px solid #ffffff;
}

@media (min-width: 700px) {
  .side-by-side, .description, .aws-services-icon {
    display: inline-block;
  }
}

.for-desktop-block {
  display: none;
}
@media (min-width: 680px) {
  .for-desktop-block {
    display: block;
  }
}

@media (max-width: 680px) {
  .cards-for-desktop {
    display: none;
  }
}

.inline-on-mobile > * {
  display: inline;
}
@media (min-width: 680px) {
  .inline-on-mobile > * {
    display: initial;
    margin-left: 0px;
  }
}

.roadmap-line, .roadmap-status-line {
  border-left-style: solid;
  border-left-width: 6px;
  border-radius: 10px;
  margin-right: -18px;
  margin-bottom: -8%;
  margin-top: 3%;
}

.roadmap-status-line.critical {
  border-color: #f8c9c4;
}
.roadmap-status-line.major {
  border-color: #f6ceab;
}
.roadmap-status-line.minor {
  border-color: #f9e8a0;
}
.roadmap-status-line.none {
  border-color: #e74c3c;
  border-color: #a8ebc4;
}

.roadmap-item-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.roadmap-item-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.roadmap-item {
  display: flex;
  align-items: center;
  margin-right: 10px;
  width: 90%;
}
.roadmap-item a {
  text-decoration: underline;
}

.roadmap-section {
  display: flex;
  margin: 0 auto;
  width: 75%;
}

.planned p, .planned circle {
  color: #20B9F7;
  fill: #20B9F7;
}
.planned a, .planned h2 {
  color: #8C969E;
}
.planned .roadmap-line, .planned .roadmap-status-line {
  border-color: #f1fbff;
}

.in-progress p, .in-progress circle {
  color: #9ecae1;
  fill: #9ecae1;
}
.in-progress a, .in-progress h2 {
  color: #8C969E;
}
.in-progress .roadmap-line, .in-progress .roadmap-status-line {
  border-color: #d8eaf3;
}

.completed p, .completed circle, .completed .landing-fs--mh.mlxl, .completed .services-landing .mlxl.section-heading, .services-landing .completed .mlxl.section-heading {
  color: #f66c00;
  fill: #f66c00;
}
.completed a, .completed h2 {
  color: #8C969E;
}
.completed .roadmap-line, .completed .roadmap-status-line {
  border-color: #ffa45d;
}

.customers-logo-row, .sensors-logo-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.customers-logo-row div, .sensors-logo-row div {
  width: 120px;
}

.customers-large-testimonial {
  padding: 25px;
  height: 725px;
  border: 2px solid #dcebf7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 35%;
}

.customers-bottom-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 25%;
}

.customers-testimonial-quote {
  line-height: 40px;
}

.customers-case-study-testimonial {
  width: 65%;
}

.customers-small-testimonial {
  padding: 25px;
  height: 375px;
  width: 100%;
  border: 2px solid #dcebf7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.customers-small-testimonial-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.customers-small-testimonial-quote > p {
  line-height: 25px;
}

.customers-small-testimonial-image {
  width: 120px;
  min-height: 55px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-study-company-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.case-study-header {
  display: flex;
  align-items: center;
  background-color: #edeff2;
}

.case-study-heading {
  letter-spacing: 5px;
}

.case-study-testimonial {
  padding-left: 17.5%;
  height: 80%;
  background-color: #f66c00;
  color: white;
  margin-left: 22.5%;
  margin-top: -30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.case-study-headshot {
  z-index: 1;
  height: 300px;
  box-shadow: 9px 0 28px -7px #333338;
}

.case-study-paragraph {
  line-height: 44px;
  font-size: 28px;
}

.case-study-quote {
  display: flex;
  align-items: flex-start;
}
.case-study-quote img {
  width: 8%;
  height: 8%;
}
.case-study-quote h3 {
  font-size: 34px;
  line-height: 44px;
}

.case-study-read-similar-stories {
  background-color: #edeff2;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.case-study-slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.case-study-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.case-study-slider-viewport {
  display: flex;
  height: 350px;
  transition: transform 0.4s;
}

.case-study-slider-arrow {
  color: white;
  font-size: 55px;
  width: 75px;
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  z-index: 1;
}

.case-study-slider-page {
  display: flex;
  justify-content: space-between;
  flex: 1;
  min-width: 100%;
  color: white;
}
.case-study-slider-page:hover {
  color: #35373a;
}

.case-study-slider-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.case-study-slider-dot-container {
  position: relative;
  z-index: 1;
  margin-top: -22.5px;
}

.case-study-slider-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: opacity 0.6s ease;
}

.case-study-slider-image {
  min-height: 100%;
  min-width: 40%;
}

.case-study-slider-image > img {
  height: 100%;
  width: 100%;
}

.case-study-start-trial {
  background-color: #333;
  height: 325px;
  color: white;
}

.sensors-logo-row div {
  width: 70px;
  margin-bottom: 5%;
  display: grid;
}

.sensors-features-title {
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  color: #fa733d;
  display: flex;
}

.sensors-features-subtitle {
  font-size: 30px;
  line-height: 35px;
  font-weight: 500;
  margin-bottom: 3%;
  color: #333333;
}

.sensors-features-text {
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  color: #8596A7;
  padding-bottom: 20%;
}

.sensors-main-img {
  background-color: rgb(51, 51, 51);
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center top;
  padding-bottom: 15%;
  background-position: 50% 75%;
  background-size: 50%;
  background-attachment: fixed;
}

.sensors-testimonial-img {
  padding-right: 4%;
  padding-left: 17%;
  margin-top: -1%;
  float: left;
}

.sensors-features-image-div-right {
  float: right;
}

@media screen and (max-width: 904px) {
  .sensors-features-image-div, .sensors-features-description {
    margin: auto;
  }
  .sensors-features-image-div {
    margin-bottom: 3%;
  }
  .sensors-testimonial-img {
    float: none;
  }
  .sensors-features-image-div-right {
    float: none;
  }
  .sensors-main-img {
    background-position: 50% 75%;
    background-size: 100%;
  }
}
#capture-email {
  height: 40px;
  width: 200px;
}

@media screen and (max-width: 500px) {
  .sensors-features-image-div, .sensors-features-description {
    margin: auto;
  }
  .sensors-features-image-div {
    margin-bottom: 3%;
  }
  .sensors-testimonial-img {
    float: none;
  }
  .sensors-features-image-div-right {
    float: none;
  }
  .sensors-main-img {
    background-position: 50% 75%;
    background-size: 100%;
  }
  #send-subscribe-form {
    margin: auto;
  }
  #capture-email {
    margin-right: 10%;
  }
  #sensors-trusted-logo-section {
    display: none;
  }
}
.light-box-outline {
  padding: 10px;
  border-top: solid 1px #DDD;
}

.btn-padding-right {
  padding-right: 10px;
}

.shadow-soft {
  margin: 2em;
  padding: 2em;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.1);
}

.tab-content {
  min-width: 80%;
  display: none;
  text-align: left;
}

.tabs-menu {
  height: 30px;
  display: inline-block;
  text-align: center;
}
.tabs-menu li {
  height: 20px;
  float: left;
  margin-right: 10px;
}
.tabs-menu li a {
  padding: 10px;
  color: #444;
  text-decoration: none;
}

.gray-border-bottom {
  border-bottom: 3px solid #DDD;
  width: 100%;
}

.tab-menu-list {
  margin: 0em;
  padding: 0em;
  list-style-type: none;
  display: inline-block;
}

.tabs-container {
  width: 100%;
  text-align: center;
}

.tabs-menu li.current {
  position: relative;
  z-index: 5;
}
.tabs-menu li.current a {
  border-bottom: 3px solid #f66c00;
  font-weight: bold;
  color: #3c3f42;
}

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

.clear {
  clear: both;
}

#addCriteriaFields {
  max-width: 100%;
}
#addCriteriaFields input {
  display: inline-block;
}

.center-fields {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
}

.sub-top-bar {
  position: fixed;
  top: 80px;
  left: 0px;
  padding-left: 110px;
  padding-right: 30px;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  background-color: white;
  width: 100%;
  box-shadow: 0px 1px 2px 1px rgba(135, 135, 135, 0.5);
  z-index: 1;
  height: 44px;
}

.alert-title {
  cursor: pointer;
  font-weight: bold;
}

.alert-metric {
  color: #8C969E;
  text-decoration: none;
}

.event-history-container {
  position: relative;
  min-height: 20px;
}

.modal-alert-overview .event-history-item {
  background-color: white;
}

.modal-alert-overview .event-history-spinner {
  margin: 0 auto;
  display: block;
}

.modal-alert-overview .modal {
  overflow-y: initial;
  height: 90%;
}

.modal-alert-overview .history-container {
  width: 100%;
}

.modal-alert-overview .details-container {
  max-width: 85%;
  white-space: nowrap;
}

.modal-alert-overview .details-container div {
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-alert-overview .button-container {
  position: absolute;
  background-color: white;
  padding: 2px 37px 2px 2px;
  right: -35px;
  top: 250px;
}

.modal-alert-overview .history-list {
  overflow: auto;
  max-height: 300px;
}

.event-history-item {
  position: relative;
}
.event-history-item [data-icon] {
  cursor: default;
}

.event-history-link:hover {
  cursor: pointer;
}

.event-history-time {
  display: inline-block;
  width: 55px;
}

.alert-list-empty {
  width: 100%;
  position: relative;
}

.alert-list-filter-empty, .event-history-filter-empty {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
}

.metric-iframe, .metric-iframe-lx {
  border: none;
  width: 100%;
  height: 250px;
  overflow: hidden;
}
.metric-iframe-lx {
  height: 400px;
}

.metric-iframe-container, .metric-iframe-container-lx {
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
}
.metric-iframe-container-lx {
  height: 400px;
}

.text-beside-icon-wrapper {
  width: 80%;
  flex-basis: content;
}

.alert-mini-card-bottom-sentence {
  padding: 3px 0px;
}

.alert-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.mini-card.empty-card, .empty-card.mini-card-full-width {
  height: 0px;
  padding: 0;
  margin: 0 5px;
  box-shadow: none;
  border: none;
  border-radius: 0px;
}

.mini-card-contents-top-section {
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  align-items: center;
  -webkit-align-items: center;
}

.sub-top-bar-items {
  margin: 5px;
}

.page-title {
  color: #8C969E;
  line-height: 40px;
  margin: 4px 10px 0px 0px;
  padding: 0 5px;
}

.alert-history-iframe {
  max-width: 700px;
  width: 100%;
  height: 300px;
}

.tab-switcher .current-tab {
  border-bottom: solid 4px #f66c00;
  color: #3c3f42;
}

.align-middle {
  vertical-align: middle;
}

.alert-separator {
  margin: 3px 6px;
  font-size: 14px;
}

.page-controls {
  margin-left: auto;
  width: 600px;
  max-width: 50%;
  display: -webkit-flex;
  display: flexbox;
  display: box;
  display: flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  align-items: center;
  -webkit-align-items: center;
}
@media screen and (max-width: 900px) {
  .page-controls {
    display: none;
  }
}

.extra-padding-top-for-subbar {
  padding-top: 134px;
}

.alert-contact {
  border: 1px solid #b6bbcc;
  padding: 1px 2px;
  margin: 0px 1px;
  border-radius: 1px;
}

.alert-card-icon-wrapper {
  float: left;
  margin-right: 5px;
}

.expandable-metrics-list {
  padding: 0px 0px 0px 12px;
  max-height: 5em;
  list-style-type: none;
  overflow: hidden;
  transition: max-height 0.15s linear;
}
#expander:checked + .expandable-metrics-list {
  max-height: none;
}

.expander-label {
  position: relative;
}
.expander-label:hover {
  text-decoration: underline;
}
.expander-label:after {
  content: "▼";
  white-space: nowrap;
  position: absolute;
  cursor: pointer;
  bottom: 0;
  left: 1em;
}
#expander:checked ~ .expander-label:after {
  content: "▲";
}

.metrics-list {
  overflow: scroll;
}

#expander {
  display: none;
}

.triggered-metrics-heading {
  height: 1em;
}

.triggered-metric-refresh {
  float: right;
  cursor: pointer;
}
.triggered-metric-refresh:hover {
  color: #20B9F7;
}

.triggered-metrics-list {
  position: relative;
}

.triggered-metrics-spinner-disabled {
  display: none;
}

.table-expandable tr {
  border-top: none;
  border-bottom: none;
  border-collapse: separate;
}

.table-expandable tr:first-child {
  border-top: none;
}

.table-expandable .bottom-border {
  border-bottom: 1px solid #c3c9cd;
}

.table-expandable .top-border {
  border-top: 1px solid #c3c9cd;
}

.table-expandable .left-border {
  border-left: 1px solid #c3c9cd;
}

.table-expandable .right-border {
  border-right: 1px solid #c3c9cd;
}

.table-expandable .left-border-light {
  border-left: 1px solid #c3c9cd;
}

.table-expandable .header-border {
  border-left: 1px solid #8C969E;
  border-right: 1px solid #8C969E;
  border-top: 1px solid #8C969E;
}

.table-expandable .clickable, .table-expandable .ordering-btn, .table-expandable .expandable-row {
  cursor: pointer;
  cursor: hand;
}

@media all and (max-width: 1100px) {
  .table-expandable .hideable-column-Large {
    display: none;
  }
}
.horizontal-list {
  padding: 0;
  line-height: 16pt;
  padding-right: 50px;
  margin: 0px;
  text-align: left;
  white-space: normal;
}

.horizontal-list li {
  padding-right: 15px;
  display: inline;
  white-space: nowrap;
}

.log-messages-box {
  font-family: "source code pro", Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 10px;
  color: #42494f;
  width: 100%;
  max-width: 100%;
  max-height: 140px;
  display: block;
  padding: 5px;
  margin-top: 4px;
  margin-bottom: 1px;
  border: 1px solid #ddd;
  overflow: auto;
  word-wrap: break-word;
  white-space: normal;
}

.log-btn {
  padding: 2px;
  font-size: 12px;
  cursor: pointer;
  cursor: hand;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #8C969E;
  text-decoration: none;
}

.log-btn:hover {
  background-color: #ddd;
  text-decoration: none;
  color: #42494f;
}

.small-spinner {
  display: none;
  width: 14px;
  height: auto;
  margin-bottom: -2px;
}

.search-bar {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -khtml-border-radius: 2px;
  font-size: 13px;
  padding: 2px;
  margin-top: 8px;
  height: 26px;
  width: 100%;
}

.search-spinner-container {
  position: relative;
  left: 100%;
}

.search-spinner {
  width: 18px;
  position: relative;
  left: -14px;
  top: -25px;
}

input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

input[type=search] {
  -webkit-appearance: none;
}

.partners-md__section {
  width: 100%;
  min-height: 247px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px auto 0px auto;
}
.partners-md__section .container {
  width: 100%;
  max-width: 850px;
  padding-left: 20px;
  padding-right: 20px;
}
.partners-md__section .partners__title {
  height: 18px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  color: #333333;
  text-decoration: none solid rgb(51, 51, 51);
  text-align: center;
  font-weight: 700;
  margin: 0px auto 40px auto;
  text-align: center;
}
.partners-md__section .partner-image-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 50px;
  row-gap: 20px;
  margin: 0px auto 0px auto;
  justify-content: center;
  align-items: center;
}
.partners-md__section .partner__image {
  display: block;
  margin: auto;
}
@media screen and (max-width: 800px) {
  .partners-md__section .partner-image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 499px) {
  .partners-md__section .partner-image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.partners-landing__section {
  width: 100%;
  min-height: 194px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0px auto 0px auto;
  background: #ebebeb;
}
.partners-landing__section .container {
  width: 100%;
  max-width: 1210px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0px auto 0px auto;
}
.partners-landing__section .partners__title {
  opacity: 0.6;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  color: #3c3f42;
  text-decoration: none solid rgb(60, 63, 66);
  text-transform: uppercase;
  text-align: center;
  margin: 0px auto 30px auto;
  font-weight: 400;
}
.partners-landing__section .partner-image-grid {
  width: 100%;
  max-width: 1210px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 130px;
  row-gap: 20px;
  margin: 0px auto 0px auto;
  justify-content: center;
  align-items: center;
}
.partners-landing__section .partner__image {
  display: block;
  max-width: 93px;
  margin: auto;
}
@media screen and (max-width: 800px) {
  .partners-landing__section .container {
    margin: 40px auto 40px auto;
  }
  .partners-landing__section .partner-image-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 499px) {
  .partners-landing__section .partner-image-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hero__section {
  width: 100%;
  min-height: 486px;
  background-image: linear-gradient(0deg, #000000 0%, #26292c 100%);
  background-position: center center;
  background-size: cover;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hero__section .container {
  width: 90%;
  max-width: 1240px;
  margin: 0px auto;
}
.hero__section .hero-cta__wrapper {
  width: 100%;
  max-width: 540px;
}
.hero__section .hero-cta__wrapper .hero-cta__title {
  min-height: 50px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 40px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
}
.hero__section .hero-cta__wrapper .hero-cta__slogan {
  max-width: 488px;
  width: 100%;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 40px;
  color: #c3c9cd;
  text-decoration: none solid rgb(195, 201, 205);
  margin: 0px 0px 16px 0px;
  font-weight: 300;
}
.hero__section .hero-cta__wrapper .hero-cta__info {
  max-width: 503px;
  width: 100%;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  color: #c3c9cd;
  text-decoration: none solid rgb(195, 201, 205);
  margin: 0px 0px 40px 0px;
}
.hero__section .hero-cta__wrapper .hero-cta__alerting {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  color: #20b9f7;
  text-decoration: none solid rgb(32, 185, 247);
}
.hero__section .hero-cta__wrapper .hero-cta__form-wrapper {
  width: 100%;
}
.hero__section .hero-cta__wrapper .hero-cta__form {
  width: 100%;
}
.hero__section .hero-cta__wrapper .hero-cta__form-input {
  max-width: 300px;
  width: 100%;
  min-height: 40px;
  padding: 0px 8px;
  border: 1px solid #b6bbcc;
  border-radius: 4px;
  background-color: #ffffff;
  background-size: cover;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  color: #121212;
  text-decoration: none solid rgb(18, 18, 18);
  font-weight: 600;
}
.hero__section .hero-cta__wrapper .hero-cta__form-button {
  max-width: 153px;
  width: 100%;
  height: 40px;
  padding: 10px 30px;
  border-radius: 4px;
  background-color: #f66c00;
  background-position: center center;
  background-size: cover;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  border: none;
  margin-left: 4px;
  vertical-align: middle;
  margin-top: -2px;
}
.hero__section .hero-image__wrapper {
  width: 100%;
  margin: auto;
}
.hero__section .hero-image__wrapper .hero-image__image {
  width: 100%;
  max-width: 610px;
  border-radius: 10px;
  border: 1px solid #ec7952;
  margin: auto;
  display: block;
}
@media screen and (max-width: 1159px) {
  .hero__section .hero-grid .hero-cta__wrapper {
    margin: 40px auto;
  }
  .hero__section .hero-grid .hero-cta__title,
  .hero__section .hero-grid .hero-cta__slogan,
  .hero__section .hero-grid .hero-cta__info {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero__section .hero-grid .grid__cell:first-child {
    display: block;
    margin: auto;
  }
  .hero__section .hero-grid .grid__cell:last-child {
    display: block;
    margin: auto;
  }
  .hero__section .hero-grid .hero-cta__wrapper,
  .hero__section .hero-grid .hero-image__wrapper {
    margin: auto;
  }
  .hero__section .hero-grid .hero-cta__form {
    margin: auto;
  }
  .hero__section .hero-grid .hero-cta__form .hero-cta__form-input {
    display: block;
    margin: 20px auto 10px auto;
  }
  .hero__section .hero-grid .hero-cta__form .hero-cta__form-button {
    display: block;
    margin: 10px auto 20px auto;
    max-width: 300px;
  }
}

@media screen and (max-width: 1159px) {
  .hero__section {
    padding-top: 60px;
  }
}
#tags-page {
  display: grid;
  justify-content: center;
  grid-gap: 7px;
  grid-template-columns: 25% 30% 40%;
  grid-template-rows: 100%;
  grid-template-areas: "c1 c2 c3";
  height: 82vh;
}

.mini-card-2 {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  display: grid;
  grid-template-rows: 140px auto;
  grid-template-areas: "header" "content";
  width: 100%;
  min-width: 280px;
  background-color: #fff;
  box-shadow: 0px 1px 2px 1px rgba(135, 135, 135, 0.5);
  text-align: center;
}

.tag-column-header {
  margin-top: 5px;
}

.result-panel {
  margin: 10px;
  overflow: hidden;
}

.tagnames {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 95%;
  overflow: auto;
}

.tag-search {
  height: 25%;
  text-align: center;
  margin-top: 10px;
  width: 90%;
}

#searchbox {
  width: 100%;
  height: auto;
  max-height: 95%;
  display: none;
  overflow: auto;
  padding: 10px;
}

#lieb {
  width: 100%;
}

#lieb tr td {
  width: 100%;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
}

#lieb tr td input {
  right: 30%;
  width: 100%;
  height: 25px;
}

#holder1 {
  grid-area: header;
}

#series-header {
  grid-area: header;
  margin: 0px;
}

#series-content {
  grid-area: content;
  margin: 10px;
  padding: 10px;
  overflow: scroll;
}

.delete-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px;
}

#my-output {
  overflow: auto;
}

#series-name {
  overflow: auto;
  width: 100%;
}

#searchbutton {
  margin-bottom: -0.5%;
  position: fixed;
}

@media screen and (max-width: 1380px) {
  #tags-page {
    display: block;
    flex-direction: column;
  }
  .mini-card-2 {
    height: auto;
    margin-top: 5%;
  }
  .tagnames {
    height: 95%;
  }
  #tag-searchbox {
    display: block;
    min-height: 20vh;
    max-height: 45vh;
  }
  #tag-search-column {
    grid-template-rows: 2vh auto;
  }
  #searchbutton {
    position: absolute;
    margin-top: 0;
  }
  #series-result-panel {
    grid-template-rows: 10vh auto;
  }
  #series-content {
    max-height: 40vh;
  }
  #my-output {
    max-height: 97%;
  }
}
.wizard {
  width: calc(100% - 10px);
  height: 164px;
  border: 1px solid #20b9f7;
  border-radius: 3px;
  background-color: #ffffff;
  background-size: cover;
  box-shadow: 0px 3px 10px rgba(32, 185, 247, 0.1);
  display: flex;
  flex-direction: column;
}
.wizard .icon-Xl {
  font-size: 43px;
}

.wizard-top {
  display: flex;
  flex-direction: row;
}

.short-copy {
  width: 100%;
  height: 20px;
  font-family: Source Sans Pro;
  font-size: 16px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  font-weight: bold;
  margin: 1rem 0 0.8rem 1.2rem;
  text-align: left;
}

.complete {
  display: flex;
  align-items: center;
  width: 25%;
  height: 100%;
  border-radius: 100px;
  margin-left: 30%;
  margin-right: 1.8rem;
}
.complete .progress-bar {
  width: 155px;
  height: 8px;
  border-radius: 15px;
  background-color: #ebebeb;
  position: relative;
  overflow: hidden;
}

.complete-bar {
  position: absolute;
  width: 0%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #20b9f7;
}

.incomplete {
  display: flex;
  align-items: center;
  width: 10%;
  height: 100%;
  opacity: 0.6;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  fill: #20b9f7;
  margin-right: 1.8rem;
}

.completed-text {
  display: flex;
  align-items: center;
  width: 25%;
  height: 100%;
  opacity: 0.7;
  font-family: Source Sans Pro;
  font-size: 14px;
  color: #76828b;
  text-decoration: none solid rgb(118, 130, 139);
  justify-content: space-between;
}

.wizard-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 30px 14px;
}
.wizard-bottom .completed .icon-Xl {
  opacity: 0.4;
}

.wizard-box1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  height: auto;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 14px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.wizard-box2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  height: auto;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 14px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.wizard-box3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  height: auto;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 14px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.wizard-box4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  height: auto;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 14px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.wizard-box5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  height: auto;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 14px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}
.wizard-box5 .img-box5 span {
  color: #f66c01;
}

.img-box1 {
  width: 50px;
  height: 51px;
  opacity: 1;
  position: relative;
}

.img-box2 {
  width: 50px;
  height: 51px;
  opacity: 1;
  position: relative;
}

.img-box3 {
  width: 50px;
  height: 51px;
  opacity: 1;
  position: relative;
}

.img-box4 {
  width: 50px;
  height: 51px;
  opacity: 1;
  position: relative;
}

.img-box5 {
  width: 50px;
  height: 51px;
  opacity: 1;
  position: relative;
}

.step1 {
  width: 127px;
  height: 18px;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 12px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.step2 {
  width: 127px;
  height: 18px;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 12px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.step3 {
  width: 127px;
  height: 18px;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 12px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.step4 {
  width: 127px;
  height: 18px;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 12px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.step5 {
  width: 127px;
  height: 18px;
  opacity: 1;
  font-family: Source Sans Pro;
  font-size: 12px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: center;
}

.completed .step1,
.completed .step2,
.completed .step3,
.completed .step4,
.completed .step5 {
  opacity: 0.4;
}

.dash {
  width: 100px;
  height: 1px;
  margin-top: 1.8rem;
  background-color: #c0c0c0;
  background-size: cover;
}

.circle1 {
  width: 22px;
  height: 22px;
  border: 2px solid #f66c01;
  border-radius: 50%;
  background-color: #f66c01;
  background-size: cover;
  position: absolute;
  right: 0;
  bottom: 6px;
  min-width: 22px;
  padding: 2px;
}
.circle1:hover {
  cursor: pointer;
}

.circle-empty {
  width: 22px;
  height: 22px;
  border: 2px solid #f66c01;
  border-radius: 20px;
  background-color: #ffffff;
  background-size: cover;
  position: absolute;
  right: 0;
  bottom: 6px;
  min-width: 22px;
}
.circle-empty:hover {
  cursor: pointer;
}

.h-122 {
  height: 122px;
}

.box1 {
  display: flex;
  flex-direction: column;
  width: 57%;
  position: relative;
  padding: 16px 20px;
}
.box1::after {
  content: "";
  background-color: #dadada;
  height: 94px;
  width: 1px;
  right: 18px;
  top: 50%;
  position: absolute;
  margin-top: -47px;
}

.box2 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.api-container {
  width: 100%;
  border-radius: 3px;
  background-color: #ffffff;
  background-size: cover;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
}

.bottom-container {
  display: flex;
  flex-direction: row;
  width: calc(100% - 10px);
}
.bottom-container .toggleVisibility {
  width: calc(61% - 10px);
}

.your-api-key {
  width: 40%;
  height: 18px;
  font-family: Source Sans Pro;
  font-size: 14px;
  font-weight: bolder;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: left;
  padding: 0;
}

.metrics {
  width: 40%;
  height: 18px;
  font-family: Source Sans Pro;
  font-size: 14px;
  font-weight: bolder;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: left;
  margin: 16px 0 0 20px;
  padding: 0;
}

.key {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 25%;
  padding: 8px;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-style: solid;
  border-color: #e0e2e9;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  background-color: #fafafa;
  background-size: cover;
  font-family: Source Sans Pro;
  font-size: 13px;
  justify-content: left;
  align-items: center;
  padding: 0.5rem;
  color: #3c3f42;
  text-decoration: none solid rgb(60, 63, 66);
  margin-left: 20px;
}

.api-key-box {
  margin-top: 10px;
  flex-direction: row;
  align-items: center;
}

.copy-container {
  width: 12%;
  height: auto;
  border: 1px solid #e0e2e9;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  background-image: linear-gradient(0deg, #e0e0e0 0%, #ffffff 100%);
  background-position: center center;
  background-size: cover;
  margin-left: 0;
  padding: 0;
}
.copy-container:hover {
  cursor: pointer;
}

.copy-box-img {
  width: 20px;
  height: auto;
  position: relative;
}

.vertical {
  width: 1px;
  height: 82px;
  background-color: #dadada;
  margin: 0 0.5rem;
}

.api-text {
  width: 80%;
  height: 15px;
  opacity: 0.9;
  font-family: Source Sans Pro;
  font-size: 12px;
  color: #76828b;
  text-decoration: none solid rgb(118, 130, 139);
  text-align: left;
  padding: 0;
}

.api-unavailable-text {
  width: 80%;
  font-family: Source Sans Pro;
  font-size: 15px;
  color: #76828b;
  text-decoration: none solid rgb(118, 130, 139);
  text-align: left;
  margin-left: 20px;
  margin-bottom: 16px;
  padding: 0;
  margin-top: 10px;
}

.metrics-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.6rem;
}

.metrics-int {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: 45px;
  font-family: Source Sans Pro;
  font-size: 36px;
  color: #42494f;
  text-decoration: none solid rgb(66, 73, 79);
  text-align: right;
  margin-left: 0.5rem;
}
.metrics-int.danger {
  color: #e86d70;
}

.metrics-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 75px;
  height: 30px;
  font-family: Source Sans Pro;
  font-size: 12px;
  color: #76828b;
  text-decoration: none solid rgb(118, 130, 139);
  margin: 0.5rem;
}

.metrics-button {
  display: flex;
  flex-direction: column;
  width: 110px;
  height: 34px;
  padding: 8px 16px;
  border-radius: 3px;
  background-color: #f66c01;
  background-size: cover;
  font-family: Source Sans Pro;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none solid rgb(255, 255, 255);
  text-align: center;
  justify-content: center;
  margin: 0.5rem;
}
.metrics-button:hover {
  cursor: pointer;
}

.alert-box {
  display: flex;
  flex-direction: column;
  width: 19%;
  height: auto;
  border-radius: 3px;
  background-color: #ffffff;
  background-size: cover;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  margin-left: 1rem;
}

.team-box {
  display: flex;
  flex-direction: column;
  width: 19%;
  height: auto;
  border-radius: 3px;
  background-color: #ffffff;
  background-size: cover;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  margin-left: 1rem;
}

.dashboard-box {
  display: flex;
  flex-direction: column;
  width: 19%;
  height: auto;
  border-radius: 3px;
  background-color: #ffffff;
  background-size: cover;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
  margin-left: 1rem;
}

.topBar--upgrade .btn-positive {
  padding: 1px 8px;
  border-radius: 3px;
  background-image: linear-gradient(0deg, rgba(36, 180, 125, 0.2) 0%, rgba(40, 196, 137, 0.2) 100%);
  background-position: center center;
  background-size: cover;
  font-family: Source Sans Pro;
  font-size: 13px;
  color: #24b47d;
  text-decoration: none solid rgb(36, 180, 125);
  text-align: center;
  background-color: transparent;
  box-shadow: none;
}

@media only screen and (max-width: 1120px) {
  .complete {
    margin-left: 13%;
  }
  .short-copy {
    white-space: nowrap;
  }
}
@media only screen and (max-width: 1000px) {
  .short-copy {
    white-space: normal;
    height: auto;
  }
  .complete {
    margin-left: 1%;
    margin-right: 10px;
  }
}
@media only screen and (max-width: 940px) {
  .card-api-right-portion {
    width: 45%;
  }
  .wizard-box1 {
    width: 17%;
  }
  .wizard-box2 {
    width: 17%;
  }
  .wizard-box3 {
    width: 17%;
  }
  .wizard-box4 {
    width: 17%;
  }
  .wizard-box5 {
    width: 17%;
  }
  .step1 {
    width: 100px;
    height: 26px;
  }
  .step2 {
    width: 100px;
    height: 26px;
  }
  .step3 {
    width: 100px;
    height: 26px;
  }
  .step4 {
    width: 100px;
    height: 26px;
  }
  .step5 {
    width: 100px;
    height: 26px;
  }
  .short-copy {
    white-space: normal;
    height: auto;
    width: 70%;
  }
}
@media only screen and (max-width: 767px) {
  .wizard-top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
  }
  .short-copy {
    white-space: normal;
    height: auto;
    width: 100%;
    text-align: center;
  }
  .completed-text {
    height: auto;
  }
  .complete {
    height: 15px;
  }
  .img-box1 {
    width: 40px;
    height: auto;
    padding-bottom: 10px;
  }
  .img-box2 {
    width: 40px;
    height: auto;
    padding-bottom: 10px;
  }
  .img-box3 {
    width: 40px;
    height: auto;
    padding-bottom: 10px;
  }
  .img-box4 {
    width: 40px;
    height: auto;
    padding-bottom: 10px;
  }
  .img-box5 {
    width: 40px;
    height: auto;
    padding-bottom: 10px;
  }
  .wizard .icon-Xl {
    font-size: 28px;
  }
  .circle-empty {
    width: 16px;
    height: 16px;
    min-width: 16px;
  }
  .circle1 {
    width: 16px;
    height: 16px;
    min-width: 16px;
    padding: 0;
  }
  .step1 {
    width: 67px;
    height: 26px;
  }
  .step2 {
    width: 67px;
    height: 26px;
  }
  .step3 {
    width: 67px;
    height: 26px;
  }
  .step4 {
    width: 67px;
    height: 26px;
  }
  .step5 {
    width: 67px;
    height: 26px;
  }
}
@media only screen and (max-width: 650px) {
  .wizard {
    display: none;
  }
  .api-container {
    flex-direction: column;
    overflow: hidden;
  }
  .box1 {
    width: 100%;
  }
  .box1::after {
    display: none;
  }
  .api-key-box .copy-button-container {
    width: 100%;
  }
  .card-api-right-portion {
    width: 100%;
  }
  .h-122 {
    height: auto;
  }
}
@media only screen and (max-width: 1400px) {
  .metrics-int {
    font-size: 26px;
    line-height: 46px;
  }
}
@media screen and (max-width: 1300px) and (min-width: 1180px) {
  .d-sm-hide {
    display: none;
  }
}
.login__split {
  width: 50%;
  position: fixed;
}
@media (max-width: 768px) {
  .login__split {
    width: 100%;
    position: initial;
  }
}
.login__left {
  background-color: #191c28;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.login__right {
  background-color: #fff;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1em;
}
.login__image {
  width: 643px;
  padding: 3em;
}
.login__form {
  width: 440px;
}
.login__form--top-img {
  width: 190px;
}
.login__form--top-h1 {
  font-size: 1.5rem;
  color: #151515;
  margin: 0.8em 0;
  font-weight: 600;
}
.login__form--top-p {
  font-size: 0.875rem;
  color: #151515;
}
.login__form--top-p-2 {
  margin-top: 4px;
}
.login__form--top-p-3 {
  margin-top: 1em;
}
.login__form--top-a {
  font-size: 0.875rem;
  color: #f66c01;
  font-weight: 600;
}
.login__form--top-a-2 {
  font-size: 0.875rem;
  color: #f66c01;
  font-weight: 600;
  text-decoration: underline;
}
.login__form--top-a:hover {
  text-decoration: none;
}
.login__form--middle-email-input {
  padding: 1em;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
  width: 100%;
  position: relative;
  margin-top: 1em;
}
.login__form--middle-email-input:focus-visible {
  outline: none;
}
.login__form--middle-email-input:-webkit-autofill, .login__form--middle-email-input:-webkit-autofill:hover, .login__form--middle-email-input:-webkit-autofill:focus, .login__form--middle-email-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset;
}
.login__form--middle-email-input-label {
  position: relative;
}
.login__form--middle-email-input-label::after {
  content: "Email Address";
  position: absolute;
  top: -26px;
  left: 10px;
  font-size: 0.75rem;
  color: #151515;
  background-color: #fff;
  padding: 0.2em 0.4em;
}
.login__form--middle-password-input {
  padding: 1em;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
  width: 100%;
  position: relative;
  margin-top: 1em;
}
.login__form--middle-password-input:focus-visible {
  outline: none;
}
.login__form--middle-password-input:-webkit-autofill, .login__form--middle-password-input:-webkit-autofill:hover, .login__form--middle-password-input:-webkit-autofill:focus, .login__form--middle-password-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset;
}
.login__form--middle-password-input-label {
  position: relative;
}
.login__form--middle-password-input-label::after {
  content: "Password";
  position: absolute;
  top: -26px;
  left: 10px;
  font-size: 0.75rem;
  color: #151515;
  background-color: #fff;
  padding: 0.2em 0.4em;
}
.login__form--middle-submit {
  font-weight: 700;
  color: #fff;
  background-color: #f66c00;
  width: 100%;
  height: 50px;
  font-size: 1.125rem;
  border-radius: 4px;
  border: none;
  transition: ease 0.5s;
  margin-top: 1em;
}
.login__form--middle-submit:hover {
  background-color: #dc6100;
}
.login__form--middle-break {
  margin: 20px auto;
  width: 100%;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
}
.login__form--middle-break-or {
  position: absolute;
  left: 45%;
  top: -17px;
  font-weight: 600;
  padding: 0.5em 1em;
  background-color: #fff;
  font-size: 1rem;
  color: #000;
}
.login__form--middle-btns {
  display: flex;
  justify-content: center;
  gap: 1em;
}
@media (max-width: 768px) {
  .login__form--middle-btns {
    flex-direction: column;
  }
}
.login__form--middle-btns-a {
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  background-color: #fff;
  font-size: 1rem;
  color: #000;
  width: 50%;
  padding: 0.7em 1em;
  display: flex;
  align-items: center;
  gap: 2em;
  transition: ease 0.5s;
}
.login__form--middle-btns-a:hover {
  background-color: #e8e8e8;
  text-decoration: none;
}
.login__form--middle-btns-a span {
  white-space: nowrap;
}
@media (max-width: 768px) {
  .login__form--middle-btns-a {
    width: 100%;
    justify-content: center;
    gap: 0;
  }
}
.login__form--middle-btns-azure {
  background-image: url("../../assets/img/auth_pages/mf-auth-azure.svg");
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  display: inline-block;
}
@media (max-width: 768px) {
  .login__form--middle-btns-azure {
    margin-right: auto;
  }
}
@media (max-width: 768px) {
  .login__form--middle-btns-azure-2 {
    margin-right: auto;
  }
}
.login__form--middle-btns-google {
  background-image: url("../../assets/img/auth_pages/mf-auth-google.svg");
  background-repeat: no-repeat;
  width: 20px;
  height: 21px;
  display: inline-block;
}
@media (max-width: 768px) {
  .login__form--middle-btns-google {
    margin-right: auto;
  }
}
@media (max-width: 768px) {
  .login__form--middle-btns-google-2 {
    margin-right: auto;
  }
}
.login__form--bottom-p {
  margin-top: 1em;
}
.login__form--bottom-a {
  font-size: 0.75rem;
  color: #f66c01;
}
@media (max-width: 768px) {
  .login {
    display: flex;
    flex-direction: column-reverse;
  }
}

.metric-table td {
  color: #8C969E;
  overflow-x: auto;
  text-overflow: clip;
}
.metric-table tbody tr:hover {
  background-color: #fdeeed;
  cursor: pointer;
}
.metric-table tbody tr:has(input[type=checkbox]:checked) {
  background-color: #f66c00;
}
.metric-table tbody tr:has(input[type=checkbox]:checked) td {
  color: #fff;
}

.metric-folder-list {
  text-wrap: nowrap;
}
.metric-folder-list .metric-folder {
  cursor: pointer;
  overflow-y: clip;
  height: 24px;
  color: #3c3f42;
  position: relative;
}
.metric-folder-list .metric-folder.expanded {
  height: auto;
  color: #f66c00;
}
.metric-folder-list .metric-folder > div {
  padding-left: 18px;
}
.metric-folder-list .metric-folder > .metric-folder::before, .metric-folder-list .metric-folder > .metric-leaf::before {
  content: "";
  position: absolute;
  border-left: #3c3f42 1px dashed;
  left: 1px;
  top: 0;
  height: 100%;
  width: 1px;
}
.metric-folder-list .metric-leaf {
  position: relative;
  color: #3c3f42;
}
.metric-folder-list p {
  padding: 4px 0;
}
.metric-folder-list p:hover {
  background-color: rgba(246, 108, 0, 0.1);
}

.metric-search-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

.metric-quickview-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.metric-quickview-container iframe {
  margin: 0;
  width: 100%;
  height: 99%;
}

.signup__split {
  width: 50%;
  position: fixed;
}
@media (max-width: 1000px) {
  .signup__split {
    width: 100%;
    position: initial;
  }
}
.signup__left {
  background-color: #fff;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1em;
  z-index: 2;
}
.signup__right {
  background-color: #191c28;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  z-index: 1;
}
.signup__right--wrapper {
  width: 600px;
  padding: 0.5em;
}
@media (max-width: 1000px) {
  .signup__right--wrapper {
    padding: 2em;
  }
}
.signup__right--heading {
  font-size: 1.5rem;
  color: #fff;
  text-transform: capitalize;
  text-align: center;
  margin-bottom: 1em;
}
.signup__form {
  width: 440px;
}
.signup__form--top-img {
  width: 190px;
}
.signup__form--top-h1 {
  font-size: 1.5rem;
  color: #151515;
  margin: 0.8em 0;
  font-weight: 600;
}
.signup__form--top-p {
  font-size: 0.875rem;
  color: #151515;
}
.signup__form--top-p-2 {
  margin-top: 4px;
}
.signup__form--top-p-3 {
  margin-top: 1em;
}
.signup__form--top-a {
  font-size: 0.875rem;
  color: #f66c01;
  font-weight: 600;
}
.signup__form--top-a-2 {
  font-size: 0.875rem;
  color: #f66c01;
  font-weight: 600;
  text-decoration: underline;
}
.signup__form--top-a:hover {
  text-decoration: none;
}
.signup__form--middle-email-input {
  padding: 1em;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
  width: 100%;
  position: relative;
  margin-top: 1em;
}
.signup__form--middle-email-input:focus-visible {
  outline: none;
}
.signup__form--middle-email-input:-webkit-autofill, .signup__form--middle-email-input:-webkit-autofill:hover, .signup__form--middle-email-input:-webkit-autofill:focus, .signup__form--middle-email-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset;
}
.signup__form--middle-email-input-label {
  position: relative;
}
.signup__form--middle-email-input-label::after {
  content: "Email Address";
  position: absolute;
  top: -26px;
  left: 10px;
  font-size: 0.75rem;
  color: #151515;
  background-color: #fff;
  padding: 0.2em 0.4em;
}
.signup__form--middle-password-input {
  padding: 1em;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 1rem;
  background-color: #fff;
  width: 100%;
  position: relative;
  margin-top: 1em;
}
.signup__form--middle-password-input:focus-visible {
  outline: none;
}
.signup__form--middle-password-input:-webkit-autofill, .signup__form--middle-password-input:-webkit-autofill:hover, .signup__form--middle-password-input:-webkit-autofill:focus, .signup__form--middle-password-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset;
}
.signup__form--middle-password-input-label {
  position: relative;
}
.signup__form--middle-password-input-label::after {
  content: "Password";
  position: absolute;
  top: -26px;
  left: 10px;
  font-size: 0.75rem;
  color: #151515;
  background-color: #fff;
  padding: 0.2em 0.4em;
}
.signup__form--middle-submit {
  font-weight: 700;
  color: #fff;
  background-color: #f66c00;
  width: 100%;
  height: 50px;
  font-size: 1.125rem;
  border-radius: 4px;
  border: none;
  transition: ease 0.5s;
  margin-top: 1em;
}
.signup__form--middle-submit:hover {
  background-color: #dc6100;
}
.signup__form--middle-submit:disabled {
  pointer-events: all;
  background-color: #f66c00;
  color: #fff;
  opacity: 0.5;
  cursor: not-allowed;
}
.signup__form--middle-break {
  margin: 20px auto;
  width: 100%;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
}
.signup__form--middle-break-or {
  position: absolute;
  left: 45%;
  top: -17px;
  font-weight: 600;
  padding: 0.5em 1em;
  background-color: #fff;
  font-size: 1rem;
  color: #000;
}
.signup__form--middle-btns {
  display: flex;
  justify-content: center;
  gap: 1em;
}
@media (max-width: 1000px) {
  .signup__form--middle-btns {
    flex-direction: column;
  }
}
.signup__form--middle-btns-a {
  border: 1px solid #e8e8e8;
  border-radius: 5px;
  background-color: #fff;
  font-size: 1rem;
  color: #000;
  width: 50%;
  padding: 0.7em 1em;
  display: flex;
  align-items: center;
  gap: 2em;
  transition: ease 0.5s;
}
.signup__form--middle-btns-a:hover {
  background-color: #e8e8e8;
  text-decoration: none;
}
.signup__form--middle-btns-a span {
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .signup__form--middle-btns-a {
    width: 100%;
    justify-content: center;
    gap: 0;
  }
}
.signup__form--middle-btns-azure {
  background-image: url("../../assets/img/auth_pages/mf-auth-azure.svg");
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  display: inline-block;
}
@media (max-width: 1000px) {
  .signup__form--middle-btns-azure {
    margin-right: auto;
  }
}
@media (max-width: 1000px) {
  .signup__form--middle-btns-azure-2 {
    margin-right: auto;
  }
}
.signup__form--middle-btns-google {
  background-image: url("../../assets/img/auth_pages/mf-auth-google.svg");
  background-repeat: no-repeat;
  width: 20px;
  height: 21px;
  display: inline-block;
}
@media (max-width: 1000px) {
  .signup__form--middle-btns-google {
    margin-right: auto;
  }
}
@media (max-width: 1000px) {
  .signup__form--middle-btns-google-2 {
    margin-right: auto;
  }
}
.signup__form--bottom-p {
  margin-top: 2em;
  font-size: 0.75rem;
  color: #151515;
  line-height: 20px;
}
.signup__form--bottom-a {
  font-size: 0.75rem;
  color: #f66c01;
}
.signup__form--bottom-a:hover {
  text-decoration: none;
}
.signup__feature-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 500px;
}
@media (max-width: 1000px) {
  .signup__feature-list {
    display: block;
    margin: 0 20%;
  }
}
.signup__feature-list--item {
  font-size: 1rem;
  color: #fff;
  flex: 0 0 50%;
  padding: 0.8em;
}
.signup__feature-list--item-icon {
  width: 20px;
  height: 21px;
  display: inline-block;
  margin-right: 1em;
}
.signup__image {
  width: 435px;
  height: 256px;
  display: block;
  margin: 2em auto;
}
.signup__logos {
  text-align: center;
  overflow: hidden;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.signup__logos::before {
  content: "";
  background-image: linear-gradient(to right, rgb(25, 28, 40), transparent);
  position: absolute;
  left: 0;
  bottom: 60px;
  width: 40%;
  height: 36%;
  z-index: 1;
  max-width: 100px;
}
.signup__logos::after {
  content: "";
  background-image: linear-gradient(to left, rgb(25, 28, 40), transparent);
  position: absolute;
  right: 0;
  bottom: 60px;
  width: 40%;
  height: 36%;
  z-index: 1;
  max-width: 100px;
}
.signup__logos--header {
  opacity: 0.4;
  color: #fff;
  font-size: 0.875rem;
  text-transform: uppercase;
  text-align: center;
}
.signup__logos--list {
  list-style-type: none;
  display: flex;
  width: inherit;
  position: absolute;
}
.signup__logos--list.signup__logos--list-primary {
  animation: primary 15s linear infinite;
}
.signup__logos--list.signup__logos--list-secondary {
  animation: secondary 15s linear infinite;
}
.signup__logos--list li {
  display: inline-block;
  position: relative;
}
.signup__logos--list-image {
  opacity: 0.4;
  width: auto;
  height: 55px;
  margin: 0 auto;
  max-width: 135px;
  filter: invert(100%) sepia(93%) saturate(27%) hue-rotate(96deg) brightness(107%) contrast(106%);
}
.signup__logos--list-image:first-of-type {
  max-width: 36px;
}
.signup__logos--list-image:nth-child(4) {
  max-width: 39px;
}
.signup__logos--lists {
  position: relative;
  width: 1266px;
  height: 56px;
  margin: 24px 0 60px;
  overflow: hidden;
}
@media (max-width: 1000px) {
  .signup {
    display: flex;
    flex-direction: column;
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1266px);
  }
}
@keyframes primary {
  from {
    left: 0px;
  }
  to {
    left: -1266px;
  }
}
@keyframes secondary {
  from {
    left: 1266px;
  }
  to {
    left: 0%;
  }
}
.dashboard-library__body {
  background: #f2f3f6;
  font-family: Source Sans Pro;
}
.dashboard-library__top-box {
  padding: 1rem;
  background-color: #ffffff;
  box-shadow: 0px 1px 2px 1px rgba(135, 135, 135, 0.5);
}
.dashboard-library__top-box-description {
  color: #8C969E;
  font-size: 14px;
}
.dashboard-library__main-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  max-width: 100%;
  margin-top: 4rem;
}
@media (max-width: 1400px) {
  .dashboard-library__main-box {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
  }
}
@media (max-width: 1025px) {
  .dashboard-library__main-box {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 0px;
  }
}
.dashboard-library__addon-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  border-radius: 3px;
  background-color: #ffffff;
  box-shadow: 0px 1px 2px 1px rgba(135, 135, 135, 0.5);
  overflow: hidden;
}
@media (max-width: 735px) {
  .dashboard-library__addon-card {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 1025px) {
  .dashboard-library__addon-card {
    border-radius: 0px;
  }
}
.dashboard-library__addon-card > div:nth-child(2) {
  flex-grow: 1;
}
.dashboard-library__addon-card > div:nth-child(3) {
  width: 100px;
}
.dashboard-library__service-icon {
  width: 5rem;
  padding: 1rem;
}
.dashboard-library__dash-name {
  font-weight: bold;
}
.dashboard-library__panel-description {
  margin-top: 0.5rem;
  opacity: 0.9;
  font-size: 12px;
  color: #76828b;
  text-decoration: none solid rgb(118, 130, 139);
}

#azure {
  height: 85vh;
  overflow: hidden;
}

#gcp {
  height: 85vh;
  overflow: hidden;
}

#azure-content {
  overflow: hidden;
}

.integration-account {
  width: 95%;
}

.integrations-tags {
  display: flex;
  align-items: center;
}
.integrations-tags-key {
  width: 40%;
}

.addons-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: 75vh;
}
.addons-form #addons-hint {
  margin: 0px;
}
.addons-form__column--left-creds {
  width: 95% !important;
}
.addons-form__column--left-button {
  margin-top: 15px;
  padding-left: 5px;
}
.addons-form__column--right {
  width: 100%;
}
.addons-form__column--right-header {
  margin-bottom: 10px;
}
.addons-form__column--right-header-title {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.addons-form__column--right-header-tags {
  display: grid;
  grid-template-columns: 10% 10% 75% 5%;
  margin-top: 15px;
  text-align: center;
  vertical-align: middle;
}
.addons-form__column--right-header-tags-cells {
  top: 0;
  z-index: 1;
  font-size: unset;
}
.addons-form__column--right-table {
  overflow-y: auto;
  width: 100%;
  height: 60vh;
}
.addons-form__column--right-table[id=gcp-table] {
  height: 50vh;
}
.addons-form__column--right-table-service {
  width: 100%;
}
.addons-form__column--right-table-service-row {
  height: 5vh;
  text-align: center;
}
.addons-form__column--right-table-service-row-data {
  text-align: center;
  vertical-align: middle;
}
.addons-form__column--right-table-service-row-data[id=enable-chkbox] {
  width: 10%;
}
.addons-form__column--right-table-service-row-data[id=tag-chkbox] {
  width: 10%;
}
.addons-form__column--right-table-service-row-data[id=addon-service] {
  width: 75%;
}
@media screen and (max-width: 1038px) {
  .addons-form__column--right {
    height: auto;
    margin-bottom: 25px;
  }
}
@media screen and (max-width: 1038px) {
  .addons-form {
    display: block;
    flex-direction: column;
    overflow: auto;
  }
}

.file-upload-card__form-drag-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px dashed #ccc;
  background-color: rgba(128, 128, 128, 0.1294117647);
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}
.file-upload-card__form-drag-drop-zone-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #28c489;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  width: 150px;
  margin-top: 10px;
}
.file-upload-card__form-drag-drop-zone-input:hover {
  background-color: #148e5f;
}
.file-upload-card__form-drag-drop-zone-inputfocus {
  outline: none;
  box-shadow: 0px 0px 4px rgba(0, 123, 255, 0.4);
}
.file-upload-card__form-drag-drop-zone-input input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 100px;
  cursor: pointer;
  opacity: 0;
}
.file-upload-card__form-file {
  margin-top: 10px;
  margin-bottom: 10px;
}