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

body {
  background-color: #181818;
  font-size: 1.1em;
 /* min-width: 720px;	*/
}

* {

	 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	 color: #fff;
}


.center {
	text-align: center;
}

.center.wide {
	padding: 20px 0;
}

#nowPlayingBarContainer {
	width: 100%;

	background-color: #373636;
	bottom: 0;
	/*position: fixed;*/
	/*min-width: 620px;*/
	
}

#nowPlayingBar {

	padding: 16px;
  box-sizing: border-box;
  display: flex;
  padding: 15px;
  box-sizing: border-box;
 
  align-content: center;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color: #333;
  border-top: 4px solid whitesmoke;


	/*height: 90px;
	 flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
	display: flex;
  	height: 90px;
  	padding: 16px;
  	box-sizing: border-box;
  	*/
}

#nowPlayingLeft  {

  flex-basis: 100px;
  flex-shrink: 1;
  flex-grow: 1;

}


#nowPlayingRight {
	 flex-basis: 280px;
  flex-shrink: 1;
  flex-grow: 1;
  
}

#nowPlayingCenter {
	

  flex-basis: 280px;
  flex-shrink: 1;
  flex-grow: 1;

}

#nowPlayingBar .content {

	display: block;
	text-align: center;
}

.playerControls .buttons {

  display: table;
  text-align: center;
  background-color: #991919;
  border-radius: 2.5rem;
  padding: 1rem;
  margin: 10px auto;
  border: 2px solid #a0a0a0;
}

.controlButton {
	background-color: transparent;
	border: 0;
	vertical-align: middle;
}

.controlButton img {
	width: 20px;
	height: 20px;
}

.controlButton.play img,
.controlButton.pause img {
	height: 32px;
	width: 32px;
}

.controlButton:hover {
	cursor: pointer;
}


.button.new {

	background-color: #373636;
	padding: 10px;
  margin: 0px 10px;

}

.progressTime {
	color: #a0a0a0;
    font-size: 11px;
    min-width: 40px;
    text-align: center;
}

.playbackBar {
	display: flex;
}
.progressBar {
	width: 100%;
    height: 12px;
    display: inline-flex;
    cursor: pointer;
   
}

.progressBarBg {
  background-color: #474747;
  height: 4px;
  width: 100%;
  border-radius: 2px;
}

.progress {
  background-color: #a0a0a0;
  height: 4px;
  width: 0;
  border-radius: 2px;
}

.playbackBar progressBar {
  margin-top: 3px;
}

#nowPlayingLeft .albumArtwork {

	/*float: left;*/
  max-height: 90px;
  /* padding-right: 15px;
 
  height: 100%;
  margin-right: 15px;
  background-size: cover;
  */
}

#nowPlayingLeft .trackInfo {
	/*display: table;*/
}

#nowPlayingLeft .trackInfo .trackName {
	display: inline-block;
  width: 100%;
	/*margin: 6px 0;
	display: inline-block;
	width: 100%;

	*/
}

#nowPlayingLeft .trackInfo .artistName span {
	font-size: 0.9em;
	color: #a0a0a0;
}

.volumeBar  {
	
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  max-width: 100%;
  text-align: center;
   padding-top: 20px
}

.volumeBar .progressBar {
	width: 125px;	
	vertical-align: middle;
}

/*.volumeBar .progressBarBg .progress {
	width: 100%;	
}
*/

#topContainer {

	min-height: 125.0vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  /*
	min-height: 100%;
	width: 100%;
	*/
}

#navBarContainer {

  /*
	border-bottom: 1px solid #a0a0a0;
  color: #a0a0a0;
  padding: 10px 0;
  display: flex;
  justify-content: space-around;#

  background-color: #000;
  width: 220px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  */
}

.navBar {
	/*
	padding: 25px;
	display: flex;
	flex-direction: column;
	ms-flex-direction: column;
	*/
}
.logo img {
	width: 40px;
	display: block !important;
	margin: 10px 0 0 20px;
  padding: 	0;
  /*box-sizing: border-box;*/
}
.logo {
	/*margin-bottom: 15px;*/
}



/*farben für pir.at*/
.colorRed {
	color: #a12929;;
}


.navBar #group {

	border-bottom: 1px solid #a0a0a0;
  color: #a0a0a0;
  padding: 10px 0;
  display: flex;
  justify-content: space-around;
  /*
	border-top: 1px solid #a0a0a0;
	color: #a0a0a0;
	padding: 10px 0;
	*/
}

.navItem {

	padding: 10px 0;
  font-size: 1.4rem;
  font-weight: 300;
  /*
	position: relative;
	padding: 10px 0;
	font-size: 1.05em;
	font-weight: 700;
	display: block;
	letter-spacing: 1px;
	*/
}

.navItemLink {
	color: #a0a0a0;
	text-decoration: none;
}

.navItemLink a{
	color: #a0a0a0;
	text-decoration: none;
}

.active, .navItemLink a:hover {
	color: #fff;
}

 .active, .navItemLink a:hover {
	color: #fff;
}

.active, .navItemLink:hover {
	color: #fff;
}

.navItemLink .icon {

	position: absolute;
	top: 11px;
	right: 0;
	width: 25px;
	left: 5px;
}


.navItemLink img {
	width: 25px;
}

#mainViewContainer {

/*margin-left: 22px;*/
 /* padding-bottom: 90px;
 width: calc(100% - 220px);*/
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  /*

	margin-left: 220px;
	padding-bottom: 90px;
	width: calc(100% - 220px);

	*/
}

#mainContent {
	/*padding: 0 20px;*/
	padding: 5px 0;
}

.pageHeadingBig {
	padding: 0 0px 0px 0px;
	text-align: center;
	margin: 0 0 20px;
	font-size: 2.2rem;
}
.gridViewItem {
	display: inline-block;
	/*margin-right: 20px;*/
	width: 29%;
	max-width: 200px;
	min-width: 150px;
	margin-bottom: 20px;

}
.gridViewItem img {	
max-width: 100%;
height: 100px;
}

.gridViewInfo {
	font-weight: 300;
	text-align: center;
	padding: 5px 0;
	/*text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;*/
	letter-spacing: 0.5px;
}

.gridViewItem a {
		text-decoration: none;
}

.entityInfo {
	padding: 0px 0 10px 0;
	display: inline-block;
	width: 100%;
}

.entityInfo .leftSection {
	/*width: 30%;
	float: left;
	max-width: 250px;*/
}

.entityInfo .leftSection img {
	max-width: 450px;
}

.entityInfo .rightSection {

/*width: 70%;
float: left;	
padding: 25px 10px 5px 40px;*/
box-sizing: border-box;
font-size: 0.8rem;

}

.entityInfo .rightSection  h2 {
	margin-top: 0px;
}

.entityInfo .rightSection  p {
	color: #939393;
  font-weight: 200;
  font-size: 2.9rem;
  padding: 0;
  margin: 0;
}

.tracklist {
	padding: 0;
}

.tracklistRow {
  height: 40px;
  padding: 19px 10px;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.tracklistRow span {
	/*color: #939393;*/
	font-weight: 200;
}


.tracklistRow .trackCount {
	width: 8%;
	float: left;
}

.tracklistRow .trackCount img {
	width: 15px;
  visibility: hidden;
  position: absolute;
  
  cursor: pointer; 

  float: left;
 
}

.tracklistRow:hover .trackCount img {
  visibility: visible;
}

.tracklistRow .trackCount span {
  visibility: visible;
}

.tracklistRow:hover .trackCount span {
  visibility: hidden;
}

.tracklistRow .trackInfo {
	flex: 1;
}

.tracklistRow .trackInfo span  {
	/*display: block;*/
}

.tracklistRow .trackOptions {
	width: 5%;
	float: left;
	text-align: left;
	margin-right: 15px;
}

.tracklistRow .trackOptions img {
	width: 30px;
  visibility: hidden;
}

.tracklistRow:hover .trackOptions img {
  visibility: visible;
  cursor: pointer;
}

.tracklistRow .trackDuration {
	
	text-align: left;
}

.tracklistRow .trackInfo .trackName {
	color: #fff;
	margin-bottom: 7px;
	display: block;
}

.tracklistRow:hover {
	background-color: #2a2a2a;
}


.trackName a {
	text-decoration: none;
}

.tracklistEdit {
	list-style: none;
	border-bottom: 1px dotted antiquewhite;
  padding: 5px;
  text-align: left;
  border: 2px solid #747373;
  height: 50px;
  margin: 5px;
}

.artistInfo {
	text-align: center;
}


.credits {
	font-size: 0.9rem;
	color: #dddcdc;
}

.button {
	background-color: transparent;
	cursor: pointer;
	font-weight: 500;
	border: 2px solid #fff;
	border-radius: 500px;
	padding: 15px;
	min-width: 130px;
	margin-bottom: 10px;
	letter-spacing: 2px;
	color: #fff;
}

.button.edit {
	background: transparent;
	min-width: 50px;
	border: 4px solid darkolivegreen;
	color: lightgreen;
}
.button.edit:hover{
	color: whitesmoke;
}

.button.edit.green {
	background-color: #29a529;
	color: white;
}

.button.back.red:hover{
	color: whitesmoke;
}

.button.red {
	background: #991919;
  border-color: #eaeaea;
}
.button.blue {
	background: steelblue;
  border-color: #eaeaea;
}


.error.red {
	color: red;
  padding: 20px;
  font-size: 1.4rem;
}

.button.login {
	margin: 20px 0 auto;
}

.button.login a {
	text-decoration: none;
}

.button.verify {
	display: block;
	text-align: center;
	margin: 20px auto;
	font-size: 1.4rem;
}

/*
.button.login {
	font-size: 1.4rem;
	margin: 20px auto;
}
*/

.borderBottom {
	border-bottom: 1px solid #dfdfdf;
	margin-bottom: 20px;
}

.tracklistContainer h2, 
.gridviewContainer h2,
.artistsContainer h2 {
	text-align: center;
}

[role = link] {
	cursor: pointer;
}

.searchContainer {
	background-color: #242424;
	padding: 0px 5px;
  border: 2px solid whitesmoke;
  border-radius: 250px;
   max-width: 70%;
   margin: 0 auto;
}	

.searchContainer h4 {
	margin: 0;
  font-weight: 300;
 


}

.searchInput {
	font-size: 1.8rem;
  width: 100%;
  background-color: transparent;
  border: 0;
  color: #fff;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
}

input:focus {
	outline: none;
}

.searchResultRow {
	padding: 15px 10px;
}
.searchResultRow:hover {
	background-color: #282828;
}

.searchResultRow .artistFound span {
	color:#fff;
}
.noResults {
	margin: 15px;
	display: block;
}


.colorSearch {
	background-color: transparent;
	padding: 5px 0px;
	border: 2px solid whitesmoke;
	border-radius: 250px;
	max-width: 70%;
	margin: 20px auto;
}

.searchResultRow .artistFound {
	font-size: 1.5rem;
	background-color: red;
}

.buttonItems .button {
	display: block;
  margin: 20px auto;
}

.playlistContainer {
	padding: 10px 0;
}

.playlistImage {
	border: 3px solid #282828;
	padding: 10px;
}

.optionsMenu {
	position: fixed;
  background-color: #282828;
  width: 200px;
  border: 1px solid #f0f8ff47;
  border-radius: 3px;
  z-index: 2000;
  display: none;
}



.optionsMenu .item {
	width: 100%;
	box-sizing: border-box;
	font-weight: 400;
	color: rgb(147,147,147,0.8);
	cursor: pointer;
	background-color: #282828;
	font-size: 0.9em;
}


.optionsMenu .item:hover {
	color: #fff;
	background-color: #333;
	border-color: #333;
}

.optionsMenu select {
	border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.optionsBarMenu {
	background-color: transparent;
	margin-left: 15px;
}

	.optionsBarMenu .item {
	width: 100%;
	margin: 10px 10px;
	color: rgb(147,147,147,0.8);
	cursor: pointer;
	font-size: 15pt;
	max-width: 41.5px;
	padding: 10px;
}




.optionsBarMenu .item:hover {
	color: #fff;
	background-color: #333;
	border-color: #333;
}

.optionsBarMenu select {
	border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}





.userInfo h1 {
	text-align: center;
}

.userInfo input {
	/*font-size: 1.0rem;*/
	background-color: transparent;
	color: whitesmoke;
	margin: 20px;
}

.warning {
  color: #d60000;
  font-size: 1.4rem;
  padding: 20px;
  max-width: 70%;
  margin: auto;
  border: 2px solid red;
  border-radius: 150px;
}

.warning.hidden {
	display: none;
}

.userDetails {
	/*padding: 20px;*/
}

.userDetails .container h2 {
	text-align: center;
}

.userDetails .container input[type="text"],
.userDetails .container input[type="password"],
.userDetails .container .button {

display: inline;
margin: 16px auto;

}

.userDetails .container input[type="text"],
.userDetails .container input[type="password"] {
	height: 50px;
  width: 7 0%;
  background-color: #1f1f1f;
  font-size: 18px;
  font-weight: 300;
  padding: 0 20px;
}

.userDetails .container .message {
	font-weight: 300;
	color: #a0df44;
}

.message {
	color: red;
	padding: 15px;
	box-sizing: border-box;
	display: block;
	margin: 20px;
}


.artistContainer {
	text-align: left;
	padding: 10px;
	font-weight: 300;
	background-color: #282828;
	margin: 20px auto;
}


.mysongs .tracklistRow .trackInfo {
	width: 50%;
	float: left;
}

.edit .input {
	font-size: 0.8em;
	background-color: transparent;
	padding: 5px;
	margin: 5px;
}


.forget .input {
	font-size: 2.0rem;
	background-color: transparent;
	text-align: center;
	padding: 10px;
	color: whitesmoke;
}



.button.back {
	padding: 15px;
	border-radius: 50px;
	background-color: #5d1717;
	min-width: 20px;
	margin: auto;
	border: 2px solid darkred;
	color: brown;
}

.button.back:hover{
	color: whitesmoke;
}

.button.reset{

background-color: #991919;

}

.label {

	display: block;
  padding: 10px auto;
  padding: 5px;
  color: whitesmoke;
  font-size: 1.1em;
  font-weight: 500;
}

.dropdown {

	background-color: transparent;
  font-size: 0.9em;
  padding: 10px;
}

.dropdown option{
	color: black;
}


#rand1.dropdown option {
	color: whitesmoke;
}	

.albumItem img {
  margin: 20px;
  padding: 30px;
}


.middleSection .title {
	color: #f96868;
  font-size: 1.3em;
  text-align: center;
}

.middleSection .artist {
	padding:10px;
  font-size: 1.4em;
  text-align: center;
}

.artists, .albums {
	font-size: 1.1em;
	padding: 20px;
}

.title {
	font-size: 0.9rem;
	color: antiquewhite;
}

.description .title {
	font-size: 1.1rem;
}

.foto {		
  padding: 20px;	
 /* width: 80px;*/
}

.total img {

	max-width: 250px;
}

/*
.artistName {
	display: block;
	font-size: 1.4em;
	padding: 10px;
}
*/

.total {
	background-color: #282828;
  /*padding: 20px;
  margin: 30px;*/
}

.show {

	background-color: transparent;
  margin: 5px;
  /*border-bottom: 1px solid wheat;*/
  padding: 25px;
  
}

.showPw {

	background-color: transparent;
 
  border-bottom: 0px solid wheat;
  padding: 5px;

}

.show .Name {
	padding-bottom: 25px;
	/*font-size: 1.8em;*/
	color:	#f6f4f4;
}


.editButton.yellow,
.editButton.red
 {
	width: 40px;
	background-color: rgba(22, 25, 25, 0.8);
	color: yellow;
	border: 2px solid yellow;
	border-radius: 5px;
	cursor: pointer;
	font-weight: 800;
}

.editButton.red {	
	color: #f6b0b0;
  border: 2px solid #b68585;
}

.info, .contact{
	font-size: 0.8em;
	margin: 5px 0;
	padding-bottom: 5px;
	padding-top: 5px;
}


.contact {

	padding: 10px 0;
  height: 12px;
  display: block;
}

.info.input {
	width: 100%;
}

.info.input.photo{
	width: 100%;
	max-width: 240px;
}

.info.input {
	font-size: 1.1em;
	/*background-color: #8f8c8c;*/
	color: whitesmoke;
	text-align: center;
	max-width: 450px;
  background-color: #181818;

}

.info.input.bandinfo {
	height: 150px;
}

.stats {
	color: #a0a0a0;
}

.submit {
	margin: 20px auto;
}

.tracklistEdit .submit {
	float: right;
	margin: 0;
}


.trackPopular {
	visibility: hidden;

}


#loginContainer .error {
	font-size: 1.5rem;
  color: red;
}

/*NAVI*/

  nav {
    background-color: #181818;;
    color: whitesmoke;
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 0 0 0 0;
  }
  
nav a{
	text-decoration: none;
}

  .logo {
    font-size: 1.5rem;
  }
  
  nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  nav ul li {
    margin-right: 20px;
  }
  
  nav ul li navItemLink {
    color: white;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  nav ul li navItemLink:hover {
    color: lightgreen;
  }

  nav ul li navItemLink:active {
    color: lightsteelblue;
  }
  
  .checkbtn {
    font-size: 30px;
    color: white;
    cursor: pointer;
    display: none;
  }
  
  #check {
    display: none;
  }
  
  @media (max-width: 768px) {
    .checkbtn {
      display: block;
      order: 1;
      /*margin-right: 20px;*/
    }
  
    nav ul {
      position: fixed;
      top: 80px;
      right: -100%;
      background-color: #211;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
      border: 2px solid red;
    	border-radius: 20px;
    }
  
    nav ul li {
     /* margin: 20px 0;*/
    }
  
    nav ul li .navItem {
      font-size: 1.4rem;
      padding: 10px;
    }
  
    #check:checked ~ ul {
      right: 0;
    }


  }

  .auge {
	width: 25px;
	border-radius: 5px;
}


/*SCROLL TO TOP*/

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 10px; /* Place the button at the bottom of the page */
  right: 5px; /* 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: #9c5678; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; /* 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 */
}

.input .item.dropdown{
	background-color: transparent;
	margin: 1.0em;
	/*padding: 1.0em;
	font-size: 1.2rem;
	text-align: center;*/
}

/*COOKIES*/
#consentBox {
    background: #000;
    padding: 10px;
    border: 2px solid whitesmoke;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    text-align: center;
    /*pauls addition*/
    display: flex;
    justify-content: center;
}

#consentBox.hide {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
    transition: all 0.3s ease;
    display: none;
}

::selection {
    color: #fff;
    background: #229a0f;
}

#consentContent p {
    color: #f7f3f8;
    margin: 10px 0 20px 0;
}

#consentContent .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-top: 20px;*/
}

.consentButton,
.rejectButton {
    padding: 12px 30px;
    border: none;
    outline: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.consentButton {
    background: #2a910b;
    margin-right: 10px;
}

.rejectButton {
    color: #111211;
    background: transparent;
    border: 2px solid #099c2c;
    text-decoration: none;
}

#consentBox img {
    max-width: 90px;
}

#consentHeader {
    font-size: 25px;
    font-weight: 600;
    margin-top: 10px;
}


/*pauls css*/

.rejectButton {
    /* color: #111211; */
    background: transparent;
    border: 2px solid #d21616;
    text-decoration: none;
}
.consentButton, .rejectButton {
    padding: 12px 30px;
    outline: none;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 0 0 10px;
}

.rejectButton {
border: 2px solid red;

}

#consentContent {

    display: flex;
    justify-content: center;
    align-content: space-around;
}

.rules, .datenschutz, .impressumInfo, .prae {
	text-align: left;

	margin-left: auto;
	margin-right: auto;
	max-width: 580px;
	
	background-color: darkred;
	padding: 25px;
}

.datenschutz {

	background-color: darkgreen;

}

.impressumInfo {

	background-color: darkblue;

}

.prae {

	background-color: orangered;

}


.content {
	font-size: 1.0rem;
	padding-bottom: 10px;
	color: #a0a0a0;
}

/*Emotions*/
/*.Red{background-color: #ff0000;}
.White{background-color: #eee;}
.Blue{background-color:#2222ff;}
.Green{background-color:#22ff22;}
.Yellow{background-color:#ffff22;}
.Purple{background-color:#a01a7d;}
.Pink{background-color:#ffa5a5;}
.Black{background-color:#222;}
.Orange{background-color:#f26419;}
*/


	#rand , #colorId , #symbolId {
	border: 2px solid whitesmoke;
  border-radius: 218.3px;
  margin: 20px;
  width: 65px;
  height: 65px;
  vertical-align: middle;
}
   #rand select:hover option:hover {
    background-color: transparent;
    color: white;
}

#rand.Green {
	background-color: #42a147;
}
#rand.Red, .Red{background-color: #e63935; color: black; margin: 20px;}
#rand.White, .White {background-color: #fff; color: black; margin: 20px;}
#rand.Blue, .Blue {background-color:#3e4da2; color: whitesmoke;margin: 20px;}
#rand.Green, .Green {background-color:#42a147; color: black; margin: 20px;}
#rand.Yellow, .Yellow {background-color:#fcd440;color: black; margin: 20px;}
#rand.Purple, .Purple {background-color:#823c95; margin: 20px;}
#rand.Pink, .Pink {background-color:#ffa5a5; color: black; margin: 20px;}
#rand.Black, .Black {background-color:#252525; color: whitesmoke;}
#rand.Orange, .Orange {background-color:#f7991d; color: black; margin: 20px;}
#rand.Grey, .Grey {background-color:#898989; color: black; margin: 20px;}
#rand.Red option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}



/*neue  Version songedit 120325*/

#editForm {
	font-size: 0.9rem;
	border-top: 2px solid whitesmoke;
	padding: 10px;
}
#editForm :hover{

	background-color: #232323;
}

.edit {
	background-color: #3b3a39;
	/*padding: 10px;*/
	margin: 10px;

}

.editData .label {
	display: block;
	padding: 5px;
	color: whitesmoke;
	font-size: .8em;
}

.editData .input.dropdown {
	font-size: 1.2rem;
}


.editAjax {

		display: flex;
		background-color: #3b3a39;
	  margin: 10px;
}

.edit.title {
	margin: 2px;
	padding: 5px;
}

.input.order {
	max-width: 39.5px;
	font-size: 1.1rem;
}


.edit .input.artist {
	margin: 0;
}

.submitData {
	text-align: center;
}

.input.button.green {
	background-color: darkgreen;
	max-width: 45px;
}

.input.button.red {
	background-color: darkred;
	max-width: 45px
}

.button.delete {
	padding: 15px;
	background-color: #500505;
	border: 2px solid red;
	color: brown;
	min-width: 20px;
}

.Farbe {
	height: 50px;
	min-width: 50px;
	margin: 10px;
	padding: 5px;
	border-radius: 10px;
	border: 2px solid whitesmoke;
	vertical-align: middle;
	display: inline-block;
  text-align: center;
}



.Symbol {
	height: 50px;
	min-width: 50px;
	margin: 10px;
	padding: 5px;
	border-radius: 10px;
	border: 2px solid whitesmoke;
	display: inline-block;
	text-align: center;
	font-family: symbol;
	font-size: 2.0rem;
}


/*mymusic neues layout*/
.hideMeAlbum, .hideMeSongs {
	display: none;
}



#editAll {
	border: 1px solid whitesmoke;
	background-color: darkred;
}

.editData {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}


.edit.dropdowns {
	display: contents;
}


.data {
	display: flex;
	flex-direction: row;
}

@media screen and (max-width: 500px) {
	 .data {
		flex-direction: column;
			}
	

}

@media screen and (max-width: 500px) {
		.data.input {
			margin: 2px;	
	}
}

.data.input, .data.Farbe {
	flex: 1;
	margin: 2px;
}

.data .input {
	margin: 2px;
	font-size: 1.3rem;
}


.data .input {
	background-color: transparent;
	/*margin: 1.0em;*/
	padding-top: 6px;
	flex: 1;
}

.input.status {
	color: red;
}

.input.status.2  {
	color: green;
}

.center {
flex: 1;
  text-align: center;
}


.right {
flex: 1;
  text-align: right;
}


.input.time {
	color: darkorange;
font-size: 1.1rem;
}

.input.artist {
	color: steelblue;
	font-size: 1.4rem;
}
.input.title {
	color: wheat;
	font-size: 1.4rem;
}
.input.small {
	color: #c38433;
	font-size: 1.1rem;
}

.input.albumTitel {
	color: darkkhaki;
	font-size: 1.4rem;
}
.input.facts {
	color: bisque;
	font-size: 1.1rem;
}

.input.genre {
	color: #e5cfa7;
	font-size: 1.4rem;
}

.input.titleAjax {
	min-width: 250px;
	font-size: 1.4rem;
}

.input.timeAjax {
	max-width: 49.9px;
	font-size: 1.1rem;
}

.edit .input.artist {
	margin-top: auto;
	margin-bottom: auto;
	font-size: 1.4rem;
}

.editData .label {
	display: block;
	padding: 10px auto;
	padding: 5px;
	color: whitesmoke;
	font-size: .8em;

}


.show.album {
	background-color: #081d2f;
}

.show.songs {
	background-color: #1f2c37;
}


#hideShowSongs {
	background-color: steelblue;
}
/*selectColor*/

.selectColor {
	padding: 10px 20px;
	margin-left: 10px;
	border-radius: 300px;
}


/*RADIOBUTTONS STATUS*/

.radioButtons {
	display: flex;
	justify-content: space-around;
	align-content: center;
	padding: 10px;
	margin: 10px auto;
	border: 4px solid #5d1717;
	box-sizing: border-box;
}



/*SYMBOLS/LETTER*/




#rand1, #symbolId {
	border: 2px solid darkred;
	padding: 9.3px;
	font-size: 2.4rem;
	border-radius: 300px;
	background-color: #395198;
	color: whitesmoke;
	font-family: symbol;
	width: 65px;
  height: 65px;
}

.NPR_1 {
	text-align: center;
	padding: 0.8rem;
}

#NPR {
	display: flex;
	justify-content: center;
	align-items: center;
}

#rand1 .select {
	color: whitesmoke;
}

#symbolId .select {
	color: blue;
}

.trackPlayOptions {
	flex: 1;
	padding-top: 10%;
	padding-left: 15px;
}

/*PLAYLIST in NowPlayingBar*/

#rand3 {
	background-color: #333;
}

#rand3 option {
	color: whitesmoke;
	background-color: #333;
	font-size: 1.5rem;
}

.optionsBarMenu {
	border: 2px solid whitesmoke;
  border-radius: 300px;
  margin-bottom: 15px;
}

.optionsBarMenu {
	background-color: transparent;
}

.friendsform {
	display: flex;
	border: 2px solid;
	margin: 25px;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	padding: 25px;
}	


.bordname {
	font-size: 1.9rem;
	padding: 5px;
	/*border: 1px solid green;*/
}

.status {
	padding-bottom: 20px;
}

.Photo {
	max-width: 400px;
	
}

.thumbnail {
	width: 46px;
}

.portrait {
	width: auto;
	height: 240px;
	max-width: 100%;
}

.friendstext {
	color: orangered;
	border: 1px solid #f8f7f7;
	padding: 29.4px;
	background-color: transparent;
	
}

.container.user {
	/*display: flex;*/
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	max-height: 100%;
}

.userInfo {
	background-color: transparent;
	width: 400px;
	height: 150px;
	max-width: 90%	;
	margin: auto;
}

.userInfoMail {
	background-color: transparent;
	font-size: 1.2rem;
	padding: 10px 0;
	text-align: center;
	margin: 30px 5px;
}	

.userInfoWeb {
	padding-top: 20px;
	color: lightblue;
	font-size: 1.2rem;
}

.oldPassword0, .newPassword1, .newPassword2 {
	color: whitesmoke;
	background-color: transparent;
	padding: 5px;
	font-size: 1.1rem;

}

.webUpdate {
	background-color: transparent;
	font-size: 1.2rem;
	padding: 10px 0;
	text-align: center;
	margin: 30px 5px;
}

/*reset password*/

.input[type="text"],
.input[type="email"],
.input[type="password"] {

	background-color: transparent;
	margin: 10px;
	padding: 10px;
	font-size: 1.1rem;
  text-align: center;
}