.VOLSLIDER     {

    -webkit-appearance:none;

touch-action: none;
    width:130px;
    height:33px;
  border-radius: 30px;
  background: var(--color, white) url(../graphics/SliderVol.png);
  margin-top: -40px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
position:absolute;
    opacity: 0.7;
    top: 20px;      
box-shadow:3px 3px 30px #343434, 3px 3px 30px #000000;

}

:root {
  --color: rgba(0,0,0,1);
}

.VOLSLIDER::-webkit-slider-thumb
{
 -webkit-appearance: none;
  border: 1px solid var(--color, white);
  height: 30px;
  width: 30px;
  border-radius: 30px;
    opacity: 1;
      box-shadow: 1px 1px 1px var(--color, white), 1px 1px 1px #000000; /* Add cool effects to your sliders! */
background: #ffffff66;


}

.VOLSLIDERMediapanel     {

    -webkit-appearance:none;

touch-action: none;
    width:130px;
    height:33px;
  border-radius: 30px;
  background: #e91e38 url(../graphics/SliderVol.png);
  margin-top: -40px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
position:absolute;
    opacity: 0.7;
    top: 46px;
left: -197px;   
box-shadow:3px 3px 30px #343434, 3px 3px 30px #666;

}

:root {
  --color: rgba(0,0,0,1);
}

.VOLSLIDERMediapanel::-webkit-slider-thumb
{
 -webkit-appearance: none;
  border: 1px solid #e91e38;
  height: 30px;
  width: 30px;
  border-radius: 30px;
    opacity: 1;
      box-shadow: 1px 1px 1px e91e38, 1px 1px 1px #000000; /* Add cool effects to your sliders! */
background: #ffffff66;


}


div[class*="UnterMenuLautsprecherImg"] {
position: absolute;
width: 62px;
height:62px;
}

.lautsprechericon {box-shadow:3px 3px 30px #343434, 3px 3px 30px #000000;border-radius: 40px;width: 40px;}

.lautsprechericonZentral {
box-shadow:3px 3px 30px #343434, 3px 3px 30px #000000;
border-radius: 40px;
width: 40px;
}

.mediacentertext {
font-family: Arial;
width: 200px;
}

.UnterMenuLautsprecherText {
position: absolute;
top: 17px;
left: 80px;
font-size:24px;
vertical-align:middle;
font-family: Arial;
color: #5a566d;
}

div[class*="UebersichtenLautsprecher"] {
	box-shadow: 3px 3px 10px #a49c99, 3px 3px 10px #000000;
	-webkit-border-radius:0 2px 2px 0px;
	-moz-border-radius:0 2px; 2px 0px;
	border-radius:0 2px; 2px 0px;
}

.LAUTSPRECHERSLIDER {
touch-action: none;

    width:130px;
    height:33px;
  border-radius: 40px;
   background: transparent url(../graphics/SliderTemp.png);
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */

    display:inline-block;
    position:absolute;
    -webkit-appearance:none;
    opacity: 0.7;
    margin-top: 10px;
    margin-top: 24px;
    margin-left: 33px;

}



.LAUTSPRECHERSLIDER::-webkit-slider-thumb
{
 -webkit-appearance: none;
  border: 1px solid #fad008;
  height: 30px;
  width: 30px;
  border-radius: 30px;
  background: #ffffff;
  margin-top: -1px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  box-shadow: 1px 1px 1px #fad008, 1px 1px 1px #000000; /* Add cool effects to your sliders! */
    opacity: 0.9;

}

.LautsprecherBeschreibung {
font-family: Arial;
width: 130px;
}

#medias {
position: fixed;
top: 40px;
left: 50%;
margin-left: -450px;
width: 900px;
min-height: 674px;
height: auto;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 3px 3px 4px 3px;
opacity: 1;
z-index: 1;
}

#mediasVernetzung {
position: absolute;
top: 40px;
left: 50%;
margin-left: -225px;
width: 450px;
min-height: 500px;
height: auto;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 3px 3px 4px 3px;
opacity: 1;
z-index: 1;
}

#mediasPLAYLIST {
position: absolute;
top: 30px;
left: 50%;
margin-left: -225px;
width: 450px;
min-height: 675px;
height: auto;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 3px 3px 4px 3px;
opacity: 1;
z-index: 1;
}



#mediasTop {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: 60px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 3px 3px 0px 0px;
opacity: 1;
z-index: 1;
 border: 1px solid #ffffff;

 align-items: center; /* Vertikale Zentrierung */
 justify-content: center; /* Horizontale Zentrierung */
}

#mediasVernetzungTop {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: 60px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 3px 3px 0px 0px;
opacity: 1;
z-index: 1;
 border: 1px solid #ffffff;

 align-items: center; /* Vertikale Zentrierung */
 justify-content: center; /* Horizontale Zentrierung */
}

.mediasVERNETZUNGTopTitel {
	text-align: center;
	margin-top: 4px;
	font-size: 19;
	color: #ffffff;
}

#mediasPLAYLISTTop {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
min-height: 60px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 3px 3px 0px 0px;
opacity: 1;
z-index: 1;
 border: 1px solid #ffffff;

 align-items: center; /* Vertikale Zentrierung */
 justify-content: center; /* Horizontale Zentrierung */
}

.mediasPLAYLISTTopTitelRepeatDiv {
	position: absolute;
	border-right: 1px solid #ffffff;
	height: 60px;
	width: 60px;
}

.mediasPLAYLISTTopTitelRepeat {
	height: 40px;
	margin-top: 10px;
	margin-left: 7px;
}

.mediasPLAYLISTTopTitelShuffleDiv {
	position: absolute;
	border-right: 1px solid #ffffff;
	height: 60px;
	width: 60px;
	left: 60px;
}


.mediasPLAYLISTTopTitelShuffle {
	height: 45px;
	margin-left: 5px;
	margin-top: 8px;
}

.mediasPLAYLISTTopTitel {
	position: absolute;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	top: 1px;
	text-align: center;
	margin-top: 4px;
	font-size: 19;
	color: #ffffff;
}


.MediasServicesClose {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 4px;
	top: 4px;
	 	border: white 1px solid;
	border-radius: 30px 3px 30px 30px;
background: rgb(0, 0, 0);
pointer-events: auto !important;
opacity: 1 !important;
}

.MediasServicesMediacenterInfos {
	position: absolute;
	width: 200px;
	height: 40px;
	right: 70px;
	top: 4px;
	 	opacity: 1;
	 	text-align: center;
	 	font-family: Arial;
	 	font-size: 20px;

}

.MediasServicesMediacenterInfosVER{
	width: 100px;
	height: 55px;
	left: 0px;
	top: 4px;
	 	opacity: 1;
	 	text-align: center;
	 	font-family: Arial;
}

.MediasVernetzungClose {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 4px;
	top: 4px;
	 	border: white 2px solid;
	border-radius: 30px 3px 30px 30px;
background: rgb(0, 0, 0);
}

.MediasPLAYLISTClose {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 4px;
	top: 4px;
	 	border: white 1px solid;
	border-radius: 30px 3px 30px 30px;
background: rgb(0, 0, 0);
}



.MediasServicesSelect {
	position: absolute;
	width: 200px;
	max-width: 200px;
	min-height: 60px;
	font-size: 20px;
	  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
 	border: none;
 	border-left: #ffffffa6 1px solid;
background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
text-align-last:center; 
 left: 203px;
}

#MediasServicesSelect1-2 {
	opacity: 0.2;
	pointer-events: none;
}


.MediasServicesSelect:last-child {
 border-right: #ffffffa6 1px solid;
 left: 403px;
}

#MediasServicesSelect1-Input {
opacity: 0.5; 
}

.MediasServicesSelectInputPic {
 width: 30px;
 height: 30px;
float: right;
margin-top: -15px;
}

.MediasServicesSelectInputtext {
padding-top: 18px;
}

.MediasServicesSelectInputPicStopp {
 width: 50px;
float: right;
margin-top: -32px;
}





#input4MediasServices {
	position: absolute;
	left: 3px;
	top: 0px;
	padding-left: 2px;
border: none;
	height: 60px;
	width: 200px;
	color: white;
	font-size: 20px;
	background: rgba(0, 0, 0, 0.65);
}

#mediasMain {
position: absolute;
top: 66px;
left: 0px;
width: 100%;
min-height: 440px;
max-height: 440px;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 0px 0px 0px 0px;
opacity: 1;
z-index: 1;
overflow: auto;
 border: 1px solid #ffffff;
}

#mediasVernetzungMain {
position: absolute;
top: 66px;
left: 0px;
width: 100%;
min-height: 440px;
max-height: 440px;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 0px 0px 0px 0px;
opacity: 1;
z-index: 1;
overflow: auto;
 border: 1px solid #ffffff;
}

#mediasPLAYLISTMain {
position: absolute;
top: 66px;
left: 0px;
width: 100%;
min-height: 630px;
max-height: 630px;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 0px 0px 0px 0px;
opacity: 1;
z-index: 1;
overflow: auto;
 border: 1px solid #ffffff;
}



.MediasInhaltGruppe {
	position: relative;
	float: left;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 2px;
	color: #ffffff;
	text-align: center;
	z-index: 10;
}

.MediasInhaltItem {
	position: relative;
	float: left;
	padding: 2px;
	margin: 3px;
border-radius: 0px 0px 0px 0px;
}

.MediasInhaltItemStart {
	position: relative;
	float: left;
	padding: 2px;
	margin: 3px;
border-radius: 0px 0px 0px 0px;
box-shadow: none !important;
border: 1px solid #636363;
width: 104px;
height: 50px;
}

.MediasinhaltFAVICON {
	margin-top: 1px;
	margin-left: 1px;
}

.MediasinhaltFAVICONStart {
	width: 50px;
	height: 50px;
}

.mediasinhaltFAVNAME {
position: absolute;	
font-family: Arial;
color: #5a566d;
margin-top: 10px;
margin-left: 10px;
width: 75px;
height: 62px;
text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
font-size: 13px;
}

.mediasinhaltFAVNAMEStart {
position: absolute;	
font-family: Arial;
color: #5a566d;
margin-top: 10px;
margin-left: 10px;
width: 45px;
height: 35px;
text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
font-size: 10px;
}

#mediasFus1 {
position: absolute;
top: 520px;
left: 0px;
width: 100%;
min-height: 50px;
height: auto;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 0px 0px 0px 0px;
opacity: 1;
z-index: 1;
border: 1px solid #ffffff;
}

#mediasFus1left {
position: absolute;
 display: flex;
 align-items: center; /* Vertikale Zentrierung */
 justify-content: center; /* Horizontale Zentrierung */
}

#mediasFus1middle {
position: absolute;
 display: flex;
 align-items: center; /* Vertikale Zentrierung */
 justify-content: center; /* Horizontale Zentrierung */
float: center; 
width: 100%;
z-index: -1;
}

.mediasVERNETZUNGMainInhalt {
 display: flex;
 align-items: center; /* Vertikale Zentrierung */
float: center; 
width: 100%;
 border-bottom: 1px solid #ffffff;
}

.mediasPLAYLISTMainInhalt {
 display: flex;
 align-items: center; /* Vertikale Zentrierung */
float: center; 
width: 100%;
opacity: 0.7;
}

.mediasPLAYLISTMainInhalt:nth-child(odd) {
 border-bottom: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
}




#mediasFus1right {
position: absolute;
 display: flex;
 align-items: center; /* Vertikale Zentrierung */
 justify-content: center; /* Horizontale Zentrierung */
right: 0px;
}


.mediasFus1leftItems {
 display: table-cell;
 vertical-align: middle;
 min-width: 60px;
 min-height: 60px;
 font-family: Arial;
color: #ffffff;
text-align: center;
background: rgba(0, 0, 0, 0.65);
}


.mediasFus1leftItems:nth-child(odd) {
border-left: 1px solid #ffffffa6;
border-right: 1px solid #ffffffa6;
}

.mediasFus1leftItems:first-child { 
border: none;
border-right: 1px solid #ffffffa6;
}

.mediasFus1rightItems {
 display: table-cell;
 vertical-align: middle;
 min-width: 60px;
 min-height: 60px;
 font-family: Arial;
color: #ffffff;
text-align: center;
background: rgba(0, 0, 0, 0.65);
}

.mediasFus1rightItems:nth-child(odd) {
border-left: 1px solid #ffffffa6;
border-right: 1px solid #ffffffa6;
}

.mediasFus1rightItems:last-child { 
border: none;
border-left: 1px solid #ffffffa6;
}

.mediasFus1leftItemsBez {
	margin-top: 6px;
}


.mediasFus1leftItemsIcon {
	max-width: 40px;
	max-height: 40px;
	margin-top: 0px;
}

.mediasFus1middleItems {
 display: table-cell;
 vertical-align: middle;
 min-width: 60px;
 max-width: 400px;
 min-height: 60px;
 font-family: Arial;
color: #ffffff;
text-align: center;
   overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

.mediasFus1middleItemsVERN {
 display: table-cell;
 vertical-align: middle;
 min-width: 60px;
 max-width: 150px;
 min-height: 60px;
 font-family: Arial;
color: #ffffff;
text-align: center;
   overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

.mediasFus1middleItemsPLAYLIST {
 display: table-cell;
 vertical-align: middle;
 min-width: 150px;
 max-width: 250px;
 min-height: 60px;
 font-family: Arial;
color: #ffffff;
text-align: center;
   overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

.MediasServicesMediacenterInfosVER2 {
position: absolute;
right: 60px;
color: #ffffff;	
}

.MediasServicesMediacenterInfosVERIMG2 {
	position: absolute;
	width: 60px;
	right: -2px;
}

#mediasFus1middleIcon {
	 min-width: 55px;
 min-height: 55px;
 width: 50px;
 height: 50px;
}

#mediasFus1middleInfos {
	margin-left: 4px;
}

.mediasFus1middleItemsIMGVERN {
	 min-width: 45px;
 min-height: 45px;
 width: 45px;
 height: 45px;
 box-shadow: 1px 1px 10px #a49c99, 1px 1px 10px #000000;
 border-radius: 2px 2px 2px 2px;
}

.mediasFus1middleItemsIMGPLAYLIST {
	 min-width: 45px;
 min-height: 45px;
 width: 45px;
 height: 45px;
 box-shadow: 1px 1px 10px #a49c99, 1px 1px 10px #000000;
 border-radius: 2px 2px 2px 2px;
 margin-left: 2px;
}

.mediasFus1middleItemsInfosIMGPLAYLIST {
	margin-left: 10px;
	margin-top: 5px;
	   overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
 opacity: 1;
}

.mediasFus1middleItemsInfosIMGVERN {
	margin-left: 10px;
	margin-top: 5px;
	   overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}



#mediasFus2 {
position: absolute;
top: 585px;
left: 0px;
width: 100%;
min-height: 100px;
height: auto;
padding-bottom: 0px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 0px 0px 3px 3px;
opacity: 1;
z-index: 1;
 display: flex;
 align-items: center; /* Vertikale Zentrierung */
 justify-content: center; /* Horizontale Zentrierung */
 border: 1px solid #ffffff;
}

.mediasServices {
 display: table-cell;
 vertical-align: middle;
 min-width: 100px;
 min-height:100px;
 font-family: Arial;
color: #ffffff;
opacity: 0.4;
text-align: center;
   border-right: 1px solid #ffffffa6;
  border-left: 1px solid #ffffffa6;
  background: rgba(0, 0, 0, 0.65);

}

.mediasServices:first-child {
   border-right: none;
  	
}

.mediasServices:last-child {
  border-left: none;	
}


.mediasServicesTitel {
	margin-top: 6px;
}


.mediasServicesIcon {
	max-width: 60px;
	max-height: 60px;
	margin-top: 6px;
}


#mediasAdmin {
position: absolute;
top: 70px;
left: 35px;
width: 950px;
min-height: 670px;
height: auto;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 3px 3px 3px 3px;
opacity: 1;
z-index: 1;
}

#mediasPlaySlot {
position: absolute;
top: 614px;
left: 0px;
width: 950px;
height: auto;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.65);
font-family: Arial;
color: #5a566d;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000; /* Add cool effects to your sliders! */
border-radius: 3px 3px 3px 3px;
opacity: 1;
}


.SONOSELEMENTFAV{
box-shadow: 3px 3px 30px #a49c99, 3px 3px 50px #000000;
}

.PLAYSLOTELEMENT{
    float: left;
     width: 170px;
     height: 82px;
     margin-right: 20px;
     margin-top: 10px;
     margin-left: 10px;
     background: #ffffff;
     box-sizing: border-box;
     box-shadow: 3px 3px 30px #a49c99, 3px 3px 50px #000000;
}

.SONOSFAVICON {
	margin-top: 1px;
	margin-left: 1px;
}


.PLAYSLOTICON {
		margin-top: 1px;
	margin-left: 1px;
}

.SONOSFAVNAME {
position: absolute;
float: left;	
font-family: Arial;
color: #5a566d;
margin-top: 10px;
margin-left: 10px;
width: 75px;
height: 62px;
text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
font-size: 13px;
}

.PLAYSLOTNAME {
position: absolute;
float: left;	
font-family: Arial;
color: #5a566d;
margin-top: 10px;
margin-left: 10px;
width: 75px;
height: 70px;
text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
font-size: 13px;
}

 #mediasBack {
    position: relative;
  background:#205d6b;
  background:-webkit-gradient(linear, left top, left bottom, from(#656e70), color-stop(50%, #515b5c), color-stop(5.1%, #465153), to(#323e40));
  background:-moz-linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);
  background:linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	font-weight:bold;
  padding:10px 0 10px 10px;
	height: 15px;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000;
border-bottom: 1px solid black;
top: -34px;
opacity: 1;
}

#mediasTitel{
  position: relative;
font-size: 17;
  font-family: Arial;
  color:#fff;
float: left;
  left: 0px;
  opacity: 1;
  font-weight: normal;
}

 #mediasBack2 {
    position: relative;
  background:#656e70;
  background:-webkit-gradient(linear, left top, left bottom, from(#656e70), color-stop(50%, #515b5c), color-stop(5.1%, #465153), to(#323e40));
  background:-moz-linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);
  background:linear-gradient(top, #656e70, #515b5c 50%, #465153 50.1%, #323e40);
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	border-radius:10px 10px 0 0;
	font-weight:bold;
  padding:10px 0 10px 10px;
	height: 14px;
 box-shadow: 3px 3px 30px #a49c99, 3px 3px 30px #000000;
border-bottom: 1px solid black;
top: -34px;
}

#mediasTitel2{
  position: relative;
font-size: 17;
  font-family: Arial;
  text-shadow:0 -1px 1px rgba(0,0,0,.5);
  color:#fff;
float: left;
  left: -220px;
}


.MediasClose{
    position: relative;
    width: 25px;
    height: 25px;
 float: right;
 top: -6px;
 left: -5px;
 }

#OrdnerAuswahl {
	width: 100px;
	max-width: 200px;
	height: 20px;
	border-radius: 3px 3px 3px 3px;
	margin-left: 10px;
	font-size: 15px;
	  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
	border-radius: 3px 3px 3px 3px;
background: rgb(255, 255, 255);
  color: rgba(0, 0, 0, 0.90);
padding-left: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
text-align-last:center; 
}

.MediacenterInfosAngeben {
	position: relative;
	top: 0px;
width: 240px;
height: auto;
}

.MediacenterName{
	position: relative;
float: center;
top: -5px;
margin: 2px;
    width: 237px;
}

.MediacenterEditColorIn{
	float: left;
margin: 2px;
width: 18px;
height: 18px;	
border: 1px white solid;
}

.panelicon {
position: absolute;
width: 70px;
height: auto;
border-radius: 3px;
}

.PanelIconRight {
position: absolute;
width: 40px;
height: auto;
border-radius: 3px;
background: white;;
border: 1px solid #636363;
float: right;
}

.PanelIconStopRight {
position: absolute;
width: 40px;
height: auto;
border-radius: 3px;
background: white;;
border: 1px solid #636363;
left: -50px;
}

.PanelIconVolUpRight {
position: absolute;
width: 40px;
height: auto;
border-radius: 3px;
background: white;;
border: 1px solid #636363;
left: -255px;	
}

.PanelIconVolDownRight {
position: absolute;
width: 40px;
height: auto;
border-radius: 3px;
background: white;;
border: 1px solid #636363;
left: -306px;	
}




@media only screen and (max-device-width : 480px)
{
#medias {
position: absolute;
top: 130px;
left: 50%;
margin-left: -275px;
width: 550px;
min-height: 1160px;
max-height: 1160px;
transform: scale(1.2);
}

.MediasServicesSelect {
	width: 120px;
	max-width: 120px;
}

#mediasMain {
position: absolute;
top: 72px;
left: 0px;
width: 100%;
min-height: 913px;
max-height: 440px;
padding-bottom: 10px;
}

#mediasFus1 {
position: absolute;
top: 997px;
left: 0px;
width: 100%;
min-height: 50px;
height: auto;
padding-bottom: 10px;
}

#mediasFus2 {
position: absolute;
top: 1060px;
left: 0px;
width: 100%;
height: 100px;
height: auto;
}

#input4MediasServices {
width: 100px;
}

.MediasServicesSelect {
 left: 103px;
}


.MediasServicesSelect:last-child {
 left: 230px;
}

.MediasServicesSelectInputPic {
width: 20px;
height: 20px;
margin-top: -8px;
}

.mediasFus1middleItems {
 min-width: 60px;
 max-width: 90px;
   overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

#mediasPLAYLIST {
position: absolute;
top: 130px;
left: 50%;
margin-left: -275px;
width: 550px;
min-height: 1160px;
max-height: 1160px;
transform: scale(1.2);
background: rgba(0, 0, 0, 1);
}

#mediasPLAYLISTMain {
min-height: 1100px;
max-height: 1100px;
}

.MediasServicesMediacenterInfos {
width: 100px;
}

.lautsprechericon {
transform: scale(1.5);
}

.VOLSLIDER     {
transform: scale(1.5);
}


.VOLSLIDER::-webkit-slider-thumb
{
transform: scale(1.2);
}

.lautsprechericonZentral {
transform: scale(1.5);
}

.mediasPLAYLISTMainInhalt {
height: 80px;
}

.PanelIconRight {
position: absolute;
width: 60px;
height: auto;
border-radius: 3px;
background: white;;
border: 1px solid #636363;
float: right;
}

.PanelIconStopRight {
position: absolute;
width: 60px;
height: auto;
border-radius: 3px;
background: white;;
border: 1px solid #636363;
left: -80px;
}

.PanelIconVolUpRight {
position: absolute;
width: 60px;
height: auto;
border-radius: 3px;
background: white;;
border: 1px solid #636363;
left: -355px;	
}

.PanelIconVolDownRight {
position: absolute;
width: 60px;
height: auto;
border-radius: 3px;
background: white;;
border: 1px solid #636363;
left: -432px;	
}

.VOLSLIDERMediapanel {
top: 55px;
left: -250px;   
}

.MediasInhaltItemStart {
	width: 154px !important;
	height: 70px !important;
}

.MediasinhaltFAVICONStart {
	width: 70px;
	height: 70px;
}

}






.mediasFus1middleItemsPLAYLIST {
 display: table-cell;
 vertical-align: middle;
 min-width: 150px;
 max-width: 250px;
 min-height: 60px;
 font-family: Arial;
color: #ffffff;
text-align: center;
   overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}

.mediasFus1middleItemsPLAYLISTPLAYING {
 position: absolute;
 margin-top: 60px;
 right: -10px;
 width: 45px;
}


.now.playing .bar {
  display: inline-block;
  position: relative;
  margin-right: 1px;
  width: 3px;
  height: 1px;
  overflow: hidden;
  color: transparent;
  animation-name: pulse;
  animation-duration:1.5s;
  animation-iteration-count: infinite;
}
.paused.playing .bar {
  animation-iteration-count: 1;
}
.paused.playing:after {
  content: "Paused (Lame)"
}
.n1 {
  animation-delay: 0.5s;
}
.n2 {
  animation-delay: 0.2s;
}
.n3 {
  animation-delay: 1.2s;
}
.n4 {
  animation-delay: 0.9s;
}
.n5 {
  animation-delay: 2.3s;
}
.n6 {
  animation-delay: 1.3s;
}
.n7 {
  animation-delay: 3.1s;
}
.n8 {
  animation-delay: 1.9s;
}
@keyframes pulse {
  0% {
    height: 1px;
    margin-top: 0;
  }
  10% {
    height: 40px;
    margin-top: -40px;
  }
  50% {
    height: 20px;
    margin-top: -20px;
  }
  60% {
    height: 30px;
    margin-top: -30px;
  }
  80% {
    height: 40px;
    margin-top: -60px;
  }
  100% {
    height: 1px;
    margin-top: 0;
  }
}