<!--music player-->

    #musicplayer{
        background-color: black; /* background color of player */
        color: white;
        width: 100%; /* width of the player */
	border: none;
    }
 
    .songtitle{
	text-align: center;
        display:block;
	background-color: black;
	color: white;
	font-weight: bold;
	font-family: verdana;
	font-size: 9px;
	border: none;
    }
 
    .controls{
        font-size:16px !important; /* size of controls */
        background-color: black; /* background color of controls */
	color: white;
        text-align:center;
        width:40%;
	margin-left: auto;
	margin-right: auto;
border: none;
    }
 
    .controls td{
	padding-top: 5px;
	border: none;
	background-color: black;
	color: white;
    }
 
    .seeking{
	border: none;
        background-color: black; /* background color of seeking bar */
        display:flex;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 5px;
        padding-top: 5px; /* padding around seeking bar */
    }
 
    .current-time{
        padding-right:5px;
	background-color: black;
	border: none;
	color: white;
    }
 
    .total-duration{
        padding-left:5px;
	background-color: black;
	border: none;
	color: white;
    }
 
 
    i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
        color: #f095a6; /* color of controls */
    }
    
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
        background-color: black; /* background color of seeking bar - make the color same as .seeking background color */
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    /* settings for chrome browsers */
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        background: white /* color of seeking track */
    }
    
    input[type=range]::-webkit-slider-thumb {
        height: 10px; /* height of seeking square */
        width: 10px; /* width of seeking square */
        border-radius: 5px; /* change to 5px if you want a circle seeker */
        background: #ed3075; /* color of seeker square */
        -webkit-appearance: none;
        margin-top: -4.5px; 
    }
    
    /* settings for firefox browsers */
    input[type=range]::-moz-range-track {
        width: 100%;
        height: 2px; /* thickness of seeking track */
        background: white; /* color of seeking track */
    }
    
    input[type=range]::-moz-range-thumb {
        height: 10px; /* height of seeking square */
        width: 10px; /* width of seeking square */
        border-radius: 5px; /* change to 5px if you want a circle seeker */
        background: #ed3075; /* color of seeker square */
        border:none;
    }