/****************************************************************************************/
/*****                                 General style                                *****/
/****************************************************************************************/
a {
}
body {
	color: white;
	font-family: system-ui, sans-serif;
	font-size:13px;
	text-align:center;
	margin: 0px;
	overflow: hidden;
}
.control_panel {
	position:absolute;
	top:0px;
	right:0px;
	margin:10px;
	text-align:left;
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
.bottom_frame {
	position:absolute;
	visibility:none;
	bottom:0px;
	width:100%;
	height:0px;
	color:white;
	background-color:gray;
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
.alert, .alert2, .clock, .idx, .time, .system_time, .inactive_since {
	position:absolute;
	left:10px;
	z-index:5;
	color:white;
	background-color:black;
}
.system_time { top:70px; }
.clock { top:90px; }
.idx { top:110px; }
.time { top:130px; }
.inactive_since{ top:150px; }
.alert { top:170px; }
.alert2 { top:190px; }
#info {
	position: absolute;
	top: 0px; width: 100%;
	padding: 5px;
}

/****************************************************************************************/
/*****                              Control panel style                             *****/
/****************************************************************************************/

.visibility_row {
	float:left;
	background-color:;
	margin:2px 0px 2px 0px;
	height:16px;
	overflow:hidden;
	clear:both;
}

/****************************************************************************************/
/*****                                Timeline style                                *****/
/****************************************************************************************/

.timeline_axis {
	height:65%;
	background-color:;
}
.timeline_axis_space, .timeline_axis_space_left, .timeline_axis_tick, .timeline_axis_tick_tall, .timeline_axis_tick_value, .timeline_axis_tick_value_left, .timeline_axis_vspace, .timeline_axis_tall_vspace, .timeline_axis_tick_value_right, .timeline_axis_value {
	float:left;
}
.timeline_axis_space_left {
	width:0.5%;
	height:100%;
}
.timeline_axis_tick, .timeline_axis_tick_tall {
	line-height:15px;
	width:100%;
}
.timeline_axis_tick {
	color:rgb(220,220,220);
	height:35%;
}
.timeline_axis_tick_tall {
	color:rgb(250,250,250);
	height:42%;
}
.timeline_axis_tick_value_left {
	text-align:left;
}
.timeline_axis_tick_value_right {
	text-align:right;
}
.timeline_axis_tall_vspace {
	background-color:gray;
	height:8%;
	width:100%;
}
.timeline_axis_vspace {
	background-color:gray;
	height:15%;
	width:100%;
}
.timeline_axis_value, .timeline_axis_value_tall {
	color:white;
	font-size:10px;
	line-height:7px;
	width:100%;
	background-color:gray;
}
.timeline_axis_value {
	height:50%;
}
.timeline_axis_in, .timeline_axis_units, .timeline_speed_div, .timeline_speed_label, .timeline_value_div, .timeline_label, .timeline_playback_buttons {
	float:left;
	margin:4px 0.05% 0% 0.05%;
	height:17px;
}
.timeline_axis_in {
	width:1%;
}
.timeline_axis_units {
	background-color:;
	text-align:left;
	padding-left:3px;
	width:3%;
}
.timeline_container {
	background-color:;
	height:25px;
	margin-bottom:3px;
}
.timeline_cursor_container {
	float:left;
	background-color:;
	height:100%;
	margin:2px 1px 0px 1px;
	width:59%;
}
.timeline_value_input {
	width:60%;
}
.timeline_speed_input {
	width:80%;
}
.timeline_speed_label {
	width:4%;
	margin-left:1%;
	background-color:;
}
.timeline_speed_div {
	width:3%;
	background-color:;
}
.timeline_value_div {
	width:5.5%;
	background-color:;
}
.timeline_cursor_window {
	background-color:;
	height:35%;
}
.timeline_label {
	background-color:;
	margin-left:0.2%;
	text-align:left;
	width:11%;
}
.timeline_playback_button {
	float:left;
	margin:0px 1% 0% 1%;
	width:18%;
	background-color:;
}
.timeline_playback_buttons {
	cursor: default;
	width:10%;
	background-color:;
}
a.timeline_playback_nf {
	font-size:1.2em;
	line-height: 0em;
	letter-spacing: -0.2em;
	margin-right:60%;
}
a.timeline_playback_pf {
	font-size:1.2em;
	line-height: 0em;
	letter-spacing: -1em;
	margin-right:60%;
}
a.timeline_playback_stb {
	font-size:1.2em;
	line-height: 0em;
	letter-spacing: -1em;
	margin-right:40%;
}
a.timeline_playback_ste, a.timeline_playback_stel {
	font-size:1.2em;
	line-height: 0em;
	letter-spacing: -0.2em;
	margin-right:40%;
}
a.timeline_playback_stel {
	letter-spacing: -1em;
}
.timeline_playback_vb {
	font-size:0.75em;
	vertical-align:0.1em;
}
a.timeline_playback_play {
	font-size:1.2em;
	line-height: 0em;
	letter-spacing: 0em;
}

/***********************************  Cursor slider   ***********************************/
.timeline_slider {
	-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	width: 98%;
	cursor: default;
	margin:0px 1%;
	float:left;
	background-color:transparent;
}
.timeline_slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 8px;
	width: 6px;
	background: rgb(150,150,150);
	border-radius: 3px;
	margin-top: 0px;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	border: 0px solid #000000;
}
.timeline_slider::-webkit-slider-runnable-track {
	height: 8px;
	margin:0px;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
	background: rgb(230,230,230);
	border-radius: 3px;
}
input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
