* {
    margin: 0px;
    padding: 0px;
}

body {
	margin: 0px;
	padding: 0px;
	text-align:center;
	background: #333;
	color: white;
}
    
#ambientcontroller {
    display:inline-block;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

#panel_contraptions {
    position:absolute;
    top:0px;
    left:0px;
}

.contraption {
    width:10px;
    height:10px;
    border:1px solid #aaa;
    margin-top:10px;
    margin-left:10px;
    cursor:pointer;
}

.contraption.not_selected {}

.contraption.not_selected:hover, .contraption.selected {
    background-color:#aaa;
    border:1px solid #fff;
}

#panel_logo {
    width:180px;
    height:180px;
    position:relative;
    cursor:pointer;
}

#panel_logo img {
    width:180px;
}

#panel_logo_bg {
    position:absolute;
    top:90px;
    left:0px;
    width:180px;
    height:90px;
    background-color:#010101;
}

.panel_logo_button {
    position:absolute;
    top:0px;
    left:0px;
}

#start_button_on {
    display:none;
}

#panel_main {
    background-color:#010101;
    /* padding:10px; */
    display:inline-block;
    width:180px;
}

#settings_button {
    display:inline-block;
    width:100%;
    /* border:1px solid #fff; */
    /* padding:5px; */
    cursor:pointer;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
    /* margin-bottom:10px; */
}
    
#start_button:hover, #settings_button:hover {
    background-color:#fff;
    color:#000;
    font-weight:bold;
}

.button_selected {
    background-color:#fff;
    color:#000;
}

.main_ap {
    display:inline-block;
}

.show_ap {
    border:1px solid #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    transition:0.3s;
}

#secondary_panel {
    display:none;
    /* display:table; */
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
}
    
.mediaplayer {
    display:inline-block;
    background-color:#222;
    padding-top:5px;
    margin-bottom:10px;
}

.top-container {
    position:relative;
}

.top-container-left {
    position:absolute;
    top:0px;
    left:0px;
}

.top-container-right {
    position:absolute;
    top:0px;
    right:0px;
}

.int_value {
    width:40px;
    height:20px;
    background-color:#aaa;
    color:#444;
    margin-bottom:10px;
    font-family:monospace;
    font-size:12px;
    line-height:20px;
}

#vu_meters {
    margin-top:20px;
    margin-left:10px;
    margin-right:10px;
}

.meter {
    background-color:#222;
}

.vumeter {
    display:inline-block;
}

canvas#meter {
	border: black 1px solid;
	margin-top: 70px;
}
    
.duration {
    display:inline-block;
    position:relative;
	border: black 1px solid;
    background-color:#555;
    width:10px;
    height:100px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
    margin-top:10px;
}
    
.timeDiv {
    position:absolute;
    bottom:0px;
    width:100%;
    height:0%;
    background-color:grey;
}

.slider_container {
    display:inline-block;
    width:10px;
    height:100px;
    margin-bottom:10px;
}

#panel_files {
    display:table;
    margin-top:25px;
    width:100%;
    background-image: linear-gradient(to bottom,#000,#333);
    /* margin-left:auto;
    margin-right:auto; */
    /* height:30px; */
}

.ap_files {
    /* width:100%; */
    width:33%;
    display:table-cell;
    overflow:auto;
    /* height:10px; */
    vertical-align:top;
}

.file_object {
    /* display:inline-block; */
    background-color:grey;
    height:8px;
    width:8px;
    margin:1px;
    float:left;
}
    
/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100px; /* Full-width */
  height: 10px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
  transform-origin: 50px 50px;
  transform: rotate(-90deg);
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 10px; /* Set a specific slider handle width */
  height: 10px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 10px; /* Set a specific slider handle width */
  height: 10px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}