/*
// LESS styling
@lightGray: #eee;
@darkGray: #555;
@medGray: #aaa;
@bootstrapGutter: 15px;
@gray: #959595;
@panelHeaderGray: #f5f5f5;
@lightBlue: #d9edf7;
@activeColor: #337ab7;
@bootstrapGutterSize: 15px;

.user-select(@userSelect: none) {
  -webkit-user-select: @userSelect;  // Chrome all / Safari all
  -moz-user-select: @userSelect;     // Firefox all
  -ms-user-select: @userSelect;      // IE 10+
  user-select: @userSelect;          // Likely future
}
.inner-scroll-shadow() {    
    // ref: http://lea.verou.me/2012/04/background-attachment-local/
	background:
		// Shadow covers
		linear-gradient(white 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
		
		// Shadows
		radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background:
		// Shadow covers
		linear-gradient(white 30%, rgba(255,255,255,0)),
		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
		
		// Shadows
		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
	
	// Opera doesn't support this in the shorthand
	background-attachment: local, local, scroll, scroll;
}
.animate(@animation){
    -webkit-animation: @animation;
    animation: @animation;
}
@keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;    
  }
}

// ref: https://codeburst.io/how-to-create-a-simple-css-loading-spinner-make-it-accessible-e5c83c2e464c
.loading-spinner-mixin(@activeColor: #BBB, @bgColor: #EEE, @size: 15px, @time: 1.5s) {
    @keyframes spinner {
        0% {
            transform: translate3d(-50%, -50%, 0) rotate(0deg);
        }

        100% {
            transform: translate3d(-50%, -50%, 0) rotate(360deg);
        }
    }
    
    animation-play-state: running;
    opacity: 1;
    position: relative;
    display: inline-block;    
    
    &.-paused { 
        animation-play-state: paused; 
        opacity: 0.2;
        transition: opacity linear 0.1s;
    }

    &::after {
        animation: @time linear infinite spinner;
        animation-play-state: inherit;
        border: solid 3px @bgColor;
        border-bottom-color: @activeColor;
        border-radius: 50%;
        content: "";
        height: @size;
        left: 50%;
        opacity: inherit;
        position: absolute;
        top: 50%; 
        transform: translate3d(-50%, -50%, 0);
        width: @size;
        will-change: transform;
    }
}

// base loading spinner (assumed to be on white/light background)
.loading-spinner {
    .loading-spinner-mixin();
    width: 8px;
    height: 13px;
    // background: url('/pumpapi/static/images/loading-spinner.gif') top left;
   // display: inline-block;
}

// style the Navbar
#top-nav {
    .navbar-loading-msg {
        text-align: center;
        padding: 15px;
        background-color: #eee;
        position: absolute;
        top: 100%;
        width: 100%;
        font-weight: 600;
        font-size: 130%;
        box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.4); // top inner shadow
        display: none;
    }
    .mobile-indicator {
        display: none;
    }
}
#legacy_graph_box {
    display: none;
    table td {
     	padding: 5px;
   }
    #chart {
        min-height: 400px;
    }    
    .series-holder-title {
        margin-bottom: 0px;
    }
    .series-holder {
        cursor: pointer;
    }
    .pumpAccordionChildren {
        padding-left: 10px !important;
    }
    .small-italics {
        font-size: 75%;
        font-style: italic;
        color: #898989;
    }
    .float-right {
        float: right;
    }
    .series {
        cursor : pointer;
        width: 200px;
        white-space: normal;
        vertical-align: middle;
        padding-left: 10px;
    }
    .seriestext {
        vertical-align: middle;
    }
    .pumpcontainer {
        min-width: 300px !important;
        min-height: 800px;
    }
    .bold {
        font-weight: bold;
    }
}

// hide the cloneable elements
#node_sidebar_clone,
#node_detail_clone,
#node_detail_header_clone {
    display: none;
}

// style some basic site forms
.form-basic {
    table {
        // add some cell padding so form fields don't bunch together
        tbody {
            th {
                label {
                    padding-right: 10px;
                }
            }
            td {
                padding-bottom:  10px;
                input {
                    padding: 4px;
                }
            }
        }
    }
}


// fir node lists, we want this consistent across the site
.node-list {
    .node {
        padding: 0;
        margin-bottom: 5px;
        &.active {
            .node-name {
                &:hover {
                    background-color: inherit;
                }
            }
            .panel-body {
                display: block;
            }
            .loading-spinner {
                .loading-spinner-mixin(#3a90da, white);
            }
        }
        .node-name {
            font-weight: 600;
            padding: 10px 15px;
            cursor: pointer;
            &:hover {
                background-color: @lightBlue;
            }
            .loading-spinner {
                float: right;
            }
        }
        .panel-default { // this is selected node
            // margin: 10px -13px -8px;
            margin: 0px 2px 2px;
            color: black;
        }
        .node-details {
            .last-update {
                color: @medGray;
                font-size: 11px;
                display: none;
            }
            .loading-msg {
                color: @medGray;
                font-size: 11px;
            }
            .node-normalize {
                display: none;
                background-color: @lightGray;
                padding: 4px;
                font-size: 12px;
                text-align: left;
            }
            .panel-body {
                text-align: center;
                padding: 0px;
            }
            .node-stats { // node details
                .clone-me {
                    display: none;
                }
                .toggle-stats-group {
                    cursor: pointer;
                    text-transform: uppercase;
                    text-align: center;
                    background-color: @panelHeaderGray;
                    color: @darkGray;
                    &:hover {
                        background-color: @lightGray;
                        th {
                            color: black;
                        }
                    }
                    &.group-visible {
                        .glyphicon-chevron-down {
                            display: inline-block;
                        }
                        .glyphicon-chevron-right {
                            display: none;
                        }
                    }
                    .glyphicon-chevron-down {
                        display: none;
                    }
                    th {
                        padding: 3px; // make the toggler not take up the normal row height
                        font-size: 10px;
                    }
                    .section-label {
                    }
                }
                .stat-row {
                    &.axis-right { // show the correct axis arrow
                        .glyphicon.glyphicon-arrow-right {
                            display: block;
                            visibility: visible;
                        }
                        .glyphicon.glyphicon-arrow-left {
                            display: none;
                        }
                    }
                    &.axis-left { // show the correct axis arrow
                        .glyphicon.glyphicon-arrow-left {
                            display: block;
                            visibility: visible;
                        }
                        .glyphicon.glyphicon-arrow-right {
                            display: none;
                        }
                    }
                    &:hover {
                        cursor: pointer;
                        background-color: @lightGray;
                    }
                    &.latest-value-null {
                        .value {
                            color: @medGray;
                        }
                    }
                    &.is-normalized {
                        .value {
                            color: @activeColor;
                            &::after {
                                content: "*";
                                display: inline-block;
                            }
                        }
                    }
                    .value {
                        // make sure the value field doesn't get too colorful
                        color: black;
                    }
                    .axis {
                        padding-right: 2px;
                        padding-left: 2px;
                        width: 25px;
                        vertical-align: middle;
                    }
                    .glyphicon {
                        display: none;
                        &:first-child {
                            // always have one of the arrows taking up virtual space so things don't jump around
                            display: block;
                            visibility: hidden;
                        }
                    }
                }
            }
        }
    }
}

// shared subview templates/_subview_node_summary.html
// classname must be added to the panel opening tag
.panel-subview-node-summary {
    .node-status {
        text-align: left;
        .status {
            font-weight: 600;
            font-size: 150%;
        }
    }
    .node-warnings {
        h4 {
            margin-left: 15px;
            margin-right: 15px;
            font-size: 12px;
            font-weight: 700;
            color: @gray;
            text-transform: uppercase;
            letter-spacing: 1px;
            .node-last-update {
                color: @gray;
                cursor: help;
                font-size: 11px;
                font-style: italic;
                text-align: right;
                font-weight: 300;
                letter-spacing: normal;
                text-transform: none;
            }
        }
        .list-group {
            .ok {
                background-color: #DFF0D8;
            }
            .warn {
                background-color: #FFFF80;
            }
            .critical {
                background-color: #FC0909;
            }
        }
    }
    table.node-stats {
        tr {
            &.secondary-stats {
                display: none;
            }
            &.header-subnode {
                background-color: @lightGray;
                font-weight: 700;
            }
            &.header-group {
                color: @gray;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
        }
        .data {
            font-weight: 600;
        }
        .toggle-stats {
            cursor: pointer;
            text-transform: uppercase;
            text-align: center;
            background-color: @panelHeaderGray;
            &:hover {
                background-color: @lightGray;
                td {
                    color: black;
                }
            }
            td {
                padding: 3px; // make the toggler not take up the normal row height
            }
            .icon {
                vertical-align: text-top;
            }
            .text {
                font-size: 10px;
            }
        }
    }
}

.panel {
    // a resize handler 
    .panel-resize-height {
        &:hover {
            color: black;
            background-color: @medGray;
        }
        text-transform: uppercase;
        font-size: 9px;
        padding: 2px;
        text-align: center;
        color: @darkGray;
        cursor: ns-resize;
        .user-select(none);
    }
}

.empty-node-list {
    display: none;
    .list-name {
        font-weight: 600;
    }
}


// for graphs page, we want no bottom gap
body.graphs-page {
    padding-bottom: 0;
}

.graphs-outer {
    margin-top: 5px;
    .nav-tabs {
        padding-left: @bootstrapGutter;
        a .glyphicon {
            margin-right: 5px;
        }
        .active {
            a {
                background-color: @lightGray;
            }
        }
    }
    .graphs-content {
        background-color: @lightGray;
        padding-top: 10px;
        padding-bottom: 50px;
    }
    .analytics-sidebar {
        // hide these sidebar nodes on page load
        #analytics_node,
        #node_sidebar_empty {
            display: none;
        }
        .node {
            .node-details {
                .node-stats {
                    .toggle-stats-group {
                        cursor: default;
                        .glyphicon {
                            display: none;
                        }
                    }
                    .stat-row {
                        &.selected {
                            color: @activeColor;
                            &:hover {
                                color: @activeColor;
                            }
                            .glyphicon.glyphicon-arrow-right {
                                visibility: visible;
                            }
                        }
                        &:hover {
                            .glyphicon-arrow-right {
                                visibility: visible;
                                color: @gray;
                            }
                        }
                    }
                }
            }
        }
    }
    .node-graph {
        .graph-title {
            text-align: left;
            font-size: 18px;
            .glyphicon {
                margin-right: 5px;
            }
        }
        .graph-render-box {
            position: relative;
            #graphLoadingMsg {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: white;
                text-align: center;
                padding-top: 200px;
                color: @darkGray;
                opacity: 0.7; 
                z-index: 2;
                font-size: 22px;
                font-weight: 300;
            }
            #graphRender {
                height: 500px;
                z-index: 1;
            }
        }
    }
    .node-events-outer {
        h3 {
            font-size: 18px;
            .glyphicon {
                margin-right: 5px;
            }
        }
        .node-events {
            tfoot {
                tr {
                    display: none;
                }
            }
        }
    }
}

// Use mobile-indicator to tell if we are on a small device
@media (max-width: 990px) {
    #top-nav .mobile-indicator {
        display: block;
    }
    .node-list {
        margin-left: -(@bootstrapGutterSize - 5);
        margin-right: -(@bootstrapGutterSize - 5);
        max-height: 300px;
        overflow: auto;
        .inner-scroll-shadow();
        .node-details {
            max-height: 200px;
            overflow: auto;
            .inner-scroll-shadow();
        }
    }
    .graphs-outer {
        .node-graph {
            margin-left: -@bootstrapGutterSize;
            margin-right: -@bootstrapGutterSize;
        }
    }
    .mapview-outer {
        #map_panel {
            margin-left: -@bootstrapGutterSize;
            margin-right: -@bootstrapGutterSize;
            
            #map_box {
                height: 70vh;
            }
        }
    }
}

// Compiled LESS below
*/
@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}
.loading-spinner {
  animation-play-state: running;
  opacity: 1;
  position: relative;
  display: inline-block;
  width: 8px;
  height: 13px;
}
@keyframes spinner {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}
.loading-spinner.-paused {
  animation-play-state: paused;
  opacity: 0.2;
  transition: opacity linear 0.1s;
}
.loading-spinner::after {
  animation: 1.5s linear infinite spinner;
  animation-play-state: inherit;
  border: solid 3px #EEE;
  border-bottom-color: #BBB;
  border-radius: 50%;
  content: "";
  height: 15px;
  left: 50%;
  opacity: inherit;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 15px;
  will-change: transform;
}
#top-nav .navbar-loading-msg {
  text-align: center;
  padding: 15px;
  background-color: #eee;
  position: absolute;
  top: 100%;
  width: 100%;
  font-weight: 600;
  font-size: 130%;
  box-shadow: inset 0 7px 9px -7px rgba(0, 0, 0, 0.4);
  display: none;
}
#top-nav .mobile-indicator {
  display: none;
}
#legacy_graph_box {
  display: none;
}
#legacy_graph_box table td {
  padding: 5px;
}
#legacy_graph_box #chart {
  min-height: 400px;
}
#legacy_graph_box .series-holder-title {
  margin-bottom: 0px;
}
#legacy_graph_box .series-holder {
  cursor: pointer;
}
#legacy_graph_box .pumpAccordionChildren {
  padding-left: 10px !important;
}
#legacy_graph_box .small-italics {
  font-size: 75%;
  font-style: italic;
  color: #898989;
}
#legacy_graph_box .float-right {
  float: right;
}
#legacy_graph_box .series {
  cursor: pointer;
  width: 200px;
  white-space: normal;
  vertical-align: middle;
  padding-left: 10px;
}
#legacy_graph_box .seriestext {
  vertical-align: middle;
}
#legacy_graph_box .pumpcontainer {
  min-width: 300px !important;
  min-height: 800px;
}
#legacy_graph_box .bold {
  font-weight: bold;
}
#node_sidebar_clone,
#node_detail_clone,
#node_detail_header_clone {
  display: none;
}
.form-basic table tbody th label {
  padding-right: 10px;
}
.form-basic table tbody td {
  padding-bottom: 10px;
}
.form-basic table tbody td input {
  padding: 4px;
}
.node-list .node {
  padding: 0;
  margin-bottom: 5px;
}
.node-list .node.active .node-name:hover {
  background-color: inherit;
}
.node-list .node.active .panel-body {
  display: block;
}
.node-list .node.active .loading-spinner {
  animation-play-state: running;
  opacity: 1;
  position: relative;
  display: inline-block;
}
@keyframes spinner {
  0% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}
.node-list .node.active .loading-spinner.-paused {
  animation-play-state: paused;
  opacity: 0.2;
  transition: opacity linear 0.1s;
}
.node-list .node.active .loading-spinner::after {
  animation: 1.5s linear infinite spinner;
  animation-play-state: inherit;
  border: solid 3px white;
  border-bottom-color: #3a90da;
  border-radius: 50%;
  content: "";
  height: 15px;
  left: 50%;
  opacity: inherit;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 15px;
  will-change: transform;
}
.node-list .node .node-name {
  font-weight: 600;
  padding: 10px 15px;
  cursor: pointer;
}
.node-list .node .node-name:hover {
  background-color: #d9edf7;
}
.node-list .node .node-name .loading-spinner {
  float: right;
}
.node-list .node .panel-default {
  margin: 0px 2px 2px;
  color: black;
}
.node-list .node .node-details .last-update {
  color: #aaa;
  font-size: 11px;
  display: none;
}
.node-list .node .node-details .loading-msg {
  color: #aaa;
  font-size: 11px;
}
.node-list .node .node-details .node-normalize {
  display: none;
  background-color: #eee;
  padding: 4px;
  font-size: 12px;
  text-align: left;
}
.node-list .node .node-details .panel-body {
  text-align: center;
  padding: 0px;
}
.node-list .node .node-details .node-stats .clone-me {
  display: none;
}
.node-list .node .node-details .node-stats .toggle-stats-group {
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  background-color: #f5f5f5;
  color: #555;
}
.node-list .node .node-details .node-stats .toggle-stats-group:hover {
  background-color: #eee;
}
.node-list .node .node-details .node-stats .toggle-stats-group:hover th {
  color: black;
}
.node-list .node .node-details .node-stats .toggle-stats-group.group-visible .glyphicon-chevron-down {
  display: inline-block;
}
.node-list .node .node-details .node-stats .toggle-stats-group.group-visible .glyphicon-chevron-right {
  display: none;
}
.node-list .node .node-details .node-stats .toggle-stats-group .glyphicon-chevron-down {
  display: none;
}
.node-list .node .node-details .node-stats .toggle-stats-group th {
  padding: 3px;
  font-size: 10px;
}
.node-list .node .node-details .node-stats .stat-row.axis-right .glyphicon.glyphicon-arrow-right {
  display: block;
  visibility: visible;
}
.node-list .node .node-details .node-stats .stat-row.axis-right .glyphicon.glyphicon-arrow-left {
  display: none;
}
.node-list .node .node-details .node-stats .stat-row.axis-left .glyphicon.glyphicon-arrow-left {
  display: block;
  visibility: visible;
}
.node-list .node .node-details .node-stats .stat-row.axis-left .glyphicon.glyphicon-arrow-right {
  display: none;
}
.node-list .node .node-details .node-stats .stat-row:hover {
  cursor: pointer;
  background-color: #eee;
}
.node-list .node .node-details .node-stats .stat-row.latest-value-null .value {
  color: #aaa;
}
.node-list .node .node-details .node-stats .stat-row.is-normalized .value {
  color: #337ab7;
}
.node-list .node .node-details .node-stats .stat-row.is-normalized .value::after {
  content: "*";
  display: inline-block;
}
.node-list .node .node-details .node-stats .stat-row .value {
  color: black;
}
.node-list .node .node-details .node-stats .stat-row .axis {
  padding-right: 2px;
  padding-left: 2px;
  width: 25px;
  vertical-align: middle;
}
.node-list .node .node-details .node-stats .stat-row .glyphicon {
  display: none;
}
.node-list .node .node-details .node-stats .stat-row .glyphicon:first-child {
  display: block;
  visibility: hidden;
}
.panel-subview-node-summary .node-status {
  text-align: left;
}
.panel-subview-node-summary .node-status .status {
  font-weight: 600;
  font-size: 150%;
}
.panel-subview-node-summary .node-warnings h4 {
  margin-left: 15px;
  margin-right: 15px;
  font-size: 12px;
  font-weight: 700;
  color: #959595;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.panel-subview-node-summary .node-warnings h4 .node-last-update {
  color: #959595;
  cursor: help;
  font-size: 11px;
  font-style: italic;
  text-align: right;
  font-weight: 300;
  letter-spacing: normal;
  text-transform: none;
}
.panel-subview-node-summary .node-warnings .list-group .ok {
  background-color: #DFF0D8;
}
.panel-subview-node-summary .node-warnings .list-group .warn {
  background-color: #FFFF80;
}
.panel-subview-node-summary .node-warnings .list-group .critical {
  background-color: #FC0909;
}
.panel-subview-node-summary table.node-stats tr.secondary-stats {
  display: none;
}
.panel-subview-node-summary table.node-stats tr.header-subnode {
  background-color: #eee;
  font-weight: 700;
}
.panel-subview-node-summary table.node-stats tr.header-group {
  color: #959595;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.panel-subview-node-summary table.node-stats .data {
  font-weight: 600;
}
.panel-subview-node-summary table.node-stats .toggle-stats {
  cursor: pointer;
  text-transform: uppercase;
  text-align: center;
  background-color: #f5f5f5;
}
.panel-subview-node-summary table.node-stats .toggle-stats:hover {
  background-color: #eee;
}
.panel-subview-node-summary table.node-stats .toggle-stats:hover td {
  color: black;
}
.panel-subview-node-summary table.node-stats .toggle-stats td {
  padding: 3px;
}
.panel-subview-node-summary table.node-stats .toggle-stats .icon {
  vertical-align: text-top;
}
.panel-subview-node-summary table.node-stats .toggle-stats .text {
  font-size: 10px;
}
.panel .panel-resize-height {
  text-transform: uppercase;
  font-size: 9px;
  padding: 2px;
  text-align: center;
  color: #555;
  cursor: ns-resize;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.panel .panel-resize-height:hover {
  color: black;
  background-color: #aaa;
}
.empty-node-list {
  display: none;
}
.empty-node-list .list-name {
  font-weight: 600;
}
body.graphs-page {
  padding-bottom: 0;
}
.graphs-outer {
  margin-top: 5px;
}
.graphs-outer .nav-tabs {
  padding-left: 15px;
}
.graphs-outer .nav-tabs a .glyphicon {
  margin-right: 5px;
}
.graphs-outer .nav-tabs .active a {
  background-color: #eee;
}
.graphs-outer .graphs-content {
  background-color: #eee;
  padding-top: 10px;
  padding-bottom: 50px;
}
.graphs-outer .analytics-sidebar #analytics_node,
.graphs-outer .analytics-sidebar #node_sidebar_empty {
  display: none;
}
.graphs-outer .analytics-sidebar .node .node-details .node-stats .toggle-stats-group {
  cursor: default;
}
.graphs-outer .analytics-sidebar .node .node-details .node-stats .toggle-stats-group .glyphicon {
  display: none;
}
.graphs-outer .analytics-sidebar .node .node-details .node-stats .stat-row.selected {
  color: #337ab7;
}
.graphs-outer .analytics-sidebar .node .node-details .node-stats .stat-row.selected:hover {
  color: #337ab7;
}
.graphs-outer .analytics-sidebar .node .node-details .node-stats .stat-row.selected .glyphicon.glyphicon-arrow-right {
  visibility: visible;
}
.graphs-outer .analytics-sidebar .node .node-details .node-stats .stat-row:hover .glyphicon-arrow-right {
  visibility: visible;
  color: #959595;
}
.graphs-outer .node-graph .graph-title {
  text-align: left;
  font-size: 18px;
}
.graphs-outer .node-graph .graph-title .glyphicon {
  margin-right: 5px;
}
.graphs-outer .node-graph .graph-render-box {
  position: relative;
}
.graphs-outer .node-graph .graph-render-box #graphLoadingMsg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  text-align: center;
  padding-top: 200px;
  color: #555;
  opacity: 0.7;
  z-index: 2;
  font-size: 22px;
  font-weight: 300;
}
.graphs-outer .node-graph .graph-render-box #graphRender {
  height: 500px;
  z-index: 1;
}
.graphs-outer .node-events-outer h3 {
  font-size: 18px;
}
.graphs-outer .node-events-outer h3 .glyphicon {
  margin-right: 5px;
}
.graphs-outer .node-events-outer .node-events tfoot tr {
  display: none;
}
@media (max-width: 990px) {
  #top-nav .mobile-indicator {
    display: block;
  }
  .node-list {
    margin-left: -10px;
    margin-right: -10px;
    max-height: 300px;
    overflow: auto;
    background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
  }
  .node-list .node-details {
    max-height: 200px;
    overflow: auto;
    background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background: linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)) 0 100%;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
  }
  .graphs-outer .node-graph {
    margin-left: -15px;
    margin-right: -15px;
  }
  .mapview-outer #map_panel {
    margin-left: -15px;
    margin-right: -15px;
  }
  .mapview-outer #map_panel #map_box {
    height: 70vh;
  }
}