/* CSS for styling the player */

   .blue{
      background-color: #ADD8E6;
   }

   .green{
      background-color: #00FF7F;
   }

	#finalTopFive ol {
	    list-style-position: inside; /* Numbers inside the content box of the list item */
	    padding-left: 0; /* Remove default left padding to align with the content */
	}

	#finalTopFive {
		/* Add your specific styles for the <ul> element here */
		margin: 0; /* Remove default margin */
		padding: 3em 5em 0 5em; /* Remove default padding */
		text-align: left; /* Align the list items to the right */
	}

	#finalTopFive li {
		/* Add your specific styles for the <li> elements here */
		font-size: 1.5em; /* Set the font size to em4 */
		
	}


	.sortable-list {
		list-style-type: none;
		padding: 0;
		width: 95%;
		margin: 0 auto;

	}

	.sortable-list li {
		background-color: lightgray;


		cursor: grab;
		border: 1px solid gray;
		border-radius: 5px;
	}

	.sortable-list li.sortable-chosen {
		background-color: lightblue;
	}

	body {
		font-family: 'lato', sans-serif;
		justify-content: center;
		align-items: center;
		height: 100vh;
		margin: 0;
		font-size: 11px;
	}

	.player {
		width: 500px;
		margin: 0 auto;
	}


	.player_controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		background-color: #fff;
		border-style: solid;
		border-color: #ddd;
		border-radius: 5px;
		margin-bottom: 10px;
	}




     /* .player_controls button {
        background-color: #4CAF50;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 18px;
        cursor: pointer;
	}
	
	.player_controls button:hover {
        background-color: #3e8e41;
        } */

        .action-btn {
        	background-color: #fff;
        	border: 0;
        	color: #dfdfdf;
        	font-size: 18px;
        	cursor: pointer;
        	padding: 10px;
        	margin: 0 20px;
        }

        .action-btn-big {
        	color: #cdc2d0;
        	font-size: 30px;
        }

        .action.btnLfocus {
        	outline: 0;
        }



        .player_title {
        	text-align: center;
        	font-size: 22px;
        	margin-bottom: 10px;
        }

        .progress_bar {
        	height: 10px;
        	background-color: #ddd;
        	position: relative;
        	cursor: pointer;
        }

        .progress_bar_filled {
        	height: 100%;
        	background-color: #a9a9a9;
        	position: absolute;
        	top: 0;
        	left: 0;
        }

        .musicplayer{
        	width: 60%;
        	margin: 0 auto 4em auto;
        	justify-content: center;
        	align-items: center;
        }

        .image-container{
        	float: left;
        	margin: 0 0 0 25%;
        }



        .container{
        	display: flex;
        	flex-direction: row;
        	justify-content: center;
        	align-items: center;
        }


        .playlist_songtitle{
        	font-size: 1.2em;
        	font-weight: bold 
        }

        .playlist-artistname{
        	text-align: center;
        	font-size: 0.8em;
        }

        input[type="checkbox"] {
        	width: 25px;
        	height: 25px;
        	transform: translateY(4px); /* nudge the checkbox 2 pixels down */

        }
        .title-size{
        	font-size:4em;
		margin-bottom: 0.1em;
        }

	.title-text{
		margin: 0 1em 1em 1em;
	}

        .play-btn {
        	position: relative;
        	width: 30px; /* Adjust the width to your preference */
        	height: 30px; /* Adjust the height to your preference */
        	border-radius: 50%;
        	background-color: #fff;
        	border: none;
        	margin: 0 25px;
        	padding: 0;
        	cursor: pointer;
        	transform: translateY(4px);
        }

        .play-icon {
        	width: 25px;
        	height: 25px;
        	pointer-events: none;
        }

        .btn-vote-on-this-song{
        	background-color: #cccccc;
        	color: black;
        	border: none;
        	padding: 10px 20px;
        	border-radius: 10px;
        	font-size: 15px;
        	cursor: pointer;
        	margin: 10px 0 0 0;
        }

        .playlist-container{
        	width: 70%;
        	margin: auto;
        	justify-content: center;
        	align-items: center;
        }

        .checkbox-container {
        	flex-grow: 1; /* This will make the checkbox-container take all available space */
        	/* You can add additional styling as needed */
        	display: inline;
        	cursor: pointer;
        }

        .checkbox {
        	cursor: pointer;
        	width: 25px;
        	height: auto;
        }



        .info-container {
        	width: 80%;
        	/* You can add additional styling as needed */
        	display: inline;
        }

        .volume-wrapper {
        	display: block; /* Show the volume slider on larger screens */
        }


        .buttons {
        	justify-content: center;
        	align-items: center;
        	margin: 1.5em auto 1.5em auto;
        	text-align: center;
        }


        .submit-button {
        	background-color: #4CAF50; /* Green background color */
        	color: white; /* Text color */
        	padding: 10px 20px; /* Padding around the text */
        	font-size: 16px; /* Font size */
        	border: none; /* No border */
        	cursor: pointer; /* Cursor style on hover */
        	border-radius: 5px; /* Rounded corners */

        }


        .input-field {
        	margin: 1em 0;
        	text-align: center; 
        }

        input[type="text"],
        input[type="email"] {
        	width: 30%; /* Adjust the width as needed */
        	padding: 10px; /* Padding around the text */
        	font-size: 1em; /* Font size */
        	border: 1px solid #ccc; /* Add a border for a clearer distinction */
        	border-radius: 8px; /* Rounded corners */
        	margin: 1em 0 0 0;
        }

        .category-container {
        	margin: 0 auto;
        	text-align: center;
        }


        /* Styles for two-column layout using float */
        .two-column-list {
        	list-style: none;
        	margin: 0;
        	padding: 0;
        }

        .two-column-list li {
        	float: left;
        	width: 50%; /* Two columns - each item takes 50% width */
        	box-sizing: border-box;
        	padding: 5px;
        	border-bottom: 1px solid lightgrey;
        	border-right: 1px solid lightgrey;
        }

        /* Clear float after every 2 items to create a new row */
        .two-column-list li:nth-child(2n+1) {
        	clear: left;
        }

        .controls-container {
        	float: right;
        	width: 60%;
        }

        .clear-floats {
        	clear: both; /* Clear both left and right floats */
        }


        .popup-container {
        	display: none;
        	position: fixed;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */

        	justify-content: center;
        	align-items: center;
        	z-index: 9999; /* Ensure the popup appears above other content */
        }

        /* Styles for the popup content */
        .popup-content {
        	background-color: #fff;
        	padding: 20px;
        	border-radius: 5px;
        	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        	text-align: center;
        	margin: 0 auto; /* Center horizontally */
        	font-size: 2em;
        }

        #main-container {
        	padding-bottom: 20em;
        }

        #cover{
        	width: 100%;
        	height: 100%;
        	object-fit: cover; /* Maintain aspect ratio and cover the container */
        	transform-origin: center; /* Set the center as the rotation point */
        	transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
        }

        .round-picture-container {
        	width: 150px; /* Adjust this value to fit your image size */
        	height: 150px; /* Adjust this value to fit your image size */
        	overflow: hidden;
        	border-radius: 50%; /* Creates a round shape */
        	
        }



        .round-picture-container.paused {
            animation-play-state: paused; /* Pause the animation when the 'paused' class is present */
        }


        @keyframes rotate{
        	from{ transform: rotate(-360deg); }
        	to{ transform: rotate(360deg); }
        }




        #overlay {
        	position: fixed;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	background-color: white;
        	z-index: 9999;
        	display: none;
        }



        .checkedInTopFive{
        	bottom: 0;
        	width: 100%;
        	background-color: #f2f2f2;
        	padding: 20px;
        	box-sizing: border-box;
        	z-index: 9999;
        }

        .checkedInTopFive-container {
        	position: fixed;
        	left: 0;
        	bottom: 0;
        	width: 100%;
        	background-color: #404040;
        	padding: 20px;
        	box-sizing: border-box;
        	display: none;
        	box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.5); /* Add shadow on the top */
        }


        .custom-popup {
        	display: none;
        	position: fixed;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	background-color: rgba(0,0,0,0.5);
        }

        .custom-popup-content {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	width: 30%;
        	transform: translate(-50%, -50%);
        	background-color: white;
        	padding: 5px;
        	border-radius: 8px;
        	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        	text-align: center;
        	z-index: 9999;
        }

        .custom-close {
        	position: absolute;
        	top: 0px;
        	right: 5px;
        	font-size: 2em;
        	cursor: pointer;
        }

        input {
        	margin-bottom: 10px;
        }


        .triangle_down {
        	width: 0;
        	height: 0;
        	border-left: 15px solid transparent;
        	border-right: 15px solid transparent;
        	border-top: 15px solid #F8F8F8;
        	font-size: 0;
        	line-height: 0;
        	margin: 0 auto;
        }

        .triangle_down:hover {
        	border-top: 20px solid #F8F8F8;
        	border-left: 20px solid transparent;
        	border-right: 20px solid transparent;
        }

        .triangle_up {
        	width: 0;
        	height: 0;
        	border-left: 15px solid transparent;
        	border-right: 15px solid transparent;
        	border-bottom: 15px solid #F8F8F8;
        	font-size: 0;
        	line-height: 0;
        	margin: 0 auto;
        }

        .triangle_up:hover {
        	border-bottom: 20px solid #F8F8F8;
        	border-left: 20px solid transparent;
        	border-right: 20px solid transparent;
        }

        #countDiv{
        	font-size: 1.5em;
        	border: 1px solid grey;
        	padding: 0.5em;
        }


        #topFiveUlList {
        	-webkit-column-count: 1; /* Display the playlist in a single column on mobile */
        	-moz-column-count: 1;
        	column-count: 1;
        	column-gap: 0; /* Remove column gap to make it a single column */
        }

        #topFiveUlList li {
        	margin-bottom: 0.5em; /* Increase the margin to create more spacing between items */
        	padding-left: 0; /* Remove left padding for better alignment */
        	text-indent: 0; /* Remove negative text-indent */
        	display: flex;
        	font-size: 3em;
        	list-style: none;
        }

        .fixedDiv {
        	position: absolute;
        	top: -30px;
        	right: 0;
        	width: 200px; /* Adjust the width as needed */
        	background-color: #f0f0f0; /* Background color for the fixed div */
        	text-align: center;
        }

        .sortable-list li {
        	font-size: 3em;
        }



        input[type="text"],
        input[type="email"] {
        	width: 80%; /* Adjust the width as needed */
        	padding: 15px; /* Padding around the text */
        	font-size: 1em; /* Font size */
        	border: 1px solid #ccc; /* Add a border for a clearer distinction */
        	border-radius: 8px; /* Rounded corners */
        	margin-bottom: 0.2em;
        }

        .sortableContainer{
        	margin: 5px;
        }

        .container {
        	margin: 5px;
        }

        .container ul {
        	-webkit-column-count: 1; /* Display the playlist in a single column on mobile */
        	-moz-column-count: 1;
        	column-count: 1;
        	column-gap: 0; /* Remove column gap to make it a single column */
        	font-size: 3em;
        }

        .container ul li {
        	margin-bottom: 2em; /* Increase the margin to create more spacing between items */
        	padding-left: 0; /* Remove left padding for better alignment */
        	text-indent: 0; /* Remove negative text-indent */
        	display: flex;
        }


        .checkbox-container {
        	flex-grow: 1; /* This will make the checkbox-container take all available space */
        	/* You can add additional styling as needed */
        	display: inline;
        	text-align: center;
        }

        .info-container {
        	/* You can add additional styling as needed */
        	display: inline;
        	max-width: 60%;
        	margin: auto;

        }


        .play-icon {
        	width: 30px;
        	height: 30px;
        	pointer-events: none;
        	margin: 0 0 0 0;
        }

        input[type="checkbox"]{
        	margin: 0 0 0 0;
        	width: 2em;
        	height: 2em;
        	cursor:pointer;
        }


        #topFiveUlList {
        	-webkit-column-count: 1; /* Display the playlist in a single column on mobile */
        	-moz-column-count: 1;
        	column-count: 1;
        	column-gap: 0; /* Remove column gap to make it a single column */
        }

        #topFiveUlList li {
        	margin-bottom: 0.5em; /* Increase the margin to create more spacing between items */
        	padding-left: 0; /* Remove left padding for better alignment */
        	text-indent: 0; /* Remove negative text-indent */
        	display: flex;
        	font-size: 1em;
        	list-style: none;
        }




        .volume-wrapper {
        	display: none; /* Hide the volume slider on mobile devices */
        }



        #song-title{
        	font-size: 2em;
        	font-weight: bold;
        }


        .player_title {
        	margin-bottom: 1.5em;
        }

        .submit-button {
        	background-color: #4CAF50; /* Green background color */
        	color: white; /* Text color */
        	padding: 1em 2em; /* Slightly larger padding for mobile */
        	font-size: 4em; /* Larger font size for mobile */
        	border: none; /* No border */
        	cursor: pointer; /* Cursor style on hover */
        	border-radius: 8px; /* Larger border radius for a more rounded look */
        	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle box shadow */
        	margin: 0.5em 0 0.5em 0;
        	width: 85%;
        }

        .input-container {
        	padding: 5em 0;
        	background-color: #F4F4F4;
        }


        .listItem{

        	z-index: 9999;
        	display: flex;
        	align-items: center; /* Center vertically */
        	justify-content: center; /* Center horizontally */
        	height: 100%; /* Full height of the list item */

        }

        .center{
        	text-align: center;
        	margin: 1em 0 2em 0;
        }


        #topFiveUlList .listItem .SongOrder{
        	margin: auto 0;
        	font-size: 2em;
        	background: white;
        	padding: 0.3em;
        	color: black;
        }



        .close {
        	position: absolute;
        	top: 10px;
        	right: 10px;
        	font-size: 20px;
        	cursor: pointer;
        }

        .sortableContainer{
        	width: 40%;
        	margin: 1em auto;

        }




        /* Style for the Next button */
        #btn_voteForTheseSongs {
        	background-color: #007bff; /* Button background color */
        	color: #fff; /* Text color */
        	border: none; /* Remove button border */
        	padding: 10px 20px; /* Add padding to make the button clickable */
        	font-size: 1.5em; /* Font size */
        	cursor: pointer; /* Change cursor to pointer on hover */
        	border-radius: 5px; /* Rounded corners */
        	display: none;
        	margin: 0 auto;
        }

        /* Style for the Next button on hover */
        #btn_voteForTheseSongs:hover {
        	background-color: #0056b3; /* Darker background color on hover */
        }



        .player_title {
        	margin-bottom: 0.5em;
        }





        .submit-button {
        	background-color: #4CAF50; /* Green background color */
        	color: white; /* Text color */
        	padding: 0.5em 1em; /* Slightly larger padding for mobile */
        	font-size: 1.6em; /* Larger font size for mobile */
        	border: none; /* No border */
        	cursor: pointer; /* Cursor style on hover */
        	border-radius: 8px; /* Larger border radius for a more rounded look */
        	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle box shadow */
        	margin: 0.5em 0 0.5em 0;
        	width: 85%;
        }

        .input-container {
        	padding: 2em 0;
        	background-color: #F4F4F4;
        }

        .custom-close {
        	position: absolute;
        	top: 0px;
        	right: 10px;
        	font-size: 5em;
        	cursor: pointer;
        }

        .playing {
        	background-color: black !important;
        	color: white;
        }



        .category-container {
        	background-color: #1B1212;
        	margin: 0 auto;
        	color: white;
        	text-align: center;
        	display: flex;
        	flex-direction: column; /* Change to column to display as a single column */
        	margin-bottom: 6em;
        }

        .center-button {
        	text-align: center;
        }

        .icon {
        	width: auto; /* Adjust the width as needed */
        	height: 30px; /* Adjust the height as needed */
        	margin-right: 1em; /* Adjust the margin as needed to separate the icon from the text */
        	/* Add other styles if necessary */
        }

        .playlist-container img.icon {
        	display: none;
        }

        #customForm p{
        	font-size: 1.5em;
        	margin: 1em 1.5em 0 1.5em;
        	text-align: left;
        }

        #customForm h1{
        	font-size: 2em;
        	font-weight: bold;
        	margin-top: 2em;

        }

        .repeat-btn{
        	max-width: 100%;  /* Set the maximum width to 100% of the button's width */
        	max-height: 100%; /* Set the maximum height to 100% of the button's height */
        	width: 30px;      /* Set the specific width you desire */
        	height: 30px;     /* Set the specific height you desire */
        }

        #repeat-button {
        	background-color: transparent; /* Set the initial background color */
        	border: none;
        	cursor: pointer;
        }

        #repeat-icon {
        	filter: brightness(80%); /* Set the initial brightness of the image */
        }



        #repeat-button.clicked #repeat-icon {
        	filter: brightness(20%); /* Set the brightness of the image when clicked */
        }

        .artist-name {
            font-size: 60%; /* Adjust the percentage to your preference */
        }
















































        /* Media query for mobile devices */
        @media (min-width: 768px) and (max-width: 1023px) {


        	#customForm p{
        		font-size: 5em;
        		margin: 1em 1em 0.5em 1em;
        		text-align: left;
        	}

        	#customForm h1{
        		font-size: 6em;
        		font-weight: bold;
        		margin-top: 2em;
        	}

        	.checkbox {
        		cursor: pointer;
        		width: 90px;
        		height: auto;
        	}


        	.two-column-list .listItem .info-container.item {
        		max-width: 60%;
        	}

        	.info-container.info-container {
        		max-width: 50%;
        	}

        	.playlist-container img.icon {
        		display: none;
        	}


        	.icon {
        		width: auto;
        		height: 70px;
        		margin-right: 15px;
        	}


        	.play-btn {
        		position: relative;
        		width: 100px; /* Adjust the width to your preference */
        		height: 100px; /* Adjust the height to your preference */
        		border-radius: 50%;
        		background-color: #fff;
        		border: none;
        		margin: 0 1em;
        		padding: 0;
        		cursor: pointer;
        		transform: translateY(4px);
        	}	


        	#finalTopFive {
        		/* Add your specific styles for the <ul> element here */
        		margin: 5em; /* Remove default margin */
        		padding: 3em 5em 0 5em; /* Remove default padding */
        		text-align: left; /* Align the list items to the right */
        	}

        	#finalTopFive li {
        		/* Add your specific styles for the <li> elements here */
        		font-size: 4em; /* Set the font size to em4 */
        	
        	}



        	.custom-popup {
        		display: none;
        		position: fixed;
        		top: 0;
        		left: 0;
        		width: 100%;
        		height: 100%;
        		background-color: rgba(0,0,0,0.5);
        	}

        	.custom-popup-content {
        		position: absolute;
        		top: 50%;
        		left: 50%;
        		width: 90%;
        		transform: translate(-50%, -50%);
        		background-color: white;
        		padding: 5px;
        		border-radius: 8px;
        		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        		text-align: center;
        		z-index: 9999;
        	}

        	.custom-close {
        		position: absolute;
        		top: 0px;
        		right: 5px;
        		font-size: 10em;
        		cursor: pointer;
        	}

        	input {
        		margin-bottom: 10px;
        	}




        	.sortableContainer{
        		width: 100%;
        		margin: 2em auto;

        	}


        	.triangle_down {
        		width: 0;
        		height: 0;
        		border-left: 30px solid transparent;
        		border-right: 30px solid transparent;
        		border-top: 30px solid #F8F8F8;
        		font-size: 0;
        		line-height: 0;
        		margin: 0 auto;
        	}

        	.triangle_down:hover {
        		border-top: 35px solid #F8F8F8;
        		border-left: 35px solid transparent;
        		border-right: 35px solid transparent;

        	}


        	.triangle_up {
        		width: 0;
        		height: 0;
        		border-left: 30px solid transparent;
        		border-right: 30px solid transparent;
        		border-bottom: 30px solid #F8F8F8;
        		font-size: 0;
        		line-height: 0;
        		margin: 0 auto;
        	}

        	.triangle_up:hover {

        		border-bottom: 35px solid #F8F8F8;
        		border-left: 35px solid transparent;
        		border-right: 35px solid transparent;
        	}



    
    


        	#countDiv{
        		font-size: 3em;
        		border: 1px solid grey;
        		padding: 0.5em;
        	}

        	/* Style for the Next button */
        	#btn_voteForTheseSongs {
        		background-color: #007bff; /* Button background color */
        		color: #fff; /* Text color */
        		border: none; /* Remove button border */
        		padding: 10px 20px; /* Add padding to make the button clickable */
        		font-size: 5em; /* Font size */
        		cursor: pointer; /* Change cursor to pointer on hover */
        		border-radius: 5px; /* Rounded corners */
        		display: none;
        		margin: 0 auto;
        	}

        	/* Style for the Next button on hover */
        	#btn_voteForTheseSongs:hover {
        		background-color: #0056b3; /* Darker background color on hover */
        	}

        	.toggleDivCenter{
        		align-items: center;
        		margin: 1em 0 2em 0;

        	}

        	.custom-close {
        		position: absolute;
        		top: 0px;
        		right: 10px;
        		font-size: 10em;
        		cursor: pointer;
        	}














        	.fixedDiv {
        		position: absolute;
        		top: -30px;
        		right: 0;
        		width: 200px; /* Adjust the width as needed */
        		background-color: #f0f0f0; /* Background color for the fixed div */
        		text-align: center;
        	}

        	.sortable-list li {
        		font-size: 3em;
        	}



        	input[type="text"],
        	input[type="email"] {
        		width: 80%; /* Adjust the width as needed */
        		padding: 15px; /* Padding around the text */
        		font-size: 4em; /* Font size */
        		border: 1px solid #ccc; /* Add a border for a clearer distinction */
        		border-radius: 8px; /* Rounded corners */
        		margin-bottom: 0.2em;
        	}

        	.sortableContainer{
        		margin: 5px;
        	}

        	.container {
        		margin: 5px;
        	}

        	.container ul {
        		-webkit-column-count: 1; /* Display the playlist in a single column on mobile */
        		-moz-column-count: 1;
        		column-count: 1;
        		column-gap: 0; /* Remove column gap to make it a single column */
        		font-size: 3em;
        	}

        	.container ul li {
        		margin-bottom: 2em; /* Increase the margin to create more spacing between items */
        		padding-left: 0; /* Remove left padding for better alignment */
        		text-indent: 0; /* Remove negative text-indent */
        		display: flex;
        	}

        	#topFiveUlList {
        		-webkit-column-count: 1; /* Display the playlist in a single column on mobile */
        		-moz-column-count: 1;
        		column-count: 1;
        		column-gap: 0; /* Remove column gap to make it a single column */
        	}

        	#topFiveUlList li {
        		margin-bottom: 0.5em; /* Increase the margin to create more spacing between items */
        		padding-left: 0; /* Remove left padding for better alignment */
        		text-indent: 0; /* Remove negative text-indent */
        		display: flex;
        		font-size: 3em;
        		list-style: none;
        	}

        	.playlist-container{

        		width: 100%;
        		margin: auto;
        		justify-content: center;
        		align-items: center;

        	}


        	.playlist-container ul {
        		-webkit-column-count: 1; /* Display the playlist in a single column on mobile */
        		-moz-column-count: 1;
        		column-count: 1;
        		column-gap: 0; /* Remove column gap to make it a single column */
        		font-size: 3em;
        		margin: 2em 1em 0 1em;
        	}

        	.playlist-container ul li {
        		margin-bottom: 1.5em; /* Increase the margin to create more spacing between items */
        		padding-left: 0; /* Remove left padding for better alignment */
        		text-indent: 0; /* Remove negative text-indent */
        		display: flex;
        	}


        	.play-icon {
        		width: 100px;
        		height: 100px;
        		pointer-events: none;
        		margin: 0 0 0 0;
        	}

        	input[type="checkbox"]{
        		margin: 0 0 0 0;
        		width: 8em;
        		height: 8em;
        		cursor:pointer;
        	}

        	.musicplayer {
        		margin: auto;
        		width: 99%;
        		position: sticky;
        		top: -1px;
        	}

        	.musicplayer.is-pinned {
        		z-index: 999;
        		background-color: white;
        		padding: 3em 0 2em 0;
        		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        	}

        	.action-btn {
        		font-size: 7em;
        	}


        	.action-btn-big {
        		font-size: 9em;
        	}

        	.container {
        		display: flex;
        		flex-direction: column; /* Change to column to display as a single column */
        	}



        	.image-container img {
        		width: 100%; /* Resize the image to fit the container's width */
        		height: auto; /* Maintain the image's aspect ratio */
        	}

        	.image-container {
        		max-width: 500px; /* Set the maximum width for the container */
        		margin: 0 auto; /* Center the container horizontally */
        	}

        	.title-size {
        		font-size: 6em;
        	}


        	.progress_bar {
        		height: 50px;
        	}


        	.checkbox-container {
        		flex-grow: 1; /* This will make the checkbox-container take all available space */
        		/* You can add additional styling as needed */
        		display: inline;
        		text-align: center;
        	}

        	.info-container {
        		/* You can add additional styling as needed */
        		display: inline;
        		max-width: 50%;
        		margin: auto;

        	}

        	/* CSS for desktop and larger screens */
        	/* You can set a specific breakpoint depending on your design and requirements */


        	/* CSS for mobile screens */

        	.volume-wrapper {
        		display: none; /* Hide the volume slider on mobile devices */
        	}



        	#song-title{
        		font-size: 3em;
        		font-weight: bold;
        	}


        	.player_title {
        		margin-bottom: 1.5em;
        	}

        	.submit-button {
        		background-color: #4CAF50; /* Green background color */
        		color: white; /* Text color */
        		padding: 1em 2em; /* Slightly larger padding for mobile */
        		font-size: 4em; /* Larger font size for mobile */
        		border: none; /* No border */
        		cursor: pointer; /* Cursor style on hover */
        		border-radius: 8px; /* Larger border radius for a more rounded look */
        		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle box shadow */
        		margin: 0.5em 0 0.5em 0;
        		width: 85%;
        	}

        	.input-container {
        		padding: 5em 0;
        		background-color: #F4F4F4;
        	}

        	.category-container {
        		background-color: #1B1212;
        		margin: 0 auto;
        		color: white;
        		text-align: center;
        		display: flex;
        		flex-direction: column; /* Change to column to display as a single column */
        		margin-bottom: 6em;
        	}


        	.two-column-list li {
        		float: none; /* Remove float - switches to one-column layout */
        		width: 100%; /* Full width for one column */
        		clear: none; /* Remove the clear property */
        		border: 1px solid #ccc;
        	}



        	.image-container{
        		display:block;
        		float: none;
        		padding: 0 0 3em 0;
        	}

        	.controls-container {
        		display:block;
        		float: none;
        		width: 90%;
        		margin: auto;
        	}

        	.popup-content {
        		font-size: 4em;
        	}

        	input[type="text"],
        	input[type="email"] {
        		margin: 1em 1em 0 1em;
        	}




        	.round-picture-container {
        		width: 500px; /* Adjust this value to fit your image size */
        		height: 500px; /* Adjust this value to fit your image size */
        		
        	}

    

       

        	.playing {
        		background-color: black !important; 
        		color: white;
        	}

        	.listItem{

        		z-index: 9999;
        	}

        	.center{
        		text-align: center;
        		margin: 1em 0 2em 0;
        	}


        	#topFiveUlList .listItem .SongOrder{
        		margin: auto 0;
        		font-size: 2em;
        		color: black;
        	}



        	.close {
        		position: absolute;
        		top: 10px;
        		right: 10px;
        		font-size: 20px;
        		cursor: pointer;
        	}

        	.repeat-btn{

        		width: 100px;      /* Set the specific width you desire */
        		height: 100px;     /* Set the specific height you desire */
        	}













        }