input[id^="CollAudio"] {display:none;}
#CollAudio:hover, #StartAudio:hover, #StopAudio:hover, #LoopAudio:hover {
  text-decoration: underline;
  background-color: #BCCAC9;
  cursor: pointer;}

.collAudio{
  display:inline-block;
  border: 1px solid grey;
  width:99%;
  background-color:white;
  padding-left:1%;
  margin-top:20px;
}

div[id^⁼"AudioBox"]>div:first-child{height:50px;padding:10px;}

div[id^="Meldung"] {display:none;}

.AudioControl {display:inline-block;
   width:160px;
   font-family: Arial, Helvetica, sans-serif; font-size: 20px;
   text-align:center;
   border:1px solid black;
   border-radius: 7px;}


.Unable {color:"#cacfd2";}

.Able {color:black;}

.BoxNichtSichtbar {display:none;}

.BoxSichtbar {display:block;}

.AudioButtons{
  display:grid;
  width:100%;
  grid-template-columns: 50% 50%;
  align-items:center;
}

.AudioButtons>div {text-align:center;}

.AudioButtons button {margin-top:10px;}

button[id^="LoopAudio"] {
  background-image: url("/images/Schleife.png");
  background-repeat: no-repeat;
  background-position: left center; }

.LoopCtrA {
  background-image: url("/images/Schleife_Anfang.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;}

.LoopCtrE {
  background-image: url("/images/Schleife_Ende.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size:contain;}


.AudioButtonsStop {
  grid-column: 1 / span 2;
  margin-bottom:10px;
}

button[id^="Schliessen"] {margin-top:10px;}

div[id^="StimmenContainer"] {
  width:100%;
  display: grid;
  grid-template-columns:20% 80%;
  border-top:1px solid black;
}

div[id^="StimmenContainer"]>div:nth-child(2) {position:relative;}

div[id^="LiedFortschritt"] {
  position:absolute;
  top:0;
  right:0;
}

div[id^="EndeMarke"] {
  position:absolute;
  top:0;
  left:100%;
  background-color:red;
  width:2px;
  cursor:pointer;
}

div[id^="StartMarke"] {
  position:absolute;
  top:0;
  left:0;
  background-color:green;
  width:2px;
  cursor:pointer;
}





.Stimme, .Control, .wave, .LoopCtrA, .LoopCtrE, .LoopA {
  border-left:1px solid black;
}

.wave, .LoopA{
   border-right:1px solid black;
   height:61px;
}

.Control, .wave , .LoopA, .LoopCtrA, .LoopCtrE{
  border-bottom:1px solid black;}

.Stimme {
  border-bottom:1px dashed black;
}

.Stimme, .Control, .LoopA, .LoopCtrA, .LoopCtrE {height:30px;}

div[id^="StimmenContainer"]>div:nth-child(odd)>div {padding-left:5px;}

.Control>input {width:95%;}

input[id^="LoopAnfang"], input[id^="LoopEnde"] {
    width:100%;
    -webkit-appearance: none;
     width:100%;
     margin:0;
     width: 100%;
     height: 100%;
     background-color: transparent;
     box-sizing: border-box;
     border:1px solid black;
     outline: none;
     opacity: 0.7;
    -webkit-transition: .2s;
     transition: opacity .2s;
    cursor:pointer;
    }

.wave>canvas {width:100%;height:100%;}


input[id^="LoopAnfang"]:hover {background-color:green;}
input[id^="LoopEnde"]:hover {background-color:red;}