.local {
    background-color: violet; /* transparent  */
}
.nas {
    background-color: pink;
}
@media print {
    table.strips tr *:nth-of-type(4),
    nav, menu, .menuicoon, .noprint{
        display: none;
    }
    #myBtn, menu, #btnsupport, #dsupport {
		 display: none !important;
	}
}
@media only screen and (max-width: 800px) {
    nav {
        display: none;
        margin: 0 0 15px 0;
    }
	#dbMenu ul li{
		display: block;
		height: auto;
	}
	#dbMenu {
		width: 150px;
	}
}
@media only screen and (min-width: 800px) {
	.menuicoon {
		display: none;
		cursor: pointer;
	}
	#dbMenu {
		width: 100%;
	}
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: red; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}
#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}
* {
    padding: 0;
    margin: 0;
    vertical-align: top;
    box-sizing: border-box;
}
.strips .sticky {
    position: sticky;
    top: 0;
}
.strips details a:any-link, .strips details {
    color: white;
    text-decoration: none;
}
.strips details {
    background: blue;
}
.selecthighlight {
    background: yellow;
}
#playlist li:hover {
    background: yellow;
}
audio:focus {
    outline: none;
}
.lijst ul {
    list-style-type: disc;
    margin-left: 20px;
}
.h3 {
    font-size: 1.17em;
    font-weight: bold;
}
.menuicoon {
    width: 35px;
    background-color: black;
    margin-left: 10px;
}
.menuicoon div {
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
}
td, th {
    padding: 0 5px;
}
body{
	text-align: center;
	background-color: lightcyan;
}
.login {
	margin: auto;
	text-align: left;
	width: 600px;
    max-width: 100%;
}
.login label{
	width: 100px;
}
.login ul{
    padding-left: 40px;
}
.login input:not([type=checkbox]) {
    width: calc(100% - 100px);
}
#dbMenu{
	background-color: lightblue;
    position: sticky;
    top: 0;
}
#dbMenu li{
	display: inline-block;
	width: 150px;
	height: 35px;
	list-style-type: none;
}
#dbMenu li a {
	width: 150px;
	text-decoration: none;
	color: white;
	height: 100%;
	display: inline-block;
}
#dbMenu li a.actief {
	background-color: red;
}
#dbMenu li a:hover, #dbMenu li:hover{
	background-color: blue;
}
.rood {
    color: red;
}
table, th, td{
	border: black solid 1px;
	margin: auto;
	empty-cells: show;
	border-collapse: collapse;
}
table.nowrap td, table.nowrap th{
	white-space: nowrap;
}
#tstrips tbody tr, #tmuziek tbody tr{
    cursor: pointer;
}
#tmuziek tbody {
	counter-reset: sortabletablescope;
}
#tmuziek tbody td.nrs::before{
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
}
tfoot {
    font-weight: 900;
}
#lijst li {
    width: 725px;
    margin: auto;
}
#lijst li span {
    overflow: hidden;
    white-space: nowrap;
}
#lijst li span:nth-child(1), #lijst li span:nth-child(2), #lijst li span:nth-child(3) {
    display: inline-block;
    width: 200px;
    text-align: left;
}
#lijst li span:nth-child(4), #lijst li span:nth-child(5) {
    display: inline-block;
    width: 40px;
    text-align: right;
}
tr:nth-child(even){
	background-color: #AAAAAA;
}
label{
	width: 150px;
	display: inline-block;
}
ul.selectie{
    text-align: left;
}
ul.selectie li {
    display: inline-block;
    width: 230px;
    text-align: left;
    font-size: 10px;
}
#playdisk {
    white-space: nowrap;
    width: 600px;
    min-width: 400px;
    max-width: 1000px;
	margin: auto;    
}
audio{
    width: 100%;
	margin: auto;
}
.u {
    text-decoration: underline;
}
ul.nosymbol{
	list-style-type: none;
	padding: 0;
    width: 100%;
	margin: auto;
	display: inline-block;
}
ul.nosymbol li.play{
	background-color: red;
}
.r{
    text-align: right;
}
.l{
    text-align: left;
}
.c{
    text-align: center;
}
.noborderinput input {
    border: 0 solid transparent;
}
.noborderinput input::input-placeholder {
    color: yellow;
}
div.lijst {
    margin: 0 auto;
    width: 600px;
}
div.lijst span {
    display: inline-block;
}
.w100 {
    width: 100px;
    display: inline-block;
}
.w200 {
    width: 200px;
}
.w300 {
    width: 300px;
}
.w500 {
    width: 500px;
}
.bgred {
	background-color: red;
}
.bgorange {
	background-color: orange;
}
.bggreen {
	background-color: green;
}
#fzoek span {
    display: inline-block;
    width: 400px;
    height: 30px;
}
#fzoek span input{
    width: 140px;
}
#found td, #found th{
    white-space: nowrap;
}
.nw, .noww {
    white-space: nowrap;
}
.borderblue {
    width: 400px;
    margin: auto;
    border: 2px solid blue;
}
.bt {
    border-top:2pt solid red;
}
table.strips tr {
    scroll-margin-top: 8rem;
    scroll-margin-bottom: 8rem;
}
.msg {
    display: none;
    border: 3px solid red;
    width: 50%;
    top: 25%;
    text-align: left;
    position: absolute;
    left: 25%;
    z-index: 99;
    background: lightblue;
    padding: 10px;
}
.msg ul {
    padding-left: 40px;
}
.close {
    display: inline-block;
    top: 5px;
    right: 5px;
    border: 3px solid blue;
    position: absolute;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
}
.msg h1 {
    display: inline-block;
}
.button {
    color: #00ff00;
    background-color: red; /* Set a background color */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    padding:5px;
    text-decoration:none;
    
}
.pt10 {
    padding: 10px 0 0;
}
/*
https://blog.shahednasser.com/how-to-style-an-audio-element/
*/
audio::-webkit-media-controls-timeline-container {
    background: yellow;
}
audio::-webkit-media-controls-current-time-display {
    background: blue;
    font-weight: 900;
    color: white;
}
audio::-webkit-media-controls-time-remaining-display{
    background: red;
    font-weight: 900;
}
audio::-webkit-media-controls-timeline{
    background: green;
    border-radius: 15px;
}
audio::-webkit-slider-thumb{
    background: white;
}
audio::-webkit-range-thumb{
    background: pink;
}
audio::-webkit-thumb {
    background: orange;
}
audio::-webkit-slider-runnable-track  {
    background: orange;
}
audio::-webkit-range-track {
    background: orange;
}
audio::-webkit-track {
    background: orange;
}

table.counter tbody {
	counter-reset: tablecounter;
}
table.counter tbody td:first-of-type {
    text-align: right;
}
table.counter tbody td:first-of-type::before {
    content: counter(tablecounter);
    counter-increment: tablecounter;
}
.m {
    margin: auto;
}