/* canvas styles */
html, header
{
    float: top;
    margin: 0;
}

#header
{
    background-color: #423636;
    color:#998885;
    font-family:sans-serif,serif;
	justify-content:center;
}

html, body
{
    font-family:sans-serif,serif;
    color:#392D2C;
    margin: 0
}

body
{
   background: #4d3f3f;
   
}

.container1 
{
    position: center;
    width: 42%;
    height: 16em;
}

.boxShadow
{
	margin:25px;
	color:#998885;
	background-color:#423636;
	opacity:0.9;
	padding:1%;
}
.fillerBox
{
	margin:25px;
	color:#99888500;
	background-color:#382D2B00;
	opacity:0.0;
	padding:1%;
}
.noselect{
	box-shadow:1px 2px;
	background-color:#353232;
}

#button
{
	background-color:#383333;
	width:14%;
	height:7.5%;
	border:none;
	float:center;
	box-shadow:1px 2px #000000;
	-webkit-appearance:none;
	position:fixed;
	bottom:0px;
	left:43%;
	color:#998885;
	font-size:1.25em;
}

#leftButton
{
	background-color:#383333;
	width:14%;
	height:10%;
	border:none;
	float:center;
	box-shadow:1px 2px #232121;
	-webkit-appearance:none;
	position:fixed;
	bottom:0px;
	color:#998885;
	font-size:1.25em;
}

#rightButton
{
	background-color:#383333;
	width:14%;
	height:10%;
	border:none;
	float:right;
	box-shadow:2px 1px #232121;
	-webkit-appearance:none;
	position:fixed;
	bottom:0px;
	right:0;
	color:#998885;
	font-size:1.25em;
}
#infoButton
{
	background-color:#383333;
	height:10%;
	width: 4.5%;
	border:none;
	float:right;
	box-shadow:2px 1px #232121;
	-webkit-appearance:none;
	position:fixed;
	top:0;
	right:0;
	color:#998885;
	font-size:2em;
}

#BaSS
{
	width:100%;
	margin:0 auto;
}

/* draggable targets */
[data-draggable="target"]
{
    list-style-type:none;
    
    width:10%;
    height:1em;
    overflow-y:auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding:0.5em;
    border:2px solid #332727;
    background-color: #60514F;
    color:#232425;
}

/* draggable items */
[data-draggable="item"]
{
    display:block;
    list-style-type:none;
    
    margin:0 0 7px 0;
    padding:0.2em 0.4em;
    
    border-radius:0.2em;
    line-height:1.3;
}

.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  width: 100%; /* Full-width */
  height: 0.5em; /* Specified height */
  background: #998885; /* Grey background */
  outline: none; /* Remove outline */
  transition: opacity .2s;
}

.slider::-moz-range-thumb {
  width: 1em; /* Set a specific slider handle width */
  height: 2em; /* Slider handle height */
  border: 0; /* Remove outline */
  border-radius: 10%;
  background: #d1bdba; /* Green background */
  cursor: pointer; /* Cursor on hover */
  }

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>