*{
	font-family: 'Poppins', sans-serif;
}
.artistheader{
	width:100%;
	/* max-width:1024px; */
}
#mainContent{
	/* padding-top:10px; */
	padding-bottom:100px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fefcea+0,f1da36+66,ffa500+97 */
	background: rgb(254,252,234); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,252,234,1) 0%, rgba(241,218,54,1) 66%, rgba(255,165,0,1) 97%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(254,252,234,1) 0%,rgba(241,218,54,1) 66%,rgba(255,165,0,1) 97%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.8) 66%,rgb(22,22,22) 97%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#ffa500',GradientType=0 ); /* IE6-9 */
	height:auto;
	height:auto!important; 
	min-height:600px;

}
.innerWrapperArtist{
	margin:0;
	padding:0;
	width:80.5%;
}
.innerWrapperAlbum{
	width:50%;
}
body{
	/*background-image:url("../images/audience.jpg");*/
	background-size:cover;
	background-attachment:fixed;
	background-position:top;
	overflow-x:hidden;
}

.shadow{
	-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}

.rightSection h2{
	color:black;
	font-size:44px;
}
.albumtext{
	text-transform:uppercase;
	letter-spacing:4px;
	color:rgb(22,22,22);
}
.künstlertext{
	text-transform:uppercase;
	letter-spacing:4px;
	color:rgb(22,22,22);
}
.logo{
	height:100%;
	width:100%;
	/* padding-left:15px; */
	/* text-align:center; */
}
.logo img {
	width:50px;
}
.navItem img{
	vertical-align:middle;
}

.userDetailsWrapper{
	/* width:50%; */
	/* height:auto; */
	height:100%;
	display:block;
	width:100%;
	/* padding-bottom:30px; */
}
.smallbutton{
	width:50px;
}

.paypal-products div{
	position:absolute;
	display:inline;
}

.overflowhidden{
	overflow:hidden;
}
.padding-easy{
	padding-left:2%;
}
.newSongArea{
	border:1px dotted orange;
	padding:5%;
	margin:2%;
}
#inputContainer .errorMessage{
	color:#FFD800;
}
.bandDetails{
	float:left;
	display:inline;
	width:46%;
}
.userDetails{
	float:left;
	display:inline-block;
	width:46%;
	position:relative;
}
.pictureDetails{
	float:left;
	display:inline;
	width:46%;
	text-align:center;
	padding:20px;
}
.profilepicture{
	width:250px;
	height:250px;
	border-radius:50%;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.image{
    display: none;
	width:1px;
	height:1px;
}

#profileImage
{
    cursor: pointer;
}

#profile-container {
	background-color:rgba(0,0,0,0.8);
	/* width:300px; */
    overflow: hidden;
	text-align:center;
	margin:0 auto;
}
.navbar-name{
	color:#FFE86A;
	/* padding-left:5px; */
}

.playlistsContainer{
	height:100%;
}

.searchwrapper{
	height:100%;
}

.tracklistContainer{
	padding:0 22px;
}
.tracklistrow{
	border-top:1px solid #404040;
	border-bottom:1px solid #404040;
}
.tracklistRowEdit {
    /* height: 240px; */
	height:auto;
}
.tracklistRow .trackInfo{
	width:60%;
	float:left;
}
.tracklistRow .trackOptions input{
	width:40px;
	height:40px;
	display:inline;
	float:left;
	text-align:center;
}
.paypalproducts{
	display:block;
	padding:0px;
	margin:0px;
	margin:0 auto;
	height:100%;
	padding-top:5px;
}
.paypalproducts .donation{
	display:inline-block;
	width:calc(98%/6);
	position:relative;
	text-align:center;
	/* padding:10px 10px; */
	padding:0px 8px;
}

.color-gray{
	color:#bfbfbf!important;
}
.color-black{
	color:#000000!important;
}
.color-white{
	color:#ffffff!important;
}

.hidden{
	display:none!important;
}
.visible{
	display:inline!important;
}
.visible-block{
	display:block!important;
}
.visible-inline-block{
	display:inline-block!important;
}
.addSongInformation{
	margin:5% 2%;
	position:relative;
	display:inline-block!important;	
}
.addSongInformation .songInfo{
	background:rgba(0,0,0,0.1);
	border:none;
	font-size:2em;
	width:100%;
}
.addSongInformation label{
	color:#8C8B8C;
}

.container{
	height:auto;
	position:relative;
}

/* The Modal (background) */
.cookieModal{
	display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.cookieModal-content {
    background-color: rgba(0, 0, 0, 0.84);
    margin: 2% auto; /* 5% from the top and centered */
    padding: 20px;
    border: 1px solid white;
    width: 90%; /* Could be more or less, depending on screen size */
}
.cookieModal-content p{
	color:gray;
}
.cookieModalpadding{
	padding:0px;
	font-size:20;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: rgba(0, 0, 0, 0.84);
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid rbg(0, 0, 0);
    width: 60%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.modalpadding{
	padding:40px;
	font-size:20;
}

.editbandtextfield{
	background:rgba(0,0,0,0.8);
	font-size:inherit;
}
.showbandtextfield{
	border:none;
	background:none;
	font-size:inherit;
}

/* input:-webkit-autofill, */
/* input:-webkit-autofill:hover, */
/* input:-webkit-autofill:focus, */
/* input:-webkit-autofill:active { */
    /* transitigridViewInfoon: background-color 5000s ease-in-out 0s; */
    /* -webkit-text-fill-color: #fff !important; */
/* } */
input:-internal-autofill-selected {
background:rgba(0,0,0,0.1)!important;
}
.margin-top{
	margin-top:10px;
}

.tracklist{
    /* padding-bottom: 50px;*/  /* #JD 16.05.20 - to gain the margin for the uploadinfo */ 
}

.uploadInfoWrapper{
	width:100%;
	height:auto;
	display:inline-block;
}

.info{
	border: 1px dotted green;
    padding: 5%;
    margin: 2%;
	font-size:24px;
}

.newAlbum label, input{
	display: inline-block;
    position: relative;
	width:100%;
	padding-left:5px
}
.input-label{
	color:#8C8B8C;
	float: left;
    width: 225px;
    font-size: 14px;
    text-transform: uppercase;
}
.input-transparent{
	background: rgba(0,0,0,0.1);
    border: none;
    font-size: 1.5em;
	width:80%;
	padding:5px;
	/* color:#FFFFFF; */
}
.input-transparent-song{
	background: rgba(0,0,0,0.0);
    border: none;
}
.input-transparent-song-edit{
	background: rgba(255,255,255,0.2);
	width:75%;
	border: none;
}
.editAlbum label, input{
	display: inline-block;
    position: relative;
	width:100%;
	padding-left: 5px;
}
.addAlbum{
	padding:5% 0%;
	display:block;
}
.addAlbum input{
	background:url("../images/addAlbum.png");
	background-size: cover;
	background-repeat:no-repeat;
	width:50px;
	height:50px;
	/* width:55%; */
	/* height:17.5%; */
	margin-bottom:35px;
	cursor:pointer;
	border:none;
}
.albumInformation{
	/* width:81%; */
	width:100%;
	height:auto;
	padding-top:3%;
}
.albumInformationWrapper{
	clear:both;
	display:inline-block;
	position:relative;
	width:60%;
}
.albumPictureWrapper{
	clear:both;
	float:left;
	display:inline-block;
	position:relative;
	width:40%;
	text-align:center;
}
.albumPicture{
	width:60%;
	/* cursor:pointer; */
}
.newAlbum{
	/*padding:15% 0%; */
	padding-bottom:15%;
	width:81%;
}
.newAlbum select{
	width:50%;
	/* margin-top:10px; */
}
.newAlbumInput{
	/* margin-top:10px; */
	padding:5px;
}
.newAlbumButtonBar{
	padding-top:20px;
}
.editAlbum{
	/*padding:15% 0%; */
	padding-bottom:6%;
	/* width:81%; */
	width:100%;
}
.editAlbum select{
	width:50%;
	/* margin-top:10px; */
}
.editAlbumInput{
	/* margin-top:10px; */
	padding:5px;
}
.albumYear{
	width:50%;
	margin:0 auto;
	padding:5px;
	/* margin-top:10px; */
	/* float:left; */
}
.editAlbumYear{
	width:100%;
	margin:0 auto;
	padding:5px;
	margin-bottom:5px;
	float:left;
}
.editAlbumButtonBar{
	width:100%;
	height:50px;
	margin:3px auto;
	text-align:center;
}
.editAlbumButton {
	margin-top:1px;
}
.saveEditedAlbum, .saveSong {
	margin-top:3px;
	background:url("../images/save.png");
	background-size: cover;
	background-repeat:no-repeat;
	border:none;
	width:50px;
	height:50px;
	position:relative;
	display:inline;
	cursor:pointer;
	/* float:left; */
	clear:both;
}
.saveEditedAlbum{
	/* margin-left:30%; */
}
.deleteButton{
	margin-top:3px;
	background:url("../images/delete.png");
	background-size: cover;
	background-repeat:no-repeat;
	border:none;
	width:50px;
	height:50px;
	position:relative;
	display:inline;
	cursor:pointer;
	/* float:left; */
}
.editSongButton{
	height:auto;
	width:auto;
	background:url("../images/edit.png");
	background-size: contain;
	background-repeat:no-repeat;
	border:none;
	position:relative;
	display:inline;
	cursor:pointer;
	float:left;
}
.saveSongButton{
	height:auto;
	width:auto;
	background:url("../images/save.png");
	background-size: contain;
	background-repeat:no-repeat;
	border:none;
	position:relative;
	display:inline;
	cursor:pointer;
	float:left;
}
.deleteSongButton{
	height:auto;
	width:auto;
	background:url("../images/delete.png");
	background-size: contain;
	background-repeat:no-repeat;
	border:none;
	position:relative;
	display:inline;
	cursor:pointer;
	float:left;
}
.cancelSongButton{
	height:auto;
	width:auto;
	background:url("../images/cancel.png");
	background-size: contain;
	background-repeat:no-repeat;
	border:none;
	position:relative;
	display:inline;
	cursor:pointer;
	float:left;
}
.cancelButton{	
	margin-top:3px;
	background:url("../images/cancel.png");
	background-size: cover;
	background-repeat:no-repeat;
	border:none;
	width:50px;
	height:50px;
	position:relative;
	display:inline;
	cursor:pointer;
	/* float:left; */
}
.chooseFileButton{
	margin: 2% 2%;
	border: 2px solid gray;
	color: gray;
	padding: 8px 20px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: bold;	
	position:relative;
}
.white-background{
	background-color: white;
}
.green-background{
	background-color: lightgreen;
}
.editAlbumTitle{
	color:black;
	background:rgba(255,232,106,1);
	padding:5px;
	color:black;
	width:100%;
	margin-bottom:5px;
	float:left;
}

.editAlbumBar input{
	display:inline;
}
.genreBar label, select{
	display:block;
}
.addSong input{
	background:url("../images/addAlbum.png");
	background-size: cover;
	background-repeat:no-repeat;
	width:50px;
	height:50px;
	/* width:55%; */
	/* height:17.5%; */
	margin-bottom:35px;
	cursor:pointer;
	border:none;
}
.song-padding{
	margin-top:15px;
}
.button-margin{
	margin-bottom:50px;
}
.newSongInput{
	display:block;
	position:relative;	
	color:black;
}
.select{
	/* width:100%!important; */
	padding:5px;
	width:100%;
}
.select option{
}
.editAlbumInput{
	height:inherit;
	width:inherit;
	z-index:2;
	width:100%;
}
.uploadSongBar label, input{
	display:inline-block;
	position:relative;
	/* height:30px; */
}
.uploadSongBar label{
	float:left;
	width:225px;
	font-size:22px;
	text-transform:uppercase;
}
.uploadSong{
	background:url("../images/upload.png");
	background-size: cover;
	background-repeat:no-repeat;
	width:50px;
	height:50px;
	/* width:55%; */
	/* height:17.5%; */
	/* margin-bottom:35px; */
	cursor:pointer;
	border:none;
}
.uploadSongInput{
	margin-top:3%;
	width:15%;
}
.editSongBar{
	margin-top:10px;
	width:100%;
	height:auto;
}
.custom-row{
	display:block;
	/* width:100%; */
	height:4%;
	position:relative;
}
.custom-row .newSongInput{
	margin-top:5%;
}
.register-logo{
	text-align:Center;
}

.button-disabled{
    color: white; 
    margin-bottom: 10px;
    background-color: gray;
    font-weight: 500;
    letter-spacing: 2px;
    border: 4px solid #FFFF66;
    border-radius: 500px;
    padding: 15px;
    /* min-width: 130px; */
	min-width:100px;
	background-color: #FFC000;
}
.buttonColor-green{
	background:green;
}
.buttonColor-gray{
	background:gray;
	border: 1px solid black;
	color:black;
}
.buttonAllSongs{
	margin-left:15px;
	margin-top:10px;
	display:inline-block;
}

.align-right{
	position:absolute;
	right:5%;
}



/* START BOX onhover */
.hvrbox * {
	box-sizing: border-box;
}
.hvrbox {
	position: relative;
	display: inline-block;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}

.hvrbox-background img {
	/* margin-top:15px; */
	/* width:100%; */
	height:100%;
}
.hvrbox .hvrbox-layer_bottom {
	display: block;
	z-index:0;
}
.hvrbox .layer-absolute{
	position:absolute;
	height:100%;
}
.hvrbox .hvrbox-layer_middle {
	position:relative;
	display: block;
	z-index:1;
	height:25%;
	/* margin-top:35px; */
	text-align:center;
	opacity:0.6;
}
.hvrbox-layer_middle img{
	max-width:60%;
}
.hvrbox .hvrbox-layer_top {
	opacity: 0.8;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 15px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
	display: flex;
    justify-content: center;
    align-items: center;
	/* margin-top:15px; */
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top{
	opacity: 1;
}
.hvrbox .hvrbox-text {
	text-align: center;
	font-size: 18px;
	display: inline-block;
	position: absolute;
	top: 70%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	padding-top:30px;
}
.hvrbox .hvrbox-text_mobile {
	font-size: 15px;
	border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
	border-top: 1px solid rgba(179, 179, 179, 0.7);
	margin-top: 5px;
	padding-top: 2px;
	display: none;
}
.hvrbox.active .hvrbox-text_mobile {
	display: block;
}
/* END BOX onhover */


/* COLLAPSIBLE SIDEBAR NAV START*/
.sidebar {
	height: calc(100% - 140px);
	width: 65px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 50px;
	white-space: nowrap;
	z-index:10;
	background-color:#040404;
	overflow:hidden;
	text-align:center;
}

.sidebar a {
	padding: 4px 4px 4px 14px;
	text-decoration: none;
	font-size: 20px;
	color: #818181;
	display: block;
	transition: 0.3s;
	line-height:1.5em;
	text-align:left;
}

.sidebar a:hover {
	color: #f1f1f1;
}

.sidebar .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

.icon-text {
	/* height:50px; */
	vertical-align:middle;
}

.material-icons {
	padding-bottom: 3px;
}

#main {
	transition: margin-left .5s;
	padding: 16px;
	margin-left: 100px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
	.sidebar {
		padding-top: 15px;
	}
	.sidebar a {
		font-size: 18px;
	}
}
/* COLLAPSIBLE SIDEBAR NAV END */