.mistake{
  display:inline-table;
  border-spacing:0;
  border-collapse:collapse;
  margin:0;
  padding:0;
}

.mistake td{
  margin:0;
  padding:0;
}

.actual{
  color:red;
}

.expected{
  color:green;
}

.paragraph{
  margin-top: 10px
}

html{
  overflow-x: hidden;
}

body{
  font-family: "Consolas";
  margin-left: 50px;
  margin-right: 50px;
  padding: 0%;
  font-size: 150%;
  /* En mode saisie vocale, le champ caché est collé au bord droit. Quand il
     prend le focus, iOS tente de faire défiler la page horizontalement vers
     la droite pour amener son overlay micro dans la vue, ce qui masque le mot
     épelé à gauche. On bloque tout défilement horizontal: le champ reste dans
     la largeur du contenu et seul l'overlay micro d'iOS est tronqué à droite. */
  overflow-x: hidden;
}

#create-dictation-form textarea[name="dictation-text"]{
  width: 100%;
  height:250px;
  margin-bottom: 5px;
}

#typing-form input[name="currentWordText"]{
  width: 100%;
}

.input-mode-choice{
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-bottom: 8px;
}

.input-mode-choice label{
  font-size: 85%;
}

/* Saisie vocale: les lettres transformées s'affichent à gauche, le champ
   caché est placé tout à droite pour que l'icône de micro et le libellé
   "Français Canada" d'iOS n'occultent pas le reste de l'écran. */
.voice-input-line{
  display: flex;
  align-items: center;
}

.voice-display{
  flex: 1;
  min-height: 1.2em;
}

/* Lettre attendue accentuée, affichée pendant que l'élève épelle pour lui
   indiquer qu'il y a un accent à cet endroit. Disparaît une fois le mot
   validé (on retombe alors sur noir / rouge-vert). */
.voice-accent{
  color: #e8820c;
}

/* Message affiché AU-DESSUS de la saisie vocale quand l'entrée n'est pas une
   lettre A-Z (mot complet, accent dicté, chiffres...). */
.voice-error{
  font-size: 70%;
  color: #b00020;
  background: #fdECEf;
  border: 1px solid #f3b0bb;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

.voice-hidden-input{
  width: 2em;
  border: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  text-align: right;
}

.voice-hidden-input:focus{
  outline: none;
}

.title-link{
  text-decoration: none;
  color: black;
}

button, input, textarea{
  font-size: 100%;
}

.repeat-line{
  display: flex;
  align-items: center;
}

#repeat-button{
  margin-top: 2px;
  margin-bottom: 2px;
}

#clear-button{
  margin-top: 2px;
  margin-bottom: 2px;
  margin-left: 6px;
}

h3{
  margin-bottom: 0px;
}

h4{
  margin-bottom: 4px;
  margin-top: 16px;
  color: #444;
}

.dictation-group{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.dictation-link{
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-decoration: none;
  font-size: 85%;
}

.dictation-link:hover{
  background-color: #eee;
}
.header {
  overflow: hidden;
}

.header img{
  float: left;
}

.header a{
  float: left;
  text-align: center;
  padding: 12px;
  line-height: 64px;
}

.header h1, .header img{
  color: black;
  padding: 0px;
  margin: 0px;
}

#mainTitle{
    text-decoration: none;
}

.header-right {
  float: right;
}