*, 
*:before, 
*:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
                    box-sizing: border-box;
}

html, 
//body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Segoe UI", "Calibri", sans-serif;
    font-size: 100%;
    color: #3563A8;
    background: #EAEDF1;
    background: -webkit-radial-gradient(circle, #fff, #EAEDF1);
    background:    -moz-radial-gradient(circle, #fff, #EAEDF1);
    background:     -ms-radial-gradient(circle, #fff, #EAEDF1);
    background:               radial-gradient(circle, #fff, #EAEDF1);
}

.dark html, 
.dark body {
    color: #aaa;

    background: #5A5D61;
    background: -webkit-radial-gradient(circle, #888, #5A5D61);
    background:    -moz-radial-gradient(circle, #888, #5A5D61);
    background:     -ms-radial-gradient(circle, #888, #5A5D61);
    background:               radial-gradient(circle, #888, #5A5D61);
}

header, section, footer, aside, nav, main, article, figure { 
    display: block; 
}

.container {
    position: relative;
	top: 5%;
    width: 360px;
	//min-width: 90%;
	height: 550px; 
    margin: 0 auto;
    border-radius: 4px;
	border: solid 5px #CF9A32;
	//scale: 0.7;	
	
	
            //width: 10%;
    //top: -140px;
    //scale: 0.5.5;
    //left: -29%;

	
	
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(207,154,50,0.7315301120448179) 50%, rgba(0,0,0,1) 100%);
    
    -webkit-box-shadow: 0 1px 3px 0 rgba(50,50,50, 0.3);
	-ms-box-shadow: 0 1px 3px 0 rgba(50,50,50, 0.3);
	box-shadow: 0 1px 3px 0 rgba(50,50,50, 0.3);
	
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

.dark .container {
    background: #3A3D41;
}

.header {
    background-color: transparent;
    position: relative;
    min-height: 54px;
    border-bottom: 2px solid #CF9A32;
    line-height: 42px;

    border-radius: 4px 4px 0 0;
}

.dark .header {
    background: #3A3D41;
    border-bottom: 1px solid #444;
}

.logo {
    position: absolute;
	top: 5px;
	left: 30px;
	background-color: transparent;
	font-family: 'Anton';
	font-size: 27px;
	text-align: center;
	text-transform: uppercase;
	color: #000000;
	text-decoration: underline;
	text-shadow: -1px 0 #CF9A32, 0 1px #CF9A32, 1px 0 #CF9A32, 0 -1px #CF9A32;	

}

.blue .logo {
    color: #60d4d4;
}

.red .logo {
    color: #f55;
}

.pink .logo {
    color: #1CA105;
}

.user-preferences {
    position: absolute;
    right: 50px;
    margin: 4px 8px;
}

.user-preferences .wrap {
    position: absolute;
    z-index: 1;
    right: 0px;
    padding: 0;
    margin: 12px 0;
    width: 200px;
    border-radius: 4px;
    border: 1px solid #eee;
    background: #fcfcff;
    visibility: hidden;
    opacity: 0;

    -webkit-box-shadow: 1px 1px 1px 0 rgba(25,25,25, 0.1);
	-moz-box-shadow: 1px 1px 1px 0 rgba(25,25,25, 0.1);
	-ms-box-shadow: 1px 1px 1px 0 rgba(25,25,25, 0.1);
	box-shadow: 1px 1px 1px 0 rgba(25,25,25, 0.1);

  -webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
}

.dark .user-preferences .wrap {
    background: #333;
    border: none;
	-webkit-box-shadow: 1px 2px 2px 0 rgba(25,25,25, 0.5);
	-moz-box-shadow: 1px 2px 2px 0 rgba(25,25,25, 0.5);
	-ms-box-shadow: 1px 2px 2px 0 rgba(25,25,25, 0.5);
	box-shadow: 1px 2px 2px 0 rgba(25,25,25, 0.5);
}

.wrap::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 170px;
    border: 7px solid transparent;
    border-bottom: 7px solid #eee;
}

.dark .wrap::before {
    border-bottom-color: #333;
}

.user-preferences:hover .wrap,
.user-preferences:focus .wrap,
.btn-user-prefences:hover ~ .wrap,
.btn-user-prefences:focus ~ .wrap {
    visibility: visible;
    opacity: 1;
}

.theme,
.color {
    list-style: none;
    padding: 0;
    margin: 0;
}

.theme {
    width: 99px;
    float: left;
    border-right: 1px solid rgba(0,0,0,0.1);
}

.color {
    width: 99px;
    float: right;
    margin: 4px 0;
}

.color-item {
    margin: 0 11px;
}

.theme-item {
    width: 100%;
    cursor: pointer;
    padding: 0 4px;
    margin: 0;
    font-size: 14px;
    text-align: center;
}

.theme-item:last-child {
    border-bottom: none;
    border-radius: 0 0 0 4px;
}

.theme-item:first-child {
    border-radius: 4px 0 0 0;
}

.theme-item:hover {
    background: #eee;
}

.dark .theme-item:hover {
    background: #4c5056;
}

.upload-wrap {
    position: absolute;
	left: 35%;
    //top: 15;
    //right: 0;
    //margin: 0px auto;
}

.play-list-wrap {
  -webkit-appearance: none ;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	position: relative;
    width: 95%;
    min-height: 200px;
    max-height: 210px;
	overflow-y: auto;
	background-color: hsla(0,0%,100%,0.36);
	border: solid 2px #CF9A32;
	margin: 0px auto;
	margin-bottom: 10px;
	margin-top: 10px;
	outline: none; /* no focus outline */
	-webkit-box-shadow: inset 0 1px 1px 0 rgba(25,25,25,0.1);
	-moz-box-shadow: inset 0 1px 1px 0 rgba(25,25,25,0.1);
	-ms-box-shadow: inset 0 1px 1px 0 rgba(25,25,25,0.1);
	box-shadow: inset 0 1px 1px 0 rgba(25,25,25,0.1);	
}

#time-count {
	position: absolute;
    top: 15px;
    left: 15px;
    color: #000000;
    text-shadow: -1px 0 #CF9A32, 0 1px #CF9A32, 1px 0 #CF9A32, 0 -1px #CF9A32;
}

#time {
	position: absolute;
    top: 15px;
    /* right: 0px; */
    color: #000000;
    text-shadow: -1px 0 #CF9A32, 0 1px #CF9A32, 1px 0 #CF9A32, 0 -1px #CF9A32;
    left: 82%;
}

.btn-volume {
	position: relative;
	top: 4px;
}
	
.player-wrap {
    position: relative;
    //bottom: -9px;
    width: 100%;
    height: 210px;
	max-height: 210px;
    //border-top: 2px solid #CF9A32;
    text-align: center;
    //padding: 10px 0;
    background-color: transparent;
    //border-radius: 0 0 4px 4px;
}

.dark .player-wrap {
    background: #3A3D41;
    border-top: 1px solid #444;
}

.controls-wrap {
	position: relative; 
	top: 50px; 
	left: 10px; 
	border: solid 2px #CF9A32; 
	width: 95%;
	//height: 50px;

}

.music-info {
  -webkit-appearance: none ;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	position: relative;
	color: #000000;
    width: 90%;
	padding: 4px;
	height: 80px;
	max-height: 80px;
    margin: 4px auto;
	border: solid 2px #CF9A32;
	text-align: left;
	overflow-y: scroll;	
	background-color: hsla(0,0%,100%,0.36);
	outline: none; /* no focus outline */
	-webkit-box-shadow: inset 0 1px 1px 0 rgba(25,25,25,0.1);
	-moz-box-shadow: inset 0 1px 1px 0 rgba(25,25,25,0.1);
	-ms-box-shadow: inset 0 1px 1px 0 rgba(25,25,25,0.1);
	box-shadow: inset 0 1px 1px 0 rgba(25,25,25,0.1);	
}

.loading-wrap {
	text-align: left;
    //height: 20px;
    //margin: 4px auto;
    //margin-top: 12px;
	
}

.timeline-wrap {
    width: 100%;
    //margin: 4px auto;
	//margin: 0 auto;
	    height: 40px;

	
}
#Wrap1 {
    width: 100%;
    //margin: 4px auto;
	display: flex;
  flex-wrap: wrap;
	//width: 300px;
	//border: solid 2px #CF9A32;
}

input#timeline {
        width: 60% !important;
    }















@media screen and (max-width: 700px) {



    //.play-list-wrap {
        height: 75px;
        max-height: 90px;
    }

    //.timeline-wrap {
        //margin: 0 auto;
    }

    

    //.btn.player-btn.large {
        width: 50px;
        height: 50px;
    }

    //.btn.player-btn {
        width: 30px;
        height: 30px;
    }