.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: inherit;
  /*font-size: 15px;*/
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.connect{
	padding-top: 4px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	width: 400px;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-style: solid;
	border-width: 1px;
	font-family: Arial, helvetica, sans-serif; 
	font-size: 18px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 6px;
}

.panel {
  padding: 0 18px;
  /*background-color: white;*/
  max-height: 0;
  overflow: hidden;
  border-style: solid;
  border-width: medium;
  border-color: #eee;
  transition: max-height 0.2s ease-out;
}
.song {
 	text-indent: -30px; 
 	margin-left: 30px;
}

.slider {
	width: 400px;
	max-width: 80%;
	height: 30px;
	padding: 30px;
	background: lightgray;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-bottom: 10px;
}

.slider p {
	width: 100%;
	font-size: 18px;
	font-weight: 600;
	font-family: Arial, helvetica, sans-serif;
	color: black;
}

.slider input[type="range"] {
	-webkit-appearance:none !important;
	width: 75%;
	height: 15px;
	background: green;
	border: none;
	outline: none;
}

.slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	width: 35px;
	height:35px;
	background: green;
	border: 2px solid black;
	border-radius: 50%;
	cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-thumb:hover {
	background: darkgreen;
}

.slider-img {
	width: 10%;
}

p {
	font-family: Arial, helvetica, sans-serif;
}

h1 {
	font-family: Arial, helvetica, sans-serif;
	text-align: center;
}

h2 {
	font-family: Arial, helvetica, sans-serif;
}

sup {
	color: gray;
	font-size: 80%;
	}

q.continued::after { font-size: 0; }

details {
 border-style: solid; 
 border-width: thin; 
 padding-left: 5px; 
 padding-right: 5px;
 }
summary {
 background-color: #eee; 
 color: #444; 
 font-family: Arial, helvetica, sans-serif; 
 font-size: inherit;
}

.newslidecontainer {
	width: 50px;
	height: 140px;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: darkgreen;
	display: none;	
}

.sizeBtn {
	display: block;
	width: 50px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	background-color: white;
	font-family: inherit;
	font-size: 40px;
	font-weight: bold;
}

body {
	background-color: white;
	color: black;
}

.dark-mode {
  background-color: #121212;
  color: white;
}

.dflag1 {
	color: black;
	background-color: white;
	display: inline;
}
.dflag2 {
	color: white;
	background-color: #121212;
	display: none;
	}

.dark-mode a:link { color: lightskyblue; }
.dark-mode a:visited { color: #cc99ff; }
	
@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */
body {
	background-color: #121212;
	color: white;
}

.dark-mode {
  background-color: white;
  color: black;
}

.dflag1 {
	color: black;
	background-color: white;
	display: none;
	}
.dflag2 {
	color: white;
	background-color: #121212;
	display: inline;
	}

a:link { color: skyblue;}	

a:visited { color: #cc99ff; }

.dark-mode a:link { color: #3366CC; }


}