화이트테마 차트 텍스트 색상 변경

화이트테마 차트 텍스트 색상 변경

.chartWrap {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.nvtooltip {
  position: absolute;
  z-index: 10000;
  padding: 1px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  color: @text-color;
  font-size: 13px;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
  padding: 8px;
}

.nvtooltip h3 {
  margin: 0;
  padding: 4px 14px;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;

  background-color: rgba(247, 247, 247, 0.75);

  text-align: center;
  font-weight: normal;
  line-height: 18px;
}

.nvtooltip p {
  margin: 0;
  padding: 5px 14px;
  text-align: center;
}

.nvtooltip span {
  display: inline-block;
  margin: 2px 0;
}

.nvtooltip-pending-removal {
  position: absolute;
  pointer-events: none;
}

// SVG CSS
svg {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

svg text {
  font-size: 12px;
  fill: @text-color;
}

svg .title {
  font: bold 14px Arial;
}

.nvd3 .nv-background {
  fill: white;
  fill-opacity: 0;
}

.nvd3.nv-noData {
  font-weight: bold;
  font-size: 18px;
}

.nv-brush .extent {
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.nvd3 .nv-legend .nv-series {
  cursor: pointer;
}

.nvd3 .nv-legend .disabled circle {
  fill-opacity: 0;
}

.nvd3 .nv-axis path {
  fill: @text-color;
  stroke: @text-color;
  stroke-opacity: .75;
  shape-rendering: crispEdges;
}

.nvd3 .nv-axis path.domain {
  stroke-opacity: .75;
}

.nvd3 .nv-axis.nv-x path.domain {
  stroke-opacity: 0;
}

.nvd3 .nv-axis line {
  fill: none;
  stroke: #e5e5e5;
  shape-rendering: crispEdges;
}

.nvd3 .nv-axis .zero line,
.nvd3 .nv-axis line.zero {
  stroke-opacity: .75;
}

.nvd3 .nv-axis .nv-axisMaxMin text {
  font-weight: bold;
}

.nvd3 .x  .nv-axis .nv-axisMaxMin text,
.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
  text-anchor: middle
}

.nv-brush .resize path {
  fill: #eee;
  stroke: #666;
}

.nvd3 .nv-bars .negative rect {
  zfill: brown;
}

.nvd3 .nv-bars rect {
  -webkit-transition: fill-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear;

  transition: fill-opacity 250ms linear;
  zfill: steelblue;
  fill-opacity: .75;
}

.nvd3 .nv-bars rect:hover {
  fill-opacity: 1;
}

.nvd3 .nv-bars .hover rect {
  fill: lightblue;
}

.nvd3 .nv-bars text {
  fill: rgba(0, 0, 0, 0);
}

.nvd3 .nv-bars .hover text {
  fill: rgba(0, 0, 0, 1);
}

.nvd3 .nv-multibar .nv-groups rect,
.nvd3 .nv-multibarHorizontal .nv-groups rect,
.nvd3 .nv-discretebar .nv-groups rect {
  -webkit-transition: fill-opacity 250ms linear;

  -moz-transition: fill-opacity 250ms linear;
  transition: fill-opacity 250ms linear;
  stroke-opacity: 0;
}

.nvd3 .nv-multibar .nv-groups rect:hover,
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
.nvd3 .nv-discretebar .nv-groups rect:hover {
  fill-opacity: 1;
}

.nvd3 .nv-discretebar .nv-groups text,
.nvd3 .nv-multibarHorizontal .nv-groups text {
  font-weight: bold;
  fill: rgba(0, 0, 0, 1);
  stroke: rgba(0, 0, 0, 0);
}

.nvd3.nv-pie path {
  -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;

  -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
  transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
  stroke-opacity: 0;

}

.nvd3.nv-pie .nv-slice text {
  stroke: #000;
  stroke-width: 0;
  fill: @text-color;
  text-anchor: middle;
}

.nvd3.nv-pie path {
  stroke: #fff;
  stroke-width: 1px;
  stroke-opacity: 1;
}

.nvd3.nv-pie .hover path {
  fill-opacity: .7;
}

.nvd3.nv-pie .nv-label rect {
  fill-opacity: 0;
  stroke-opacity: 0;
}

.nvd3 .nv-groups path.nv-line {
  fill: none;
  stroke-width: 2.5px;
}

.nvd3 .nv-groups path.nv-area {
  stroke: none;
}

.nvd3 .nv-line.hover path {
  stroke-width: 6px;
}

.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
  fill-opacity: 0;
  stroke-opacity: 0;
}

.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
  fill-opacity: .5 !important;
  stroke-opacity: .5 !important;
}

.nvd3 .nv-groups .nv-point {
  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
}

.nvd3.nv-scatter .nv-groups .nv-point.hover,
.nvd3 .nv-groups .nv-point.hover {
  stroke-width: 20px;
  fill-opacity: .5 !important;
  stroke-opacity: .5 !important;
}

.nvd3 .nv-point-paths path {
  stroke: #aaa;
  stroke-opacity: 0;
  fill: #eee;
  fill-opacity: 0;
}

.nvd3 .nv-indexLine {
  cursor: ew-resize;
}

.nvd3 .nv-distribution {
  pointer-events: none;
}

.nvd3 .nv-groups .nv-point.hover {
  stroke-width: 20px;
  stroke-opacity: .5;
}

.nvd3 .nv-scatter .nv-point.hover {
  fill-opacity: 1;
}

.nvd3.nv-stackedarea path.nv-area {
  -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;

  transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
  fill-opacity: .7;
  stroke-opacity: 0;

}

.nvd3.nv-stackedarea path.nv-area.hover {
  fill-opacity: .9;
}

.nvd3.nv-stackedarea .nv-groups .nv-point {
  stroke-opacity: 0;
  fill-opacity: 0;
}

.nvd3.nv-stackedarea .nv-groups .nv-point.hover {
  stroke-width: 20px;
  stroke-opacity: .75;
  fill-opacity: 1;
}

.nvd3.nv-linePlusBar .nv-bar rect {
  fill-opacity: .75;
}

.nvd3.nv-linePlusBar .nv-bar rect:hover {
  fill-opacity: 1;
}

.nvd3.nv-bullet {
  font: 10px sans-serif;
}

.nvd3.nv-bullet .nv-measure {
  fill-opacity: .8;
}

.nvd3.nv-bullet .nv-measure:hover {
  fill-opacity: 1;
}

.nvd3.nv-bullet .nv-marker {
  stroke: #000;
  stroke-width: 2px;
}

.nvd3.nv-bullet .nv-markerTriangle {
  stroke: #000;
  fill: #fff;
  stroke-width: 1.5px;
}

.nvd3.nv-bullet .nv-tick line {
  stroke: #666;
  stroke-width: .5px;
}

.nvd3.nv-bullet .nv-range.nv-s0 {
  fill: #eee;
}

.nvd3.nv-bullet .nv-range.nv-s1 {
  fill: #ddd;
}

.nvd3.nv-bullet .nv-range.nv-s2 {
  fill: #ccc;
}

.nvd3.nv-bullet .nv-title {
  font-weight: bold;
  font-size: 14px;
}

.nvd3.nv-bullet .nv-subtitle {
  fill: #999;
}

.nvd3.nv-bullet .nv-range {
  fill: #999;
  fill-opacity: .4;
}

.nvd3.nv-bullet .nv-range:hover {
  fill-opacity: .7;
}

.nvd3.nv-sparkline path {
  fill: none;
}

.nvd3.nv-sparklineplus g.nv-hoverValue {
  pointer-events: none;
}

.nvd3.nv-sparklineplus .nv-hoverValue line {
  stroke: #333;
  stroke-width: 1.5px;
}

.nvd3.nv-sparklineplus,
.nvd3.nv-sparklineplus g {
  pointer-events: all;
}

.nvd3 .nv-hoverArea {
  fill-opacity: 0;
  stroke-opacity: 0;
}

.nvd3.nv-sparklineplus .nv-xValue,
.nvd3.nv-sparklineplus .nv-yValue {
  font-weight: normal;
  font-size: .9em;
  stroke-width: 0;
}

.nvd3.nv-sparklineplus .nv-yValue {
  stroke: #f66;
}

.nvd3.nv-sparklineplus .nv-maxValue {
  stroke: #2ca02c;
  fill: #2ca02c;
}

.nvd3.nv-sparklineplus .nv-minValue {
  stroke: #d62728;
  fill: #d62728;
}

.nvd3.nv-sparklineplus .nv-currentValue {
  font-weight: bold;
  font-size: 1.1em;
}

.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
  stroke-width: 2px;
}

.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
  stroke-width: 4px;
}

.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
  stroke: #2ca02c;
}

.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
  stroke: #d62728;
}

.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
  font-weight: bold;
}

.nvd3.nv-historicalStockChart .nv-dragTarget {
  cursor: move;
  fill-opacity: 0;
  stroke: none;
}

.nvd3 .nv-brush .extent {
  fill-opacity: 0 !important;
}

.nvd3 .nv-brushBackground rect {
  stroke: #000;
  stroke-width: .4;
  fill: #fff;
  fill-opacity: .7;
}

.nvd3.nv-indentedtree .name {
  margin-left: 5px;
}

.nvd3.nv-indentedtree .clickable {
  color: #08C;
  cursor: pointer;
}

.nvd3.nv-indentedtree span.clickable:hover {
  color: #005580;
  text-decoration: underline;
}

.nvd3.nv-indentedtree .nv-childrenCount {
  display: inline-block;
  margin-left: 5px;
}

.nvd3.nv-indentedtree .nv-treeicon {
  cursor: pointer;
}

.nvd3.nv-indentedtree .nv-treeicon.nv-folded {
  cursor: pointer;
}

.nvd3 .background path {
  fill: none;
  stroke: #ccc;
  stroke-opacity: .4;
  shape-rendering: crispEdges;
}

.nvd3 .foreground path {
  fill: none;
  stroke: steelblue;
  stroke-opacity: .7;
}

.nvd3 .brush .extent {
  fill-opacity: .3;
  stroke: #fff;
  shape-rendering: crispEdges;
}

.nvd3 .axis line, .axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.nvd3 .axis text {
  text-shadow: 0 1px 0 #fff;
}

.chartWrap {
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.nvtooltip {
  position: absolute;
  z-index: 10000;
  padding: 1px;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  color: @text-color-inverse;
  font-size: 13px;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.nvtooltip.x-nvtooltip,
.nvtooltip.y-nvtooltip {
  padding: 8px;
}

.nvtooltip h3 {
  margin: 0;
  padding: 4px 14px;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;

  background-color: rgba(247, 247, 247, 0.75);

  text-align: center;
  font-weight: normal;
  line-height: 18px;
}

.nvtooltip p {
  margin: 0;
  padding: 5px 14px;
  text-align: center;
}

.nvtooltip span {
  display: inline-block;
  margin: 2px 0;
}

.nvtooltip-pending-removal {
  position: absolute;
  pointer-events: none;
}

// SVG CSS
svg {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

svg text {
  font-size: 12px;
  fill: @text-color;
}

svg .title {
  font: bold 14px Arial;
}

.nvd3 .nv-background {
  fill: white;
  fill-opacity: 0;
}

.nvd3.nv-noData {
  font-weight: bold;
  font-size: 18px;
}

.nv-brush .extent {
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.nvd3 .nv-legend .nv-series {
  cursor: pointer;
}

.nvd3 .nv-legend .disabled circle {
  fill-opacity: 0;
}

.nvd3 .nv-axis path {
  fill: @text-color;
  stroke: @text-color;
  stroke-opacity: .75;
  shape-rendering: crispEdges;
}

.nvd3 .nv-axis path.domain {
  stroke-opacity: .75;
}

.nvd3 .nv-axis.nv-x path.domain {
  stroke-opacity: 0;
}

.nvd3 .nv-axis line {
  fill: none;
  stroke: #e5e5e5;
  shape-rendering: crispEdges;
}

.nvd3 .nv-axis .zero line,
.nvd3 .nv-axis line.zero {
  stroke-opacity: .75;
}

.nvd3 .nv-axis .nv-axisMaxMin text {
  font-weight: bold;
}

.nvd3 .x  .nv-axis .nv-axisMaxMin text,
.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
  text-anchor: middle
}

.nv-brush .resize path {
  fill: #eee;
  stroke: #666;
}

.nvd3 .nv-bars .negative rect {
  zfill: brown;
}

.nvd3 .nv-bars rect {
  -webkit-transition: fill-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear;

  transition: fill-opacity 250ms linear;
  zfill: steelblue;
  fill-opacity: .75;
}

.nvd3 .nv-bars rect:hover {
  fill-opacity: 1;
}

.nvd3 .nv-bars .hover rect {
  fill: lightblue;
}

.nvd3 .nv-bars text {
  fill: rgba(0, 0, 0, 0);
}

.nvd3 .nv-bars .hover text {
  fill: rgba(0, 0, 0, 1);
}

.nvd3 .nv-multibar .nv-groups rect,
.nvd3 .nv-multibarHorizontal .nv-groups rect,
.nvd3 .nv-discretebar .nv-groups rect {
  -webkit-transition: fill-opacity 250ms linear;

  -moz-transition: fill-opacity 250ms linear;
  transition: fill-opacity 250ms linear;
  stroke-opacity: 0;
}

.nvd3 .nv-multibar .nv-groups rect:hover,
.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
.nvd3 .nv-discretebar .nv-groups rect:hover {
  fill-opacity: 1;
}

.nvd3 .nv-discretebar .nv-groups text,
.nvd3 .nv-multibarHorizontal .nv-groups text {
  font-weight: bold;
  fill: rgba(0, 0, 0, 1);
  stroke: rgba(0, 0, 0, 0);
}

.nvd3.nv-pie path {
  -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;

  -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
  transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
  stroke-opacity: 0;

}

.nvd3.nv-pie .nv-slice text {
  stroke: #000;
  stroke-width: 0;
  fill: @text-color;
  text-anchor: middle;
}

.nvd3.nv-pie path {
  stroke: #fff;
  stroke-width: 1px;
  stroke-opacity: 1;
}

.nvd3.nv-pie .hover path {
  fill-opacity: .7;
}

.nvd3.nv-pie .nv-label rect {
  fill-opacity: 0;
  stroke-opacity: 0;
}

.nvd3 .nv-groups path.nv-line {
  fill: none;
  stroke-width: 2.5px;
}

.nvd3 .nv-groups path.nv-area {
  stroke: none;
}

.nvd3 .nv-line.hover path {
  stroke-width: 6px;
}

.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
  fill-opacity: 0;
  stroke-opacity: 0;
}

.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
  fill-opacity: .5 !important;
  stroke-opacity: .5 !important;
}

.nvd3 .nv-groups .nv-point {
  -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
  -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
  transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
}

.nvd3.nv-scatter .nv-groups .nv-point.hover,
.nvd3 .nv-groups .nv-point.hover {
  stroke-width: 20px;
  fill-opacity: .5 !important;
  stroke-opacity: .5 !important;
}

.nvd3 .nv-point-paths path {
  stroke: #aaa;
  stroke-opacity: 0;
  fill: #eee;
  fill-opacity: 0;
}

.nvd3 .nv-indexLine {
  cursor: ew-resize;
}

.nvd3 .nv-distribution {
  pointer-events: none;
}

.nvd3 .nv-groups .nv-point.hover {
  stroke-width: 20px;
  stroke-opacity: .5;
}

.nvd3 .nv-scatter .nv-point.hover {
  fill-opacity: 1;
}

.nvd3.nv-stackedarea path.nv-area {
  -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
  -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;

  transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
  fill-opacity: .7;
  stroke-opacity: 0;

}

.nvd3.nv-stackedarea path.nv-area.hover {
  fill-opacity: .9;
}

.nvd3.nv-stackedarea .nv-groups .nv-point {
  stroke-opacity: 0;
  fill-opacity: 0;
}

.nvd3.nv-stackedarea .nv-groups .nv-point.hover {
  stroke-width: 20px;
  stroke-opacity: .75;
  fill-opacity: 1;
}

.nvd3.nv-linePlusBar .nv-bar rect {
  fill-opacity: .75;
}

.nvd3.nv-linePlusBar .nv-bar rect:hover {
  fill-opacity: 1;
}

.nvd3.nv-bullet {
  font: 10px sans-serif;
}

.nvd3.nv-bullet .nv-measure {
  fill-opacity: .8;
}

.nvd3.nv-bullet .nv-measure:hover {
  fill-opacity: 1;
}

.nvd3.nv-bullet .nv-marker {
  stroke: #000;
  stroke-width: 2px;
}

.nvd3.nv-bullet .nv-markerTriangle {
  stroke: #000;
  fill: #fff;
  stroke-width: 1.5px;
}

.nvd3.nv-bullet .nv-tick line {
  stroke: #666;
  stroke-width: .5px;
}

.nvd3.nv-bullet .nv-range.nv-s0 {
  fill: #eee;
}

.nvd3.nv-bullet .nv-range.nv-s1 {
  fill: #ddd;
}

.nvd3.nv-bullet .nv-range.nv-s2 {
  fill: #ccc;
}

.nvd3.nv-bullet .nv-title {
  font-weight: bold;
  font-size: 14px;
}

.nvd3.nv-bullet .nv-subtitle {
  fill: #999;
}

.nvd3.nv-bullet .nv-range {
  fill: #999;
  fill-opacity: .4;
}

.nvd3.nv-bullet .nv-range:hover {
  fill-opacity: .7;
}

.nvd3.nv-sparkline path {
  fill: none;
}

.nvd3.nv-sparklineplus g.nv-hoverValue {
  pointer-events: none;
}

.nvd3.nv-sparklineplus .nv-hoverValue line {
  stroke: #333;
  stroke-width: 1.5px;
}

.nvd3.nv-sparklineplus,
.nvd3.nv-sparklineplus g {
  pointer-events: all;
}

.nvd3 .nv-hoverArea {
  fill-opacity: 0;
  stroke-opacity: 0;
}

.nvd3.nv-sparklineplus .nv-xValue,
.nvd3.nv-sparklineplus .nv-yValue {
  font-weight: normal;
  font-size: .9em;
  stroke-width: 0;
}

.nvd3.nv-sparklineplus .nv-yValue {
  stroke: #f66;
}

.nvd3.nv-sparklineplus .nv-maxValue {
  stroke: #2ca02c;
  fill: #2ca02c;
}

.nvd3.nv-sparklineplus .nv-minValue {
  stroke: #d62728;
  fill: #d62728;
}

.nvd3.nv-sparklineplus .nv-currentValue {
  font-weight: bold;
  font-size: 1.1em;
}

.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
  stroke-width: 2px;
}

.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
  stroke-width: 4px;
}

.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
  stroke: #2ca02c;
}

.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
  stroke: #d62728;
}

.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
  font-weight: bold;
}

.nvd3.nv-historicalStockChart .nv-dragTarget {
  cursor: move;
  fill-opacity: 0;
  stroke: none;
}

.nvd3 .nv-brush .extent {
  fill-opacity: 0 !important;
}

.nvd3 .nv-brushBackground rect {
  stroke: #000;
  stroke-width: .4;
  fill: #fff;
  fill-opacity: .7;
}

.nvd3.nv-indentedtree .name {
  margin-left: 5px;
}

.nvd3.nv-indentedtree .clickable {
  color: #08C;
  cursor: pointer;
}

.nvd3.nv-indentedtree span.clickable:hover {
  color: #005580;
  text-decoration: underline;
}

.nvd3.nv-indentedtree .nv-childrenCount {
  display: inline-block;
  margin-left: 5px;
}

.nvd3.nv-indentedtree .nv-treeicon {
  cursor: pointer;
}

.nvd3.nv-indentedtree .nv-treeicon.nv-folded {
  cursor: pointer;
}

.nvd3 .background path {
  fill: none;
  stroke: #ccc;
  stroke-opacity: .4;
  shape-rendering: crispEdges;
}

.nvd3 .foreground path {
  fill: none;
  stroke: steelblue;
  stroke-opacity: .7;
}

.nvd3 .brush .extent {
  fill-opacity: .3;
  stroke: #fff;
  shape-rendering: crispEdges;
}

.nvd3 .axis line, .axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.nvd3 .axis text {
  text-shadow: 0 1px 0 #fff;
}


fix reveal effect

fix reveal effect

// Name:            Off-canvas
// Description:     Component to create an off-canvas sidebar
//
// Component:       `uk-offcanvas`
//
// Sub-objects:     `uk-offcanvas-container`
//                  `uk-offcanvas-overlay`
//                  `uk-offcanvas-bar`
//
// Modifiers:       `uk-offcanvas-flip`
//                  `uk-offcanvas-content-animation`
//                  `uk-offcanvas-overlay`
//                  `uk-offcanvas-bar-animation`
//                  `uk-offcanvas-reveal`
//
// States:          `uk-open`
//
// ========================================================================

// Variables
// ========================================================================

@offcanvas-z-index:                             @global-z-index;

@offcanvas-overlay-background:                  rgba(0,0,0,0.1);

@offcanvas-bar-width:                           270px;
@offcanvas-bar-padding-vertical:                @global-margin;
@offcanvas-bar-padding-horizontal:              @global-margin;
@offcanvas-bar-background:                      @global-secondary-background;
@offcanvas-bar-color-mode:                      light;

/* ========================================================================
   Component: Off-canvas
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 */

.uk-offcanvas {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: @offcanvas-z-index;
}

/*
 * Flip modifier
 */

.uk-offcanvas-flip .uk-offcanvas {
    right: 0;
    left: auto;
}

/* Bar
 ========================================================================== */

/*
 * 1. Set position
 * 2. Size and style
 * 3. Allow scrolling
 * 4. Transform
 */

.uk-offcanvas-bar {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    box-sizing: border-box;
    width: @offcanvas-bar-width;
    padding: @offcanvas-bar-padding-vertical @offcanvas-bar-padding-horizontal;
    background: @offcanvas-bar-background;
    /* 3 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 4 */
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    .hook-offcanvas-bar;
}

// Color Mode
.uk-offcanvas-bar:extend(.uk-light all) when (@offcanvas-bar-color-mode = light) {}
.uk-offcanvas-bar:extend(.uk-dark all) when (@offcanvas-bar-color-mode = dark) {}

/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-bar {
    left: auto;
    right: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

/*
 * Open
 */

.uk-open > .uk-offcanvas-bar {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/*
 * Slide Animation (Used in slide and push mode)
 */

.uk-offcanvas-bar-animation {
    -webkit-transition: -webkit-transform 100.3s ease-out;
    transition: transform 100.3s ease-out;
}

/*
 * Reveal Animation
 * 1. Clip the bar
 * 2. Animation
 * 3. Reset transform
 */

.uk-offcanvas-reveal {
    /* 1 */
    width: 0;
    height: 100vh;
    overflow: hidden;
    position: relative;
    /* 2 */
    -webkit-transition: width 100.3s ease-out;
    transition: width 100.3s ease-out;
}

.uk-offcanvas-reveal .uk-offcanvas-bar {
    /* 3 */
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.uk-open > .uk-offcanvas-reveal { width: @offcanvas-bar-width; }

/* Fix weird scrollbar bug in Chrome if overlay is used */
// .uk-offcanvas-container:not(.uk-offcanvas-flip) .uk-offcanvas-reveal {
//     -webkit-backface-visibility: hidden;
//     backface-visibility: hidden;
// }

/* Overlay
 ========================================================================== */

/*
 * Overlay the whole page. Needed for the `::before`
 * Using `100vw` so no modification is needed when off-canvas is flipped
 */

.uk-offcanvas-overlay { width: 100vw; }

/*
 * 1. Mask the whole page
 * 2. Fade-in transition
 */

.uk-offcanvas-overlay::before {
    /* 1 */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: @offcanvas-overlay-background;
    /* 2 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    .hook-offcanvas-overlay;
}

.uk-offcanvas-overlay.uk-open::before { opacity: 1; }

/* Container
 ========================================================================== */

/*
 * Prevent horizontal scrollbar when the content is slide-out
 */

.uk-offcanvas-container { overflow-x: hidden; }

/*
 * Prevent all scrollbars if overlay is used
 */

.uk-offcanvas-container-overlay { overflow: hidden; }

/* Content
 ========================================================================== */

/*
 * Prepare slide-out animation (Used in reveal and push mode)
 * Note: JS sets a fixed width so the page can slide-out without shinking
 */

.uk-offcanvas-content {
    -webkit-transition: 100.3s ease-out;
   transition: 100.3s ease-out;
   -webkit-transition-property: padding-left, margin-left;
   transition-property: padding-left, margin-left;
}

/*
 * Prevent vertical scrolling on touch devices
 * 1. Enable horizontal scrolling when position is fixed
 */

@media (pointer: coarse) {

    .uk-offcanvas-content {
        position: fixed;
        /* 1 */
        height: 100vh;
        overflow-y: scroll;
    }

    /*
     * Prevent all scrollbars if overlay is used
     */

    .uk-offcanvas-container-overlay .uk-offcanvas-content { height: auto; }

}

/*
 * Activate slide-out animation
 */

:not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { padding-left: @offcanvas-bar-width; }

/* Flip modifier */
.uk-offcanvas-flip > .uk-offcanvas-content-animation { margin-left: -@offcanvas-bar-width; }

// Hooks
// ========================================================================

.hook-offcanvas-misc;

.hook-offcanvas-overlay() {}
.hook-offcanvas-bar() {}
.hook-offcanvas-misc() {}

// Name:            Off-canvas
// Description:     Component to create an off-canvas sidebar
//
// Component:       `uk-offcanvas`
//
// Sub-objects:     `uk-offcanvas-container`
//                  `uk-offcanvas-overlay`
//                  `uk-offcanvas-bar`
//
// Modifiers:       `uk-offcanvas-flip`
//                  `uk-offcanvas-content-animation`
//                  `uk-offcanvas-overlay`
//                  `uk-offcanvas-bar-animation`
//                  `uk-offcanvas-reveal`
//
// States:          `uk-open`
//
// ========================================================================

// Variables
// ========================================================================

@offcanvas-z-index:                             @global-z-index;

@offcanvas-overlay-background:                  rgba(0,0,0,0.1);

@offcanvas-bar-width:                           270px;
@offcanvas-bar-padding-vertical:                @global-margin;
@offcanvas-bar-padding-horizontal:              @global-margin;
@offcanvas-bar-background:                      @global-secondary-background;
@offcanvas-bar-color-mode:                      light;

/* ========================================================================
   Component: Off-canvas
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 */

.uk-offcanvas {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: @offcanvas-z-index;
}

/*
 * Flip modifier
 */

.uk-offcanvas-flip .uk-offcanvas {
    right: 0;
    left: auto;
}

/* Bar
 ========================================================================== */

/*
 * 1. Set position
 * 2. Size and style
 * 3. Allow scrolling
 * 4. Transform
 */

.uk-offcanvas-bar {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    box-sizing: border-box;
    width: @offcanvas-bar-width;
    padding: @offcanvas-bar-padding-vertical @offcanvas-bar-padding-horizontal;
    background: @offcanvas-bar-background;
    /* 3 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 4 */
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    .hook-offcanvas-bar;
}

// Color Mode
.uk-offcanvas-bar:extend(.uk-light all) when (@offcanvas-bar-color-mode = light) {}
.uk-offcanvas-bar:extend(.uk-dark all) when (@offcanvas-bar-color-mode = dark) {}

/* Flip modifier */
.uk-offcanvas-flip .uk-offcanvas-bar {
    left: auto;
    right: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

/*
 * Open
 */

.uk-open > .uk-offcanvas-bar {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

/*
 * Slide Animation (Used in slide and push mode)
 */

.uk-offcanvas-bar-animation {
    -webkit-transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}

/*
 * Reveal Animation
 * 1. Clip the bar
 * 2. Animation
 * 3. Reset transform
 */

.uk-offcanvas-reveal {
    /* 1 */
    width: 0;
    overflow: hidden;
    /* 2 */
    -webkit-transition: width 0.3s ease-out;
    transition: width 0.3s ease-out;
}

.uk-offcanvas-reveal .uk-offcanvas-bar {
    /* 3 */
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.uk-open > .uk-offcanvas-reveal { width: @offcanvas-bar-width; }

/* Fix weird scrollbar bug in Chrome if overlay is used */
// .uk-offcanvas-container:not(.uk-offcanvas-flip) .uk-offcanvas-reveal {
//     -webkit-backface-visibility: hidden;
//     backface-visibility: hidden;
// }

/* Overlay
 ========================================================================== */

/*
 * Overlay the whole page. Needed for the `::before`
 * Using `100vw` so no modification is needed when off-canvas is flipped
 */

.uk-offcanvas-overlay { width: 100vw; }

/*
 * 1. Mask the whole page
 * 2. Fade-in transition
 */

.uk-offcanvas-overlay::before {
    /* 1 */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: @offcanvas-overlay-background;
    /* 2 */
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
    .hook-offcanvas-overlay;
}

.uk-offcanvas-overlay.uk-open::before { opacity: 1; }

/* Container
 ========================================================================== */

/*
 * Prevent horizontal scrollbar when the content is slide-out
 */

.uk-offcanvas-container { overflow-x: hidden; }

/*
 * Prevent all scrollbars if overlay is used
 */

.uk-offcanvas-container-overlay { overflow: hidden; }

/* Content
 ========================================================================== */

/*
 * Prepare slide-out animation (Used in reveal and push mode)
 * Note: JS sets a fixed width so the page can slide-out without shinking
 */

.uk-offcanvas-content {
    -webkit-transition: 0.3s ease-out;
   transition: 0.3s ease-out;
   -webkit-transition-property: padding-left, margin-left;
   transition-property: padding-left, margin-left;
}

/*
 * Prevent vertical scrolling on touch devices
 * 1. Enable horizontal scrolling when position is fixed
 */

@media (pointer: coarse) {

    .uk-offcanvas-content {
        position: fixed;
        /* 1 */
        height: 100vh;
        overflow-y: scroll;
    }

    /*
     * Prevent all scrollbars if overlay is used
     */

    .uk-offcanvas-container-overlay .uk-offcanvas-content { height: auto; }

}

/*
 * Activate slide-out animation
 */

:not(.uk-offcanvas-flip) > .uk-offcanvas-content-animation { padding-left: @offcanvas-bar-width; }

/* Flip modifier */
.uk-offcanvas-flip > .uk-offcanvas-content-animation { margin-left: -@offcanvas-bar-width; }

// Hooks
// ========================================================================

.hook-offcanvas-misc;

.hook-offcanvas-overlay() {}
.hook-offcanvas-bar() {}
.hook-offcanvas-misc() {}


[FIX] sap.m.MessageView: Description text is now fully visible

Change-Id: Iaafffbe9bac9433c6e4bcd9f94760f36fa0d897e
BCP: 1970346148

/* ===================================== */
/* CSS for control sap.m/MessagePopover  */
/* Base theme                            */
/* ===================================== */
@_sap_m_MessageView_DescIcon_Width: 3rem;

.sapMMsgView {
	height: 100%;

	.sapMSegBBtnMixed {
		padding-left: 0;
		padding-right: 0;
	}

	.sapMDialogScrollCont {
		padding: 0;
	}

	.sapMIBar .sapMBarChild {
		margin-left: .25rem;
		margin-right: .25rem;
	}

	.sapMMsgViewTitleText,
	.sapMMsgViewDescriptionText {
		margin: 1rem 1rem 0 3rem;
		a.sapMLnkMaxWidth,
		&.sapMLnkMaxWidth {
			white-space: normal;
		}
	}

	.sapMMsgViewDescriptionText {
		padding-bottom: 1rem;
		font-size: @sapMFontMediumSize;
		display: block;
	}

	.sapMMsgViewDescriptionLink {
		margin: 1rem 0 0 3rem;
	}

	.sapMMsgViewDescriptionText:empty {
		display: none;
	}

	.sapMMsgViewTitleText {
		vertical-align: middle;
		font-size: @sapMFontHeader5Size;
	}

	.sapMSLIDescription {
		margin-top: 0.125rem;
		font-size: @sapMFontMediumSize;
	}

	.sapMSLITitle {
		padding-bottom: 0;
		font-size: @sapMFontLargeSize;
	}

	.sapMSLITitleOnly {
		font-size: @sapMFontLargeSize;
	}

	.sapMLIB.sapMLIBActive {
		.sapMSLIImgIcon {
			color: @sapUiListActiveTextColor;
		}
	}

	.sapMSLIDescIcon .sapMSLIDescription {
		margin-top: 0.125rem;
	}

	.sapMSLIInfo {
		margin: 0;
	}

	.sapMTextMaxWidth {
		max-width: ~"calc(100% - @{_sap_m_MessageView_DescIcon_Width})";
	}
}

.sapMMsgViewDescIcon {
	position: absolute;
	left: 0;
	width: @_sap_m_MessageView_DescIcon_Width;
	top: .7rem;
	font-size: 1.35rem;
}

.sapMMsgViewItemActive {

	& .sapMLnk {
		font-size: 1rem;
	}

	& .sapMSLITitleOnly {
		display: flex;
		align-items: center;
	}
}

/* Compact size */
.sapUiSizeCompact .sapMMsgView {
	&.sapMPopoverArrUp:after,
	&.sapMPopoverWithoutBar.sapMPopoverNav.sapMPopoverWithHeaderCont > .sapMPopoverArrUp:after,
	&.sapMPopoverWithoutBar.sapMPopoverPage.sapMPopoverWithHeaderCont > .sapMPopoverArrUp:after {
		bottom: -9px;
		left: -8px;
	}

	.sapMMsgViewItem {
		height: 3.5rem;
		padding-left: 0;
	}

	.sapMMsgViewItemActive .sapMLnk {
		font-size: @sapMFontMediumSize;
	}

	.sapMMsgViewItem.sapMSLINoDescIcon {
		height: 2rem;
	}

	.sapMMsgViewItem.sapMSLINoDescIcon .sapMLIBImgNav.sapUiIcon {
		height: 2rem;
		line-height: 2rem;
	}

	.sapMMsgViewItem .sapMLIBImgNav.sapUiIcon {
		height: 3.4375rem;
		line-height: 3.4375rem;
	}

	.sapMMsgViewCloseBtn .sapMBtnIcon {
		width: 1.626rem;
		height: 1.626rem;
		font-size: 0.75rem;
	}

	.sapMList .sapMLIBContent .sapUiIcon {
		font-size: 1rem;
	}

	.sapMBtnInner {
		padding: 0;
	}

	.sapMMsgViewBackBtn .sapMBtnIcon {
		margin-right: 0;
	}

	.sapMBtnCustomIcon  {
		margin-left: 0;
	}

	.sapMMsgViewDescIcon {
		width: @_sap_m_MessageView_DescIcon_Width;
		height: 1.626rem;
		line-height: 1.626rem;
		font-size: 1rem;
	}

	.sapMSLIDescription {
		margin-top: 0;
		font-size: @sapMFontMediumSize;
	}

	.sapMSLITitle {
		font-size: @sapMFontMediumSize;
	}

	.sapMSLIDescIcon .sapMSLITitle,
	.sapMSLIDescIcon .sapMSLIDescription {
		margin-top: 0.125rem;
		margin-bottom: 0.125rem;
	}
}

.sapMMsgViewCloseBtn .sapMBtnIcon {
	color: @sapUiButtonIconColor;
}

.sapMMsgViewItemSuccess .sapMSLIImgIcon,
.sapMMsgViewBtnSuccess.sapMSegBBtn .sapUiIcon,
.sapMMsgViewDescIconSuccess {
	color: @sapUiPositiveElement;
}

.sapMMsgViewItemWarning .sapMSLIImgIcon,
.sapMMsgViewBtnWarning.sapMSegBBtn .sapUiIcon,
.sapMMsgViewDescIconWarning {
	color: @sapUiCriticalElement;
}

.sapMMsgViewItemError .sapMSLIImgIcon,
.sapMMsgViewBtnError.sapMSegBBtn .sapUiIcon,
.sapMMsgViewDescIconError {
	color: @sapUiNegativeElement;
}

.sapMMsgViewItemInformation .sapMSLIImgIcon,
.sapMMsgViewBtnInformation.sapMSegBBtn .sapUiIcon,
.sapMMsgViewDescIconInformation {
	color: @sapUiNeutralElement;
}

.sapMMsgViewItem .sapMSLIIconActive {
	color: @sapUiContentContrastIconColor;
}

/* ===================================== */
/* CSS for control sap.m/MessagePopover  */
/* Base theme                            */
/* ===================================== */

.sapMMsgView {
	height: 100%;

	.sapMSegBBtnMixed {
		padding-left: 0;
		padding-right: 0;
	}

	.sapMDialogScrollCont {
		padding: 0;
	}

	.sapMIBar .sapMBarChild {
		margin-left: .25rem;
		margin-right: .25rem;
	}

	.sapMMsgViewTitleText,
	.sapMMsgViewDescriptionText {
		margin: 1rem 1rem 0 3rem;
		a.sapMLnkMaxWidth,
		&.sapMLnkMaxWidth {
			white-space: normal;
		}
	}

	.sapMMsgViewDescriptionText {
		padding-bottom: 1rem;
		font-size: @sapMFontMediumSize;
		display: block;
	}

	.sapMMsgViewDescriptionLink {
		margin: 1rem 0 0 3rem;
	}

	.sapMMsgViewDescriptionText:empty {
		display: none;
	}

	.sapMMsgViewTitleText {
		vertical-align: middle;
		font-size: @sapMFontHeader5Size;
	}

	.sapMSLIDescription {
		margin-top: 0.125rem;
		font-size: @sapMFontMediumSize;
	}

	.sapMSLITitle {
		padding-bottom: 0;
		font-size: @sapMFontLargeSize;
	}

	.sapMSLITitleOnly {
		font-size: @sapMFontLargeSize;
	}

	.sapMLIB.sapMLIBActive {
		.sapMSLIImgIcon {
			color: @sapUiListActiveTextColor;
		}
	}

	.sapMSLIDescIcon .sapMSLIDescription {
		margin-top: 0.125rem;
	}

	.sapMSLIInfo {
		margin: 0;
	}
}

.sapMMsgViewDescIcon {
	position: absolute;
	left: 0;
	width: 3rem;
	top: .7rem;
	font-size: 1.35rem;
}

.sapMMsgViewItemActive {

	& .sapMLnk {
		font-size: 1rem;
	}

	& .sapMSLITitleOnly {
		display: flex;
		align-items: center;
	}
}

/* Compact size */
.sapUiSizeCompact .sapMMsgView {
	&.sapMPopoverArrUp:after,
	&.sapMPopoverWithoutBar.sapMPopoverNav.sapMPopoverWithHeaderCont > .sapMPopoverArrUp:after,
	&.sapMPopoverWithoutBar.sapMPopoverPage.sapMPopoverWithHeaderCont > .sapMPopoverArrUp:after {
		bottom: -9px;
		left: -8px;
	}

	.sapMMsgViewItem {
		height: 3.5rem;
		padding-left: 0;
	}

	.sapMMsgViewItemActive .sapMLnk {
		font-size: @sapMFontMediumSize;
	}

	.sapMMsgViewItem.sapMSLINoDescIcon {
		height: 2rem;
	}

	.sapMMsgViewItem.sapMSLINoDescIcon .sapMLIBImgNav.sapUiIcon {
		height: 2rem;
		line-height: 2rem;
	}

	.sapMMsgViewItem .sapMLIBImgNav.sapUiIcon {
		height: 3.4375rem;
		line-height: 3.4375rem;
	}

	.sapMMsgViewCloseBtn .sapMBtnIcon {
		width: 1.626rem;
		height: 1.626rem;
		font-size: 0.75rem;
	}

	.sapMList .sapMLIBContent .sapUiIcon {
		font-size: 1rem;
	}

	.sapMBtnInner {
		padding: 0;
	}

	.sapMMsgViewBackBtn .sapMBtnIcon {
		margin-right: 0;
	}

	.sapMBtnCustomIcon  {
		margin-left: 0;
	}

	.sapMMsgViewDescIcon {
		width: 3rem;
		height: 1.626rem;
		line-height: 1.626rem;
		font-size: 1rem;
	}

	.sapMSLIDescription {
		margin-top: 0;
		font-size: @sapMFontMediumSize;
	}

	.sapMSLITitle {
		font-size: @sapMFontMediumSize;
	}

	.sapMSLIDescIcon .sapMSLITitle,
	.sapMSLIDescIcon .sapMSLIDescription {
		margin-top: 0.125rem;
		margin-bottom: 0.125rem;
	}
}

.sapMMsgViewCloseBtn .sapMBtnIcon {
	color: @sapUiButtonIconColor;
}

.sapMMsgViewItemSuccess .sapMSLIImgIcon,
.sapMMsgViewBtnSuccess.sapMSegBBtn .sapUiIcon,
.sapMMsgViewDescIconSuccess {
	color: @sapUiPositiveElement;
}

.sapMMsgViewItemWarning .sapMSLIImgIcon,
.sapMMsgViewBtnWarning.sapMSegBBtn .sapUiIcon,
.sapMMsgViewDescIconWarning {
	color: @sapUiCriticalElement;
}

.sapMMsgViewItemError .sapMSLIImgIcon,
.sapMMsgViewBtnError.sapMSegBBtn .sapUiIcon,
.sapMMsgViewDescIconError {
	color: @sapUiNegativeElement;
}

.sapMMsgViewItemInformation .sapMSLIImgIcon,
.sapMMsgViewBtnInformation.sapMSegBBtn .sapUiIcon,
.sapMMsgViewDescIconInformation {
	color: @sapUiNeutralElement;
}

.sapMMsgViewItem .sapMSLIIconActive {
	color: @sapUiContentContrastIconColor;
}


[FIX] sap.m.RadioButton: Fixes an issue with clicking two times on a button to
select it

- The after element that simulates the focus of the RadioButton goes above
  the button so the click handler can not propagate to the RadioButton

Change-Id: Ib114d486f7531f8150d4d2e41ae3e1138277ce8a
BCP: 1670036729

/* ============================================= */
/* CSS for control sap.m/RadioButton.control     */
/* ============================================= */

.sapMRb {
	float: left;
	clear: left;
	outline: none;
	text-overflow: ellipsis;
	position: relative;
}

.sapMILI-CTX .sapMRb {
	float: right;
}

.sapMRbB {
	height: 3em;
	width: 3em;
	display: inline-block; /* for ie*/
	display: -webkit-inline-box;
}

.sapMRbB .sapMRbBOut {
	height: 1.03em;
	width: 1.03em;
	border-radius: 1em;
}

.sapMRbBLabel {
	vertical-align: top;
	height: 3em;
	line-height: 3em;
	cursor: default;
}

.sapMRbB input {
	margin: 0; /* FF puts margin */
	-webkit-appearance: none;
	visibility: hidden;
}

.sapMRbB:focus {
	outline: none;
}

.sapMRb:focus:before {
	content: "";
	display: block;
	position: absolute;
	top: .75rem;
	bottom: .625rem;
	left: .75rem;
	right: .625rem;
	pointer-events: none;
}

.sapMRbHasLabel.sapMRb:focus:before {
	right: -0.0625rem;
}

.sapMRbDis:focus:before {
	display: none;
}

.sapUiSizeCompact .sapMRb:focus:before {
	top: .4375rem;
	bottom: .3125rem;
	left: .4375rem;
	right: .325rem;
}

/* ============================================= */
/* CSS for control sap.m/RadioButton.control     */
/* ============================================= */

.sapMRb {
	float: left;
	clear: left;
	outline: none;
	text-overflow: ellipsis;
	position: relative;
}

.sapMILI-CTX .sapMRb {
	float: right;
}

.sapMRbB {
	height: 3em;
	width: 3em;
	display: inline-block; /* for ie*/
	display: -webkit-inline-box;
}

.sapMRbB .sapMRbBOut {
	height: 1.03em;
	width: 1.03em;
	border-radius: 1em;
}

.sapMRbBLabel {
	vertical-align: top;
	height: 3em;
	line-height: 3em;
	cursor: default;
}

.sapMRbB input {
	margin: 0; /* FF puts margin */
	-webkit-appearance: none;
	visibility: hidden;
}

.sapMRbB:focus {
	outline: none;
}

.sapMRb:focus:before {
	content: "";
	display: block;
	position: absolute;
	top: .75rem;
	bottom: .625rem;
	left: .75rem;
	right: .625rem;
}

.sapMRbHasLabel.sapMRb:focus:before {
	right: -0.0625rem;
}

.sapMRbDis:focus:before {
	display: none;
}

.sapUiSizeCompact .sapMRb:focus:before {
	top: .4375rem;
	bottom: .3125rem;
	left: .4375rem;
	right: .325rem;
}


Style 리스트 그룹에서 액티브시 폰트 bold로 인해 높이 값이 달라지는 문제 수정

.list-group {
  border-radius: 5px;
  .box-shadow(~"0 3px 2px rgba(0,0,0,.18)");
}

.list-group-item {
  border-color: #c1c1c1;

  &:active, &.active {
    color: #FFF;
    text-shadow: 0 1px 0 rgba(0,0,0,.32);
    background-color: #cbcbcb;
    .background-image(~"linear-gradient(bottom, #2a92b9 0%, #40aad2 100%)");
  }

  & >.label {
    float: right;
  }

  .pull-right {
    .label {
      display: inline-block;
    }
    .badge, .label  {
      position: relative;
      top: -3px;
    }
  }

  .glyphicon {
    display: inline-block;
    padding-top: 4px;
  }
}

.list-group-radio, .list-group-checkbox {
  border-radius: 4px;
  .list-group-item {
    border-left: none;
    border-right: none;
  }
  & > li {
    z-index: 2;
    float: none;
    padding: 0;
    width: 100%;
    color: @text-color;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);

    &:first-child {
      border-top: 0;
      border-radius: 4px 4px 0 0;
    }
  }

  label {
    display: block;
    margin: 0 0 0 10px;
    padding: 15px 0;
    vertical-align: middle;
    font-size: 26px;
    line-height: 30px;
  }
}

.list-group {
  border-radius: 5px;
  .box-shadow(~"0 3px 2px rgba(0,0,0,.18)");
}

.list-group-item {
  border-color: #c1c1c1;

  &:active, &.active {
    color: #FFF;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0,0,0,.32);
    background-color: #cbcbcb;
    .background-image(~"linear-gradient(bottom, #2a92b9 0%, #40aad2 100%)");
  }

  & >.label {
    float: right;
  }

  .pull-right {
    .label {
      display: inline-block;
    }
    .badge, .label  {
      position: relative;
      top: -3px;
    }
  }

  .glyphicon {
    display: inline-block;
    padding-top: 4px;
  }
}

.list-group-radio, .list-group-checkbox {
  border-radius: 4px;
  .list-group-item {
    border-left: none;
    border-right: none;
  }
  & > li {
    z-index: 2;
    float: none;
    padding: 0;
    width: 100%;
    color: @text-color;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);

    &:first-child {
      border-top: 0;
      border-radius: 4px 4px 0 0;
    }
  }

  label {
    display: block;
    margin: 0 0 0 10px;
    padding: 15px 0;
    vertical-align: middle;
    font-size: 26px;
    line-height: 30px;
  }
}


Make header position fixed.

Make header position fixed.

html, body {
	font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
}

#content, #header, #footer {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
}

#content {
	margin-top: 50px;
	padding-top: 30px;
	font-size: 85%;
}

#header-bkg {
	//position: absolute;
	position: fixed;
	top: 0px;
	background-color: #def7ff;
	height: 40px;
	width: 100%;
	z-index: 1;
}

#subheader {
	position: fixed;
	top: 40px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#def7ff), color-stop(100%,rgba(222,247,255,0)));
	height: 30px;
	width: 100%;
}

#header {
	//position: fixed;
	#logo {
		font-family: 'Amaranth';
		float: left;
		// margin-left: 10px;
		margin-top: -16px;
		a {
			font-size: 270%;
			color: #9e0002;
			&:hover, &:hover span {
				color: #005aa7;
				text-decoration: none;
			}
			span { color: #ef0003; }
		}
	}
	ul {
		list-style-type: none;
		height: 50px;
		padding-right: 10px;
		padding-top: 0px;
	}
	li {
		display: inline;
		float:	right;
		padding-right: 5px;
		padding-left: 5px;
	}
	form { margin-top: -3px; }
}

#footer {
	font-size: 70%;
	margin-top: 50px;
	p {
		margin: 0;
		padding: 0;
	}
}

#flash {
	border: 1px solid #a5a5a5;
	margin-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	&.error { background: #ff8c8e; }
	&.info { background: #d4d4fe; }
}

a, &:visited {
	color: #00B7FF;
	text-decoration: none;
	&:hover{
		text-decoration: underline;
		color: #008fca;
	}
}

form {
	ul {
		list-style-type: none;
		padding-left: 0;
	}
	li { padding-bottom: 10px; }
	label {
		margin-right: 20px;
		font-weight: bold;
	}
}

#torrent-table {
	margin-top: -15px;
	table-layout: fixed;
	border-collapse: collapse;
	td {
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
		&:nth-child(2), &:nth-child(4), &:nth-child(5), &:nth-child(6) { text-align: right; }
		&:nth-child(3), &:nth-child(7) { text-align: center; }
	}
	th {
		&:nth-child(1) { width: 700px; }
		&:nth-child(2) { width: 90px; }
		&:nth-child(3) { width: 180px; }
		&:nth-child(4) { width: 60px; }
		&:nth-child(5) { width: 60px; }
		&:nth-child(6) { width: 60px; }
		&:nth-child(7) { width: 40px; }
	}
	tr:nth-child(2n) { background-color: #e3e3ff; }
}

#file-table {
	width: 700px;
	td:nth-child(2) { text-align: right; }
	tr:nth-child(2n) { background-color: #e3e3ff; }
}

.pagination {
	text-align: center;
	margin-top: 25px;
	a, .thispage {
		border: 1px solid #c8c8c8;
		padding-top: 3px;
		padding-left: 8px;
		padding-bottom: 3px;
		padding-right: 8px;
		margin-right: 2px;
		margin-left: 2px;
	}
}

.delete { color: #9e0002; }

span.editable {
	display: inline-block;
	&:hover:not(.beingedited) {
		padding-left: 10px;
		margin-left: -10px;
		padding-right: 10px;
		padding-top: 5px;
		margin-top: -5px;
		padding-bottom: 5px;
		margin-bottom: -5px;
		background-color: #ffffd3;
	}
}

.editable textarea { display: block; }

span {
  &#description {
		margin-top: -10px;
		padding-top: 10px;
		margin-bottom: -10px;
		padding-bottom: 10px;
		p { margin: 0px 0px 0px 0px; }
		p + p { margin: 5px 0px 0px 0px; }
	}
}

html, body {
	font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
}

#content, #header, #footer {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
}

#content {
	margin-top: 50px;
	padding-top: 30px;
	font-size: 85%;
}

#header-bkg {
	position: absolute;
	top: 0px;
	background-color: #def7ff;
	height: 70px;
	width: 100%;
}

#header {
	#logo {
		font-family: 'Amaranth';
		float: left;
		// margin-left: 10px;
		margin-top: -4px;
		a {
			font-size: 270%;
			color: #9e0002;
			&:hover, &:hover span {
				color: #005aa7;
				text-decoration: none;
			}
			span { color: #ef0003; }
		}
	}
	ul {
		list-style-type: none;
		height: 50px;
		padding-right: 10px;
		padding-top: 12px;
	}
	li {
		display: inline;
		float:	right;
		padding-right: 5px;
		padding-left: 5px;
	}
	form { margin-top: -3px; }
}

#footer {
	font-size: 70%;
	margin-top: 50px;
	p {
		margin: 0;
		padding: 0;
	}
}

#flash {
	border: 1px solid #a5a5a5;
	margin-top: 15px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	&.error { background: #ff8c8e; }
	&.info { background: #d4d4fe; }
}

a, &:visited {
	color: #00B7FF;
	text-decoration: none;
	&:hover{
		text-decoration: underline;
		color: #008fca;
	}
}

form {
	ul {
		list-style-type: none;
		padding-left: 0;
	}
	li { padding-bottom: 10px; }
	label {
		margin-right: 20px;
		font-weight: bold;
	}
}

#torrent-table {
	margin-top: -15px;
	table-layout: fixed;
	border-collapse: collapse;
	td {
		padding-bottom: 5px;
		padding-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
		&:nth-child(2), &:nth-child(4), &:nth-child(5), &:nth-child(6) { text-align: right; }
		&:nth-child(3), &:nth-child(7) { text-align: center; }
	}
	th {
		&:nth-child(1) { width: 700px; }
		&:nth-child(2) { width: 90px; }
		&:nth-child(3) { width: 180px; }
		&:nth-child(4) { width: 60px; }
		&:nth-child(5) { width: 60px; }
		&:nth-child(6) { width: 60px; }
		&:nth-child(7) { width: 40px; }
	}
	tr:nth-child(2n) { background-color: #e3e3ff; }
}

#file-table {
	width: 700px;
	td:nth-child(2) { text-align: right; }
	tr:nth-child(2n) { background-color: #e3e3ff; }
}

.pagination {
	text-align: center;
	margin-top: 25px;
	a, .thispage {
		border: 1px solid #c8c8c8;
		padding-top: 3px;
		padding-left: 8px;
		padding-bottom: 3px;
		padding-right: 8px;
		margin-right: 2px;
		margin-left: 2px;
	}
}

.delete {
	color: #9e0002;
}

span.editable {
	display: inline-block;
	&:hover:not(.beingedited) {
		padding-left: 10px;
		margin-left: -10px;
		padding-right: 10px;
		padding-top: 5px;
		margin-top: -5px;
		padding-bottom: 5px;
		margin-bottom: -5px;
		background-color: #ffffd3;
	}
}

.editable textarea { display: block; }

span {
  &#description {
		margin-top: -10px;
		padding-top: 10px;
		margin-bottom: -10px;
		padding-bottom: 10px;
		p {
			margin: 0px 0px 0px 0px;
		}
		p + p {
			margin: 5px 0px 0px 0px;
		}
	}
}


fix - buttons on player can't be pressed

@import "../../lib/styles/hexdots.css";
@import "../../lib/styles/prefixer.less";

body {
  font-family: system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", sans-serif;
  font-size: 2em;
}

@cyan-dark: #335d66;
@cyan-bright: #71cfe2;
@semi-white: #e2e2e2;

.button-mixin {
  background: fade(@cyan-dark, 25%);
  color: @cyan-bright;
  border: 1px solid @cyan-bright;
  cursor: pointer;
  border-radius: 5px;

  &:hover {
    background: fade(@cyan-dark, 50%);
  }
}

* {
  font-size: 1rem;
  box-sizing: border-box;
}

.main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;

  color: @semi-white;

  .background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../images/background.jpg");
    background-size: cover;
    -webkit-filter: brightness(80%) blur(10px);
    margin: -15px;
    z-index: -1;
  }

  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.3;
  }

  .top-bar {

    padding: 1em;

    .back {
      @back-image: "../images/back.png";

      height: image-height(@back-image);
      width: image-width(@back-image);
      background-image: url(@back-image);

      cursor: pointer;
    }
  }

  .settings-modifications-page {
    width: 580px;
    margin: 0 auto;

    label {
      width: 20%;
      text-align: right;
      display: inline-block;
      padding: 1.5rem 1rem;
    }

    input {
      width: 80%;
      padding: 0.5rem;

      color: @semi-white;
      background: fade(@cyan-dark, 25%);
      border: 1px solid @cyan-bright;
      border-radius: 5px;
    }

    .test-state {
      text-align: right;
    }

    .buttons {
      text-align: right;
      margin-top: 2rem;

      button {
        .button-mixin;

        padding: 1rem;
        width: 15em;
      }

    }
  }

  .playlists-page {

    margin: 0 auto;
    width: 960px;
    text-align: center;

    img.logo {
      margin-bottom: 1em;
    }

    button.settings {
      .button-mixin;

      position: absolute;
      right: 1em;
      bottom: 1em;
      padding: 0.5em;

      img {
        height: 2em;
      }
    }

    button.playlist {
      .button-mixin;

      display: block;
      margin: 1em auto;

      padding: 1rem;
      width: 15em;
    }
  }

  .player-page {

    .centre-column {
      width: 360px;
      margin: 0 auto;
      top: 40%;
      text-align: center;

      .art {
        width: 300px;
        height: 300px;
        box-shadow: 0 0 20px 3px rgba(52, 100, 111, 1);
        display: inline-block;
        position: relative;
        text-align: left;

        img.artist {
          width: 100%;
          height: 100%;
        }

        .metadata {
          position: absolute;
          right: -30px;
          transform: translateX(100%);
        }
      }

      .star-full, .star-empty {
        width: 53px;
        height: 50px;
        display: inline-block;
        background-size: auto;
        margin-top: 20px;
        margin-right: 10px;
        cursor: pointer;
      }

      .star-full {
        background-image: url("../images/star.png");
        -webkit-filter: brightness(200%);
      }

      .star-empty {
        background-image: url("../images/star.png");
        opacity: 0.8;
        -webkit-filter: grayscale(100%) brightness(50%);
      }

      .names {
        margin-top: 30px;
        font-size: 30px;

        & > div {
          margin-top: 10px;
        }

        .artist-name {
          color: rgba(52, 100, 111, 1)
        }
      }

      .control-buttons {
        margin-top: 30px;

        button {
          border: 0;
          outline: 0;
          cursor: pointer;

          &:active {
            -webkit-filter: brightness(150%);
          }
        }

        button.play-pause {
          height: 81px;
          width: 81px;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);

          &.play {
            background: url("../images/play.png")
          }

          &.pause {
            background: url("../images/pause.png")
          }
        }

        button.next {
          position: relative;
          height: 60px;
          width: 60px;
          background: url("../images/next.png");

          top: 10px;
          left: 90px;
        }
      }
    }
  }
}

@import "../../lib/styles/hexdots.css";
@import "../../lib/styles/prefixer.less";

body {
  font-family: system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Lucida Grande", sans-serif;
  font-size: 2em;
}

@cyan-dark: #335d66;
@cyan-bright: #71cfe2;
@semi-white: #e2e2e2;

.button-mixin {
  background: fade(@cyan-dark, 25%);
  color: @cyan-bright;
  border: 1px solid @cyan-bright;
  cursor: pointer;
  border-radius: 5px;

  &:hover {
    background: fade(@cyan-dark, 50%);
  }
}

* {
  font-size: 1rem;
  box-sizing: border-box;
}

.main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;

  color: @semi-white;

  .background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("../images/background.jpg");
    background-size: cover;
    -webkit-filter: brightness(80%) blur(10px);
    margin: -15px;
    z-index: -1;
  }

  .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.3;
  }

  .top-bar {

    padding: 1em;

    .back {
      @back-image: "../images/back.png";

      height: image-height(@back-image);
      width: image-width(@back-image);
      background-image: url(@back-image);

      cursor: pointer;
    }
  }

  .settings-modifications-page {
    width: 580px;
    margin: 0 auto;

    label {
      width: 20%;
      text-align: right;
      display: inline-block;
      padding: 1.5rem 1rem;
    }

    input {
      width: 80%;
      padding: 0.5rem;

      color: @semi-white;
      background: fade(@cyan-dark, 25%);
      border: 1px solid @cyan-bright;
      border-radius: 5px;
    }

    .test-state {
      text-align: right;
    }

    .buttons {
      text-align: right;
      margin-top: 2rem;

      button {
        .button-mixin;

        padding: 1rem;
        width: 15em;
      }

    }
  }

  .playlists-page {

    margin: 0 auto;
    width: 960px;
    text-align: center;

    img.logo {
      margin-bottom: 1em;
    }

    button.settings {
      .button-mixin;

      position: absolute;
      right: 1em;
      bottom: 1em;
      padding: 0.5em;

      img {
        height: 2em;
      }
    }

    button.playlist {
      .button-mixin;

      display: block;
      margin: 1em auto;

      padding: 1rem;
      width: 15em;
    }
  }

  .player-page {

    .centre-column {
      width: 100%;
      position: absolute;
      top: 40%;
      transform: translateY(-40%);
      text-align: center;

      // allow the top bar to be above it
      z-index: -1;

      .art {
        width: 300px;
        height: 300px;
        box-shadow: 0 0 20px 3px rgba(52, 100, 111, 1);
        display: inline-block;
        position: relative;
        text-align: left;

        img.artist {
          width: 100%;
          height: 100%;
        }

        .metadata {
          position: absolute;
          right: -30px;
          transform: translateX(100%);
        }
      }

      .star-full, .star-empty {
        width: 53px;
        height: 50px;
        display: inline-block;
        background-size: auto;
        margin-top: 20px;
        margin-right: 10px;
        cursor: pointer;
      }

      .star-full {
        background-image: url("../images/star.png");
        -webkit-filter: brightness(200%);
      }

      .star-empty {
        background-image: url("../images/star.png");
        opacity: 0.8;
        -webkit-filter: grayscale(100%) brightness(50%);
      }

      .names {
        margin-top: 30px;
        font-size: 30px;

        & > div {
          margin-top: 10px;
        }

        .artist-name {
          color: rgba(52, 100, 111, 1)
        }
      }

      .control-buttons {
        margin-top: 30px;

        button {
          border: 0;
          outline: 0;
          cursor: pointer;

          &:active {
            -webkit-filter: brightness(150%);
          }
        }

        button.play-pause {
          height: 81px;
          width: 81px;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);

          &.play {
            background: url("../images/play.png")
          }

          &.pause {
            background: url("../images/pause.png")
          }
        }

        button.next {
          position: relative;
          height: 60px;
          width: 60px;
          background: url("../images/next.png");

          top: 10px;
          left: 90px;
        }
      }
    }
  }
}


Fixed fullscreen panel.

Fixed fullscreen panel.

@-webkit-keyframes sidebar-slide-in {
  from {
    left: -@bws-sidebar-width;
  }
  to {
    left: 0;
  }
}
@keyframes sidebar-slide-in {
  from {
    left: -@bws-sidebar-width;
  }
  to {
    left: 0;
  }
}
@-webkit-keyframes sidebar-details-slide-in {
  from {
    left: -@bws-panel-width;
  }
  to {
    left: @bws-sidebar-width;
  }
}
@keyframes sidebar-details-slide-in {
  from {
    left: -@bws-panel-width;
  }
  to {
    left: @bws-sidebar-width;
  }
}
#subapp-browser {
  .customize-scrollbar;
  .type9;

  .push-left {
    padding-left: 30px;
  }
  a:hover {
    text-decoration: none;
  }
  strong {
    font-weight: 400;
  }
  .reset {
    margin: auto;
    text-align: left;
    width: 90%;
  }
  .break-word {
    word-wrap: break-word;
    word-break: break-all;
  }
  .respect-whitespace{
    white-space: pre-line;
  }
  .token {
    color: @text-colour;
  }
  .bws-header {
      padding: 20px;
      border-bottom: 1px solid #b7b7b9;
  }
  #bws-sidebar .bws-content,
  #bws-sidebar,
  #bws-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  #bws-sidebar,
  #bws-fullscreen {
    background: @bws-background;
    z-index: 600;
  }
  #bws-fullscreen {
    background-color: #fff;
    background-image: none;
  }
  #bws-fullscreen,
  #bws-sidebar .bws-content {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #bws-fullscreen {
    .charmview {
        background-color: #fff;
    }
    .bws-header,
    #bws-editorial .content,
    #bws-search .content,
    .charmview > .bundle,
    .charm {
        width: 1040px;
        margin: 0 auto;
    }
    #bws-editorial .content,
    #bws-search .content,
    .charmview > .bundle,
    .charm {
        padding-bottom: 50px;
    }
    .bws-header-wrapper {
        background: @bws-background;
        padding: 20px;
        border-bottom: 1px solid @bws-border;
    }
    .bws-header {
        padding: 0;
        border: none;
    }
    #bws-editorial {
        margin-top: -1px;
    }
    .bws-view-data {
      position: static;
      width: 100%;
      overflow: visible;
      box-shadow: none;

      .yui3-tabview {
        position: relative;

        .yui3-tabview-panel {
            position: static;
            width: @bws-panel-width;

            .yui3-tab-panel {
                padding-top: 0;
            }
        }
      }
    }
    #bws-search {
      .search-results {
          .border-box;
          padding: 10px 20px;
      }
    }
    .yui3-charmcontainer {
        border-bottom: 1px solid @bws-groove-dark;

        .charms {
            margin-bottom: -1px;
        }
    }
    #bws-search,
    #bws-editorial {
        .yui3-token {
            border-width: 0 1px 1px 1px;
            border-style: solid;
            border-left-color: @bws-groove-light;
            border-right-color: @bws-groove-dark;
            border-bottom-color: @bws-groove-dark;

            .description {
                .border-box;
                height: 80px;
            }
        }
    }
    .bws-searchbox {
      display: inline-block
    }
    .browser-nav {
      display: inline-block;
      padding: 0 0 0 50px;
    }
  }
  #bws-sidebar {
    z-index: 601;
    right: auto;
    width: @bws-sidebar-width;
    border-right: 1px solid #a5a5a5;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    -webkit-animation: sidebar-slide-in 0.5s;
    animation: sidebar-slide-in 0.5s;

    .bws-searchbox {
        width: 100%;
    }
    .bws-content {
      top: 81px;
      border-top: 8px solid #d7d7d7;

      &.with-home {
        top: 145px;
      }

      .section-title {
        padding-left: 20px;
        padding-right: 20px;
      }
      .yui3-token {
        width: 100%;
        border-top: 1px solid @bws-groove-light;
        border-bottom: 1px solid @bws-groove-dark;

        .title {
            max-width: 170px;
        }
        .description {
            display: none;
        }
        &:hover {
            background-color: #eee;
        }
      }
    }
  }
  .bws-view-data {
    left: @bws-sidebar-width;
  }
  .content-visible .bws-view-data {
    -webkit-animation: sidebar-details-slide-in 0.5s;
    animation: sidebar-details-slide-in 0.5s;
  }
}

@-webkit-keyframes sidebar-slide-in {
  from {
    left: -@bws-sidebar-width;
  }
  to {
    left: 0;
  }
}
@keyframes sidebar-slide-in {
  from {
    left: -@bws-sidebar-width;
  }
  to {
    left: 0;
  }
}
@-webkit-keyframes sidebar-details-slide-in {
  from {
    left: -@bws-panel-width;
  }
  to {
    left: @bws-sidebar-width;
  }
}
@keyframes sidebar-details-slide-in {
  from {
    left: -@bws-panel-width;
  }
  to {
    left: @bws-sidebar-width;
  }
}
#subapp-browser {
  .customize-scrollbar;
  .type9;

  .push-left {
    padding-left: 30px;
  }
  a:hover {
    text-decoration: none;
  }
  strong {
    font-weight: 400;
  }
  .reset {
    margin: auto;
    text-align: left;
    width: 90%;
  }
  .break-word {
    word-wrap: break-word;
    word-break: break-all;
  }
  .respect-whitespace{
    white-space: pre-line;
  }
  .token {
    color: @text-colour;
  }
  .bws-header {
      padding: 20px;
      border-bottom: 1px solid #b7b7b9;
  }
  #bws-sidebar .bws-content,
  #bws-sidebar,
  #bws-fullscreen {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  #bws-sidebar,
  #bws-fullscreen {
    background: @bws-background;
    z-index: 600;
  }
  #bws-fullscreen {
    background-color: #fff;
    background-image: none;
  }
  #bws-fullscreen,
  #bws-sidebar .bws-content {
    overflow-x: hidden;
    overflow-y: auto;
  }
  #bws-fullscreen {
    .charmview {
        background-color: #fff;
    }
    .bws-header,
    #bws-editorial .content,
    #bws-search .content,
    .charmview > .bundle,
    .charm {
        width: 1040px;
        margin: 0 auto;
    }
    #bws-editorial .content,
    #bws-search .content,
    .charmview > .bundle,
    .charm {
        padding-bottom: 50px;
    }
    .bws-header-wrapper {
        background: @bws-background;
        padding: 20px;
        border-bottom: 1px solid @bws-border;
    }
    .bws-header {
        padding: 0;
        border: none;
    }
    #bws-editorial {
        margin-top: -1px;
    }
    .bws-view-data {
      position: static;
      width: 100%;
      overflow: visible;
      box-shadow: none;
    }
    #bws-search {
      .search-results {
          .border-box;
          padding: 10px 20px;
      }
    }
    .yui3-charmcontainer {
        border-bottom: 1px solid @bws-groove-dark;

        .charms {
            margin-bottom: -1px;
        }
    }
    #bws-search,
    #bws-editorial {
        .yui3-token {
            border-width: 0 1px 1px 1px;
            border-style: solid;
            border-left-color: @bws-groove-light;
            border-right-color: @bws-groove-dark;
            border-bottom-color: @bws-groove-dark;

            .description {
                .border-box;
                height: 80px;
            }
        }
    }
    .bws-searchbox {
      display: inline-block
    }
    .browser-nav {
      display: inline-block;
      padding: 0 0 0 50px;
    }
  }
  #bws-sidebar {
    z-index: 601;
    right: auto;
    width: @bws-sidebar-width;
    border-right: 1px solid #a5a5a5;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
    -webkit-animation: sidebar-slide-in 0.5s;
    animation: sidebar-slide-in 0.5s;

    .bws-searchbox {
        width: 100%;
    }
    .bws-content {
      top: 81px;
      border-top: 8px solid #d7d7d7;

      &.with-home {
        top: 145px;
      }

      .section-title {
        padding-left: 20px;
        padding-right: 20px;
      }
      .yui3-token {
        width: 100%;
        border-top: 1px solid @bws-groove-light;
        border-bottom: 1px solid @bws-groove-dark;

        .title {
            max-width: 170px;
        }
        .description {
            display: none;
        }
        &:hover {
            background-color: #eee;
        }
      }
    }
  }
  .bws-view-data {
    left: @bws-sidebar-width;
  }
  .content-visible .bws-view-data {
    -webkit-animation: sidebar-details-slide-in 0.5s;
    animation: sidebar-details-slide-in 0.5s;
  }
}


report added to less

report added to less


Update toggle.less

Update toggle.less

.toggle {
  position: relative;
  padding-left: 3em;

  input[id^="toggle-"] {
    display: none; // Ou bien position: absolute; top: -9999px; left: -9999px;

    &:checked + label {
      &:before {
        background: @toggle-no-bg;
      }

      &:after {
        left: 1.2em;
      }
    }
  }

  label:before, label:after {
    content: '';
    position: absolute;
    height: 1.2em;
    left: 0;
    .border-radius(.6em);
  }

  label:before {
    width: 2.4em;
    background: @toggle-no-bg;
    .transition(background .4s);
  }

  label:after {
    width: 1.2em;
    .background-image(@toggle-handle-bg);
    .transition(left .4s);
  }
}

@no-bg: @red;
@yes-bg: @green;
@handle-bg: radial-gradient(@white, darken(@white, 10%));

.toggle {
  position: relative;
  padding-left: 3em;

  input {
    display: none; // Ou bien position: absolute; top: -9999px; left: -9999px;

    &:checked + label {
      &::before {
        background: @yes-bg;
      }
      &::after {
        left: 1.2em;
      }
    }
  }

  label::before, label::after {
    content: '';
    position: absolute;
    height: 1.2em;
    left: 0;
    .border-radius(.6em);
  }

  label::before {
    width: 2.4em;
    background: @no-bg;
    .transition(background .4s);
  }

  label::after {
    width: 1.2em;
    .background-image(@handle-bg);
    .transition(left .3s);
  }
}


Added styles for buttons with labels (fixes #191)


style cleanup for stats pages

style cleanup for stats pages

@import 'lib';

.statistics {
    #page {
        position: relative;
        max-width: 1280px;
        width: auto;
        min-width: 1024px;
        padding-left: 20px;
        padding-right: 20px;
        .header-search {
            right: 20px;
        }
    }
    .island {
        float: none;
        margin-bottom: 2em;
    }
}
.html-rtl.statistics #page .header-search {
    right: auto;
    left: 20px;
}

.statbox .pagination {
    display: block;
    width: 98%;
    margin: 0;
    padding: .5em 1%;
    border-top: 1px solid #A5BFCE;
    -moz-border-radius: 0 0 3px 3px;
    background: -moz-linear-gradient(#DAF0F6, #FDFEFE) repeat scroll 0 0 transparent
}

/**
 *  common styles
**/

table tbody tr {
    border-top: 1px dotted #B5D9E5;
}

.featured-inner {
    background: -moz-linear-gradient(#ffffff, #eff8fb);
}

.secondary {
    .island {
        float: none;
    }
}
.secondary > aside,
.secondary > div {
    margin-bottom: 2em;
}

/**
 *  Rules for date criteria selection
**/

.island.criteria {
    padding: 0 0 0 12px;
    margin: 0 0 0 1em;
    z-index: 1000;
    float: right;
    ul {
        line-height: 2.5em;
    }
    li {
        color: @dark-gray;
        font-weight: bold;
        display: inline;
        a {
            font-weight: normal;
            border: 1px solid transparent;
            color: @link;
            padding: 4px 8px;
            text-decoration: none;
            white-space: nowrap;
        }
        &.selected a {
            font-weight: bold;
            color:@orange;
        }
    }
}

/**
 *  Three-up stats
**/

.two-up {
    position: relative;
    overflow: hidden;
    div {
        .border-box();
        float: left;
        text-align: left;
        width: 50%;
        position: relative;
        padding-left: 2em;
        color: @dark-gray;
        &:first-child {
            padding-left: 1em;
        }
        &:first-child:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            border-left: 1px dotted @medium-gray;
            height: 100%;
        }
        b {
            font-size: 150%;
        }
        a {
            line-height: 2rem;
            display: block;
            font-weight: bold;
            font-size: 140%;
        }
        small {
            line-height: 2rem;
            font-size: 110%;
        }
    }
}

/**
 *    Toplists
**/

.seriesdot {
    display: block;
    float: left;
    position: relative;
    top: .7em;
    margin-right: .5em;
    -moz-border-radius: 4px;
    height: 8px;
    width: 8px;
}
.listing-header .seriesdot {
    border: 2px solid #fff;
    -moz-border-radius: 6px;
    margin: 0 .2em 0 .5em;
    top: .8em;
}
.toplists {
    margin-bottom: 2em;
    overflow: hidden;
}
.toplist {
    overflow: hidden;
    float: left;
    width: 31%;
    padding: 0;
    margin-left: 3.5%;
    &:first-child {
        margin-left: 0;
    }
    h3 {
        margin: 0 0 .2em 0;
    }
    .highcharts-tooltip {
        position: absolute;
        top: 0 !important;
        left: 0 !important;
    }
     table {
        width: 100%;
        height: 160px;
        margin: .7em 0;
    }
    tr:first-child {
        border-top: 0;
    }
    td {
        text-align: right;
        padding: 0;
        line-height: 2em;
        &:first-child {
            text-align: left;
        }
        &:last-child {
            text-align: left;
            font-size: 90%;
            width:40px;
            padding-left: .3em;
        }
    }
}

/**
 *    bar-chart tables
**/

.csv-table {
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        white-space: nowrap;
        padding: .5em 1em;
        text-align: right;
        &:first-child {
            text-align: left;
        }
    }
    th {
        font-weight: bold;
    }
    tbody {
        display: none;
        tr {
            &:nth-child(2n+1) {
                background: fadeOut(@link, 80%);
            }
        }
    }
    .paginator {
        float: none;
        .rel {
            width: 100%;
        }
    }
}

div.piechart {
    height: 200px;
}
div.piechart .highcharts-container {
    margin: 8px auto 0 auto;
}

/**
 *  sidestats
**/

aside.highlight {
    display: block;
}

.highlight dd {
    font-size: .8em;
}

#export_data {
    font: 13px "helvetica neue",arial,helvetica,sans-serif;
    margin-left:1em;
}
/**
 *  Big table
**/

table.stats-aggregate {
    width: 100%;
    margin-top: .5em;
}

table.stats-aggregate thead th {
    text-align: right;
    padding-right: 72px;
    line-height: 90%;
}

table.stats-aggregate thead th:first-child {
    text-align: left;
    padding-right: inherit;
}

table.stats-aggregate tbody td {
    line-height: 120%;
    font-size: 140%;
}

table.stats-aggregate tbody td.value {
    padding: 5px 0 3 0px;
    text-align: right;
}

table.stats-aggregate tbody td.label {
    padding-left: 2px;
}

table.stats-aggregate tbody span.change {
    display: block;
    float: right;
    width: 54px;
    padding-left: .5em;
    text-align: left;
    font-size: 80%;
    padding-top: 2px;
}

table.stats-aggregate tbody span.change.plus {
    color: #00774d;
}
table.stats-aggregate tbody span.change.minus {
    color: #850000;
}

.loading, .loaded {
    position:relative;
}
.loading:after {
    -moz-transition: opacity .5s;
    content: "\00a0";
    display: block;
    position: absolute;
    background: #040204 url("../../img/zamboni/loading.gif") no-repeat center center;
    opacity: .4;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
}
.loaded:after {
    opacity: 0;
    pointer-events: none;
}

.chart {
    width: 648px;
    padding: 0;
    width: 100%;
    overflow: hidden;
}
#head-chart {
    position: relative;
    background: #fff;
    overflow: hidden;
    height: 384px;
}

.loadmessage {
    position: fixed;
    left: 0;
    right: 0;
    top: -2.5em;
    height: 2em;
    margin: 0 auto;
    text-align: center;
    pointer-events: none;
    -moz-transition: top .5s;
    -webkit-transition: top .5s;
    transition: top .5s;
    z-index:9000;
}

.loadmessage span {
    background: url("../../img/zamboni/loading-small.gif") no-repeat 1em center;
    background-color: #000;
    padding: .5em 1em;
    padding-left: 36px;
    line-height: 2em;
    color: #fff;
    opacity: .75;
    -moz-border-radius: 0 0 .75em .75em;
    -webkit-border-radius: 0 0 .75em .75em;
    border-radius: 0 0 .75em .75em;
}

.loadmessage.on {
    top: 0;
}

.loadmessage.off {
    top: -2.5em;
}

/* Field Menu */
#fieldMenu, #fieldList {
    margin-bottom: 0;
}
#fieldList label {
    display: block;
    white-space: nowrap;
    padding-right: 2em;
}
#fieldList label:hover {
    background: #ccf;
}
#fieldMenu button {
    width: 100%;
}
#fieldList {
    max-height: 300px;
    min-width: 160px;
    overflow-y: auto;
}

#custom-criteria {
    form {
        overflow: hidden;
    }
    fieldset {
        display: inline-block;
        vertical-align: top;
        &:first-child {
            margin-right: 1em;
        }
    }
    footer {
        clear: left;
    }
}

@import 'lib';

.statistics {
    #page {
        position: relative;
        max-width: 1280px;
        width: auto;
        min-width: 1024px;
        padding-left: 20px;
        padding-right: 20px;
        .header-search {
            right: 20px;
        }
    }
    .island {
        float: none;
        margin-bottom: 2em;
    }
}
.html-rtl.statistics #page .header-search {
    right: auto;
    left: 20px;
}

.statbox .pagination {
    display: block;
    width: 98%;
    margin: 0;
    padding: .5em 1%;
    border-top: 1px solid #A5BFCE;
    -moz-border-radius: 0 0 3px 3px;
    background: -moz-linear-gradient(#DAF0F6, #FDFEFE) repeat scroll 0 0 transparent
}

/**
 *  common styles
**/

table tbody tr {
    border-top: 1px dotted #B5D9E5;
}

.featured-inner {
    background: -moz-linear-gradient(#ffffff, #eff8fb);
}

.secondary {
    .island {
        float: none;
    }
}
.secondary > aside,
.secondary > div {
    margin-bottom: 2em;
}

/**
 *  Rules for date criteria selection
**/

.island.criteria {
    padding: 0 0 0 12px;
    margin: 0 0 0 1em;
    z-index: 1000;
    float: right;
    ul {
        line-height: 2.5em;
    }
    li {
        color: @dark-gray;
        font-weight: bold;
        display: inline;
        a {
            font-weight: normal;
            border: 1px solid transparent;
            color: @link;
            padding: 4px 8px;
            text-decoration: none;
            white-space: nowrap;
        }
        &.selected a {
            font-weight: bold;
            color:@orange;
        }
    }
}

/**
 *  Three-up stats
**/

.two-up {
    position: relative;
    overflow: hidden;
    div {
        .border-box();
        float: left;
        text-align: center;
        text-align: left;
        width: 50%;
        position: relative;
        padding-left: 2em;
        color: @dark-gray;
        &:first-child {
            padding-left: 1em;
        }
        &:first-child:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            border-left: 1px dotted @medium-gray;
            height: 100%;
        }
        b {
            font-size: 150%;
        }
        a {
            line-height: 2rem;
            display: block;
            font-weight: bold;
            font-size: 140%;
        }
        small {
            line-height: 2rem;
            font-size: 110%;
        }
    }
}

/**
 *    Toplists
**/

.seriesdot {
    display: block;
    float: left;
    position: relative;
    top: .7em;
    margin-right: .5em;
    -moz-border-radius: 4px;
    height: 8px;
    width: 8px;
}
.listing-header .seriesdot {
    border: 2px solid #fff;
    -moz-border-radius: 6px;
    margin: 0 .2em 0 .5em;
    top: .8em;
}
.toplists {
    margin-bottom: 2em;
    overflow: hidden;
}
.toplist {
    overflow: hidden;
    float: left;
    width: 31%;
    padding: 0;
    margin-left: 3.5%;
    &:first-child {
        margin-left: 0;
    }
    h3 {
        margin: 0 0 .2em 0;
    }
    .highcharts-tooltip {
        position: absolute;
        top: 0 !important;
        left: 0 !important;
    }
     table {
        width: 100%;
        height: 160px;
        margin: .7em 0;
    }
    tr:first-child {
        border-top: 0;
    }
    td {
        text-align: right;
        padding: 0;
        line-height: 2em;
        &:first-child {
            text-align: left;
        }
        &:last-child {
            text-align: left;
            font-size: 90%;
            width:40px;
            padding-left: .3em;
        }
    }
}

/**
 *    bar-chart tables
**/

.csv-table {
    .table-box {
        width: 100%;
        overflow: auto;
    }
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        white-space: nowrap;
        padding: .5em 1em;
        text-align: right;
        &:first-child {
            text-align: left;
        }
    }
    th {
        font-weight: bold;
    }
    tbody {
        display: none;
        tr {
            &:nth-child(2n+1) {
                background: fadeOut(@link, 80%);
            }
        }
    }
    .paginator {
        float: none;
        .rel {
            width: 100%;
        }
    }
}

div.piechart {
    height: 200px;
}
div.piechart .highcharts-container {
    margin: 8px auto 0 auto;
}

/**
 *  sidestats
**/

aside.highlight {
    display: block;
}

.highlight dd {
    font-size: .8em;
}

#export_data {
    font: 13px "helvetica neue",arial,helvetica,sans-serif;
    margin-left:1em;
}
/**
 *  Big table
**/

table.stats-aggregate {
    width: 100%;
    margin-top: .5em;
}

table.stats-aggregate thead th {
    text-align: right;
    padding-right: 72px;
    line-height: 90%;
}

table.stats-aggregate thead th:first-child {
    text-align: left;
    padding-right: inherit;
}

table.stats-aggregate tbody td {
    line-height: 120%;
    font-size: 140%;
}

table.stats-aggregate tbody td.value {
    padding: 5px 0 3 0px;
    text-align: right;
}

table.stats-aggregate tbody td.label {
    padding-left: 2px;
}

table.stats-aggregate tbody span.change {
    display: block;
    float: right;
    width: 54px;
    padding-left: .5em;
    text-align: left;
    font-size: 80%;
    padding-top: 2px;
}

table.stats-aggregate tbody span.change.plus {
    color: #00774d;
}
table.stats-aggregate tbody span.change.minus {
    color: #850000;
}

.loading, .loaded {
    position:relative;
}
.loading:after {
    -moz-transition: opacity .5s;
    content: "\00a0";
    display: block;
    position: absolute;
    background: #040204 url("../../img/zamboni/loading.gif") no-repeat center center;
    opacity: .4;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
}
.loaded:after {
    opacity: 0;
    pointer-events: none;
}

.chart {
    width: 648px;
    padding: 0;
    width: 100%;
    overflow: hidden;
}
#head-chart {
    position: relative;
    background: #fff;
    overflow: hidden;
    height: 384px;
}

.loadmessage {
    position: fixed;
    left: 0;
    right: 0;
    top: -2.5em;
    height: 2em;
    margin: 0 auto;
    text-align: center;
    pointer-events: none;
    -moz-transition: top .5s;
    -webkit-transition: top .5s;
    transition: top .5s;
    z-index:9000;
}

.loadmessage span {
    background: url("../../img/zamboni/loading-small.gif") no-repeat 1em center;
    background-color: #000;
    padding: .5em 1em;
    padding-left: 36px;
    line-height: 2em;
    color: #fff;
    opacity: .75;
    -moz-border-radius: 0 0 .75em .75em;
    -webkit-border-radius: 0 0 .75em .75em;
    border-radius: 0 0 .75em .75em;
}

.loadmessage.on {
    top: 0;
}

.loadmessage.off {
    top: -2.5em;
}

/* Field Menu */
#fieldMenu, #fieldList {
    margin-bottom: 0;
}
#fieldList label {
    display: block;
    white-space: nowrap;
    padding-right: 2em;
}
#fieldList label:hover {
    background: #ccf;
}
#fieldMenu button {
    width: 100%;
}
#fieldList {
    max-height: 300px;
    min-width: 160px;
    overflow-y: auto;
}

#custom-criteria {
    form {
        overflow: hidden;
    }
    fieldset {
        display: inline-block;
        vertical-align: top;
        &:first-child {
            margin-right: 1em;
        }
    }
    footer {
        clear: left;
    }
}