body::-webkit-scrollbar{background-color:#ddd;border-left:1px solid #ccc;width:10px;}
body::-webkit-scrollbar-thumb{background-color:#bbb;}
.TSG-container {
	margin: 0px;
	margin-bottom:20px;
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}
.TSG-infotop {
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    display: block;
	background-color: #eee;
	color: #2d2d2d;
	padding:0px;
	/*font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;*/
	font-family: "Courier New", monospace;
	font-weight: bold;
	font-size:16px;
	cursor:crosshair;
}
.TSG-infotop2 {
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
    display: block;
	background-color: #eee;
	color: #2d2d2d;
	padding:0px;
	font-family: "Courier New", monospace;
	font-weight: bold;
	font-size:16px;
	cursor:crosshair;
}
.TSG-audio-wrapper2 {
	/*background-color: rgba(0,0,0,0.3);*/
	z-index:10;
}
.TSG-audio-wrapper {
	z-index:1;
	/*background-color: rgba(255,255,0,0.1);*/
	height:100px;
	margin: 0px;
	margin-bottom: -4px;
	/*border-top:1px solid rgba(255,255,0,0.2);*/
	/*border-bottom:1px solid rgba(255,255,0,0.2);*/
}
.TSG-infotop-time-data {
	/*display: inline-block;*/
	color: #555;

	margin: 0px;
	margin-right: 10px;

	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;

	/*border-bottom: 1px solid #efefef;*/
	/*border-top: 1px solid #efefef;*/

	background-color: rgba(255,255,255,0.7);

	padding-left: 4px;
	padding-right: 4px;

	padding-top:6px;
	padding-bottom:3px;

	font-size: 10px;
}
.TSG-infotop-current-window {
	color: #555;

	margin: 0px;
	margin-right: 10px;

	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;

	background-color: rgba(255,255,255,0.7);

	padding-left: 4px;
	padding-right: 4px;

	padding-top:6px;
	padding-bottom:3px;

	font-size: 10px;
}
.TSG-infotop-current-window::after {
	font-family: FontAwesome;
	content: " \f008";
	/*content: " \f0db";*/
}

.TSG-current-time {
	display: inline-block;
	clear: both;
	float: right;
	color: #555;
	background-color: #fafafa;
	padding-right:5px;
	padding-left:5px;
	border: 1px solid #fafafa;
	border-left: 1px solid #ddd;
	font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;
	font-size:10px;
	padding-top:5px;
	padding-bottom:2px;
}
.TSG-current-time::after {
	font-family: FontAwesome;
	content: " \f017";
}
.TSG-label {
	display: block;
	background-color: #e5e5e5;
	color: #2d2d2d;
	padding:0px;
	/*font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;*/
	font-family: "Courier New", monospace;
	font-weight: bold;
	font-size:16px;
	cursor:crosshair;
	min-height:18px;
	padding:2px;
	padding-left:5px;
	text-align: center;
}
.TSG-label::before {
	color: #999;
	padding-top:2px;
	font-family: FontAwesome;
	margin-right:8px;
	content: '\f10d';
	font-size:14px;
}
.TSG-label::after {
	color: #999;
	padding-top:2px;
	font-family: FontAwesome;
	margin-left:8px;
	content: '\f10e';
	font-size:14px;
}
.TSG-controls {
	display: inline-block;
	margin-right: 10px;
}
.TSG-controls .TSG-controls-zoom-slider {
	height:10px;
	width:100px;
	outline: none;
}
.TSG-controls .TSG-controls-zoom-slider {
	-webkit-appearance: none;
	background: transparent;
}
.TSG-controls .TSG-controls-zoom-slider::-webkit-slider-runnable-track {
	background: #777;
	height:2px;
}
.TSG-controls .TSG-controls-zoom-slider::-webkit-slider-thumb  {
	-webkit-appearance: none;
	position: relative;
	top:-4px;
    background: #fefefe;
    width: 10px;
    height: 10px;
    border: 1px solid #2d2d2d;
    cursor:pointer;
    border-radius:5px;
}
.TSG-controls .TSG-controls-zoom-slider::-moz-range-thumb {
	background: #fefefe;
	border-radius: 50%;
	height:10px;
	width:10px;
	cursor: pointer;
}
.TSG-controls-zoom-indicator {
	font-size: 13px;
	font-weight: normal;
	color: #5d5d5d;
}
.TSG-controls-zoom-indicator::after {
	content: '%';
}
.TSG-controls .control-btn {
	display: inline-block;
	color: #2d2d2d;
	cursor: pointer;
	border: 1px solid #e2e2e2;
	transition-property: border, color, background;
	transition-duration: 1s, 1s, 1s;
	transition-timing-function: cubic-bezier(.06,1.47,.29,.87), cubic-bezier(.06,1.47,.29,.87), cubic-bezier(.06,1.47,.29,.87);
}
.TSG-controls .control-btn:hover {
	border: 1px solid #2d2d2d;
	background-color: #2d2d2d;
	color: #fff;
}
.TSG-scroller {
	overflow: auto;
	border-left: 1px solid #eee;
	border-right: 1px solid #eee;
	overflow-y: hidden;
}
.TSG-scroller::-webkit-scrollbar{background-color:#ddd;border-left:1px solid #ccc;width:10px;height:30px;}
.TSG-scroller::-webkit-scrollbar-thumb{background-color:#bbb;}
.TSG-scroller::-webkit-scrollbar-thumb:hover{background-color:orange;}

.TSG-tier {
	height: 50px;
	cursor:crosshair;
}
.TSG-tier.interval-tier {

}
.TSG-tier.point-tier {
}
.tier-central-line {
	stroke: rgba(0,0,0,0.1);
	stroke-width:1;
}
.tier-text {
	stroke: transparent;
	fill: #111;
	font-family: monospace;
	font-size: 10px;
	font-weight: normal;
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

.tier-name-text {
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */

    stroke: transparent;
	fill: #111;
	font-family: monospace;
	font-size: 10px;
	font-weight: normal;
}
.tier-name-text {
	font-weight: bold;
	text-transform: uppercase;
}
.tier-name-box {
	stroke: #eee;
	fill: #eee;
}
.tier-name-box.active {
	stroke: #4FD5D6;
	fill: #4FD5D6;
}

.interval-box {

}

.point-box {

}

.interval-box-too-small {
	fill: rgba(255, 0,0, 0.1);
	stroke: rgba(255, 0,0, 0.15);
	stroke-width: 1px;
	transition-property: fill;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(.06,1.47,.29,.87);
}
.interval-box-too-small:hover {
	fill: rgba(255, 0,0, 0.4);
}

.interval-group, .point-group {
	background-color: transparent;
	fill: #fafafa;
	stroke-width:1;
	stroke:#eaeaea;
	transition-property: fill;
	transition-duration: 1s;
	transition-timing-function: cubic-bezier(.06,1.47,.29,.87);
}
.interval-group:hover, .point-group:hover {
	fill: #4FD5D6;
	stroke: #777;
}

.current-time-marker {
	fill: rgba(255,0,0,0.5);
	stroke: rgba(255,0,0,0.3);
}
.tier-name-floater {
	fill: transparent;
	opacity: 0;
}
.tier-name-floater-text {

	font-weight: bold;
	text-transform: uppercase;
	fill: #ccc;
	font-size:8px;
	font-family: monospace;
}