X-Git-Url: https://arthur.barton.de/gitweb/?p=netdata.git;a=blobdiff_plain;f=web%2Fdashboard.css;h=8eeaa8bec45c41451beeda56235ebac8b33438d0;hp=ee806ba471a1a07cd17c4fd7b5208ff7e24374b0;hb=b060bae83cc36fdc4f14120228e4c9b0d1ec42e8;hpb=5645b1ee35248d94e6931b64a8688f7f0d865ec6

diff --git a/web/dashboard.css b/web/dashboard.css
index ee806ba4..8eeaa8be 100644
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -1,347 +1,306 @@
 html,
 body {
-	/*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
-	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-	font-style: normal;
-	font-variant: normal;
+    /*font-family: Calibri,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;*/
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-style: normal;
+    font-variant: normal;
 }
 
 .morelink {
-	color: #765d9c;
-	text-decoration: none;
+    color: #765d9c;
+    text-decoration: none;
 }
+
 .morelink:hover {
-	color: #563d7c;
-	text-decoration: none;
+    color: #563d7c;
+    text-decoration: none;
 }
+
 .morelink:focus {
-	color: #765d9c;
-	text-decoration: none;
+    color: #765d9c;
+    text-decoration: none;
 }
 
 .netdata-chart-alignment {
-	margin-left: 55px;
+    margin-left: 55px;
 }
 
 .netdata-chart-row {
-        width: 100%;
-        text-align: center;
-        display: flex;
-        display: -webkit-flex;
-        display: -moz-flex;
-        align-items: baseline;
-        -moz-align-items: baseline;
-        -webkit-align-items: baseline;
-        justify-content: center;
-        -webkit-justify-content: center;
-        -moz-justify-content: center;
+    width: 100%;
+    text-align: center;
+    display: flex;
+    display: -webkit-flex;
+    display: -moz-flex;
+    align-items: baseline;
+    -moz-align-items: baseline;
+    -webkit-align-items: baseline;
+    justify-content: center;
+    -webkit-justify-content: center;
+    -moz-justify-content: center;
 }
 
 .netdata-container {
-	display: inline-block;
-	overflow: hidden;
+    display: inline-block;
+    overflow: hidden;
 
-	/* required for child elements to have absolute position */
-	position: relative;
-	
-	/* width and height is given per chart with data-width and data-height */
+    /* required for child elements to have absolute position */
+    position: relative;
+
+    /* width and height is given per chart with data-width and data-height */
 }
 
 .netdata-aspect {
-	position: relative;
-	width: 100%;
-	padding: 0px;
-	margin: 0px;
+    position: relative;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
 }
 
 .netdata-container-with-legend {
-	display: inline-block;
-	overflow: hidden;
+    display: inline-block;
+    overflow: hidden;
+
+    /* fix minimum scrollbar issue in firefox */
+    min-height: 99px;
 
-	/* fix minimum scrollbar issue in firefox */
-	min-height: 99px;
+    /* required for child elements to have absolute position */
+    position: relative;
 
-	/* required for child elements to have absolute position */
-	position: relative;
-	
-	/* width and height is given per chart with data-width and data-height */
+    /* width and height is given per chart with data-width and data-height */
 }
 
 .netdata-legend-resize-handler {
-	display: block;
-	position: absolute;
-	bottom: 0px;
-	right: 0px;
-	height: 15px;
-	width: 30px;
-	background-color: White;
-	font-size: 12px;
-	vertical-align: middle;
-	line-height: 15px;
-	cursor: ns-resize;
-	color: #DDDDDD;
-	text-align: center;
-	overflow: hidden;
-	z-index: 20;
-	padding: 0px;
-	margin: 0px;
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    height: 15px;
+    width: 30px;
+    background-color: White;
+    font-size: 12px;
+    vertical-align: middle;
+    line-height: 15px;
+    cursor: ns-resize;
+    color: #DDDDDD;
+    text-align: center;
+    overflow: hidden;
+    z-index: 20;
+    padding: 0px;
+    margin: 0px;
 }
 
 .netdata-legend-toolbox {
-	display: block;
-	position: absolute;
-	bottom: 0px;
-	right: 30px;
-	height: 15px;
-	width: 110px;
-	background-color: White;
-	font-size: 12px;
-	vertical-align: middle;
-	line-height: 15px;
-	color: #DDDDDD;
-	text-align: center;
-	overflow: hidden;
-	z-index: 20;
-	padding: 0px;
-	margin: 0px;
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    right: 30px;
+    height: 15px;
+    width: 110px;
+    background-color: White;
+    font-size: 12px;
+    vertical-align: middle;
+    line-height: 15px;
+    color: #DDDDDD;
+    text-align: center;
+    overflow: hidden;
+    z-index: 20;
+    padding: 0px;
+    margin: 0px;
 }
 
 .netdata-legend-toolbox-button {
-	display: inline-block;
-	position: relative;
-	height: 15px;
-	width: 18px;
-	background-color: White;
-	font-size: 12px;
-	vertical-align: middle;
-	line-height: 15px;
-	color: #CDCDCD;
-	text-align: center;
-	overflow: hidden;
-	z-index: 21;
-	padding: 0px;
-	margin: 0px;
-	cursor: pointer;
+    display: inline-block;
+    position: relative;
+    height: 15px;
+    width: 18px;
+    background-color: White;
+    font-size: 12px;
+    vertical-align: middle;
+    line-height: 15px;
+    color: #CDCDCD;
+    text-align: center;
+    overflow: hidden;
+    z-index: 21;
+    padding: 0px;
+    margin: 0px;
+    cursor: pointer;
 }
 
 .netdata-message {
-	display: inline-block;
-	text-align: left;
-	vertical-align: top;
-	font-weight: bold;
-	font-size: x-small;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-	background: inherit;
-	z-index: 0;
+    display: inline-block;
+    text-align: left;
+    vertical-align: top;
+    font-weight: bold;
+    font-size: x-small;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: inherit;
+    z-index: 0;
 }
 
 .netdata-message.hidden {
-	display: none;
+    display: none;
 }
 
 .netdata-message.icon {
-	color: #F8F8F8;
-	text-align: center;
-	vertical-align: middle;
+    color: #F8F8F8;
+    text-align: center;
+    vertical-align: middle;
 }
 
 .netdata-chart-legend {
-	position: absolute;			/* within .netdata-container */
-	top: 0;
-	right: 0;
-	background-color: white;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	line-height: 14px;
-	display: block;
-	width: 140px;				/* --legend-width */
-	height: calc(100% - 15px);	/* 10px for the resize handler and 5px for the top margin */
-	font-size: 10px;
-	margin-top: 5px;
-	text-align: left;
-	/* width and height is calculated (depends on the appearance of the legend) */
+    position: absolute; /* within .netdata-container */
+    top: 0;
+    right: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 14px;
+    display: block;
+    width: 140px; /* --legend-width */
+    height: calc(100% - 15px); /* 10px for the resize handler and 5px for the top margin */
+    font-size: 10px;
+    margin-top: 5px;
+    text-align: left;
+    /* width and height is calculated (depends on the appearance of the legend) */
 }
 
 .netdata-legend-title-date {
-	font-size: 10px;
-	font-weight: normal;
-	margin-top: 0px;
+    font-size: 10px;
+    font-weight: normal;
+    margin-top: 0px;
 }
+
 .netdata-legend-title-time {
-	font-size: 11px;
-	font-weight: bold;
-	margin-top: 0px;
+    font-size: 11px;
+    font-weight: bold;
+    margin-top: 0px;
 }
+
 .netdata-legend-title-units {
-	position: absolute;
-	right: 5px;
-	float: right;
-	font-size: 10px;
-	vertical-align: top;
-	font-weight: normal;
-	margin-top: 0px;
+    position: absolute;
+    right: 10px;
+    float: right;
+    font-size: 11px;
+    vertical-align: top;
+    font-weight: normal;
+    margin-top: 0px;
 }
+
 .netdata-legend-series {
-	position: absolute;
-	width: 140px;				/* --legend-width */
-	height: calc(100% - 50px);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	line-height: 14px;
-	display: block;
-	font-size: 10px;
-	margin-top: 0px;
-}
-
-.netdata-legend-series > .netdata-legend-series-content {
-	position      : absolute;
-	overflow      : scroll;
-	overflow-x    : hidden;
-	top           : 0;
-	right         : 0;
-	bottom        : 0;
-	left          : 0;
-	text-overflow: ellipsis;
-}
-.netdata-legend-series > .netdata-legend-series-content:focus {
-	outline: thin dotted;
-}
-.netdata-legend-series > .netdata-legend-series-content::-webkit-scrollbar {
-	display: block; /* was 'none', but chrome was hiding content with it */
-}
-.has-scrollbar > .netdata-legend-series-content::-webkit-scrollbar {
-	display: block;
-}
-.netdata-legend-series > .netdata-legend-series-pane {
-/*	background : rgba(0,0,0,.25);*/
-	background : #DDD;
-	position   : absolute;
-	width      : 4px;
-	right      : 0;
-	top        : 0;
-	bottom     : 0;
-/*	visibility : hidden\9; */ /* Target only IE7 and IE8 with this hack */
-/*	opacity    : .01; */
-/*	-webkit-transition    : .2s; */
-/*	-moz-transition       : .2s; */
-/*	-o-transition         : .2s; */
-/*	transition            : .2s; */
-	-moz-border-radius    : 4px;
-	-webkit-border-radius : 4px;
-	border-radius         : 4px;
-}
-.netdata-legend-series > .netdata-legend-series-pane > .netdata-legend-series-slider {
-	background            : #444;
-/*	background            : rgba(0,0,0,.5);*/
-	position              : relative;
-	margin                : 0 1px;
-	-moz-border-radius    : 2px;
-	-webkit-border-radius : 2px;
-	border-radius         : 2px;
-}
-.netdata-legend-series:hover > .netdata-legend-series-pane, .netdata-legend-series-pane.active, .netdata-legend-series-pane.flashed {
-/*  visibility : visible\9; */ /* Target only IE7 and IE8 with this hack */
-/*  opacity    : 0.99;*/
+    position: absolute;
+    width: 140px; /* legend-width */
+    height: calc(100% - 50px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 14.5px; /* line spacing at the legend */
+    display: block;
+    font-size: 10px;
+    margin-top: 0px;
 }
 
 .netdata-legend-name-table-line {
-	display: inline-block;
-	width: 13px;
-	height: 4px;
-	border-width: 0px;
-	border-bottom-width: 2px;
-	border-bottom-style: solid;
-	border-bottom-color: white;
+    display: inline-block;
+    width: 13px;
+    height: 4px;
+    border-width: 0px;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-bottom-color: white;
 }
+
 .netdata-legend-name-table-area {
-	display: inline-block;
-	width: 13px;
-	height: 5px;
-	border-width: 1px;
-	border-top-width: 1px;
-	border-top-style: solid;
-	border-top-color: inherit;
+    display: inline-block;
+    width: 13px;
+    height: 5px;
+    border-width: 1px;
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: inherit;
 }
+
 .netdata-legend-name-table-stacked {
-	display: inline-block;
-	width: 13px;
-	height: 5px;
-	border-width: 1px;
-	border-top-width: 1px;
-	border-top-style: solid;
-	border-top-color: inherit;
+    display: inline-block;
+    width: 13px;
+    height: 5px;
+    border-width: 1px;
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-top-color: inherit;
 }
+
 .netdata-legend-name-tr {
 }
+
 .netdata-legend-name-td {
 }
+
 .netdata-legend-name {
-	text-align: left;
-	font-size: 10px;
-	font-weight: bold;
-	vertical-align: bottom;
-	margin-top: 0px;
-	z-index: 9;
-	padding: 0px;
-	width: 80px !important;
-	max-width: 80px !important;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
-	display: inline-block;
-	cursor: pointer;
+    text-align: left;
+    font-size: 11px; /* legend: dimension name size */
+    font-weight: bold;
+    vertical-align: bottom;
+    margin-top: 0px;
+    z-index: 9;
+    padding: 0px;
+    width: 80px !important;
+    max-width: 80px !important;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    display: inline-block;
+    cursor: pointer;
 }
 
 .netdata-legend-value {
-	/*margin-left: 14px;*/
-	position: absolute;
-	right: 5px;
-	float: right;
-	text-align: right;
-	font-size: 10px;
-	font-weight: bold;
-	vertical-align: bottom;
-	background-color: White;
-	margin-top: 0px;
-	z-index: 10;
-	padding: 0px;
-	padding-left: 15px;
-	cursor: pointer;
-	/* -webkit-font-smoothing: none; */
+    /*margin-left: 14px;*/
+    position: absolute;
+    right: 10px;
+    float: right;
+    text-align: right;
+    font-size: 11px; /* legend: dimension value size */
+    font-weight: bold;
+    vertical-align: bottom;
+    background-color: White;
+    margin-top: 0px;
+    z-index: 10;
+    padding: 0px;
+    padding-left: 15px;
+    cursor: pointer;
+    /* -webkit-font-smoothing: none; */
 }
+
 .netdata-legend-name.not-selected {
-	font-weight: normal;
-	opacity: 0.3;
+    font-weight: normal;
+    opacity: 0.3;
 }
 
 .netdata-chart {
-	position: absolute;		/* within .netdata-container */
-	top: 0;					/* within .netdata-container */
-	left: 0;				/* within .netdata-container */
-	display: inline-block;
-	overflow: hidden;
-	width: 100%;
-	height: 100%;
-	z-index: 5;
+    position: absolute; /* within .netdata-container */
+    top: 0; /* within .netdata-container */
+    left: 0; /* within .netdata-container */
+    display: inline-block;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
 
-	/* width and height is calculated (depends on the appearance of the legend) */
+    /* width and height is calculated (depends on the appearance of the legend) */
 }
 
 .netdata-chart-with-legend-right {
-	position: absolute;		/* within .netdata-container */
-	top: 0;					/* within .netdata-container */
-	left: 0;				/* within .netdata-container */
-	display: block;
-	overflow: hidden;
-	margin-right: 140px;		/* --legend-width */
-	width: calc(100% - 140px);	/* --legend-width */
-	height: 100%;
-	z-index: 5;
-	flex-grow: 1;
+    position: absolute; /* within .netdata-container */
+    top: 0; /* within .netdata-container */
+    left: 0; /* within .netdata-container */
+    display: block;
+    overflow: hidden;
+    margin-right: 140px; /* --legend-width */
+    width: calc(100% - 140px); /* --legend-width */
+    height: 100%;
+    z-index: 5;
+    flex-grow: 1;
 
-	/* width and height is calculated (depends on the appearance of the legend) */
+    /* width and height is calculated (depends on the appearance of the legend) */
 }
 
 .netdata-peity-chart {
@@ -368,175 +327,340 @@ body {
 }
 
 .dygraph-label-rotate-left {
-  text-align: center;
-  /* See http://caniuse.com/#feat=transforms2d */
-  transform: rotate(90deg);
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
+    text-align: center;
+    /* See http://caniuse.com/#feat=transforms2d */
+    transform: rotate(90deg);
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
 }
 
 /* For y2-axis label */
 .dygraph-label-rotate-right {
-  text-align: center;
-  /* See http://caniuse.com/#feat=transforms2d */
-  transform: rotate(-90deg);
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
+    text-align: center;
+    /* See http://caniuse.com/#feat=transforms2d */
+    transform: rotate(-90deg);
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
 }
 
 .dygraph-title {
-	text-indent: 56px;
-	text-align: left;
-	position: absolute;
-	left: 0px;
-	top: 4px;
-	font-size: 11px;
-	font-weight: bold;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
+    text-indent: 56px;
+    text-align: left;
+    position: absolute;
+    left: 0px;
+    top: 4px;
+    font-size: 11px;
+    font-weight: bold;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 /* fix for sparkline tooltip under bootstrap */
 .jqstooltip {
-  width: auto !important;
-  height: auto !important;
+    width: auto !important;
+    height: auto !important;
 }
 
 .easyPieChart {
-	position: relative;
-	text-align: center;
+    position: relative;
+    text-align: center;
 }
 
 .easyPieChart canvas {
-	position: absolute;
-	top: 0;
-	left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .easyPieChartLabel {
-	display: inline-block;
-	position: absolute;
-	float: left;
-	left: 0;
-	width: 100%;
-	text-align: center;
-	color: #666;
-	font-weight: normal;
-	text-shadow: #BBB 0px 0px 1px;
-	/* -webkit-font-smoothing: none; */
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: #666;
+    font-weight: normal;
+    text-shadow: #BBB 0px 0px 1px;
+    /* -webkit-font-smoothing: none; */
 }
 
 .easyPieChartTitle {
-	display: inline-block;
-	position: absolute;
-	float: left;
-	left: 0;
-	width: 64%;
-	margin-left: 18%;
-	text-align: center;
-	color: #999999;
-	font-weight: normal;
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 64%;
+    margin-left: 18%;
+    text-align: center;
+    color: #999999;
+    font-weight: normal;
 }
 
 .easyPieChartUnits {
-	display: inline-block;
-	position: absolute;
-	float: left;
-	left: 0;
-	width: 60%;
-	margin-left: 20%;
-	text-align: center;
-	color: #999999;
-	font-weight: normal;
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 60%;
+    margin-left: 20%;
+    text-align: center;
+    color: #999999;
+    font-weight: normal;
 }
 
 .gaugeChart {
-	position: relative;
-	text-align: center;
+    position: relative;
+    text-align: center;
 }
 
 .gaugeChart canvas {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
 }
 
 .gaugeChartLabel {
-	display: inline-block;
-	position: absolute;
-	float: left;
-	left: 0;
-	width: 100%;
-	text-align: center;
-	color: #FFFFFF;
-	font-weight: bold;
-	z-index: 1;
-	text-shadow: #777 0px 0px 1px;
-	/* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
-	/* -webkit-text-stroke: 1px #777; */
-	/* -webkit-font-smoothing: none; */
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: #FFFFFF;
+    font-weight: bold;
+    z-index: 1;
+    text-shadow: #777 0px 0px 1px;
+    /* text-shadow: #CCC 1px 1px 0px, #CCC -1px -1px 0px, #CCC 1px -1px 0px, #CCC -1px 1px 0px; */
+    /* -webkit-text-stroke: 1px #777; */
+    /* -webkit-font-smoothing: none; */
 }
 
 .gaugeChartTitle {
-	display: inline-block;
-	position: absolute;
-	float: left;
-	left: 0;
-	width: 100%;
-	text-align: center;
-	color: #999999;
-	font-weight: bold;
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: #999999;
+    font-weight: bold;
 }
 
 .gaugeChartUnits {
-	display: inline-block;
-	position: absolute;
-	float: left;
-	left: 0;
-	bottom: 0;
-	width: 100%;
-	text-align: left;
-	margin-left: 5%;
-	color: #999999;
-	font-weight: normal;
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    text-align: left;
+    margin-left: 5%;
+    color: #999999;
+    font-weight: normal;
 }
 
 .gaugeChartMin {
-	display: inline-block;
-	position: absolute;
-	float: left;
-	left: 0;
-	bottom: 10%;
-	width: 92%;
-	margin-left: 8%;
-	text-align: left;
-	color: #999999;
-	font-weight: normal;
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 10%;
+    width: 92%;
+    margin-left: 8%;
+    text-align: left;
+    color: #999999;
+    font-weight: normal;
 }
 
 .gaugeChartMax {
-	display: inline-block;
-	position: absolute;
-	float: left;
-	left: 0;
-	bottom: 10%;
-	width: 95%;
-	margin-right: 5%;
-	text-align: right;
-	color: #999999;
-	font-weight: normal;
+    display: inline-block;
+    position: absolute;
+    float: left;
+    left: 0;
+    bottom: 10%;
+    width: 95%;
+    margin-right: 5%;
+    text-align: right;
+    color: #999999;
+    font-weight: normal;
 }
 
 .popover-title {
-	font-weight: bold;
-	font-size: 12px;
+    font-weight: bold;
+    font-size: 12px;
 }
+
 .popover-content {
-	font-size: 11px;
+    font-size: 11px;
+}
+
+/* ----------------------------------------------------------------------------
+   perfect-scrollbar settings
+ */
+
+.ps-container {
+    -ms-touch-action: auto;
+    touch-action: auto;
+    overflow: hidden !important;
+    -ms-overflow-style: none;
+}
+
+@supports (-ms-overflow-style: none) {
+    .ps-container {
+        overflow: auto !important;
+    }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps-container {
+        overflow: auto !important;
+    }
+}
+
+.ps-container.ps-active-x > .ps-scrollbar-x-rail,
+.ps-container.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+    background-color: transparent;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: transparent; /* background color when dragged away */
+    opacity: 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #aaa; /* scrollbar color when dragged away */
+    height: 5px;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: transparent; /* background color when dragged away */
+    opacity: 0.9;
+}
+
+.ps-container.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #aaa; /* scrollbar color when dragged away */
+    width: 5px;
+}
+
+.ps-container > .ps-scrollbar-x-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0.2; /* the opacity when not on hover of the content */
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    bottom: 0px;
+    /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 15px;
+}
+
+.ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: #666; /* #aaa; the color on content hover */
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    bottom: 2px;
+    /* there must be 'bottom' for ps-scrollbar-x */
+    height: 5px; /* the width of the scrollbar */
+}
+
+.ps-container > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x, .ps-container > .ps-scrollbar-x-rail:active > .ps-scrollbar-x {
+    height: 4px;
+}
+
+.ps-container > .ps-scrollbar-y-rail {
+    display: none;
+    position: absolute;
+    /* please don't change 'position' */
+    opacity: 0.2; /* the opacity when not on hover of the content */
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 15px;
+}
+
+.ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    position: absolute;
+    /* please don't change 'position' */
+    background-color: #666; /* #aaa; the color on content hover */
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
+    -o-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    -moz-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
+    transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out, -webkit-border-radius .2s ease-in-out, -moz-border-radius .2s ease-in-out;
+    right: 2px;
+    /* there must be 'right' for ps-scrollbar-y */
+    width: 5px; /* the width of the scrollbar */
+}
+
+.ps-container > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y, .ps-container > .ps-scrollbar-y-rail:active > .ps-scrollbar-y {
+    width: 5px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail {
+    background-color: transparent; /* background color when dragged */
+    opacity: 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-x > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    background-color: #bbb; /* scrollbar color when dragged */
+    height: 5px;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail {
+    background-color: transparent; /* background color when dragged */
+    opacity: 0.9;
+}
+
+.ps-container:hover.ps-in-scrolling.ps-y > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    background-color: #bbb; /* scrollbar color when dragged */
+    width: 5px;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail,
+.ps-container:hover > .ps-scrollbar-y-rail {
+    opacity: 0.6;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
+    background-color: transparent; /* the background color on hover of the scrollbar */
+    opacity: 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+    background-color: #999; /* scrollbar color on hover */
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+    background-color: transparent; /* the background color on hover of the scrollbar */
+    opacity: 0.9;
+}
+
+.ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+    background-color: #999; /* scrollbar color on hover */
 }