body {
    background: #fff;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-weight: 300;
		font-size: 16px;
    color: #333;
}

strong, b {
	font-weight: 500;
}

h1, h2, h3, h4, h5, h6, p {
	font-weight: 300;
}

iframe { border: none; }

/* ==========================================================================
   Hide ng-cloak on page load, https://docs.angularjs.org/api/ng/directive/ngCloak
   ========================================================================== */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

/* ==========================================================================
    Navbar text
    ========================================================================== */

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Logo styles
   ========================================================================== */

.logo {
    height: 45px;
    padding-top: 13px;
}

/* ==========================================================================
   Common classes
   ========================================================================== */
a {
	color: #039be5;
	text-decoration: none;
	font-weight: 400;
}

a:hover, a:focus {
	color: #33AAff;
	text-decoration: underline;
}

md-icon {
  font-size: 24px;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
	text-align: center;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
	vertical-align: middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
	padding-bottom: 4px;
}

md-sidenav {
	width: 250px;
}

.md-button {
	font-weight: 400;
	padding: 3px 10px 0px 10px;
}
.md-headline {
	font-weight: 300;
}

img.img-round {
	border-radius: 50%;
}

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

md-toolbar.md-default-theme {
  background-color: black;
}

section.jumbotron {
/*  margin-bottom: 30px;
  padding: 1px 30px;*/
  /*background-color: #F8981D;*/
  text-align: center;
}

section.jumbotron h1 {
  font-size: 3em;
}

md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar) {
  background-color: #363636;
	color: #EEE;
}

textarea.monospace {
	font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Courier New, monospace;
	font-size: 12px;
	background: #222;
	color: #EEE;
	line-height: 14px;
	resize: vertical;
	word-wrap: inherit;
}

textarea.monospace2 {
	font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Courier New, monospace;
	font-size: 14px;
	line-height: 16px;
	resize: vertical;
	word-wrap: inherit;
}

md-input-container {
	margin: 10px 0;
}

md-tabs [role="tabpanel"] {
	transition: none;
}

/* This will disable the `ink-bar` animation (border-bottom of selected tab) */
md-tabs md-ink-bar {
	transition: none;
}

pre {
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	padding: 16px;
	overflow: auto;
	font-size: 95%;
	line-height: 1.1em;
	border: 1px solid #CCC;
	border-radius: 3px;
}

code {
	padding: 2px .4em;
	margin: 0;
	font-size: 85%;
	border: 1px solid #CCC;
	border-radius: 3px;
}

pre code {
	border: none;
	padding: 0;
}

blockquote {
	padding: 0 1em;
	border-left: .25em solid #dfe2e5;
	margin: 16px 0;
}

readme {
	line-height: 1.4em;
}

.label {
	padding: 2px 5px;
	border-radius: 3px;
	font-size: small;
	font-weight: bold;
}

.underline {
	border-bottom: 3px solid #777;
}

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

.graph-container {
	min-height: 75px;
}

.break-word {
	word-break: break-all;
	word-wrap: break-word;
}

.pagebox {
	width: 50px;
	border: none;
	background-color: transparent;

}

fieldset {
	border: 1px solid #ccc;
}

.stack-trial, .stack-small, .stack-medium, .stack-large {
	color: #444;
	border-radius: 5px;
	text-align: center;
	padding: 3px 10px;
	font-weight: bold;
	background: #EEE;
}
.stack-trial {color: white; background-color: purple;}

alert-box {cursor: pointer;}
alert-box.alert-error * {background-color: #ff5722 !important;}
alert-box.alert-success * {background-color: #88AF12 !important;}
alert-box.alert-info * {background-color: #424242 !important;}
alert-box.alert-warning * {background-color: #ff7c00 !important;}

.green{ color: #88AF12 !important; }
.red{ color: #bb1111 !important;}
.orange{ color: #ff7c00 !important;}
.yellow{ color: #ffcc00 !important;}
.blue{ color: #33AAFF !important; }
.white{ color: white !important; }
.gray{ color: #777777 !important; }
.lightgray{ color: #AAAAAA !important; }

.green-bg{ background-color: #88AF12 !important; }
.red-bg{ background-color: #bb1111 !important;}
.orange-bg{ background-color: #ff7c00 !important;}
.yellow-bg{ background-color: #ffcc00 !important;}
.blue-bg{ background-color: #33AAFF !important; }
.white-bg{ background-color: white !important; }
.gray-bg{ background-color: #777777 !important; }
.lightgray-bg{ background-color: #AAAAAA !important; }
.lightgray2-bg{ background-color: #f9f6f1 !important; }

.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-32 { font-size: 32px; }
.size-48 { font-size: 48px; }
.size-64 { font-size: 64px; }
.size-96 { font-size: 96px; }
.spin {
	display: inline-block;
	animation: spin 2s infinite linear;
	-moz-animation: spin 2s infinite linear;
	-webkit-animation: spin 2s infinite linear;
}
.spin.size-12 {transform-origin: 51% 20%;}
.spin.size-14 {transform-origin: 47% 27%;}
.spin.size-16 {transform-origin: 50% 26%;}
.spin.size-18 {transform-origin: 50% 33%;}
.spin.size-21 {transform-origin: 50% 38%;}
.spin.size-24 {transform-origin: 50% 42%;}
.spin.size-32 {transform-origin: 50% 46%;}
.spin.size-48 {transform-origin: 50% 48%;}
.spin.size-64 {transform-origin: 50% 50%;}
.spin.size-96 {transform-origin: 51% 48%;}

/* ==========================================================================
   Margins and Paddings
   ========================================================================== */

.pan{padding:0}
.pas{padding:5px}
.pam{padding:10px}
.pal{padding:20px}
.ptn{padding-top:0}
.pts{padding-top:5px}
.ptm{padding-top:10px}
.ptl{padding-top:20px}
.prn{padding-right:0}
.prs{padding-right:5px}
.prm{padding-right:10px}
.prl{padding-right:20px}
.pbn{padding-bottom:0}
.pbs{padding-bottom:5px}
.pbm{padding-bottom:10px}
.pbl{padding-bottom:20px}
.pln{padding-left:0}
.pls{padding-left:5px}
.plm{padding-left:10px}
.pll{padding-left:20px}
.phn{padding-left:0;padding-right:0}
.phs{padding-left:5px;padding-right:5px}
.phm{padding-left:10px;padding-right:10px}
.phl{padding-left:20px;padding-right:20px}
.pvn{padding-top:0;padding-bottom:0}
.pvs{padding-top:5px;padding-bottom:5px}
.pvm{padding-top:10px;padding-bottom:10px}
.pvl{padding-top:20px;padding-bottom:20px}
.man{margin:0}
.mas{margin:5px}
.mam{margin:10px}
.mal{margin:20px}
.mtn{margin-top:0}
.mts{margin-top:5px}
.mtm{margin-top:10px}
.mtl{margin-top:20px}
.mrn{margin-right:0}
.mrs{margin-right:5px}
.mrm{margin-right:10px}
.mrl{margin-right:20px}
.mbn{margin-bottom:0}
.mbs{margin-bottom:5px}
.mbm{margin-bottom:10px}
.mbl{margin-bottom:20px}
.mln{margin-left:0}
.mls{margin-left:5px}
.mlm{margin-left:10px}
.mll{margin-left:20px}
.mhn{margin-left:0;margin-right:0}
.mhs{margin-left:5px;margin-right:5px}
.mhm{margin-left:10px;margin-right:10px}
.mhl{margin-left:20px;margin-right:20px}
.mvn{margin-top:0;margin-bottom:0}
.mvs{margin-top:5px;margin-bottom:5px}
.mvm{margin-top:10px;margin-bottom:10px}
.mvl{margin-top:20px;margin-bottom:20px}

/* ==========================================================================
   Spinning icons
   ========================================================================== */
@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

/* ==========================================================================
   Landing page CSS
   ========================================================================== */

.container { position: relative; }
@media screen and (min-width: 1000px) {
	.container {
		margin: 0 auto;
		max-width: 960px;
	}
}
@media screen and (min-width: 1192px) {
	.container {
		max-width: 1152px;
	}
}
/*.nav img { height: 35px; }*/
.nav { min-height: 35px; }

.nav {
  overflow: hidden;
  background-color: #03a9f4;
  text-align: right;
}


.nav a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
}

.nav a:first-child {
  float: left;
}
.nav a:not(:first-child) {
  padding: 24px 16px;
}
.nav a:hover:not(:first-child) {
  padding: 24px 16px;
}
.nav a:hover:not(:first-child) {
  background-color: #039be5;
  color: white;
}

.active {
  background-color: #4CAF50;
  color: white;
}

#nav-toggle {
  display: none;
	padding: 10px;
	margin: 10px;
	color: white;
	border: 1px solid white;
	border-radius: 3px;
}

#nav-toggle:hover {
	color: white;
	border: 1px solid #039be5;
}

img.responsive-img, video.responsive-video {
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 600px) {
  .nav a:not(:first-child) {display: none;}
  .nav #nav-toggle {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .nav.responsive {position: relative;}
  .nav.responsive #nav-toggle {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.landing-container {
	margin: 0px;
}

.hero {
	margin: 20px 0 100px 0;
}

.torso {
	box-sizing: border-box;
	background-color: #fff;
	box-shadow: 0 0.1em 1em rgba(0,0,0,.3);
	border-top-left-radius: .5em;
	border-top-right-radius: .5em;
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: .5em;
	margin-top: 1em;
}

.pricingbox {
	width: 250px;
	display: inline-block;
	margin: 0 auto;
	padding: 30px;
	text-align: center;
	margin: 30px 25px;
}

hr.dotted {
	border-style: none none dotted;
	border-top: 1px dotted #CCC;
	border-bottom: none;
	border-left: none;
	border-right: none;
}

hr {
	border-top: 1px solid #CCC;
	border-bottom: none;
	border-left: none;
	border-right: none;
}

footer img {
	float: left;
}

footer {
	background-color: #424242;
	color: white;
	text-align: right;
}

.btn-large {
	display: inline-block;
	border: 1px solid transparent;
	background: #03a9f4;
	transition: .2s ease-out;
	padding: 12px 55px 12px 55px;
	color: white;
	border-radius: 4px;
	font-size: 21px;
	/*height: 50px;*/
	line-height: 34px;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.12), 0px 2px 2px 0px rgba(0,0,0,0.24);
}

a.btn-small {
	display: inline-block;
	border: 1px solid white;
	background: transparent;
	transition: .2s ease-out;
	padding: 12px 15px !important;
	margin: 0 15px;
	/*color: #039be5;*/
	border-radius: 4px;
	/*height: 50px;*/
	line-height: 14px;
}

.btn-large:hover, .btn-small:hover {
	text-decoration: none;
	color: white;
	border: 1px solid #049ce5;
}

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

.feature-col {
	float: left;
	width: 50%;
}

.feature-row:after {
	content: "";
	display: table;
	clear: both;
}

@media screen and (max-width: 600px) {
	.feature-col {
		width: 100%;
	}
}

.drift-frame-controller {
    bottom: 64px !important;
}
.drift-frame-chat {
	bottom: 125px !important;
}

config-editor {
	position: relative;
	display: block;
	min-height: 847px;
}

/* ==========================================================================
   Syntax Highlighting
   ========================================================================== */

hljs {
  display: block;
  overflow-x: auto;
  padding: 0;
  background: #0C2238;
  color: white;
  font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
  line-height: 1.45;
  -moz-tab-size: 2;
       -o-tab-size: 2;
     tab-size: 2;
  -webkit-font-smoothing: auto;
  -webkit-text-size-adjust: none;
  position: relative;
  border-radius: 2px;
  margin: 0 0 1em;
}

hljs:before {
  content: attr(lang);
  display: block;
  background: #1C5792;
  color: white;
  line-height: 48px;
  padding: 0 16px;
  border-radius: 2px 2px 0 0;
}

hljs.no-header:before {
  display: none;
}

.hljs-tag,
.hljs-tag .hljs-title,
.hljs-keyword,
.hljs-literal,
.hljs-strong,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.nginx .hljs-title,
.tex .hljs-special {
  color: #E5C3A2;
}

hljs {
  color: #ddd;
}

hljs .hljs-constant,
.asciidoc .hljs-code,
.markdown .hljs-code {
	color: #80CBC4;
}

.hljs-code,
.hljs-class .hljs-title,
.hljs-header {
	color: white;
}

.hljs-link_label,
.hljs-attribute,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-value,
.hljs-params,
.hljs-regexp {
  color: #7DB9F4;
}

.hljs-link_url,
.hljs-tag .hljs-value,
.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-emphasis,
.hljs-type,
.hljs-preprocessor,
.hljs-pragma,
.ruby .hljs-class .hljs-parent,
.hljs-built_in,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.hljs-javadoc,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-name {
  color: #9ccc65;
}

.hljs-comment,
.hljs-annotation,
.smartquote,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-decorator,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
  color: #607D8B;
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata {
  opacity: 0.5;
}

/*!
 * angular-loading-bar v0.9.0
 * https://chieffancypants.github.io/angular-loading-bar
 * Copyright (c) 2016 Wes Cruver
 * License: MIT
 */

/* Make clicks pass-through */
#loading-bar,
#loading-bar-spinner {
  pointer-events: none;
  -webkit-pointer-events: none;
  transition: 350ms linear all;
}

#loading-bar.ng-enter,
#loading-bar.ng-leave.ng-leave-active,
#loading-bar-spinner.ng-enter,
#loading-bar-spinner.ng-leave.ng-leave-active {
  opacity: 0;
}

#loading-bar.ng-enter.ng-enter-active,
#loading-bar.ng-leave,
#loading-bar-spinner.ng-enter.ng-enter-active,
#loading-bar-spinner.ng-leave {
  opacity: 1;
}

#loading-bar .bar {
  transition: width 350ms;

  background: #ec407a;
  position: fixed;
  z-index: 10002;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-bottom-right-radius: 1px;
  border-top-right-radius: 1px;
}

/* Fancy blur effect */
#loading-bar .peg {
  position: absolute;
  width: 70px;
  right: 0;
  top: 0;
  height: 2px;
  opacity: .45;
  -ms-box-shadow: #29d 1px 0 6px 1px;
  box-shadow: #29d 1px 0 6px 1px;
  border-radius: 100%;
}

#loading-bar-spinner {
  display: block;
  position: fixed;
  z-index: 10002;
  top: 10px;
  left: 10px;
}

#loading-bar-spinner .spinner-icon {
  width: 14px;
  height: 14px;

  border:  solid 2px transparent;
  border-top-color:  #ec407a;
  border-left-color: #ec407a;
  border-radius: 50%;
  animation:         loading-bar-spinner 400ms linear infinite;
}
@keyframes loading-bar-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}