/* Global styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}

/* Navigation bar */
nav {
  background-color: #333;
  height: 40px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 0 20px;
}



#addModuleButton {
  margin: 2px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  background-color: #4CAF50;
  padding: 5px 10px;
}




#moduleContainer {
display: flex;                   /* Utilise le layout flex pour aligner les éléments enfants horizontalement */
flex-wrap: wrap;                 /* Autorise les éléments flex à se déplacer sur la ligne suivante si nécessaire */
}

.container { justify-content: center; 
position: relative;              /* Sert de référence pour les éléments positionnés en absolu à l'intérieur */
padding: 2px;                    /* Ajoute un espace interne autour du contenu */
border: 1px solid #ccc;          /* Ajoute une bordure d'1px de couleur grise autour de l'élément */
border-radius: 10px;             /* Arrondit les coins de l'élément */
margin: 10px;                    /* Ajoute un espace externe autour de l'élément */
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Ajoute une ombre portée à l'élément */
}

.module {
width: 85px;                     /* Fixe la largeur de l'élément à 60 pixels */
display: flex;                   /* Utilise le layout flex */
flex-direction: column;          /* Aligne les éléments enfants verticalement */
align-items: center; 
justify-content: center;             /* Centre les éléments enfants horizontalement */

}

.close-button {
background-color: red;           /* Couleur de fond rouge pour le bouton */
border: none;                    /* Supprime la bordure du bouton */
font-size: 16px;                 /* Taille de la police du texte dans le bouton */
cursor: pointer;                 /* Change le curseur en forme de main quand survolé */
border-radius: 50%;              /* Rend le bouton complètement rond */
position: absolute;              /* Positionne le bouton par rapport à l'élément parent positionné (ici, .container) */
top: -12px;                      /* Décale le bouton de -12px depuis le haut de l'élément parent */
right: -15px;                    /* Décale le bouton de -15px depuis la droite de l'élément parent */
}

.noteInput,
.noteInputTranspo {
width: 15px;height: 15px;                     /* Fixe la largeur de l'élément à 20 pixels */
padding: 3px;                    /* Ajoute un espace interne autour du contenu */
margin: 5px;                     /* Ajoute un espace externe autour de l'élément */
font-size: 12px;                 /* Taille de la police du texte */
text-transform: capitalize;
}

#results {
margin-top: 2px;                 /* Ajoute un espace externe au sommet de l'élément */
display: flex;                   /* Utilise le layout flex */
flex-direction: column;          /* Aligne les éléments enfants verticalement */
align-items: center;             /* Centre les éléments enfants horizontalement */
width: 100%;    
justify-content: center;                   /* Prend toute la largeur disponible */
}

p {
margin: 5px 0;
                   /* Ajoute un espace externe de 5px au-dessus et en-dessous de l'élément */
}

button {
margin: 2px;                     /* Ajoute un espace externe de 2px tout autour de l'élément */
cursor: pointer;                 /* Change le curseur en forme de main lors de la survol */
border: none;                    /* Supprime la bordure du bouton */
border-radius: 5px;              /* Arrondit légèrement les coins du bouton */
color: #fff;                     /* Couleur de texte blanche pour le bouton */
font-weight: bold;  
         /* Texte en gras pour le bouton */
}

#toggleMajor {
background-color: red; 
width: 30px;    
opacity: 0.8;
}

#toggle7th {
background-color: black; width: 30px;
opacity: 0.7;
}

.toggle-buttons-container {
display: flex;
flex-direction: row;
justify-content: center; 
}

.note {
width: 30px;                     /* Largeur fixe */
padding: 6px;                    /* Espace interne */
justify-content: center;         /* Centre le contenu horizontalement (pertinent avec display: flex) */
font-weight: bold;               /* Texte en gras */
font-size: 14px;                 /* Taille du texte */
color: white;                    /* Couleur du texte */
;       /* Transforme le texte en majuscules */
display: flex;                   /* Utilise le layout flex */
border-radius: 5px;              /* Arrondit légèrement les coins */
background-color: #2196f3;          /* Couleur de fond noire */
opacity: 0.7;                    /* Rend l'élément partiellement transparent */
border: solid;                   /* Ajoute une bordure solide */
}

.noteTierce {
border: solid;                   /* Ajoute une bordure solide */
width: 30px;                     /* Largeur fixe */
padding: 6px;                    /* Espace interne */
justify-content: center;         /* Centre le contenu horizontalement (pertinent avec display: flex) */
font-weight: bold;               /* Texte en gras */
font-size: 14px;                 /* Taille du texte */
color: white;                    /* Couleur du texte */
;       /* Transforme le texte en majuscules */
display: flex;                   /* Utilise le layout flex */
border-radius: 5px;              /* Arrondit légèrement les coins */
background-color: red;     /* Couleur de fond vert foncé */
opacity: 0.8;                    /* Rend l'élément légèrement transparent */
}



.noteQuinte {
border: solid;                   /* Ajoute une bordure solide */
width: 30px;                     /* Largeur fixe */
padding: 6px;                    /* Espace interne */
justify-content: center;         /* Centre le contenu horizontalement (pertinent avec display: flex) */
font-weight: bold;               /* Texte en gras */
font-size: 14px;                 /* Taille du texte */
color: white;                    /* Couleur du texte */
;       /* Transforme le texte en majuscules */
display: flex;                   /* Utilise le layout flex */
border-radius: 5px;              /* Arrondit légèrement les coins */
background-color: green;        /* Couleur de fond violette */
opacity: 0.8;                    /* Rend l'élément légèrement transparent */
}
.noteSeconde, .noteSixte, .noteQuarte {
align-items: center;
width: 8px;height: 9px;
margin: auto;

padding: 7px; /* Ajuster la valeur de padding selon vos besoins */
justify-content: center;
font-weight: bold;
font-size: 12px;
color:darkslategrey;
display: flex;
border-radius: 50%;
background-color:burlywood;
opacity: 0.7;
}
.noteSeptiem {
border: solid;                   /* Ajoute une bordure solide */
width: 30px;                     /* Largeur fixe */
padding: 6px;                    /* Espace interne */
justify-content: center;         /* Centre le contenu horizontalement (pertinent avec display: flex) */
font-weight: bold;               /* Texte en gras */
font-size: 14px;                 /* Taille du texte */
color: white;                    /* Couleur du texte */
;       /* Transforme le texte en majuscules */
display: flex;                   /* Utilise le layout flex */
border-radius: 5px;              /* Arrondit légèrement les coins */
background-color: black;        /* Couleur de fond violette */
opacity: 0.8;                 /* Rend l'élément légèrement transparent */
}

.noteBlue{

width: 15px;                     /* Largeur fixe */
padding: 6px;                    /* Espace interne */
justify-content: center;         /* Centre le contenu horizontalement (pertinent avec display: flex) */
font-weight: bold;               /* Texte en gras */
font-size: 14px;                 /* Taille du texte */
color: white;                    /* Couleur du texte */
;       /* Transforme le texte en majuscules */
display: flex;                   /* Utilise le layout flex */
border-radius: 100px;              /* Arrondit légèrement les coins */
background-color:deeppink;          /* Couleur de fond noire */
opacity: 0.7;                    /* Rend l'élément partiellement transparent */
border: solid;  
margin: auto;
}