body	{font-family: Arial, Helvetica, sans-serif; background: #282828 url(/images/back.png) repeat;hyphens:auto;-webkit-hyphens: auto;-ms-hyphens:auto;-moz-hyphens:auto;word-wrap:break-word;overflow-wrap:break-word}

html, body {height:100% !important; padding:0; margin:0; }

article{display: flex; flex-direction: column; height: 100%;}


@font-face {font-family: '/scripts/fonts/fughettaregular'; src: url('/scripts/fonts/fughetta-webfont.eot');  src: url('/scripts/fonts/fughetta-webfont.eot?#iefix') format('embedded-opentype'), url('/scripts/fonts/fughetta-webfont.woff2') format('woff2'),url('/scripts/fonts/fughetta-webfont.woff') format('woff'), url('/scripts/fonts/fughetta-webfont.ttf') format('truetype'), url('/scripts/fonts/fughetta-webfont.svg#fughettaregular') format('svg'); font-weight: normal; font-style: normal;}


header {height: 3.5em; padding-bottom:.5em; background-image: -moz-linear-gradient(top,  rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);/*opacity: 0.3; *//* FF3.6-15 */
background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background.image: linear-gradient(to bottom,  rgba(255,255,255,0.05) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */}


footer {height: 6em;background: #333; border-top: 1px solid #999}

.flexfoot1 {flex: 1 1 30%; order: 1; text-align: center}
.flexfoot2 {flex: 1 1 30%; order: 2; text-align: center;min-width: 16em;}
.flexfoot3 {flex: 1 1 30%; order: 3; text-align: center}

.ff1 {flex: 1 1 48%; order: 1;text-align:right}
.ff2 {flex: 1 1 48%; order: 2;text-align:left}


.listwrapper  {margin:0 auto; max-width:84em; padding: .5em}
.listwrapper  {max-width:50em;}

.clsItemPlayStatusMobile    {display:none}

textarea {margin:1em 0 0 0; min-height:20em; max-height:30em; width: 29.5em; font-family: Arial, Helvetica, sans-serif; outline:none}

#jump {border:none; background:none; height:0; width:0; position:absolute}

h5		{color:#999; font-weight:normal; font-size:11px; margin:0 0 0 5em; letter-spacing:1px}
.noscript{background:#f90; font-size: 16px; padding: .8em 0 .8em 0; text-align:center; position:absolute; z-index:200; width:100%; display:block; visibility:visible; top:0; left:0}
.parasol {background-color: #000; opacity: .3; width: 100%; height: 100%; top:0; margin:0 !important; left:0 !important; position: fixed; z-index:100}/*FM 1602*/

.clsRequired	{color:#f00; font-size:10px; margin-top:-1em}
/* ie8 */
.parasol { background/*\**/: url(../images/cm21_backtrans.png) repeat\9; }
/* ie8 end */

.wrapper	{position:relative;margin:0 2em; width: calc(100% - 4em);}
.wrapperwait {position:relative;margin:0 auto}
.wrapperPc  {margin:1.5em 0 0 3em}
#modal, #waitBox	{background-color: rgb(255, 255, 255); /*min-height: 13em;*/ padding: 1.5em;  width: 47em;position: absolute; top:-3.2em; z-index: 200; border-radius: 0px 0px 4px 4px; box-shadow: rgba(68, 68, 68, 0.6) 5px 5px 5px; display:none}

.slideboxwrapper {position:relative;margin:0 auto;max-width:50em;padding:0 .5em}  

.boxall {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-align-items: flex-start;  -ms-flex-align: start; align-items: flex-start;justify-content:space-between}

.flex-child_1 {-webkit-order: 1; -ms-flex-order: 1; order: 1; -webkit-flex: 1 2 45%; -ms-flex: 1 2 45%; flex: 1 2 45%; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;}
.flex-child_2 {-webkit-order: 1; -ms-flex-order: 1; order: 1; -webkit-flex: 1 2 45%; -ms-flex: 1 2 45%; flex: 1 2 45%; -webkit-align-self: flex-start; -ms-flex-item-align: start; align-self: flex-start;}


.flexchild_a {-webkit-flex:1 1 48%;-ms-flex:1 1 48%;flex:1 1 48%;-webkit-order:1;-ms-order:1;order:1}
.flexchild_b {-webkit-flex:1 1 48%;-ms-flex:1 1 48%;flex:1 1 48%;-webkit-order:2;-ms-order:2;order:2;margin-left: 2.5%;}

.flexchild_1 {-webkit-flex:1 1 48%;-ms-flex:1 1 48%;flex:1 1 48%;-webkit-order:1;-ms-order:1;order:1}
.flexchild_2 {-webkit-flex:1 1 48%;-ms-flex:1 1 48%;flex:1 1 48%;-webkit-order:2;-ms-order:2;order:2;margin-left: 2.5%;}

.flexchild_3 {-webkit-flex:1 1 45%;-ms-flex:1 1 45%;flex:1 1 45%;-webkit-order:1;-ms-order:1;order:1}
.flexchild_4 {-webkit-flex:1 1 45%;-ms-flex:1 1 45%;flex:1 1 45%;-webkit-order:2;-ms-order:2;order:2;margin-left: 2.5%;}

.chield_1 {flex: 0 0 30%; order: 1}

.chield_2 {flex: 0 0 30%; order: 2}

.chield_3 {flex: 0 0 30%; order: 3}

.chield_4 {flex: 0 0 76%; order: 4}

.chield_5 {flex: 0 0 20%; order: 5}

.chield_6 {flex: 0 0 48%; order: 1}

.chield_7 {flex: 0 0 48%; order: 2}

.chield_8 {flex: 0 0 48%; order: 3}

.chield_9 {flex: 0 0 48%; order: 4}

.boxallnoten {display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-align-items: flex-start;  -ms-flex-align: start; align-items: flex-start;justify-content:flex-start}


.violin {flex: 0 0 1%; order: 1}

.vorzei {flex: 0 0 1px; order: 2;}

.takt {flex: 0 0 1%; order: 3;text-align:center;margin:.2em 0 0 1%}

.song 				{flex: 0 0 70%; order: 4;margin:0 0 0 2em}
.songtitel_mobil	{flex: 0 0 70%; order: 4;margin:0; display:none;}
.songtitel_mobil h3	{color:#ccc !important; font-size:18px!important;}	


	.card 		{ background-color:#fff; border:solid 2px #f60; border-radius:6px; height:13em; margin-top:6em; padding:14px}
	#logTitel	{ font-size: 18px; font-weight:bold; padding:12px 0 0 0}
	.lblStaylog	{ font-size:12px; color:#333; padding:0 0 10px 0;}
	
	.rc-button	{ float:right;background-color:#f60; color: #fff; font-size:14px; border:none; font-weight:bold, padding:9px}
	.clsInput	{ display: flex; width:95%; font-size:13px; padding:10px}
	#errorPW	{ font-size:11px; color:#f00; padding:0 0 .3em 0; display:none}
	#bm_send	{ cursor:pointer}
	
	#btnLogOut	{float:right;font-size:13px; color:#ddd; padding: 6px 10px 6px 10px; margin: 0 .5em 0 0; opacity:.8; cursor:pointer; background:transparent; border-radius:4px; border:1px solid #f60;}
	

#waitBox {opacity:.8; left:0; margin:0; box-shadow:none; border:none;display:none; /*height:28.2em;  width: calc(100% - 4em);*/font-size: 16px;}

.waitall { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-content: stretch;  align-items: flex-start;  height:30em;}
.waitchield {order: 0; flex: 0 1 auto;  align-self: auto; }
#waitBoxGlobal {display:none; position:absolute; z-index:150; margin:25em 0 0 45%}



#lblWait     {margin:15em 0 0;text-align:center;font-size:14px;color:#195DA3}
#lblSongItemWait {font-size:10px;color:#f60}
#lblWaitInfo {font-size:13px; position:absolute; padding-top:90px; width:20em}
#lblWaitInfoGlobal {font-size:12px; position:absolute; text-align:center;padding-top:100px; margin-left: -1em; color:#ddd }

.clsSongListItemStop	{background:url(../../images/stopp_liste_20.png) center no-repeat !important}
.clsSongListItemWait	{background:url(../../images/wait_liste_20.png) center no-repeat !important; animation: spin 2s linear infinite;}
.clsSongListItemPause	{background:url(../../images/pause_liste_20.png) center no-repeat !important}

.hiddenTrackList		{display:none}


.lds-roller {display:inline-block;position:relative;width:80px;height:80px; margin:0 auto !important}

.lds-roller div {animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:40px 40px}.lds-roller div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#f60;margin:-4px 0 0 -4px}.lds-roller div:nth-child(1){animation-delay:-.036s}.lds-roller div:nth-child(1):after{top:63px;left:63px}.lds-roller div:nth-child(2){animation-delay:-.072s}.lds-roller div:nth-child(2):after{top:68px;left:56px}.lds-roller div:nth-child(3){animation-delay:-.108s}.lds-roller div:nth-child(3):after{top:71px;left:48px}.lds-roller div:nth-child(4){animation-delay:-.144s}.lds-roller div:nth-child(4):after{top:72px;left:40px}.lds-roller div:nth-child(5){animation-delay:-.18s}.lds-roller div:nth-child(5):after{top:71px;left:32px}.lds-roller div:nth-child(6){animation-delay:-.216s}.lds-roller div:nth-child(6):after{top:68px;left:24px}.lds-roller div:nth-child(7){animation-delay:-.252s}.lds-roller div:nth-child(7):after{top:63px;left:17px}.lds-roller div:nth-child(8){animation-delay:-.288s}.lds-roller div:nth-child(8):after{top:56px;left:12px}
@keyframes lds-roller{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.lds-roller-globe div {animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:40px 40px}.lds-roller-globe div:after{content:" ";display:block;position:absolute;width:7px;height:7px;border-radius:50%;background:#ddd;margin:-4px 0 0 -4px}.lds-roller-globe div:nth-child(1){animation-delay:-.036s}.lds-roller-globe div:nth-child(1):after{top:63px;left:63px}.lds-roller-globe div:nth-child(2){animation-delay:-.072s}.lds-roller-globe div:nth-child(2):after{top:68px;left:56px}.lds-roller-globe div:nth-child(3){animation-delay:-.108s}.lds-roller-globe div:nth-child(3):after{top:71px;left:48px}.lds-roller-globe div:nth-child(4){animation-delay:-.144s}.lds-roller-globe div:nth-child(4):after{top:72px;left:40px}.lds-roller-globe div:nth-child(5){animation-delay:-.18s}.lds-roller-globe div:nth-child(5):after{top:71px;left:32px}.lds-roller-globe div:nth-child(6){animation-delay:-.216s}.lds-roller-globe div:nth-child(6):after{top:68px;left:24px}.lds-roller-globe div:nth-child(7){animation-delay:-.252s}.lds-roller-globe div:nth-child(7):after{top:63px;left:17px}.lds-roller-globe div:nth-child(8){animation-delay:-.288s}.lds-roller-globe div:nth-child(8):after{top:56px;left:12px}@keyframes lds-roller{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.lds-roller-globe {position:relative; width:80px; height:150px; margin:3px auto 0 auto !important;}
.lds-roller-globe #lblWaitInfo {color:#fff}



#logHead		{margin:1em 0 6em 0; cursor:pointer}

#modalRow1		{font-weight:bold; font-size: 1.3em; padding:.3em 0 1em 0; color:#555; overflow-wrap: break-word;}
#modalRow2		{font-size: .9em; padding-bottom:1em;color:#777; overflow-wrap: break-word;flex: 0 0 80%; order:1}
#modalRow3		{flex: 0 0 4%; order:2;font-size:.1em}
#modalContent, #modalContentLyric	{font-size: .8em; color:#000; margin:0 0 2em 0}

#modalContentTrack	{font-size: .8em; color:#000;}

#modalContentLyric, #modalContentTrack	{display:none}

#iframeNewTrack	{width:540px; height:600px; overflow:hidden}

#globalBtnBox	{position: absolute;margin: 0 0 0 60.9em; z-index:50}

button 		{background: none;  border: none;  padding: 8px;  border-radius: 4px; color: #ddd; border: solid 1px #ddd;cursor: pointer; opacity: 0.8; outline:none}
button:hover {opacity:1}
.button_active {color:#f60; border-color:#f60}
#btnbox	{margin-top:1em; float:left; font-size:13px; display:none}

#btnsave, #btnyes, #btnsaveTrack, #fileSource {display: block; float: left;width: 8em; color: rgb(255, 255, 255); text-align: center; font-weight: normal; padding: 0.5em;background: rgb(255, 72, 0) none repeat scroll 0% 0%;border-radius: 4px;cursor: pointer;opacity: 0.8;}
#btnAddTrack {display:none}

#btnBackToList {z-index:200;}

#lineTwo					{margin:0em 0 2em 43em; display:flex; visibility:hidden}
#lineTwo img				{height:15px;}
#btnGlobalSongEdit			{margin:0 .5em 0 .5em}
#selTitle					{position:absolute; color:#ccc; font-size:22px; margin:.3em 0 0 0}

#fileSource {font-weight:normal;}

.clsActionButtonFull {display: block;float: left;width: 8em;color: rgb(255, 255, 255);text-align: center;font-weight: bold;padding: 0.5em;background: rgb(255, 72, 0) none repeat scroll 0% 0%;border-radius: 4px;cursor: pointer;opacity: 0.8;}

.clsActionButtonFull:hover {opacity:1}
/*.clsObjectForm	{width: calc(100% - 1em)}*/


#btnno, #btncancel	{display: block; float: left; margin-left: 1em; width: 8em; color: rgb(255, 72, 0); text-align: center; padding: 0.5em; border: 1px solid rgb(255, 72, 0); border-radius: 4px; cursor: pointer; opacity: 0.8; background-color:#fff; font-weight:normal}

.clsFakeBtnCancel{margin: -4.8em 0 0 10em !important;}

#btnStop, #btnPlay, #btnSkipFw, #btnSkipBw  				{border: solid 2px #fff; border-radius:50%; height:40px; width:40px; margin:0 0 0 1em; padding:0; background-color:#000}
#btnSkipFw, #btnSkipBw 										{height:30px; width:30px; }


#btnStop img, #btnPlay img, #btnSkipFw img, #btnSkipBw img 	{width:20px; padding:2px 0 0 0}

#btnPause  		{border: solid 2px #fff; border-radius:50%; height:40px; width:40px;margin:0 0 0 1em; padding:0; background-color:#000; display:none}
#btnPause  img	{width:20px; padding:2px 0 0 0}

.cls_savecancel, .cls_yesno{display:none}
#btnno:hover, #btnsave:hover, #btncancel:hover, #fileSource:hover, #btnsaveTrack:hover {opacity:1}
#fileSource	{position:absolute; width:auto}

#vrr_logo {color:#ccc;font-size:1.4em;margin: .5em 0 0 2.2em; padding: 0 0 0 0.2em;} 

#vrr_logopoint	{background: #F60; border-radius: 50%; width: 2em; height: 2em; position: absolute; margin: 0 0 0 1em}

.vbox 		{width:10em; height:10em; padding:10px; margin: 1em 0 1em 0}
.clsMedien 		{height:150px; width:100px; padding:1em;display:none}
.clsMedien audio		{ width:180px;}
.vidbox		{position:absolute; left:53.2em; margin:1em 0 0 0;display:none}


.clsTrackNumber	{color:#EFEFEF; font-size:10px; position:absolute; margin:3em 0 0 .5em; font-weight:bold; z-index:80}

.trackCont		 {display:none; outline:none; font-size:13px; color:#fff;padding:4px; background:#000; border-top-left-radius: 4px;border-bottom-left-radius: 4px; min-height:65px; /*width:1645px;*/ width: calc(100% - 1em); margin-bottom:6px}

.ContTrackDetail	{width:100%}
.clsTrackField a {color:#f60 !important; text-decoration:none}

.trackinfo		{color:#ccc; font-size:11px; margin: 2em .8em 1em 1em; padding:10px; line-height:140%; display:none; border:solid 1px #222; border-radius: 4px }
.trackinfo	span{ font-size:11px}	
.clsArrowTrackInfobox{width:12px; height:12px; opacity:.7; cursor:pointer; margin: -.65em .2em 0 .3em; float:right}

.infoDisabled	{color:#aaa}

input[disabled]{background:#fff}

.flexBox {display:flex}
.inputFlexHalf{ width:17.1em !important; margin:1em .7em 1em 0}

#lblIsLoaded {color:#fff; padding-top:8px; font-size:14px; font-weight:normal; display:none}

#trackVolBox	{position:absolute; margin:-2.2em 0 0 3.5em}

.track		 {font-size:12px; font-weight:bold; color:#fff; background:#4d5453; padding:10px; border-left:solid 14px #663366; border-top-left-radius:4px; border-bottom-left-radius:4px; opacity:.8; margin:0 0 0 0; width:18em; /*height:4.4em;*/ height:53px;position:absolute}

.track:hover {opacity:1!important}
.track	img  {width:8px; height:10px; cursor:pointer; /*margin:0.8em .6em 0 -1.3em*/}	

.wavecontainer, #wave-timeline, #wave-loopline	{/*width: calc(100% - 16em)*//*1400px;*/ margin-left:.15em}

#wave-timeline  {margin: 0 0 5px 249px; background-color: #333434; cursor: pointer; display:none}
#wave-loopline	{margin: 0 0 0 249px; background:#4d5453; height:10px; display:none}

.clsWaveForm	{margin: 0 0 0 0 /*.15em*/;}

.clsTrackImg {margin: -0.58em .6em 0 -1.78em; position: absolute}

.track	img:hover {opacity:1}

.trackbtn		  {margin:0 0 5px 10px;}

.clsMuteBtn, .clsSoloBtn {padding:0; color:#fff; cursor:pointer; opacity:.8; height:1.8em; width:1.8em; border-radius:50%; border:none; background-color:#828e8c; position:relative; z-index:5}
.clsMuteBtn		  {margin:0 .5em 0 0}
		
.clsMuteBtn:hover, .clsSoloBtn:hover  {opacity:1}

.clsMuteBtn_active {background:#c50505; color:#fff; cursor:pointer; opacity:.8}
.clsSoloBtn_active {background:#ecec1d; color:#000; cursor:pointer; opacity:.8}
.clsMuteBtn_active:hover, .clsSoloBtn_active:hover  {opacity:1}

#vidNewBox	{height: 30px; /*width: 355px;*/ margin: 1em 0 0 0; border:solid 1px #ccc; border-radius:4px}
#vidNew		{width:100%; /*display:none;*/ max-height:200px; border-radius:4px}
.editMediaControl	{display:block !important}

#vidNewBox audio {height:30px}


/*Forms */
#frmInsTrack {max-height:34em}
#loading 	 {max-height:26em}


#vid_area 	{width:40em}
#vid_area table tr td {width:60%; vertical-align:top;}

.btnMute			{margin:1.3em 0 1em .5em}

#infoSliderbox				{float:left; margin:1.3em 0 0 18em}
.clsVerticZoomSlider		{font-size:2em; cursor:pointer; padding:3px; margin:0 .3em 0 0; width:12px; height:12px; vertical-align:middle; text-align:center; opacity:0.8}
.clsVerticZoomSlider:hover 	{opacity:1}

.slider1, .slider2, .slider3, #zoomSliderGlobal	{width:5em; position:absolute; margin:-.1em 2em 0 2em; z-index:55; cursor:pointer;}
.slider2			{height:10px}

.slider1			{margin: 0 2em 0 1.8em; width:12em; height:6px}
#volGesamtSlider	{position:absolute; margin: -.3em 0 0 4em; width:5em}

.volumeLabel, #volGesamtLabel {position:absolute; color:#ddd; font-size:10px;}
.volumeLabel		{margin: .6em 0 0 20em}

#footCtlBox					{width:33em; padding: 2.2em 0 0 0;}
#speedLabel, #zoomLabel 	{margin:.7em 0 0 1em; width:12em; color:#ddd; font-size:.7em; text-align:left; cursor:pointer}
 #zoomLabel 				{margin-left: 12.5em}	
 
#volGesamtLabel 	{margin: .8em 0 0 17em; width:12em}

/*select				{height:1.2em}*/
.normalbox   	{width: calc(100% - 1.2em); height: 1.2em; resize: none;}

input[type=time] {width: calc(100% - 1.4em); height: 1.2em; resize: none; font-size:130%}

.normalselect	{width: 97.5% height: 2.4em}

input, select, .clsTime, .textareaInput	{font-size:1em; margin:1em 0 1em 0; padding:.5em;}
input, textarea, select, .clsTime, .textareaInput {outline:none; border: 2px solid #ff9c5a; border-radius:4px; background-color:#fff}

/*.clsTime		{font-size:130%; height:1.05em;}*/

.textareaInput 	{width: calc(100% - 1em);height: 1.2em; min-height:1.2em; max-height:1.2em; resize: none;}

input:hover, select:hover, textarea:hover {border-color: #ffb686}
input[disabled]			{border:1px solid #ccc; /*height:1.35em*/}

label		{position:absolute; font-size:.7em; color:#777}
.error		{color:#f00; font-size:.9em; margin-top:.5em}

#col1		{width:10em; position:absolute; display:none}
#col1 ul li	{list-style:none; padding: .3em 0 .3em 0; color:#ccc; font-size:1em; cursor:pointer}
#col1 ul li span	{font-size:2em;padding-right:.3em}
#col1 ul li:hover, #col1 a:hover	{color:#fff}
#col1 a:link, a:visited {color:#ccc; text-decoration:none}


#col2		 {min-width:50em;position:absolute; margin:2em 0 0 2em; /*min-height:2000px*/}
.clsListcont {width:50em;margin-top:0 !important}

#globalBtn1	{margin:2.5em 0 1em 0}

#btnGlobalEdit	{float: right;margin-right: 33em;}

.spurBtnLeiste	{width:15.8em; display:none}
#songBtnLeiste	{margin: -1em 0 4em 0}

.clsCancelTrack, .clsSaveTrack	{display:none}

#clsSearchResult {color:#999; margin:1em 0 2em 0; font-size:13px}
#search			 {background:none; color:#fff; font-size:14px;padding:8px; border:none; margin:0 0 .3em 2em; width: calc(100% - 6em);}
#lupe			 {margin-top:0; position:absolute; width:1em; font-size:1.5em}
#dele_search	 {border:none; display: inline-block; cursor:pointer; background:none; color:#fff; margin:-.4em .3em 0 -2em; float:right; font-size:22px}

.clsKachelBoxSearch 			{border: solid 2px #525252;border-radius: 8px;padding: 10px 0 0px 8px;height: 40px; margin:1em 0 3em 0;width:23em}
.clsKachelBoxSearch:hover		{border: solid 2px #757474} 

.clsKachelBox, .clsKachelBoxNew	{list-style:none; padding-left:0; background-color:#383838; opacity:0.8; margin:.4em 0 .4em 0; border-radius:3px; border:1px solid #333; cursor:pointer}
.clsKachelBox:hover, .clsKachelBoxNew:hover	{opacity:1}

.titleKachel, .titleKachel_load, .titleKachel_new	{width:1em; padding:1em; cursor:pointer; background:url(../../images/start_liste_20.png) center no-repeat;}
.titleKachel_new	 {background:url(../../images/headphone_new_small.png) no-repeat center; color:#ddd}
.titleKachel_empty	 {width:1em; padding:1em; cursor:pointer; background:url(../../images/start_liste_20_gray.png) center no-repeat;}


#kachelNew		{color:#ddd; font-weight:bold; text-align:center}


/*#autor, #title	{width:calc(100% - 1em)}*/


.clsItemLoadLayer				{background-color: #00b7ff4f; width: 0;height: 50px; position:absolute}
.clsItemPlayStatus  			{background-color:#39C; width: 0px; height: 3px;}

.clsSongtitle, .clsSongtitleNew	{font-size:15px; margin: 0 0 0 3.1em; color:#ddd; position:absolute; z-index:30; cursor:pointer; padding:9px 0 0 0}

.clsSongtitle:hover, .clsSongtitleNew:hover	{color:#fff}
.clsSongtitleNew		{margin:.6em 0 0 3.5em; font-weight:bold}

#startContent	{color:#ccc; font-size:.8em; padding:2em; line-height:160%; width:65%}
.listAutor		{font-size:.7em}

.clsItemSubMenue 		{display:none; padding:4px; margin-bottom:1.5em; height:1.5em}
.clsItemSubMenue ul 	{list-style:none; padding:0; margin:0}
.clsItemSubMenue ul li 	{font-size:13px; color:#ddd; padding: 6px 10px 6px 10px; margin: 0 .5em 0 0; opacity:.8; cursor:pointer; background:transparent; border-radius:4px; border:1px solid #f60; float:left}

.clsItemSubMenueDownload {border:none !important; margin-left:-.5em !important;}
 
.clsItemSubMenue ul li:hover {opacity:1} 

.clsItemPlay { background:url(../../images/start_liste_20.png) no-repeat}
.clsItemStop { background:url(../../images/stopp_liste_20.png) no-repeat !important}


#titelleiste	{color:#fff;  margin:0 0 3em 0; height:5em}
#titelleiste h3	{font-size:24px; padding: .1em 0 0 0; color:#fff; overflow-wrap: break-word; position:absolute; z-index:10;margin: .4em 0 0 0;letter-spacing: 1px; font-weight:bold }
/*.clsTitelSmall	{font-size:20px !important;padding: .4em 0 0 2em !important;}
*/
#colorpoint 	{background-color:#f60; width:25px; height:25px; border-radius:50%; cursor:pointer; display:none;}

#titelleiste h4	{margin:.5em 0 0 0; color:#777; font-weight:normal; overflow-wrap: break-word;}
.clsTempNote {font-size: 1.2em;padding: 0 0 0 .5em; font-weight: bold;}

#headillu		{background:url(../../images/musicnotes/lines.svg) repeat-x 0px -3px;/* opacity:0.35*/}
#vzTakt			{position: absolute;margin: .3em 0 0 .25em;font-weight: bold;line-height: 80%;color: #b2b2b2;z-index: 30;font-size: 1.35em;font-family: "Times New Roman", Times, serif;}

#globalLblTonart {color:#888; font-size:.8em; margin-bottom:1em}
/*img fuer generelle Vorzeichen*/
#genVZ			{/*position:absolute; left:40px;*/height: 3.355em;} 

.clsLblVolume	{margin-left:43.2em}


.clsMediaControls, .trackCTL, .clsMediaGlobal {display:none}
.trackCTL		{margin: 0 0 0 18em}

.clsTrackLabel{margin: .4em 0 0 5em; width:13em;cursor:grab;}
.unselectable {-webkit-user-select: none;-moz-user-select: -moz-none;-ms-user-select: none; user-select: none;}


.clsEditTrack, .clsEditLyric	{cursor:pointer; opacity:.7;float:right; height:13px; width:64px; margin:0 .5em 0 0; border:solid 1px #f60; padding:6px 10px 6px 10px; border-radius:4px; color:#ddd; font-size:13px}

.clsDeleTrack	{cursor:pointer; opacity:.7; float:right; height:13px; width:50px; border:solid 1px #f60; padding:6px 10px 6px 10px; border-radius:4px; color:#ddd; font-size:13px}

.clsDeleTrack:hover, .clsEditTrack:hover	{opacity:1}	

.speaker	{opacity:.8; background:url(../../images/speaker.png) no-repeat; height:1.6em; width:10em; margin: 2.8em 0 0 1em; position:absolute}
.speaker:hover	{opacity:1}

.clsMuteSolo	{position:absolute; z-index:50; margin:0.5em 0 0 1.4em}

/*progressbar*/
progress 		{appearance: none; width: 100%; height: 2px; border: 0; position:absolute; margin-top:0em; background: #555; z-index:100;}
progress::-webkit-progress-bar {background: #555;}
progress::-webkit-progress-value {
	background: #06c;
	transition: width 2.5s ease-in-out;
}

.progBox	{display:none}
#prog0 		{height:8px; margin:.8em 0 1em 0}

#span_prog0	{color: #ddd; font-size:10px; padding:.8em 0 0 0}

.btnBox, #leftInfoBox	{margin: 1.5em;}

/*#leftInfoBox				{position:absolute}*/

#btn_container_bottom2 {
  background: #333 none repeat scroll 0 0;
  border-top: 1px solid #ccc;
  font-size: 1em;
  opacity: 0.9;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  position: fixed;
  text-align:center;
  margin:1em 0 0 0;
  z-index:100;
  display:none;
  height:5.5em;
  display:flex; flex-direction:row
 }


.container_bottom2_left		{width:20em; text-align:left; margin-left:2em}
.container_bottom2_middle	{width:30em; text-align:center}

#clsGlobalCursor, #clsLoopCursor  {display:none; left:249px}

#clsGlobalCursor	{width:0px; border:none; border-right:1px solid #00ffe7; position:absolute; z-index:50; background-color:rgba(85,85,85,0.3);margin:0}
#clsLoopCursor		{width:0px; border:none; border-right:1px solid #00ffe7; border-left:1px solid #fff;position:absolute; z-index:50; background-color:rgba(255,102,0,0.3) !important; margin:0}

.clsLoopCursBack	{background-color:rgba(255,102,0,0.2) !important;}
.clsCursBack		{background-color:rgba(85,85,85,0.5);}



#btn_container_bottom1_label_left, #btn_container_bottom1_label_right {color:#fff; font-size:16px; margin-right: 10px; margin-top:20px}
#btn_container_bottom1_label_right  {/*padding: 4px 8px 0 0px; width:5em*/}
#spdt {color:#aaa}


.boxfeldselhalf {-webkit-flex-grow: 1;  flex-grow: 1;  -webkit-flex-basis: auto; flex-basis: auto; max-width: 23.5%; padding: 0 0.5em 0 0;}
.boxform {width:50%;}
.quarterform {max-width: 99%}

#lyric				{font-size: 1em; line-height: 160%; min-width:99%;  max-width:99%;max-height:40em}
#lyriccontainer 	{color: #eee;line-height: 190%;letter-spacing: 1px;font-size: 20px;overflow:auto; text-align:center; margin:13em 0 0 0}
#lyrContEdit		{min-height:20em; margin-top:1em; column-count:2; column-gap:40px; border:1px solid #ff6c32; border-radius:4px; outline:none; padding:4px; overflow:auto; resize:vertical}


#centralcontainer	{margin:4em 0 0 0}

.songloader {
  margin: -0.5em 0 0 -0.4em;	
  border: 10px solid #f3f3f3; /* Light grey */
  border-top: 10px solid #f60; /*#3498db Blue */
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: spin 2s linear infinite;
}
.loader {
display:none;	
  margin:-2em 0 0 4em;	
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #f60; /*#3498db Blue */
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}



#band  {font-size:3em; color:#ccc; /*width:16.5em*/}
#contLogo {cursor:pointer; margin:0 0 0 0}
#contLogo_arrow {cursor:pointer; margin:0 0 0 3.5em}

.clsBackArrow	{cursor:pointer;color: #ccc;position: absolute;margin: .15em 0 0 2em;z-index: 50; font-size:22px}
.clsBackArrow   {transform:rotate(180deg)}	


/*.clsItemLoadLayer	{left:5%}*/
.clsItemPlayStatus 	{left:5%}

/* whithout Spinner for Numberfield - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/*# Songformular*/
.clsTaktLabel	{margin-left:23em}
.lblTonart 		{margin-left:9.5em}
.selTempo		{margin-right:.7em; width:6em}
#tonart			{margin-right:.7em}
#takt_z			{width:1em; text-align:center}
#takt_n			{width:1em; text-align:center}
#taktTrenner	{border:none; text-align:center;margin-top:1em; width:.4em}




@media screen and ( max-width: 829px ) {
#modal {width: calc(100% - 4.2em)}


}
@media screen and ( max-width: 810px ) {
.slideboxwrapper {margin:0 auto;max-width:50em;}  
}
/*Handy quer*/
@media screen and ( max-width:760px ){
.no-mobile, #wave-timeline, #wave-loopline  {display:none !important}

.clsSongtitle 		{width:28em}
.songtitel_mobil	{display:block}

.wrapper	{position:relative;margin:0 auto; padding: 0 1em}
#band  				{font-size:2em; width:10em}
/*#vrr_logo			{margin-top:.8em}*/

/*.clsTrackItem		{width: 35em} */
.track	 		    {width: calc(100% - 5.5em)}
.trackCont			{width: 15em; background-color:transparent}
.trackinfo			{margin: 6.6em 0 0 0; width:49em}
.spurBtnLeiste		{width:48.3em}

#titelleiste h3			{padding:0}
.clsTitelSmall			{padding: 0!important;}

.lds-roller-globe 		{margin:0 0 0 14.5em}
/* #btn_container_bottom2	{width:51em} */
.container_bottom2_middle	{width:28em}

.flexfoot1 {display:none}
.flexfoot2 {flex: 1 1 100%}
.flexfoot3 {display:none}
.spurBtnLeiste {width:15em}


.clsItemPlayStatusMobile    {position:relative;width: 0; left:0; background: #f60;height: 8px; display:block}
}

@media screen and ( max-width:580px ){
	
.boxwrap {-webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}

.flexchild_a {/*-webkit-flex:3 1 100%;-ms-flex:3 1 100%;flex:3 1 100%;-webkit-order:1;-ms-order:1;order:1*/width:100%}
.flexchild_b {/*-webkit-flex:3 1 100%;-ms-flex:3 1 100%;flex:3 1 100%;-webkit-order:2;-ms-order:2;order:2*/ width:100%;}

.flexchild_1 {-webkit-flex:1 1 48%;-ms-flex:1 1 48%;flex:1 1 48%;}
.flexchild_2 {-webkit-flex:1 1 48%;-ms-flex:1 1 48;flex:1 1 48%;margin-left: 0;}

.flexchild_3 {-webkit-flex:1 1 48%;-ms-flex:1 1 48%;flex:1 1 48%;}
.flexchild_4 {-webkit-flex:1 1 48%;-ms-flex:1 1 48;flex:1 1 48%;margin-left: 0;}

.chield_1 {flex: 0 0 33%; order: 1}

.chield_2 {flex: 0 0 25%; order: 2;}

.chield_3 {flex: 0 0 33%; order: 3;}

.chield_4 {flex: 0 0 76%; order: 4}

.chield_5 {flex: 0 0 20%;order: 5;}

}

/*Handy hoch*/
@media screen and ( max-width: 480px ) {
	.wrapper			{width: calc(100% - 1em);margin:0;padding: 0 .5em}
	.songtitel_mobil	{display:block}
	
	#flexchild_2, .no-mobile, #wave-timeline, #wave-loopline  {display:none !important}
	
	.clsItemLoadLayer	{background-color: #00b7ff4f; width: 0;position: absolute;height: 60px;/* opacity: 0.4*/}

/*	#searchbox 			{width:18.8em}*/
	#search				{margin:0 0 0 1.6em; width: calc(100% - 6.5em);}
	#dele_search		{font-size:28px}
	
	.clsBackArrow		{margin:.1em 0 0 .4em; font-size:25px}

	#contLogo_arrow		{margin:0 0 0 1.8em}
	/*#lupe				{margin-top:.25em;}*/

/*	.titleKachel		{background:url(../../images/start_liste_30.png) center no-repeat}
	.titleKachel_empty	{background:url(../../images/start_liste_30_gray.png) center no-repeat}*/
	.clsSongtitle 		{width: 17em;}
	
	.track	 		    {width: calc(100% - 4.5em)}
	.clsTrackItem		{width: 19em}
	
	.volumeLabel		{margin-left:24em}
	.slider1			{width: 15em}
	.trackCont			{width: 23em; background-color:transparent}
	.trackinfo			{margin: 6.6em 0 0 0; width:24em}
	
	.spurBtnLeiste		{width:30em}
	
	#contFeed 					{width: 20em}
	#band  						{font-size:2em;}
	
	#titelleiste	{color:#fff; margin:0; height:2em}
	#titelleiste h3	{margin:0 0 0 0; padding:0; font-size:20px; text-shadow:none;letter-spacing: 0px;}
	
	.clsTitelSmall	{padding: 0!important;}
	
	.container_bottom2_middle	{width:18em}
	#centralcontainer			{margin:2em 0 0 0}
	
	/*#btn_container_bottom2		{width:20em} */
	.container_bottom2_right	{display:none}
	/*.btnBox						{margin-top:2.5em}*/
	
	.btnbox_track_edit		{margin-top:3em}
	
	.lds-roller-globe 		{margin:0 0 0 7.2em;}
	
	 #waitBox		{padding: 1.5em;}

	/*# Songformular*/
	.clsTaktLabel	{margin-left:22.5em}
	.lblTonart 		{margin-left:9.8em}	
	
	/*# Trackformular*/
	#colorpoint 	{margin:-2.8em 0 0 14.3em}
	.clsLblVolume	{margin-left:21.3em}
	#v_color		{ width:20em}

.flexchild_a {-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;/*margin:1em 0 .8em 0*/}
.flexchild_b {-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;margin-left: 0;}


.btnnmin {width: calc(100% - 1em) !important;  min-width: 12em;}
.flexchild_1 {-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;margin:1em 0 .8em 0}
.flexchild_2 {-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;margin-left: 0;}

.flexchild_3 {-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;margin:3em 0 .8em 0}
.flexchild_4 {-webkit-flex:1 1 100%;-ms-flex:1 1 100%;flex:1 1 100%;margin-left: 0;}

.clsEditTrackButtons  {margin-top:2em}
}

@media screen and ( max-width: 440px ) {
.flexchild_1 {margin-bottom: .8em;}
/*.flexchild_2 {margin-top:-5em}
.flexchild_2 {margin-left: 0;}*/
}
@media screen and ( max-width: 400px ) {
	#searchbox 			{width: calc(100% - 1em)}
.chield_4 {flex: 0 0 78%;} /*player*/
/*
#modal, #waitBox {padding: 1em;margin-right: 2em}*/
}