*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0; padding: 0;
   
}

body{
    background: var(--gray-14);
    display: table;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    min-height: 100%;
    margin: 0; padding: 0;
}

:root {
    --cambria: "cambria", sans-serif;
    --arial-black: "Arial Black", sans-serif;

    --primary-color: #0f0f0f; /* background*/
    --secondary-color: #fff; /*texte icone bouton selectionner*/
    --third-color: #3f3f3f; /* passage souris sur bouton*/
    --fourth-color: #282828; /* bouton non selectionner */

    --gray-14: #181818;
    --gray-15: #262626;
    --gray-36: #5c5c5c;
    --gray-100: #888888;
    --gray-100-tr: rgba(136, 136, 136, 0.5);

}


a{
    text-decoration: none;
}

img{
    cursor: pointer;
}

/* position navigation et alignement des éléments début*/
.flex-div{
    display: flex;
    align-items: center;
}

nav{
    padding: 10px 1%;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    background: var(--primary-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav-left img {
    width: 30px;
    margin-right: 60px;
}

.nav-left .logo {
    width: 300px;
}

.nav-right img {
    width: 40px;
    margin-right: 25px;
}

.nav-right .user-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 0;
}

.tmdb{
    width:150px;
    margin-right: 25px;
}

.tmdb p {
    font-size: 10px;
    font-family: var(--cambria);
    color: var(--secondary-color);
}

.nav-left{
    display: flex;
    align-items: center;
 }

.nav-right{
    display: flex;
    align-items: center;
}

.nav-middle{
    display: flex;
    align-items: center;
}

.nav-middle img {
    width:25px;
}


.nav-middle .search-box {
    border: 1px solid var(--third-color);
    margin-right: 15px;
    padding: 8px 12px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    background: var(--gray-15);
}

.nav-middle .search-box input {
    width: 400px;
    border: 0;
    outline: 0;
    background: var(--gray-15);
    font-size: 16px;
    font-family: var(--cambria);
    color: var(--secondary-color);
}

.nav-middle .search-box input::placeholder {
    color: var(--secondary-color);
    font-size: 16px;
    font-family: var(--cambria);
  }

  .search-box select {
    border-radius: 10px;
    background-color: var(--gray-15);
    font-family: var(--cambria);
    font-size: 14px;
    color: var(--secondary-color);
    border: 1px solid white;
    margin-right: 10px;
    padding: 2px;
}

  .search-box select option {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: var(--gray-36);

}


/* position navigation et alignement des éléments fin*/

/* menu hambuger début */
.sidebar{
    background: var(--primary-color);
    width: 9.5%;
    height: 100vh;
    position: fixed;
    top: 0;
    padding-left: 1%;
    padding-top: 120px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.shortcut-links a img{
    width: 20px;
    margin-right: 10px;
}

.shortcut-links a img.icone{
    filter: drop-shadow(2px 2px 2px #fc0000);
    width: 23px;
}

.shortcut-links a{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    width: fit-content;
    flex-wrap: wrap;
    font-size: 12px;
    font-family: var(--cambria);
    color: var(--secondary-color);
    
}

.shortcut-links a:hover{
    color:#c91f19;
}

.shortcut-links a.active{
    color:#ed3833;
    font-size: 13px;
}

.small-sidebar{
    width: 2.5%;
    top: 0;
    padding-left: 1%;
    padding-top: 120px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    height: 100vh;
    position: fixed;
}

.small-sidebar a p{
    display: none;
}



/* menu hambuger fin */


/* contenu page début */
.container{
    background: var(--gray-14);
    padding-left: 9.5%;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    overflow: hidden; /* ça + max-width pour ne pas avoir d'ascenseur horizontal en bas de page*/
    max-width: 100%;
    
}

.small-container{
    background: var(--primary-color);
    padding-left: 3%;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    
}

.nbfilm a{
    text-decoration: none;
    font-family:var(--cambria);
    font-size:14px;
    color:var(--gray-15);
}

.nbfilm{
    font-family:var(--cambria);
    font-size:14px;
    color:var(--secondary-color);
    padding-left: 20px;
    background-color: var(--gray-36);
    border-radius: 4px;
    margin:15px;
    height:50px;
    display: inline;
    padding: 4px;
    border: 1px solid var(--gray-100);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    
}


.nbfilm img{
    margin-top: 3px;
}


/* contenu page fin */

/* menu déroulant choix support film début */

.dropdown {
    position: relative;
    display: inline-block;
    width: 220px;
  
}
.dropdown .selected {
    width: 100%;
    height: 35px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--gray-36);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--cambria);
    font-size: 14px;
    border: 1px solid var(--gray-100);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    color: var(--secondary-color);

}
.dropdown .selected::after {
    content: '▼';
    font-size: 12px;
    margin-left: 10px;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--gray-36);
    min-width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    
}
.dropdown-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
}
.dropdown-content label {
    color: var(--secondary-color);
    
}
.dropdown-content li {
    padding: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #9b9a9a;
    cursor: pointer;
    font-family: var(--cambria);
    font-size: 15px;
    color: var(--primary-color);
}

.dropdown-content li img {
    margin-right: 10px;
    
}
.dropdown-content li:hover {
    background-color: var(--gray-15);
}
.dropdown.open .dropdown-content {
    display: block;
}

.font_lien{
    font-family: var(--cambria);
    font-size: 14px;
    color: var(--secondary-color);
}

/* menu déroulant choix support film fin */

/* menu déroulant choix genre film début */

.dropdown1 {
    position: relative;
    display: inline-block;
    width: 180px;
    
  
}
.dropdown1 .selected1 {
    width: 100%;
    padding: 5px;
    height: 35px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--gray-36);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--cambria);
    font-size: 14px;
    border: 1px solid var(--gray-100);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    color: var(--secondary-color);

}


.dropdown1 .selected1::after {
    content: '▼';
    font-size: 12px;
    margin-left: 10px;
    
}
.dropdown-content1 {
    display: none;
    position: absolute;
    background-color: var(--gray-36);
    min-width: 100%;
    box-shadow: 0 8px 16px rgba(131, 131, 131, 0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    
}
.dropdown-content1 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
}
.dropdown-content1 label {
    color: var(--secondary-color);
    font-family: var(--cambria);
    text-decoration: none;
}
.dropdown-content1 li {
    padding: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #9b9a9a;
    cursor: pointer;
    font-family: var(--cambria);
    font-size: 15px;
    color: var(--primary-color);
}

.dropdown-content1 li img {
    margin-right: 10px;
    
}
.dropdown-content1 li:hover {
    background-color: var(--gray-15);
}
.dropdown1.open1 .dropdown-content1 {
    display: block;
    font-family: var(--cambria);
    color: var(--secondary-color);
}

/* menu déroulant choix genre film fin */

/* menu déroulant choix annee film début */

.dropdown2 {
    position: relative;
    display: inline-block;
    width: 650px;
    
  
}
.dropdown2 .selected2 {
    width: 100%;
    height: 35px;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: var(--gray-36);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--cambria);
    font-size: 14px;
    border: 1px solid var(--gray-100);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    color: var(--secondary-color);
}
.dropdown2 .selected2::after {
    content: '▼';
    font-size: 12px;
    margin-left: 10px;
}
.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: var(--gray-36);
    min-width: 100%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    height: 250px;
    overflow: auto;
}
.dropdown-content2 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    
}
.dropdown-content2 label {
    color: var(--secondary-color);
    
}
.dropdown-content2 li {
    padding: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #9b9a9a;
    cursor: pointer;
    font-family: var(--cambria);
    font-size: 15px;
    color: var(--primary-color);
}

.dropdown-content2 li img {
    margin-right: 10px;
    
}
.dropdown-content2 li:hover {
    background-color: var(--gray-15);
}
.dropdown2.open2 .dropdown-content2 {
    display: block;
}

/* menu déroulant choix annee film fin */

/* liste alphabétique début */
.dropdown4 {
    position: relative;
    display: inline-block;
}

.inactif1 {
    background-color:#474747;
    margin-left:5px;
    padding:3px 3px 3px 3px;
    color:white;
    text-decoration:none;
    font-family:var(--cambria);
    font-size:17px;
    text-align:center;  
    border-radius: 4px;
  }
  
  .actif1 {
    background-color:#720303;
    margin-left:5px;
    padding:3px 3px 3px 3px;
    color:white;
    text-decoration:none;
    font-family:var(--cambria);
    font-size:17px;
    text-align:center; 
    border-radius: 4px; 
  }

/* liste alphabétique fin */

/* class different texte début*/

.texte1{
    font-family:var(--cambria);
    font-size:16px;
    color:var(--secondary-color);
}

.texte2{
    font-family:arial;
    font-size:35px;
    color:var(--secondary-color);
}

.texte3{
    font-family:var(--cambria);
    font-size:16px;
    color:var(--gray-36);
}

.texte4{
    font-family:var(--cambria);
    font-size:14px;
    color:var(--gray-36);
}

.texte5{
    font-family:arial;
    font-size:14px;
    color:var(--secondary-color);
}

.texte6{
    font-family:arial;
    font-size:12px;
    color:var(--gray-36);
}

.texte7{
    font-family:arial;
    font-size:14px;
    color:var(--gray-36);
}

.texte8{
    font-family:arial;
    font-size:12px;
    color:var(--secondary-color);
}

.texte9{
    font-family:arial;
    font-size:14px;
    color:rgb(197, 47, 47);
}

.texte10{
    font-family:var(--cambria);
    font-size:14px;
    color:var(--secondary-color);
}

.texte11{
    font-family:var(--cambria);
    font-size:20px;
    color:var(--secondary-color);
}

.texte12{
    font-family:arial;
    font-size:18px;
    color:var(--gray-15);
}

.texte13{
    font-family:arial;
    font-size:14px;
    color:rgb(62, 146, 76);
}
/* class different texte début*/




/* pied page début */

footer{
    background: var(--primary-color);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-top:5px;
    padding-left:10px;
    font-weight:bold;
    font-family:var(--arial-black);
    font-size:12px;
    color:var(--secondary-color);
    text-align: center;
    display: table-row; /* marche avec display table du body pour se mettre en bas de page avec position et bottom */
    width: 100%;
    position: absolute;
    bottom:5px;
    left: 0; 
    right: 0
    
  }

/* pied page fin */

/* style fiche film début */
.film{
    border:1px solid rgb(88, 88, 88);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    border-radius: 5px;
    color:var(--secondary-color);
 }

 .film2{
    border:1px solid rgb(88, 88, 88);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    border-radius: 50%;
    width:135px; 
    height:150px;
    color:var(--secondary-color);
 }

 label.lab1{
    color:var(--secondary-color);
    font-family:var(--cambria);
    font-size:20px;
    margin-left:30px;
    
 }
 .tableau{
    margin-left:30px;
 }

 hr {
    width: 98%; /* Largeur de la ligne */
    height:10px; /* Épaisseur de la ligne */
    background-color: rgba(131, 129, 129, 0.5);/* Couleur de la ligne */
    border-radius:5px;
    margin-left:45px;
  }

.lab2{
    margin-left: 35px;
    margin-top: 300px;
}

.affiche_synopsis{
    margin-left:20px; 
    padding:20px;
    margin-top:0px;
    border:1px solid rgb(88, 88, 88);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    background: rgba(41, 41, 41, 0.5);
    border-radius: 10px;
    width:80%;
}

 /* style fiche film fin */

 /* style sortie ciné et sa pagination début */

.movies {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 10px;
}


.movie {
    display:flex;
    border:1px solid rgb(88, 88, 88);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    border-radius: 5px;
    padding: 10px;
    width: calc(33.33% - 20px); /* Pour avoir 3 films par ligne */
    margin-bottom: 20px; /* Espacement vertical entre les films */
    background: rgb(39, 38, 38);
    margin-right: 20px; /* Espacement à droite */
}

.movie:nth-child(3n) {
    margin-right: 0; /* Supprime l'espacement pour le dernier film de chaque ligne */
}

.movie img {
    border-radius:5px;
}

.movie-details {
            display: flex;
            flex-direction: column; /* Aligne le texte verticalement */
            justify-content: center; /* Centre le texte verticalement */
            margin-left:10px;
            text-align:justify;
        }

h2{
    text-align:left;
}

/* style sortie ciné et sa pagination fin */

/* style recherche pour ajouter film début */

.search-form {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    align-items: center; /* Centre verticalement les éléments */
    margin-left: 15px;
    width: 300px;
}

.search-input {
    padding: 10px; /* Espace à l'intérieur du champ */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 30px; /* Coins arrondis */
    flex: 1; /* Prend toute la largeur disponible */
    margin-right: 10px; /* Espace entre le champ et le bouton */
    background-color: var(--fourth-color);
    color:var(--secondary-color);
}

.search-button {
    border: none; /* Pas de bordure */
    background: none; /* Pas de fond */
    cursor: pointer; /* Changer le curseur au survol */
}

.search-button img {
    width: 30px; /* Ajustez la taille de l'image */
    height: auto; /* Garde les proportions de l'image */
}

.bouton_connexion {
    background-color: #4e4f50; /* Couleur de fond */
    color: white; /* Couleur du texte */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 4px; /* Coins arrondis */
    padding: 5px 5px; /* Espace intérieur (haut/bas, gauche/droite) */
    font-size: 14px; /* Taille de la police */
    cursor: pointer; /* Curseur pointeur au survol */
    transition: background-color 0.3s; /* Transition douce pour l'effet de survol */
    font-family: var(--cambria);
}

.bouton_connexion:hover {
    background-color: #2e2e2e; /* Couleur de fond au survol */
}

/* style recherche pour ajouter film fin */

/* style supprimer film et sa pagination début */

.movies2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 10px;
}


.movie2 {
    display:flex;
    border:1px solid rgb(88, 88, 88);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    border-radius: 5px;
    padding: 10px;
    width: calc(16.66% - 20px); /* Pour avoir 6films par ligne */
    margin-bottom: 20px; /* Espacement vertical entre les films */
    background: rgb(39, 38, 38);
    margin-right: 20px; /* Espacement à droite */
}

.movie2:nth-child(6n) {
    margin-right: 0; /* Supprime l'espacement pour le dernier film de chaque ligne */
}

.movie2 img {
    border-radius:5px;
}

.movie-details2 {
            display: flex;
            flex-direction: column; /* Aligne le texte verticalement */
            justify-content: center; /* Centre le texte verticalement */
            margin-left:10px;
            text-align:justify;
        }

/* style pour supprimer film et sa pagination fin */

/* style episode saison début */

.movies3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 10px;
}


.movie3 {
    display:flex;
    border:1px solid rgb(88, 88, 88);
    filter: drop-shadow(3px 3px 6px rgb(78, 78, 78));
    border-radius: 5px;
    padding: 10px;
    width: calc(16.66% - 20px); /* Pour avoir 6films par ligne */
    margin-bottom: 20px; /* Espacement vertical entre les films */
    background: rgb(39, 38, 38);
    margin-right: 20px; /* Espacement à droite */
}

.movie3:nth-child(6n) {
    margin-right: 0; /* Supprime l'espacement pour le dernier film de chaque ligne */
}

.movie3 img {
    border-radius:5px;
}

.movie-details3 {
            display: flex;
            flex-direction: column; /* Aligne le texte verticalement */
            /*justify-content: center; /* Centre le texte verticalement */
            margin-left:10px;
            text-align:justify;
        }

/* style episode saison fin */

/* DASHBOARD DEBUT */

/* Conteneur de la barre de progression volume début*/
.progress-container {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed {
    background-color: rgb(54, 51, 253); /* Couleur pour la progression (par exemple, vert) */
}

.remaining {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression volume fin*/

/* Conteneur de la barre de progression volume syno2 début*/
.progress-containersyno2 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-barsyno2 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed10 {
    background-color: rgb(54, 51, 253); /* Couleur pour la progression (par exemple, vert) */
}

.remaining10 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression volume syno2 fin*/


/* Conteneur de la barre de progression disque1 début*/
.progress-container1 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar1 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed1 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining1 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque1 fin*/

/* Conteneur de la barre de progression disque2 début*/
.progress-container2 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar2 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed2 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining2 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque2 fin*/

/* Conteneur de la barre de progression disque3 début*/
.progress-container3 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar3 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed3 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining3 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque3 fin*/

/* Conteneur de la barre de progression disque4 début*/
.progress-container4 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar4 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed4 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining4 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque4 fin*/

/* Conteneur de la barre de progression disque1 syno2 début*/
.progress-container5 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar5 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed5 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining5 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque1 syno2 fin*/

/* Conteneur de la barre de progression disque2 syno2 début*/
.progress-container6 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar6 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed6 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining6 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque2 syno2 fin*/

/* Conteneur de la barre de progression disque3 syno2 début*/
.progress-container7 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar7 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed7 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining7 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque3 syno2 fin*/

/* Conteneur de la barre de progression disque4 syno2 début*/
.progress-container8 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar8 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed8 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining8 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque4 syno2 fin*/

/* Conteneur de la barre de progression disque5 syno2 début*/
.progress-container9 {
    width: 100%;
    height: 15px; /* Hauteur de la barre */
    background-color: #b8b8b8; /* Couleur de fond de la barre (100%) */
    border-radius: 10px;
    position: relative;
    border: 1px solid rgb(236, 236, 236);
}

/* Partie de la barre de progression représentant l'avancement */
.progress-bar9 {
    height: 13px;
    border-radius: 10px;
    width: 0%; /* La largeur de cette barre sera mise à jour dynamiquement */
    text-align: center;
    color: white;
    line-height: 14px; /* Centrer le texte verticalement */
    font-family:arial;
    font-size:12px;
}

/* Couleurs */
.completed9 {
    background-color: rgb(28, 175, 77); /* Couleur pour la progression (par exemple, vert) */
}

.remaining9 {
    background-color: #f44336; /* Couleur pour la partie restante (par exemple, rouge) */
}

/* Conteneur de la barre de progression disque5 syno2 fin*/


/* DASHBOARD FIN */