*{
    box-sizing: content-box;
    padding: 0;
    margin: 0;
}
body{
    max-width: 800px;
    margin: auto;
    //min-height: 90vh;
    font-family: Exo2;
    color: var(--fontColor);

}
:root{
  --borderWidth: 9px;
}

#Menu #Log_Out{
    display: none;
    cursor: pointer;
}
#Menu:hover #Log_Out, #Menu:focus #Log_Out{
    display: inline-block;
}
#Menu:hover #UserName{
    display: none;
}
#Upload_Lines{
	--width: 300px;
	position: absolute;
	top: 318px;
	left: 50%;
	margin-left: calc( -1*( (var(--width)/2) + var(--borderWidth) ) );
	border: var(--borderWidth) solid var(--fontColor);
	border-bottom: 0px;
	width: var(--width);
	height: 114px;
	border-radius: 6px;
	z-index: -20;
}
form{
    //min-height: 85vh;
    padding-top: 25px;
}
svg{
    position: relative;
    background: yellow;
    top: 0px;
    left:0px;
    width: 10vw;
    height: 10vh;

}
#DropAreas{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
form h3 {
	margin-top: 15px;
	margin-bottom: 50px;
	text-align: center;
	//padding: 2vh 1vw;
	font-size: 30px;
	background: #FFF;
	display: block;
	width: 170px;
	position: relative;
	left: 50%;
	margin-left: calc(-170px/2);
}
#DropArea_A, #DropArea_B{
    display: inline-flex;
    border-radius: 500px;
    width: 120px;
    height: 120px;
    background-repeat:no-repeat;
    background-size:contain;
  //  outline: 3px dotted red;
    border: 0px;
}
#DropArea_A{
    background-image: url('../img/Button_A.png');
}
#DropArea_B{
    background-image: url('../img/Button_B.png');
}
#Track_A, #Track_B{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
}
#DropArea_A .postUpload, #DropArea_B .postUpload{
    display: none;
}
#DropArea_A.SongUploaded .postUpload, #DropArea_B.SongUploaded .postUpload{
    display: block;
}
#DropArea_A.SongUploaded .preUpload, #DropArea_B.SongUploaded .preUpload{
    display: none;
}
.postUpload img{
    width: 30px;
}
#Song_Titles{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 20px;
}
#Track_A_Song_Title, #Track_B_Song_Title{
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#Button_div{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0px 10px;
}

.button_wrapper{
 // display:inline-block;
 display: none;
  margin: auto;
  padding: 15px 15px;
  background-image: url('../img/Upload_Dashed_Boarder.png');
  background-size: 100% 100%;
}
#Button_div button{
    display:block;
    font-family: inherit;
    background-color: #000;
    color: #FFF;
    font-size: 25px;
    text-transform: uppercase;
    padding: 7px 15px;
    border: 0px;
    cursor: pointer;
}
#Button_div button#Show_PopUp{
    background-color: red;
}
#button_wrapper_Show_PopUp{
    display: none;
}
#button_wrapper_Show_PopUp.show{
    display:inline-block;
}
#button_wrapper_Upload.show{
    display:inline-block;
}
#QR_Codes{
  text-align: center;
}
#QR_Codes>h3{
  margin: 20px;
}
#Codes{
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
#Codes>div{
  width: 300px;
  border: 8px solid black;\
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 10px;
  padding: 10px;
}
#Codes div div{
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
}