.dropdown-menu a{color:white}

   


.sidebar {
    height: 380px;
    width:0px; /* Largeur du sidebar */
    position: fixed;
    z-index: 99;
    overflow: hidden;
    top: 0;
    left: 0;  
    background: #fff;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    transition: 0.5s; /* Ajoutez une transition pour une ouverture/fermeture fluide */
    padding-top: 0; /* Espace pour le contenu en haut */
}

.sidebar.open-menu{
  
    width: 400px; /* Largeur du sidebar */
   
}
.sidebar .title{
    background-color: red;
    color: white;
    padding: 20px 30px;
    font-size:20px;
    
     
  }
  .sidebar .title span{
   float: right;
   cursor: pointer;
     
  }

	#project-wrapper {
		margin: 5px;
		display: flex;
		display: -webkit-flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		}
		#project-container {
			background-position: top center;
			color: white;
			/* height: auto; */
			height: 210px;
			min-width: 330px;
			width: 330px;
			position: relative;
			z-index: 2;
			border-radius: 5px;
			overflow: hidden;
            background-image: linear-gradient(to right,red,black 30%);
			/* -webkit-box-shadow: 0px 3px 15px 	-1px rgba(0,0,0,0.5);
			-moz-box-shadow: 0px 3px 15px -1px rgba(0,0,0,0.5);
			box-shadow: 0px 3px 15px -1px rgba(0,0,0,0.5);
			 */
             box-shadow: 0px 3px 15px -1px rgb(243, 3, 3);
             
			#overlay {
				position: absolute;
				height: calc(100% + 1px);
				width: calc(100% + 1px);
				z-index: 2;
					}
			
			#content {
				text-align: center;
				position: relative;
				z-index: 3;
				
				h2 {
					font-size: 1.3em;
					margin: 35px 0 0 0;
					font-weight: 600;
                    color: #665e5e;
				}
				h2 i {
					color:rgb(0, 255, 89);
                    font-size: 15px;
                    position:absolute;
                    right:28%;
                    top: 3%;
				}
				h3 {
					margin: 7px 0 15px 0;
					font-size: 0.9em;
					opacity: .4;   
                    color: #9b59b6;
                    
				}
                
                #track-time{
					font-size: 10px;
                    position:absolute;
                    top: 38%;
                    right: 4%;
				} 

                #track-volume{
					font-size: 10px;
                    position:absolute;
                    top: 58%;
                    right: 15%;
				}
				
				.range-progress {
					width: 100%;
					height: 2px;
					margin: 0 0 1px 0;
					background: -moz-linear-gradient(left, #3498db 0%, #9b59b6 72%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #3498db 0%,#9b59b6 72%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #3498db 0%,#9b59b6 72%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					-webkit-appearance: none;
   				-moz-appearance:    none;
   				appearance:         none;
					




                
					&::-webkit-slider-thumb {
						-webkit-appearance: none;
						height: 8px;
						width: 8px;
						border-radius: 10px;
						background: #ffffff;
						cursor: pointer;
					}
				}


                .range-volume {
					width: 50%;
					height: 2px;
					margin: 0 0 1px 0;
					background: -moz-linear-gradient(left, #3498db 0%, #9b59b6 72%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #3498db 0%,#9b59b6 72%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #3498db 0%,#9b59b6 72%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
					-webkit-appearance: none;
   				-moz-appearance:    none;
   				appearance:         none;
					




                
					&::-webkit-slider-thumb {
						-webkit-appearance: none;
						height: 8px;
						width: 8px;
						border-radius: 10px;
						background: #ffffff;
						cursor: pointer;
					}
				}




				
				#controls {
					height: 50px;
					display: flex;
					display: -webkit-flex;
					-webkit-align-items: center;
					align-items: center;
					-webkit-justify-content: center;
					justify-content: center;
					
					.column {
						float: left;
						
						&:nth-child(even) {
							font-size: 1.3em;
						}
						
						&:nth-child(n+2):nth-child(-n+4) {
							color: white !important;
						}
						
						&:nth-child(3) {
							font-size: 2em;
						}
						
						&.active {
							color: $primary;
						}
						
						i {
							margin: 0 15px;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
	
	#dailyui {
		position: fixed;
		font-size: 12em;
		font-weight: 700;
		margin: 0 0 -28px 0;
		padding: 0;
		right: 0;
		bottom: 0;
		color: rgba(0, 0, 0, .3);
		z-index: 1;
		text-align: right;
		font-family: 'proxima-nova', 'Lato', sans-serif;
	}
    .rotated {
        transform: rotate(45deg);
        /* Ajoutez d'autres préfixes de navigateurs si nécessaire */
        
    }
    
}