@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700|Roboto:400,100,700,400italic,700italic|Roboto+Condensed:400,700,400italic,700italic,300);


/* --------------------------------------------------------------------------
 * Global
 * -------------------------------------------------------------------------- */

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
}

body {
    overflow-y: scroll;
}

body, input, textarea, select {
    font-size: 14px;
}
body, input, textarea, select,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    /* Reset Bootstrap */
    font-family: "Roboto", sans-serif;
}

h1, h2, h3,
.h1, .h2, .h3 {
    font-family: "Roboto Slab", serif;
    font-weight: 300;
    padding: 8px 10px;
}

h2 {
    border-bottom: 1px solid #CC0000;
    font-size: 18px;
    margin: 10px 0;
}
h2:first-child {
    margin-top: 0px;
}

a {
    color: #2a6496;
    outline: none !important;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

a:hover {
    /*color: #3377FF;*/
    color: #225599;
    text-decoration: underline;
}

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

.no-margin  { margin:  0; }
.no-padding { padding: 0; }

#page {
    display: block;
    left: 0px;
    min-height: 100%;
    min-width: 920px; /* TODO: responsive designs for smaller screen widths */
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 0;
}

#page > header {
    background: #222;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    display: block;
    padding: 10px;
    width: 100%;
}

#page > header a {
    background: url('../wandlogo.png') no-repeat 10px 10px;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    float: left;
    height: 57px;
    overflow: hidden;
    padding-left: 170px;
    text-decoration: none;
    white-space: nowrap;
}

#page > header a:hover {
    background-color: #111;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    text-decoration: none;
}

#page > header span {
    font-size: 36px;
    font-weight: 100;
    line-height: 55px;
    padding: 0 10px;
}

/*
 * This CSS pins the footer to the bottom of the page or the bottom of the
 * viewport depending on which of the two has a greater height, but the footer
 * is not currently used. We may want to make the footer fixed for pages that
 * scroll infinitely (e.g. the dashboard's event list).
 */
#page > footer {
    bottom: 0px;
    font-size: 0.75em;
    height: 20px;
    left: 0px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 10;
}

#page > nav ul {
    background: #333;
    font-family: "Roboto Condensed", sans-serif;
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}
#page > nav ul li {
    float: left;
}

#page > nav ul li span {
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    color: #ccc;
    display: block;
    margin-bottom: 0px;
    padding: 6px 18px 6px;
    text-decoration: none;
}

#page > nav ul li a {
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    color: #ccc;
    display: block;
    margin-bottom: 0px;
    padding: 6px 18px 6px;
    text-decoration: none;
}

#page > nav ul li a:hover {
    background: hsl(0, 50%, 50%);
    color: #fff;
}

#page > nav ul li.current a {
    background: hsl(0, 50%, 40%);
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 0 #333;
}

#page > nav ul li.current a:hover {
    background-color: #222;
    margin-bottom: -1px;
    padding-bottom: 7px;
}

#content {
    font-size: 13px;
    padding: 20px;
	margin-right: 10%;
	margin-left: 10%;
}
img {
	display: block;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#pdfFile {
	min-height: 80%;
	position: fixed;
	height: 100%;
	width: 100%;
}

.nowrap {
    white-space: nowrap;
}

/* Clearfixes */

#page > header:after, #page > header:before,
#page > nav ul:after, #page > nav ul:before,
#content:after, #content:before {
    content: " ";
    display: table;
}
#page > header:after,
#page > nav ul:after,
#content:after {
    clear: both;
}
#page > header,
#page > nav ul,
#content {
    *zoom: 1; /* IE 6/7 clearfix */
}

/* --------------------------------------------------------------------------
 * Login page
 * -------------------------------------------------------------------------- */

#login-form {
    float: left;
    position: relative;
    width: 800px;
}

#login-form .checkbox label {
    font-size: 16px;
}

#tos blockquote p {
    font-size: 14px;
    font-weight: 400;
}

#tos blockquote li {
    font-size: 14px;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
 * Graph pages
 * -------------------------------------------------------------------------- */

#legend-container {
    float: left;
    padding: 5px 0 10px 0;
}

/* Drop down a line after the "Add new data series" button */
#legend-container > a + span {
    clear: both;
}

#legend-container > a,
#legend-container > span {
    float: left;
    font-size: 0.9em;
    font-weight: normal;
    margin: 0 2px 2px 0;
    padding: 3px;
}

#legend-container > span > label.loading {
    background: url('../img/ajax-loader2.gif') no-repeat center;
    height: 16px;
    margin: -1px 0;
    overflow: hidden;
    text-indent: 16px;
    width: 16px;
}

/* Pad the '+' icon of the "Add new data series" button slightly */
#legend-container > a > span {
    margin: 0 6px 0 4px;
}
#legend-container > a {
    padding-right: 6px;
}

/* Pad the 'x' button and the stream icon of the stream labels slightly */
#legend-container > span button {
    margin: -3px -3px -3px 10px;
}
#legend-container > span label {
    margin: 0 8px 0 6px;
}

#graph-container {
    clear: both;
    float: left;
    position: relative;
}

#graph {
    background: #fff;
    border: 2px solid #999;
    float: left;
    /* min-height = (300 + 90 graphs) + (20 gap) + (80 + 4 padding/border) */
    min-height: 494px;
    padding: 40px;
    position: relative;
    width: 800px;
}

ul#graphtablist {
    display: block;
    font-size: 0.9em;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 100%;
    white-space: nowrap;
}
ul#graphtablist li {
    background: #eee;
    border: 2px solid #999;
    border-left: none;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    font-family: "Roboto Condensed", sans-serif;
    margin: 0 0 -2px 0;
    margin-right: 5px;
    padding: 0.75em;
    position: relative;
}
ul#graphtablist li.selected { /* The currently selected tab */
    background: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    margin-right: 0px;
    z-index: 8;
}

#graph .detail {
    margin-bottom: 20px;
    height: 300px;
}

#graph .summary {
    height: 90px;
}

div.control-label {
    display: inline-block;
}

.control-label label[title] {
    border-bottom: 1px dotted #ccc;
    cursor: help;
    margin-right: -4px;
    padding: 2px 4px;
}

.popover-content .definition {
    max-width: 300px;
}

.flotr-handles-handle {
    background:#eee;
    border:1px solid #333;
    position:absolute;
    cursor:pointer;
    border-radius:3px
}
.flotr-handles-handle,.flotr-grid-label {
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none
}
.flotr-handles-drag {
    height: 12px;
    width: 4px;
}
.flotr-handles-scroll {
    height: 4px;
    cursor: move;
}
.flotr-handles-left {
    cursor: w-resize;
}
.flotr-handles-right {
    cursor: e-resize;
}

.flotr-loading {
    background-color: "#fff";
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.flotr-loading > div {
    display: table;
    height: 100%;
    width: 100%;
}
.flotr-loading > div > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.flotr-loading .progress {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    width: 400px;
}
.flotr-loading .status {
    display: block;
    padding: 10px 0;
    text-align: center;
}

.flotr-mouse-value {
    /* This element is just used to position our tooltips */
    display: block;
    position: absolute;
    z-index: 10; /* high enough to sit atop other graphs on dashboard */
}

.tooltip {
    /* Prevent tooltips from responding to mouse hovers (show them even if we
     * are hovering over where they would appear) */
    pointer-events: none;
}
.tooltip-inner {
    /*
     * Default max-width is only 200px, which cuts off some of our labels with
     * long names or IPv6 addresses. If there is whitespace then it will wrap,
     * which means it is all visible but looks a bit wrong in some cases.
     * Everyone capable of triggering mouseover tooltips has at least 800px
     * horizontal these days, right?
     */
    max-width: 800px;
    min-width: 200px;
}
.tooltip-inner p {
    margin: 5px 0;
}
.tooltip-inner hr {
    border-color: rgba(255, 255, 255, 0.2);
    margin: 0 auto;
    padding: 0;
    width: 90%;
}
.tooltip-inner table {
        width:100%;
}
.tooltip-inner td {
        text-align:left;
}
.tooltip-inner td+td {
        text-align:right;
}

/* --------------------------------------------------------------------------
 * Graph Browser styles
 * -------------------------------------------------------------------------- */


#collist {
    list-style: none;
    padding: 0 10px;
}
#collist li {
    float: left;
    margin: 0 10px 10px 0;
    width: 300px;
}
#collist li:nth-child(even) a {
    background: #eee;
}
#collist li a {
    border: 1px solid transparent;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}
#collist li a:hover {
    border: 1px solid #ccc;
}
#collist li a:hover h3 {
    text-decoration: underline;
}
#collist li a h3 {
    font-family: "Roboto Condensed";
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
    padding: 5px 0;
}
#collist li a p {
    color: #333;
    font-size: 13px;
    margin: 0;
    padding: 0;
}
.modal-body {
    padding: 20px 20px 0px 20px;
}
.tab-content {
    margin-top: 20px;
}

/* fix stupid bootstrap margin-right:-15px that pushed logout button too far */
#tab-logout {
    margin-right: 0px;
}

/* fix stupid bootstrap margin-right:-15px that pushed login button too far */
#tab-login {
    margin-right: 0px;
}

/* --------------------------------------------------------------------------
 * Matrix styles
 * -------------------------------------------------------------------------- */

ul#topTabList > li#loading {
    background: url('../img/ajax-loader.gif') no-repeat center;
    height: 40px;
    visibility: hidden;
    width: 30px;
}

ul#topTabList {
    background: #eee;
    border-bottom: 1px solid #ddd;
    list-style: none;
    margin: -20px -20px 0;
    min-width: 470px;
    padding: 0;
}
ul#topTabList > li {
    float: left;
    margin-bottom: -1px;
}
ul#topTabList > li > a {
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    display: block;
    padding: 11px 15px 10px;
}
ul#topTabList > li > div {
    padding: 4px;
}

ul#topTabList > li.current > a {
    background: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin-bottom: -1px;
}

ul#topTabList > li#changeMesh {
    float: right;
}

#changeMesh div {
    display: inline-block;
    vertical-align: middle;
}

#changeMesh a {
    padding: 5px;
}

.changeMesh-selection--single {
    background-color: #eee !important;
}

.changeMesh-selection__rendered {
    font-weight: bold !important;
    color: #2A6496 !important;
}

#colour-key {
    float: right;
    margin: 20px 0 0;
    width: 220px;
}
#colour-key table {
    border-collapse: separate;
    border-spacing: 3px;
    width: 100%;
}
#colour-key td, #colour-key th {
    border-bottom: 10px solid #fff; /* Super lazy way of spacing the table */
    color: #666;
    height: 26px;
    line-height: 10.5px;
    padding: 0;
}
.lt-ie9 #colour-key td, .lt-ie9 #colour-key th {
    /* IE won't space nicely so we'll just lay it out the best we can */
    line-height: 16px;
    height: 16px;
}

#show_family {
    margin-bottom: 10px;
}

#show_direction {
    margin-bottom: 10px;
}

#latency_metric {
    margin-bottom: 10px;
}

#traceroute_metric {
    margin-bottom: 10px;
}

#http_metric {
    margin-bottom: 10px;
}

#tput_metric {
    margin-bottom: 10px;
}

table#amp-matrix {
    border-collapse: separate;
    border-spacing: 3px;
    display: inline-block;
    margin-top: 20px;
}

table#amp-matrix th,
table#amp-matrix td {
    font-size: 10.5px;
    font-weight: bold;
    padding: 0;
}

table#amp-matrix th {
    padding-left: 3px;
    /* hax to fix rendering glitches with transformed text */
    transform: perspective(9999px);
    -moz-transform: perspective(9999px);
    -ms-transform: perspective(9999px);
    -webkit-transform: perspective(9999px);
    vertical-align: bottom;
    white-space: nowrap;
    width: 16px;
}

table#amp-matrix th p {
    display: block;
    margin: 0;
    padding: 0;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 0px;
}

.lt-ie9 table#amp-matrix th {
    position: relative;
}
.lt-ie9 table#amp-matrix th p {
    /* Rotate the text in IE6-IE8 (this method avoids a JS polyfill)
     * http://www.boogdesign.com/examples/transforms/matrix-calculator.html */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678,sizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678,sizingMethod='auto expand');

    left: 0px;
    position: absolute;
    top: -10px;
}

table#amp-matrix th p span {
    display: block;
    /* writing-mode: tb-rl; */
    white-space: nowrap;
}

table#amp-matrix td:first-child {
    padding-right: 5px;
    text-align: right;
    white-space: nowrap;
}
table#amp-matrix td:first-child:last-child {
    text-align: center;
}

.cell {
    background: #666;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    height: 16px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 16px;
}

.cell a, .cell b {
    display: block;
    height: 100%;
    position: relative;
    text-decoration: none !important;
    width: 100%;
}

.cell b {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.lt-ie9 .cell b {
    border: 1px solid #ccc;
}

.cell span {
    border-style: solid;
    display: block;
    height: 0px;
    position: absolute;
    width: 0px;
}

.cell span.firsthalf {
    border-color: #000 transparent transparent transparent;
    border-style: solid inset inset inset; /* fix strange grey borders in FF */
    border-width: 16px 16px 0 0;
    left: 0px;
    top: 0px;
}

.cell span.secondhalf {
    border-color: transparent transparent #000 transparent;
    border-style: inset inset solid inset; /* fix strange grey borders in FF */
    border-width: 0 0 16px 16px;
    bottom: 0px;
    right: 0px;
}

/* Super hacky triangle borders */
.cell span:after {
    content: ' ';
    display: block;
    height: 16px;
    position: absolute;
    top: -16px;
    width: 16px;
    z-index: 100;
}

.cell span.firsthalf:after {
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.2);
}

.cell span.secondhalf:after {
    box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.2);
    /* Offset by one pixel each way to avoid overlapping with an IPv4 triangle's
     * border, if one exists (and it's not really noticeable if it doesn't) */
    height: 15px;
    left: -15px;
    top: 1px;
    width: 15px;
}

.cell.test-none,
.cell span.test-none:after {
    box-shadow: none;
}

/* --------------------------------------------------------------------------
 * Matrix cell colours (HSL format for humans and modern trowsers)
 * -------------------------------------------------------------------------- */

td.test-none    { background-color: #eee; }
td.test-error   { background-color: hsl(300, 50%, 85%); } /* purple */
td.test-incomplete   { background-color: hsl(187, 52%, 80%); } /* powder-blue */
td.test-complete   { background-color: hsl(219, 79%, 66%); } /* cornflower-blue */
td.test-colour1 { background-color: hsl(120, 90%, 50%); } /* green */
td.test-colour2 { background-color: hsl(80, 90%, 50%); } /* yellow-green */
td.test-colour3 { background-color: hsl(55, 90%, 50%); } /* yellow */
td.test-colour4 { background-color: hsl(40, 90%, 50%); } /* orange */
td.test-colour5 { background-color: hsl(20, 90%, 50%); } /* orange-red */
td.test-colour6 { background-color: hsl(0, 90%, 50%); } /* red */
td.test-colour7 { background-color: hsl(0, 90%, 30%); } /* darker red */

.cell span.firsthalf.test-none    { border-color: #eee transparent transparent transparent; }
.cell span.firsthalf.test-error   { border-color: hsl(300, 50%, 85%) transparent transparent transparent; } /* purple */
.cell span.firsthalf.test-incomplete   { border-color: hsl(187, 52%, 80%) transparent transparent transparent; } /* powder-blue */
.cell span.firsthalf.test-complete   { border-color: hsl(219, 79%, 66%) transparent transparent transparent; } /* cornflower-blue */
.cell span.firsthalf.test-colour1 { border-color: hsl(120, 90%, 50%) transparent transparent transparent; } /* green */
.cell span.firsthalf.test-colour2 { border-color: hsl(80, 90%, 50%) transparent transparent transparent; } /* yellow-green */
.cell span.firsthalf.test-colour3 { border-color: hsl(55, 90%, 50%) transparent transparent transparent; } /* yellow */
.cell span.firsthalf.test-colour4 { border-color: hsl(40, 90%, 50%) transparent transparent transparent; } /* orange */
.cell span.firsthalf.test-colour5 { border-color: hsl(20, 90%, 50%) transparent transparent transparent; } /* orange-red */
.cell span.firsthalf.test-colour6 { border-color: hsl(0, 90%, 50%) transparent transparent transparent; } /* red */
.cell span.firsthalf.test-colour7 { border-color: hsl(0, 90%, 30%) transparent transparent transparent; } /* darker red */

.cell span.secondhalf.test-none    { border-color: transparent transparent #eee transparent; }
.cell span.secondhalf.test-error   { border-color: transparent transparent hsl(300, 50%, 85%) transparent; } /* purple */
.cell span.secondhalf.test-incomplete   { border-color: transparent transparent hsl(187, 52%, 80%) transparent; } /* powder-blue */
.cell span.secondhalf.test-complete   { border-color: transparent transparent hsl(219, 79%, 66%) transparent; } /* cornflower-blue */
.cell span.secondhalf.test-colour1 { border-color: transparent transparent hsl(120, 90%, 50%) transparent; } /* green */
.cell span.secondhalf.test-colour2 { border-color: transparent transparent hsl(80, 90%, 50%) transparent; } /* yellow-green */
.cell span.secondhalf.test-colour3 { border-color: transparent transparent hsl(55, 90%, 50%) transparent; } /* yellow */
.cell span.secondhalf.test-colour4 { border-color: transparent transparent hsl(40, 90%, 50%) transparent; } /* orange */
.cell span.secondhalf.test-colour5 { border-color: transparent transparent hsl(20, 90%, 50%) transparent; } /* orange-red */
.cell span.secondhalf.test-colour6 { border-color: transparent transparent hsl(0, 90%, 50%) transparent; } /* red */
.cell span.secondhalf.test-colour7 { border-color: transparent transparent hsl(0, 90%, 30%) transparent; } /* darker red */

/* --------------------------------------------------------------------------
 * Matrix cell colours (hex format for IE8 and below)
 * -------------------------------------------------------------------------- */

.lt-ie9 td.test-error   { background-color: #ECC6EC; } /* purple */
.lt-ie9 td.test-colour1 { background-color: #0DF20D; } /* green */
.lt-ie9 td.test-colour2 { background-color: #A6F20D; } /* yellow-green */
.lt-ie9 td.test-colour3 { background-color: #F2DF0D; } /* yellow */
.lt-ie9 td.test-colour4 { background-color: #F2A60D; } /* orange */
.lt-ie9 td.test-colour5 { background-color: #F2590D; } /* orange-red */
.lt-ie9 td.test-colour6 { background-color: #F20D0D; } /* red */
.lt-ie9 td.test-colour7 { background-color: #910808; } /* darker red */

.lt-ie9 .cell span.firsthalf.test-error   { border-color: #ECC6EC transparent transparent transparent; } /* purple */
.lt-ie9 .cell span.firsthalf.test-colour1 { border-color: #0DF20D transparent transparent transparent; } /* green */
.lt-ie9 .cell span.firsthalf.test-colour2 { border-color: #A6F20D transparent transparent transparent; } /* yellow-green */
.lt-ie9 .cell span.firsthalf.test-colour3 { border-color: #F2DF0D transparent transparent transparent; } /* yellow */
.lt-ie9 .cell span.firsthalf.test-colour4 { border-color: #F2A60D transparent transparent transparent; } /* orange */
.lt-ie9 .cell span.secondhalf.test-colour5 { border-color: #F2590D transparent transparent transparent; } /* orange-red */
.lt-ie9 .cell span.firsthalf.test-colour6 { border-color: #F20D0D transparent transparent transparent; } /* red */
.lt-ie9 .cell span.firsthalf.test-colour7 { border-color: #910808 transparent transparent transparent; } /* darker red */

.lt-ie9 .cell span.secondhalf.test-error   { border-color: transparent transparent #ECC6EC transparent; } /* purple */
.lt-ie9 .cell span.secondhalf.test-colour1 { border-color: transparent transparent #0DF20D transparent; } /* green */
.lt-ie9 .cell span.secondhalf.test-colour2 { border-color: transparent transparent #A6F20D transparent; } /* yellow-green */
.lt-ie9 .cell span.secondhalf.test-colour3 { border-color: transparent transparent #F2DF0D transparent; } /* yellow */
.lt-ie9 .cell span.secondhalf.test-colour4 { border-color: transparent transparent #F2A60D transparent; } /* orange */
.lt-ie9 .cell span.secondhalf.test-colour5 { border-color: transparent transparent #F2590D transparent; } /* orange-red */
.lt-ie9 .cell span.secondhalf.test-colour6 { border-color: transparent transparent #F20D0D transparent; } /* red */
.lt-ie9 .cell span.secondhalf.test-colour7 { border-color: transparent transparent #910808 transparent; } /* darker red */


table#amp-matrix td.hover,
table#amp-matrix th.hover > p > span {
    text-decoration: underline;
}

.popover {
    max-width: none;
    /* So long as we aren't clicking on anything inside them, this makes
     * showing popovers in the matrix a little bit nicer */
    pointer-events: none;
    /* Display popovers on top of modals (which have z-index 1040) */
    z-index: 1050;
}

.popover-content {
    font-size: 13px;
    padding: 0;
}

.popover-content > p,
.popover-content > div > p,
.popover-content > div.sparkline {
    margin-bottom: 0px;
    padding: 0;
}

.popover-content > div {
    padding: 5px 10px;
}

.popover-content h4,
.popover-content h5 {
    padding: 0 10px;
    text-align: center;
    width: 300px;
}
.popover-content h4 {
    font-size: 1em;
    padding: 10px;
}
.popover-content h5 {
    font-size: 1em;
    font-weight: bold;
    padding: 0 25px;
    text-align: left;
}
.popover-content h5 em {
    display: block;
    text-align: center;
}

.popover-content table {
    margin: 0 20px;
    width: 260px;
}

.popover-content table td,
.popover-content table th {
    padding: 2px 5px;
}

.popover-content table tbody tr td {
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
    text-shadow: 1px 1px 0 #fff;
}

/* Colour IPv4 and IPv6 headings the same as their corresponding sparkline
 * series */
.popover-content th.firsthalf {
    color: #00f;
}
.popover-content th.secondhalf {
    color: #f00;
}

/* Clearfixes */

ul#topTabList:after, ul#topTabList:before {
    content: " ";
    display: table;
}
ul#topTabList:after {
    clear: both;
}
ul#topTabList {
    *zoom: 1; /* IE 6/7 clearfix */
}

/*
 * --------------------------------------------------------------------------
 * Alert message styles
 * --------------------------------------------------------------------------
 */

#alerts {
    position: absolute;
    top: 300px;
    left: 40px;
    z-index: 1000;          /* sit above everything else we have on the page */
    width: 760px;
}

.alert {

}

/*
 * --------------------------------------------------------------------------
 * Schedule display styles
 * --------------------------------------------------------------------------
 */

a.mesh_link {
    /*text-decoration: underline dotted;*/
    border-bottom: 1px dotted;
}
a.mesh_link:hover {
    text-decoration: none;
    border-bottom: 1px solid;
}

div.schedule-info {
}

.collist-item {
    height: 120px;
}

.select2-results__group {
    font-size: 16px !important;
    background-color: #f5f5f5;
}

/* Fix for bootstrap bug where disabled buttons would still respond
 * to click events */
label.disabled {
    pointer-events: none;
}

.btn-toolbar {
    display: inline-block;
}

.rating-button {
    width: 120px;
}

.rating-padding {
    padding-left: 15px;
}

#freeform_reasons {
    resize: none; /* Not available on all browsers :( */
}

/*
tr.schedule-dns:nth-child(odd) {
    background-color: #ffffbb;
}
tr.schedule-dns:nth-child(even) {
    background-color: #ffffdd;
}

tr.schedule-http:nth-child(odd) {
    background-color: #bbffff;
}
tr.schedule-http:nth-child(even) {
    background-color: #ddffff;
}

tr.schedule-icmp:nth-child(odd) {
    background-color: #bbffbb;
}
tr.schedule-icmp:nth-child(even) {
    background-color: #ddffdd;
}

tr.schedule-tcpping:nth-child(odd) {
    background-color: #ffbbff;
}
tr.schedule-tcpping:nth-child(even) {
    background-color: #ffddff;
}

tr.schedule-throughput:nth-child(odd) {
    background-color: #ffbbbb;
}
tr.schedule-throughput:nth-child(even) {
    background-color: #ffdddd;
}

tr.schedule-traceroute:nth-child(odd) {
    background-color: #bbbbff;
}
tr.schedule-traceroute:nth-child(even) {
    background-color: #ddddff;
}
*/