/**
 * IMPORTANT: please do not edit style.css directly.
 *	We're using SASS to maintain styling, so your changes would be overridden.
 *	Please edit style.scss and/or _*.scss files instead, and use a sass compiler.
 *		Learn more about SASS: http://sass-lang.com/guide
 *
 *	Sass compiler arguments:  --style expanded
 */
/* SASS variables */
/* SASS mixins */
/**
 * Generic (non-specific) styling
 */
html, body {
  margin: 0;
  padding: 0;
}

body {
  background: #FAFAFA;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #555555;
}

/* Titles */
h1 {
  font-weight: inherit;
  font-size: inherit;
}

h2 {
  color: #444;
  font-weight: normal;
  letter-spacing: -1px;
  margin: 25px 0;
  font-size: 23px;
}

h3 {
  color: #555;
  font-weight: normal;
  letter-spacing: -1px;
  margin: 20px 0 15px 0;
  font-size: 17px;
}

h4 {
  font-weight: 400;
  margin-bottom: 5px;
}

hr {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid #888;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.subtitle {
  opacity: 0.8;
  margin: -20px 0 20px 0;
}

h3 + .subtitle {
  margin: -16px 0 0 0;
}

a {
  text-decoration: none;
}
a, a:visited, a:active, a:hover {
  color: #486aaf;
}
a:hover {
  text-decoration: underline;
}

.warntext {
  font-weight: bold;
  background-color: #cccc00;
  padding: 0;
  margin: -1px;
  border: 1px solid #b9b900;
}

.crittext {
  font-weight: bold;
  background-color: #ff6f22;
  padding: 0;
  margin: -1px;
  border: 1px solid #f16722;
}

.clear {
  clear: both;
}

.neutralMessage {
  font-size: 17px;
  text-align: center;
  margin: 0 75px;
  padding: 10px 0 35px 0;
  color: #999;
}
.neutralMessage i {
  display: block;
  font-size: 45px;
  margin-bottom: 20px;
}

.card {
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.12);
  background: #fff;
}

.tooltip {
  display: none;
  position: absolute;
  z-index: 10;
  max-width: 400px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  padding: 5px 10px;
  background-color: #777;
  background-color: rgba(0, 0, 0, 0.6);
  border: 0;
  color: #fff;
  font-size: 12px;
  text-align: justify;
}
.tooltip b {
  font-weight: 500;
}
.tooltip.singleLine {
  white-space: nowrap;
}

.switchable {
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.switchable:after {
  content: "\f415";
  font-family: "Material Design Icons", serif;
  font-size: 17px;
  margin-left: 3px;
  margin-right: -4px;
  opacity: 0.9;
  vertical-align: baseline;
}
.switchable:hover {
  cursor: pointer;
}

.switchable_content {
  display: none;
  margin: 0;
  padding: 3px 0;
  z-index: 10;
  background-color: #fff;
  width: auto;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  max-height: 350px;
  overflow-y: auto;
}
.switchable_content a, .switchable_content .title {
  height: 32px;
  line-height: 32px;
  white-space: nowrap;
  color: #333;
}
.switchable_content a {
  display: block;
  list-style: none;
  padding: 0 32px 0 24px;
  text-align: left;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
}
.switchable_content a.current {
  color: #888;
  background-color: rgba(0, 0, 0, 0.05);
  cursor: default;
}
.switchable_content a i.mdi {
  font-size: 19px;
  color: #555;
  vertical-align: middle;
  margin: -2px 10px 2px -14px;
}
.switchable_content a:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.05);
}
.switchable_content .title {
  line-height: 28px;
  height: 28px;
  border-bottom: 1px solid #dedede;
  padding: 5px 32px 5px 32px;
  margin-top: -3px;
  text-align: center;
  color: #777;
}

.modal {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: fixed;
  top: 10%;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 15;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.13), 0 6px 20px 0 rgba(0, 0, 0, 0.13);
  border-radius: 2px;
}
.modal .title {
  font-size: 15px;
  color: #fff;
  display: block;
  padding: 5px 5px 5px 20px;
  margin: -1px -1px 0 -1px;
  border-radius: 3px 3px 0 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #546E7A;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.4);
}
.modal .title span {
  display: inline-block;
  margin-top: 3px;
}
.modal .title .action {
  float: right;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  padding: 2px;
  border-radius: 2px;
  -webkit-transition-duration: 100ms;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  transition-duration: 100ms;
  text-align: center;
}
.modal .title .action:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
.modal .title .action i {
  color: #fff;
  vertical-align: middle;
}
.modal iframe {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0 0 2px 2px;
}
.modal .modalContent {
  padding: 15px 20px;
}
.modal .modalContent > *:first-child {
  margin-top: 0;
}
.modal .modalContent h2 {
  margin-bottom: 15px;
}
.modal, .modal.modal-medium {
  width: 900px;
  height: 630px;
}
.modal.modal-small {
  max-width: 600px;
  max-height: 300px;
}

.modalMask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 14;
}

/* Form elements */
input,
button,
select {
  border-radius: 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
}

input[type="text"],
input[type="number"] {
  padding: 4px 12px;
  height: 30px;
  max-width: 100%;
  line-height: 1.4;
  border: 1px solid #BFBFBF;
  background-color: #fff;
  color: #555;
  box-shadow: inset 0px 1px 2px -1px rgba(0, 0, 0, 0.2);
}
input[type="text"]:focus,
input[type="number"]:focus {
  border-color: #a5a5a5;
  outline: 0;
}
input[type="text"].input-compact,
input[type="number"].input-compact {
  padding: 0 5px;
  height: 28px;
}

input[type="submit"],
input[type="button"],
button,
select {
  color: #666666;
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 17px;
  border: 1px solid #BFBFBF;
  background-color: #F5F5F5;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
select:hover {
  background-color: #f9f9f9;
  box-shadow: 0 1px 6px -2px rgba(0, 0, 0, 0.3);
}
input[type="submit"]:active,
input[type="button"]:active,
button:active,
select:active {
  outline: none;
  background-color: #f0f0f0;
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);
}
input[type="submit"] i.mdi,
input[type="button"] i.mdi,
button i.mdi,
select i.mdi {
  margin: 0 3px 0 -6px;
  vertical-align: bottom;
  font-size: 17px;
  line-height: 14px;
}
input[type="submit"].button-primary, input[type="submit"][type="submit"],
input[type="button"].button-primary,
input[type="button"][type="submit"],
button.button-primary,
button[type="submit"],
select.button-primary,
select[type="submit"] {
  color: #fff;
  border-color: #217dbb;
  background-color: #3498DB;
}
input[type="submit"].button-primary:hover, input[type="submit"][type="submit"]:hover,
input[type="button"].button-primary:hover,
input[type="button"][type="submit"]:hover,
button.button-primary:hover,
button[type="submit"]:hover,
select.button-primary:hover,
select[type="submit"]:hover {
  background-color: #45a1de;
  box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.4);
}
input[type="submit"].button-primary:active, input[type="submit"][type="submit"]:active,
input[type="button"].button-primary:active,
input[type="button"][type="submit"]:active,
button.button-primary:active,
button[type="submit"]:active,
select.button-primary:active,
select[type="submit"]:active {
  background-color: #258cd1;
  box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);
}
input[type="submit"] + button,
input[type="button"] + button,
button + button,
select + button {
  margin-left: 5px;
}
input[type="submit"].button-small,
input[type="button"].button-small,
button.button-small,
select.button-small {
  padding: 5px 11px;
}

select {
  padding: 5px 6px;
}
select:active {
  background-color: #F5F5F5;
  box-shadow: none;
}

.buttons-wrap {
  cursor: default;
  margin-top: 25px;
  margin-bottom: 10px;
  text-align: right;
}

/**
 * General layout styling
 * Imported in style.scss
 */
/**
 * Header-specific styling
 * Imported in _layout.scss
 */
.logo {
  display: inline-block;
  width: 118px;
  height: 34px;
  background-repeat: no-repeat;
  background-position: 4px 2px;
  background-size: 115px 30px;
}
.logo {
  /* SVG logo: fallback to png */
  background-image: url("../img/logo-h.png");
  background-image: linear-gradient(transparent, transparent), url("../img/logo-h.svg");
}
.logo.logo-neg {
  /* SVG logo: fallback to png */
  background-image: url("../img/logo-h-neg.png");
  background-image: linear-gradient(transparent, transparent), url("../img/logo-h-neg.svg");
}

header {
  color: #fff;
  min-height: 45px;
  margin: 0 auto;
  padding: 1px 12px 1px 0;
  text-align: center;
  background-color: #097D03;
  z-index: 5;
  border-bottom: 1px solid #3A713C;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  -webkit-transition: transform 200ms linear;
  -moz-transition: transform 200ms linear;
  transition: transform 200ms linear;
  transform: translateY(0%);
}
header.toolbar-hide {
  transform: translateY(-100%);
}
header h1 {
  color: #fff;
  margin: 0;
  cursor: default;
  font-size: 15px;
  font-weight: 400;
}
header .left {
  float: left;
  font-size: 0;
}
header .left .logo {
  margin-top: 5px;
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  opacity: 0.9;
}
header .left .logo:hover {
  opacity: 1;
}
header .pageTitle {
  font-weight: 100;
  margin-top: 7px;
  min-height: 24px;
  font-size: 16px;
  color: #eee;
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
header .pageTitle h1 {
  display: inline-block;
  vertical-align: middle;
  padding-top: 4px;
}
header .pageTitle a, header .pageTitle div.switchable {
  display: inline-block;
  color: #fff;
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid transparent;
  white-space: nowrap;
  margin: -4px 0 4px 0;
}
header .pageTitle a:hover, header .pageTitle div.switchable:hover {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.15);
  text-decoration: none;
}
header .right {
  float: right;
}
header .actions {
  display: inline-block;
  margin-left: 5px;
  vertical-align: top;
}
header .action-icon {
  display: inline-block;
  width: 31px;
  height: 31px;
  overflow: hidden;
  cursor: pointer;
  margin: 5px 0 0 5px;
  vertical-align: middle;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
  border-radius: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
header .action-icon i {
  font-size: 19px;
  padding: 6px;
}
header .action-icon:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
header .action-icon.pressed {
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.05);
  background-color: rgba(0, 0, 0, 0.2);
}
header .action-icon#navigation-toggle i {
  font-size: 20px;
  padding-top: 5px;
  padding-bottom: 7px;
}

/* Filter input */
.filter {
  width: 300px;
  margin-top: 4px;
  position: relative;
  text-align: right;
  display: inline-block;
  vertical-align: top;
}
.filter input[type=text] {
  width: 250px;
  height: auto;
  padding: 9px 28px 9px 31px;
  border: 0;
  color: #fff;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
  box-shadow: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: #2c712f;
  background-color: rgba(0, 0, 0, 0.2);
  /* Placeholder text color */
  /* Hide IE's cross on text field */
}
.filter input[type=text]:hover {
  background-color: rgba(0, 0, 0, 0.22);
}
.filter input[type=text]:focus {
  outline: none;
  background-color: #276329;
  background-color: rgba(0, 0, 0, 0.3);
  width: 300px;
}
.filter input[type=text]::-webkit-input-placeholder {
  color: #ffffff;
  opacity: 0.8;
}
.filter input[type=text]:-moz-placeholder {
  /* Firefox 18- */
  color: #ffffff;
  opacity: 0.8;
}
.filter input[type=text]::-moz-placeholder {
  /* Firefox 19+ */
  color: #ffffff;
  opacity: 0.8;
}
.filter input[type=text]:-ms-input-placeholder {
  color: #ffffff;
  opacity: 0.8;
}
.filter input[type=text]::-ms-clear {
  display: none;
}
.filter .mdi-window-close {
  opacity: 0.8;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  padding: 9px;
}
.filter .mdi-magnify {
  opacity: 0.8;
  margin-right: -28px;
  font-size: 18px;
  vertical-align: middle;
  position: relative;
}
.filter #overview-search-noresult {
  margin: 30px 15px;
}

/* Main */
#main {
  width: 100%;
  margin-left: auto;
  margin-top: 42px;
  display: table;
  table-layout: fixed;
  min-height: 600px;
}
#main.no-toolbar {
  margin-top: 0;
}

/* Navigation */
nav {
  display: table-cell;
  vertical-align: top;
  width: 200px;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
}
nav .navigation-wrapper {
  overflow-x: hidden;
}
nav .navigation-wrapper .navigation {
  width: 200px;
}
nav .navigation-wrapper .navigation > hr {
  background-color: #ddd;
  height: 1px;
  margin: 0;
  box-shadow: none;
  border: 0;
}
nav .navigation-wrapper .navigation > h2 {
  padding: 10px 0 2px 12px;
  margin: 5px 0 5px 0;
  font-weight: 500;
  font-size: 14px;
  color: #565656;
  cursor: default;
  letter-spacing: 0;
}
nav .navigation-wrapper .navigation ul {
  margin: 0.2em 0 0.8em 0;
  padding: 0;
}
nav .navigation-wrapper .navigation ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: Helvetica, sans-serif;
}
nav .navigation-wrapper .navigation ul li > a {
  display: block;
  padding: 5px 11px;
  color: #666;
}
nav .navigation-wrapper .navigation ul li > a:hover,
nav .navigation-wrapper .navigation ul li .timerangesList:hover + a {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.05);
  color: #444;
}
nav .navigation-wrapper .navigation ul li .timerangesList {
  float: right;
  font-size: 0;
  margin-right: 9px;
  margin-top: 3px;
  opacity: 0.2;
  -webkit-transition-duration: 100ms;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  transition-duration: 100ms;
}
nav .navigation-wrapper .navigation ul li .timerangesList a {
  display: inline-block;
  font-size: 11px;
  padding: 3px 4px;
}
nav .navigation-wrapper .navigation ul.categories:hover .timerangesList {
  opacity: 0.5;
}
nav .navigation-wrapper .navigation ul.categories li:hover .timerangesList {
  opacity: 1;
}
nav .navigation-wrapper .navigation .badge {
  float: right;
  display: inline-block;
  margin-right: 6px;
  margin-top: 4px;
  min-width: 6px;
  padding: 3px 7px;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  text-align: center;
  background-color: #999;
  border-radius: 10px;
}
nav .navigation-wrapper .navigation .logo {
  margin: 10px 15px 5px 15px;
  opacity: 0.8;
}
nav.fold {
  width: 0;
}
nav.shown {
  width: 200px;
}

.navigation-mask {
  display: none;
  position: fixed;
  z-index: 9;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}

/* Content */
#content {
  display: table-cell;
  padding: 5px 0 30px 30px;
  background-color: #ffffff;
  border-left: 1px solid #ccc;
  border-left: 1px solid rgba(0, 0, 0, 0.01);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* Footer */
footer {
  width: 100%;
  margin-top: 15px;
  padding: 5px 35px;
  clear: both;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-align: right;
}
footer > * {
  margin: 0;
  display: inline-block;
}
footer .navigation {
  display: block;
  margin: 0;
  text-align: right;
}
footer p.tagline {
  color: #aaa;
  font-size: 11px;
  letter-spacing: -0.5px;
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  margin: 10px 0;
}
footer p.tagline b {
  font-weight: 500;
}
footer p.tagline:hover {
  color: #888;
}

#backToTop {
  display: block;
  height: 0;
  overflow: hidden;
  position: fixed;
  bottom: 10px;
  right: 0;
  background-color: #2196F3;
  color: #fff;
  font-size: 17px;
  padding: 0;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: opacity 300ms 0s;
  -moz-transition: opacity 300ms 0s;
  transition: opacity 300ms 0s;
}
#backToTop.visible {
  opacity: 0.75;
  height: auto;
  padding: 4px 7px;
}
#backToTop.visible:hover {
  text-decoration: none;
  opacity: 1;
}

/**
 * Graphs styling
 */
.graph {
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 1px solid;
  box-shadow: 0 0 2px 0;
}
.graph.i {
  color: #fff;
  box-shadow: 0 0 1px 0 #888;
}
.graph.iwarn, .graph.icrit {
  opacity: 0.95;
}
.graph.iwarn {
  color: #ED793F;
}
.graph.icrit {
  color: #F14122;
}
.graph.iunkn {
  color: #ffaa00;
}
.graph.iremoved {
  opacity: 0.6;
}
.graph:hover + .graph-dynazoomModalLink {
  display: block;
  opacity: 0.5;
}

.graph-link {
  min-width: 16px;
  min-height: 16px;
  max-width: 100%;
  display: inline-block;
  position: relative;
  margin: 4px 7px 4px 0;
  vertical-align: top;
  font-size: 0;
  /* Dynazoom modal link */
}
.graph-link:hover {
  text-decoration: none;
}
.graph-link .graph-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
}
.graph-link .graph-dynazoomModalLink {
  cursor: pointer;
  position: absolute;
  font-size: 18px !important;
  color: #000;
  top: 3px;
  right: 3px;
  border: 1px solid transparent;
  padding: 1px 2px 2px 2px;
  opacity: 0;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
  border-radius: 2px;
}
.graph-link .graph-dynazoomModalLink:hover {
  background-color: rgba(0, 0, 0, 0.1);
  opacity: 1;
}
@media (max-width: 768px) {
  .graph-link .graph-dynazoomModalLink {
    display: none;
  }
}
@media (max-width: 768px) {
  .graph-link {
    margin: 4px;
  }
}
.graph-link.unkn:link, .graph-link.unkn:visited, .graph-link.unkn:active, .graph-link.unkn:hover {
  color: #ffaa00;
}
.graph-link.warn {
  background-color: #ED793F;
}
.graph-link.warn:link, .graph-link.warn:visited, .graph-link.warn:active, .graph-link.warn:hover {
  color: #ffd300;
}
.graph-link.crit {
  background-color: #F14122;
}
.graph-link.crit:link, .graph-link.crit:visited, .graph-link.crit:active, .graph-link.crit:hover {
  color: #ff0000;
}

.table {
  display: table;
  table-layout: fixed;
  max-width: 100%;
}
.table .table-row-group {
  display: table-row-group;
}
.table .table-row {
  display: table-row;
}
.table .table-row .graph-col {
  padding-top: 15px;
  width: auto;
  display: table-cell;
}
.table .table-row .graph-col:only-child {
  display: inline-block;
}
@media (max-width: 768px) {
  .table, .table .table-row, .table .table-row .graph-col {
    display: block;
  }
}

.row-fluid .graph-col {
  display: inline-block;
}
.row-fluid.row-nowrap {
  white-space: nowrap;
  font-size: 0;
}
.row-fluid.row-nowrap .row-text {
  font-size: 14px;
}

[data-graphext="pngx2"] .graph-col, [data-graphext="svg"] .graph-col {
  min-width: 400px;
  max-width: 625px;
}
@media (min-width: 1261px) {
  [data-graphext="pngx2"] .graph-col, [data-graphext="svg"] .graph-col {
    width: 50%;
  }
}
@media (max-width: 400px) {
  [data-graphext="pngx2"] .graph-col, [data-graphext="svg"] .graph-col {
    min-width: 0;
  }
}
[data-graphext="pngx2"] .graph-col .graph, [data-graphext="svg"] .graph-col .graph {
  width: 100%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13 / 10), only screen and (min-resolution: 120dpi) {
  [data-graphext="pngx2"] .graph-col, [data-graphext="svg"] .graph-col {
    max-width: 1060px;
  }
}

img {
  border: 0;
}

/* Content: comparison / categoryview */
.page-head > div {
  display: inline-block;
  vertical-align: middle;
}
.page-head .timeRangeSwitch {
  margin-left: 100px;
}

/* Content: service view */
p.graph_info {
  text-align: justify;
  max-width: 1000px;
  margin-top: -20px;
}

#legend {
  border-collapse: collapse;
  border-radius: 2px;
  margin: 20px 0;
  background-color: #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  border: 1px solid #bbb;
}
#legend .legendHead {
  font-size: 15px;
  text-align: left;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 #3f535c;
  margin: -1px;
  border-radius: 2px 2px 0 0;
  border: 1px solid #3f535c;
  background-color: #546E7A;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
}
#legend .legendHead th {
  padding: 6px 10px 6px 15px;
  white-space: nowrap;
  font-weight: 500;
}
#legend td {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.75);
  padding: 8px 15px;
  border-bottom: 1px solid #d8d8d8;
}
#legend .oddrow {
  background-color: #f8f8f8;
}
#legend .evenrow {
  background-color: #fdfdfd;
}
#legend .lastrow td {
  border-bottom: 0 solid transparent !important;
}

/* Overview */
.groupview {
  list-style: none;
  margin: 20px 30px;
  padding: 0;
  max-width: 900px;
  /* Nested groups */
}
.groupview > li {
  border-radius: 1px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #ccc;
}
.groupview span.domain a {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-shadow: 1px 1px 0 #4a606b;
  display: block;
  padding: 6px 20px;
  margin: -1px;
  border-radius: 2px 2px 0 0;
  border: 1px solid #3f535c;
  background-color: #546E7A;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition-duration: 100ms;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  transition-duration: 100ms;
}
.groupview span.domain a:hover {
  background-color: #4e6671;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
  text-decoration: none;
}
.groupview li ul li span.domain a {
  margin: 0;
}
.groupview li ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.groupview li ul li {
  border-bottom: 1px solid #dedede;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0;
  /* Remove white spaces */
  overflow: hidden;
}
.groupview li ul li span.host {
  display: block;
  float: left;
  min-width: 30%;
}
.groupview li ul li span.host a {
  display: block;
  padding: 7px 20px;
  font-weight: 500;
  font-size: 13px;
}
.groupview li ul li.last {
  border-bottom-width: 0;
}
.groupview .overview-sparkline {
  float: left;
  display: block;
  margin: 1px 5px 1px 0;
  position: relative;
}
.groupview .overview-sparkline .sparkline {
  width: 90px;
  height: 28px;
}
.groupview .compare {
  border-bottom: 1px solid #ccc;
  background-color: rgba(0, 0, 0, 0.06);
  padding: 0 10px;
  cursor: default;
  box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, 0.02);
}
.groupview .compare .mdi {
  vertical-align: sub;
  margin-right: 5px;
}
.groupview .compare a {
  display: inline-block;
  padding: 6px 7px;
  font-size: 11px;
  opacity: 0.8;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
}
.groupview .compare a:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.07);
}
.groupview .categories {
  display: block;
  padding-top: 4px;
  cursor: default;
}
.groupview .categories a {
  display: inline-block;
  padding: 5px 6px;
  color: #666;
  font-size: 11px;
  letter-spacing: -0.5px;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
  border-radius: 2px;
}
.groupview .categories a:hover {
  background-color: rgba(0, 0, 0, 0.05);
  text-decoration: none;
}
.groupview .categories a.warn {
  color: #ED793F;
}
.groupview .categories a.crit {
  color: #F14122;
}

/* Time range switch */
.switchable_timeRange {
  text-align: center;
}
.switchable_timeRange h4 {
  text-align: left;
  margin: 8px 10px 5px 10px;
}

ul.timeRangeSwitch {
  display: inline-block;
  margin: 10px 0;
  padding: 0;
  list-style: none;
  font-size: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
ul.timeRangeSwitch li {
  display: inline-block;
  margin-left: -1px;
  padding: 7px 10px;
  cursor: pointer;
  color: #57565F;
  font-size: 11px;
  font-weight: 400;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #EFEFF2;
  -webkit-transition-duration: 150ms;
  -moz-transition-duration: 150ms;
  -o-transition-duration: 150ms;
  transition-duration: 150ms;
  border-radius: 1px;
}
ul.timeRangeSwitch li:first-child {
  border-radius: 2px 1px 1px 2px;
}
ul.timeRangeSwitch li:last-child {
  border-radius: 1px 2px 2px 1px;
}
ul.timeRangeSwitch li:hover {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background-color: #f2f2f4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
ul.timeRangeSwitch li.selected, ul.timeRangeSwitch li:active {
  font-weight: 500;
}
ul.timeRangeSwitch li.selected, ul.timeRangeSwitch li.selected:hover, ul.timeRangeSwitch li:active, ul.timeRangeSwitch li:active:hover {
  background-color: #d8d8e0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Dynazoom */
.dynazoomGraph {
  max-width: none;
}

.overlayDiv {
  zoom: 1;
  opacity: .55;
  background-color: #eee;
  position: absolute;
  z-index: 2;
  border-radius: 2px;
}
.overlayDiv.dragging {
  visibility: visible;
  background-color: #555;
}
.overlayDiv.dragged {
  background-color: #000;
  cursor: pointer;
  -webkit-transition-duration: 100ms;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  transition-duration: 100ms;
}
.overlayDiv.dragged:hover {
  opacity: .6;
}
.overlayDiv.dragged:active {
  opacity: .65;
}

.dzForm {
  width: 100%;
  max-width: 800px;
  padding: 5px 20px 15px 20px;
  margin: 20px 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.dzForm #dynaForm div {
  margin-bottom: 15px;
}
.dzForm #dynaForm label {
  margin-bottom: 5px;
  display: block;
}
.dzForm #dynaForm label em {
  color: #aaa;
  font-size: 0.9em;
}
.dzForm #dynaForm input[type="number"] {
  width: 100px;
}
.dzForm #dynaForm .inputUnit {
  display: inline-block;
  padding: 0 5px;
  line-height: 23px;
  margin-left: -2px;
  height: 26px;
  border-radius: 0 2px 2px 0;
  cursor: default;
  background-color: #eee;
  border: 1px solid #aaa;
  vertical-align: top;
}
.dzForm #dynaForm .half {
  display: inline-block;
  width: 49%;
  min-width: 270px;
  vertical-align: top;
}

.lazy {
  display: none;
}

/* Event ruler */
#eventRulerMouseTrigger {
  position: fixed;
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 364px;
  z-index: 1;
  cursor: col-resize;
}
#eventRulerMouseTrigger #eventRuler {
  border-left: 1px solid #000;
  border-right: 1px solid #fff;
  opacity: 0.5;
  height: 100%;
  width: 0;
}

/* Nodeview tabs */
#content[data-tabs=true] ul.tabs {
  margin: 10px 0 0 -30px;
  padding: 0 30px;
  border-bottom: 1px solid #dedede;
  box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.2);
}
#content[data-tabs=true] ul.tabs li {
  list-style: none;
  display: inline-block;
  margin: 0;
  padding: 0 12px;
  height: 35px;
  line-height: 37px;
  text-align: center;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  -webkit-transition-duration: 200ms;
  -moz-transition-duration: 200ms;
  -o-transition-duration: 200ms;
  transition-duration: 200ms;
  border-radius: 2px 2px 0 0;
}
#content[data-tabs=true] ul.tabs li:hover {
  background-color: rgba(0, 0, 0, 0.03);
}
#content[data-tabs=true] ul.tabs li.active {
  color: #546E7A;
  border-bottom-color: #546E7A;
  cursor: default;
}
#content[data-tabs=true] ul.tabs li.warn {
  color: #ED793F;
}
#content[data-tabs=true] ul.tabs li.crit {
  color: #F14122;
}
#content[data-tabs=true] ul.tabs li, #content[data-tabs=true] ul.tabs a {
  color: #777;
}
#content[data-tabs=true] ul.tabs li:hover, #content[data-tabs=true] ul.tabs a:hover {
  color: #666;
}
#content[data-tabs=true] ul.tabs:empty {
  display: none;
}

#content[data-tabs=false] ul.tabs {
  display: none;
}
#content[data-tabs=false] h3 {
  display: block;
}

/* Tabs feature is disabled */
#content[data-tabsenabled=false] h3 {
  display: block;
}

/* Domainview treeview */
.domainview li {
  list-style: none;
}
.domainview .toggle {
  width: 16px;
  height: 16px;
  padding: 1px;
  display: inline-block;
  text-align: center;
  color: #000;
  font-size: 15px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  opacity: 0.7;
}
.domainview .toggle:hover {
  opacity: 0.9;
}
.domainview a {
  display: inline-block;
  color: #444;
  padding: 3px;
}

.ie8Warning {
  display: none;
  padding: 5px 10px;
  margin-top: 5px;
  border: 2px solid #ff5722;
  font-size: 0.8em;
  position: absolute;
  top: 0;
  z-index: 10;
  background-color: #fff;
}
.ie8Warning h3 {
  display: inline-block;
  font-weight: 600;
  margin: 0 10px 0 0;
}
.ie8Warning a {
  margin-left: 10px;
}

.settingsModal dl {
  padding: 4px 0;
  font-size: 0;
}
.settingsModal dl dt, .settingsModal dl dd {
  display: inline-block;
  margin: 0;
  width: 50%;
  font-size: 14px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.settingsModal dl dd {
  text-align: right;
  padding-right: 4px;
}
.settingsModal input[type="button"] {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Include _responsive file */
/*
 * This file contains everything that makes munin responsive, and is included in style.scss
 */
.show-mobile {
  display: none !important;
}

/* Small devices (tablets, smartphones) */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }

  header {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 5px;
  }
  header .left, header .left .action-icon {
    margin-left: 0;
  }
  header .left .logo {
    display: none;
  }
  header .right .filter {
    display: inline-block;
    margin-top: 0;
    width: 150px;
    /* Don't expand on focus */
  }
  header .right .filter input[type=text], header .right .filter input[type=text]:focus {
    width: 150px;
  }
  header .actions .action-icon {
    margin-top: 3px;
  }
  header .pageTitle h1 {
    padding-top: 0;
  }

  /* Different nav */
  #main {
    display: block;
    min-height: 0;
  }

  nav {
    display: block;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    max-width: 500px;
    background-color: #fff;
    box-shadow: 1px 0px 20px 0px rgba(0, 0, 0, 0.3);
  }
  nav .navigation-wrapper {
    padding: 0;
    overflow-y: auto;
  }
  nav .navigation-wrapper .navigation {
    width: 260px;
  }
  nav .navigation-wrapper .timerangesList {
    opacity: 1;
  }
  nav.fold {
    width: 0;
  }
  nav.shown {
    width: 260px;
  }

  #content {
    display: block;
    padding: 1em 0;
    width: 100%;
  }
  #content h2, #content h3, #content h4, #content .subtitle {
    margin-left: 20px;
  }
  #content .page-head {
    margin-left: 20px;
  }
  #content .page-head h2, #content .page-head .subtitle {
    margin-left: 0;
  }
  #content .page-head .timeRangeSwitch {
    margin-left: 40px;
  }

  /* Overview */
  ul.groupview {
    margin: 20px 15px !important;
  }
  ul.groupview .categories {
    padding-top: 0;
    clear: both;
    margin-left: 10px;
  }

  .modal {
    width: 100%;
    left: 0;
    top: 0;
    margin-top: 15px;
    margin-left: 0;
    max-height: 100%;
  }

  .dzForm #dynaForm .half {
    display: block;
    width: 100%;
  }
}
/* Hide second graph in nodeview when there's not enough horizontal space to show both */
@media (max-width: 1260px) {
  .hide-if-overflows {
    display: none !important;
  }
}
/* Medium devices */
/* Large devices (large desktops) */

/*# sourceMappingURL=style.css.map */
