body {
    background-color: #348794 !important;
    color: #F8F9FA !important;
    text-shadow: 0 2px 5px rgba(34, 89, 97, 0.5);
    /* width:100%;
    max-height: 100%; */
}

/* Logo */
#logo img {
    height: 10rem;
}

.fontEchange{
    font-size: 2rem !important;
}

/* Commandes Latérales */
.command{
    background: rgba(146, 220, 224, 0.1);
    box-shadow: inset 0 0 4px rgba(146, 220, 224, 0.75);
  }

/* Boutons des Commandes Latérales */
#play,
#playWordByWord,
#futur,
#passe,
#neg,
#pos,
#ques,
#mic,
#trash,
#aide{
    border-radius: 50%;
    width: 3rem;
    color: #F8F9FA;
    font-size: 1.1rem;
}

/* Lecture Phrase */
#play, #play-modal {
    background: #20C997;
    box-shadow: inset -2px -2px 4px rgba(18, 114, 86, 0.60), inset 2px 2px 4px #69E7C2;
  }
  #play:active {
    box-shadow: inset -2px -2px 4px #69E7C2, inset 2px 2px 4px rgba(18, 114, 86, 0.60);
  }
  
  /*lecture mot par mot*/
  #playWordByWord, #playWordByWord-modal{
    background: #007bff;
    box-shadow: inset -2px -2px 4px #0e3d91, inset 2px 2px 4px rgba(0, 123, 255, .7);
  }
  #playWordByWord:active{
    box-shadow: inset -2px -2px 4px rgba(0, 123, 255, .7), inset 2px 2px 4px rgb(14, 61, 145);
  }
  
  /*futur*/
  #futur{
    background: #38b000;
    box-shadow: inset -2px -2px 4px #79c699, inset 2px 2px 4px #38b000;
  }
  #futur:active{
    box-shadow: inset -2px -2px 4px rgba(0, 123, 255, .7), inset 2px 2px 4px #0e3d91;
  }
  
  /*passé*/
  #passe{
    background: #de16a2;
    box-shadow: inset -2px -2px 4px rgb(209, 13, 173), inset 2px 2px 4px #b34392;
  }
  #passe:active{
    box-shadow: inset -2px -2px 4px rgba(0, 123, 255, .7), inset 2px 2px 4px #0e3d91;
  }
  
  /* Négatif */
  #neg {
    background: rgb(160, 43, 55);
    box-shadow: inset -2px -2px 4px #941A25, inset 2px 2px 4px #eb8e97;
  }
  #neg:active{
    box-shadow: inset -2px -2px 4px #eb8e97, inset 2px 2px 4px #6e020d;
  }
  
  /* Positif */
  #pos {
    background: #87DB4B;
    box-shadow: inset -2px -2px 4px #68A839, inset 2px 2px 4px #9DFF57;
  }
  #pos:active{
    box-shadow: inset -2px -2px 4px #406f1f, inset 2px 2px 4px #1d320e;
  }
  
  /* question */
  #ques {
    background: #c7960e;
    box-shadow: inset -2px -2px 4px #9f7b17, inset 2px 2px 4px #ffca3a;
  }
  #ques:active{
    box-shadow: inset -2px -2px 4px #eb8e97, inset 2px 2px 4px #6e020d;
  }
  
  /* Mic */
  #mic {
    background: rgba(23, 162, 184, 0.75);
    box-shadow: inset -2px -2px 4px rgba(12, 84, 95, 0.60), inset 2px 2px 4px #4ED4E9;
  }
  #mic:active {
    box-shadow: inset -2px -2px 4px #4ED4E9, inset 2px 2px 4px rgba(12, 84, 95, 0.60);
  }
  
  /* Poubelle */
  #trash, #trash-modal {
    background: rgba(176, 7, 7, 0.75);
    box-shadow: inset -2px -2px 4px #d01222, inset 2px 2px 4px rgb(188, 32, 48);
  }
  #trash:active {
    box-shadow: inset -2px -2px 4px rgb(108, 65, 69), inset 2px 2px 4px #e10013;
}

  /* Aide */
  #aide, #aide-modal {
    background: rgba(87, 192, 183, 0.75);
    box-shadow: inset -2px -2px 4px #2b5b65, inset 2px 2px 4px rgb(33, 117, 126);
  }
  #aide:active {
    box-shadow: inset -2px -2px 4px rgb(18, 51, 108), inset 2px 2px 4px #0043e1;
}

/* Enregistrement Vocal */

#star-modal{
    background: #348794;
    box-shadow: inset -2px -2px 4px rgba(12, 84, 95, 0.6), inset 2px 2px 4px #4ed4e9;
}
#stopRecording-modal, #stopRecordingButton{
    background: #bc6b17;
    box-shadow: inset -2px -2px 4px rgb(95, 48, 12), inset 2px 2px 4px #e9b04e;
}


.collapse a {
    color: rgba(34, 89, 97, 0.75) !important;
    text-shadow: 0 2px 2px rgba(236, 254, 255, 0.60);
    width: 20rem;
    background: rgb(146, 220, 224);
    box-shadow: inset 4px 4px 4px rgba(236, 254, 255, 0.5), inset -4px -4px 4px rgba(3, 112, 118, 0.5);
}

.collapse a:last-child {
    border-radius: 0 0 0 20px;
}

.collapse a:first-child {
    border-radius: 20px 0 0 0;
}

    /* Base */
/* Carousel */
.wrapperP,
.wrapperC,
.wrapperSCP {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.carouselC,
.carouselP,
.carouselSCP,
.carouselCase {
    overflow: hidden;
    scroll-behavior: smooth;
}

/* Flèches du Carousel */
.prevC,
.nextC,
.prevP,
.nextP,
.nextSCP,
.prevSCP,
.nextCase {
    display: flex;
    justify-content: center;
    align-content: center;
    border: none;
    padding: 8px;
    outline: 0;
    cursor: pointer;
    position: absolute;
    color: #F8F9FA;
}

/* Position Boutons "Précédent" */
.prevC,
.prevP,
.prevSCP {
    top: 35%;
    left: 0;
}

/* Position Boutons "Suivant" */
.nextC,
.nextP,
.nextSCP,
.nextCase {
    top: 35%;
    right: 0;
}

.contentC,
.contentP,
.contentSCP {
    display: grid;
    grid-gap: 20px;
    grid-auto-flow: column;
    margin: auto;
    box-sizing: border-box;
}

/* Champs Phrase */
#sentenceField {
    height: 5rem;
    background: rgba(34, 89, 97, 0.33);
    box-shadow: inset -1px -4px 10px rgba(82, 206, 224, 0.5), inset 4px 4px 20px #225961;
    border-radius: 20px 20px 20px 20px;
}


/* Champs Phrase pour l'Utilisateur Non Authentifié */
#sentence .border-radius-all {
    border-radius: 20px !important;
}

/* Bouton "Sauvegarder" du Champs Phrase */
#sentence button {
    height: 5rem;
    background: rgba(34, 89, 97, 0.3);
    box-shadow: inset 4px 4px 4px rgba(82, 206, 224, 0.5), inset -4px -4px 4px rgba(34, 89, 97, 0.5);
    border-radius: 0 20px 20px 0;
    color: #F8F9FA !important;
    text-shadow: 0 2px 4px rgba(34, 89, 97, 0.5);
}

/* Sous-Catégories */
.sous-categorie img{
    height: 7rem !important;
    width: 7rem !important;
    border: 4px solid maroon;
    border-radius: 1rem;
    display: inline-block;
    box-shadow: 3px 3px 5px rgb(21 55 60 / 50%);
}

/* Pictogrammes */
.picto img,
.drag,
.ui-draggable {
    height: 7rem !important;
    width: 7rem !important;
    border-radius: 1rem;
    display: inline-block;
    box-shadow: 3px 3px 5px rgba(21, 55, 60, 0.50);
}


/* Zone de Drop des Pictogrammes */
#drop div{
    height: 7rem !important;
    width: 7rem !important;
    min-width: 7rem !important;
    min-height: 7rem !important;
    background: rgba(34, 89, 97, 0.33);
    box-shadow: inset -4px -4px 10px #3D9FAE, inset 4px 4px 20px rgba(21, 55, 60, 0.75);
    border-radius: 1rem;
    display: inline-block;
}

/* Désactivation du drag des Catégories */
.wrapperC,
.wrapperSCP,
#static img {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Position Pictogramme fixe */
.pictoPosition{
    position: static !important;
}

/* Position Pictogramme entrain d'être déplacé */
.pictoAbsolute{
    position: absolute !important;
}

    /* Page Menu */
/* Bouton du Menu */
#wrapperMenu a.btn {
    background: rgba(146, 220, 224, 0.50);
    box-shadow: inset 4px 4px 4px rgba(236, 254, 255, 0.30), inset -4px -4px 4px rgba(3, 112, 118, 0.5);
    border: 0;
    border-radius: 20px;
    color: #F8F9FA !important;
    text-shadow: 0 2px 4px rgba(34, 89, 97, 0.5);
    font-size: 1.8rem;
    width: 20rem !important;
}

    /* Page Dialogue */
/* Select Questions */
#question {
    /* background: rgba(146, 220, 224, 0.50);*/
    box-shadow: inset 4px 4px 4px rgba(236, 254, 255, 0.5), inset -4px -4px 4px rgba(3, 112, 118, 0.5);
    border-radius: 20px 20px 20px 20px; 
    color: #000000 ;
    text-shadow: 0 2px 4px rgba(34, 89, 97, 0.5); 
    font-size: 1.3rem;
}

    /* Page Ecoute */
/* Wrapper */
#audioWrapper {
    background-color: rgba(146, 220, 224, 0.75);
    box-shadow: inset 4px 4px 4px rgba(187, 233, 236, 0.75), inset -4px -4px 4px #44C3CA;
    border-radius: 20px;
}

/* Section Audio */
.listenAudio {
    border-bottom: solid 3px rgba(52, 135, 148, 0.5);
}

.modal-content {
    box-shadow: 0px 4px 10px rgba(21, 55, 60, 1);
    text-shadow: none;
}
.modal button i {
    font-size: 1.5rem;
}
#help-modal .modal-body{
    font-size:1rem;
}

/* icônes modal help */
#trash-modal,
#play-modal,
#neg-modal,
#pos-modal,
#mic-modal,
#stopRecording-modal,
#star-modal,
#playWordByWord-modal{
    border:none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    color: #F8F9FA;
    font-size: 1.5rem;
    margin:.2rem;
}

/*classe des mots lus mot par mot*/
.brightWord{
    color:yellow;
    font-size: 2.5rem;
    font-weight: bold;
}

.btn-change{
    height: 50px;
    float: left;
    box-shadow: 0px -50px 0 0 lightseagreen inset , 0px 50px 0 lightseagreen inset;
}
.btn-change:hover{
    box-shadow: 0px 0px 0 0px lightseagreen inset , 0px 0px 0 0px lightseagreen inset; 
}