body {
    background-color: #348794 !important;
    color: #F8F9FA !important;
    text-shadow: 0 2px 5px rgba(34, 89, 97, 0.5);
    font-size: 2rem !important;
}

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

/* Commandes Latérales */
#commands {
    width: auto;
    /*min-height: 100vh;*/
    background: rgba(146, 220, 224, 0.1);
    box-shadow: inset 0 0 4px rgba(146, 220, 224, 0.75);
}

/* Boutons des Commandes Latérales */
#trash,
#play,
#neg,
#pos,
#stopRecordingButton,
#mic,
#playWordByWord,
#help{
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    color: #F8F9FA;
    font-size: 1.5rem;
    margin: 40% 0;
}
#help{
    border:none;
    border-radius: 50%;
    color:#FFFFFF;
    background-color: transparent;
    font-size: 2rem;
}

/* Poubelle */
#trash, #trash-modal {
    background: rgba(220, 53, 69, 0.75);
    box-shadow: inset -2px -2px 4px #941A25, inset 2px 2px 4px rgba(235, 142, 151, 1);
}

#trash:active {
    box-shadow: inset -2px -2px 4px rgba(235, 142, 151, 1), inset 2px 2px 4px #941A25;
}

/*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 #0e3d91;
}
/* 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);
}

/* Négatif / Positif */
#neg, #neg-modal {
    background: rgba(220, 53, 69, 1);
    box-shadow: inset -2px -2px 4px #941A25, inset 2px 2px 4px rgba(235, 142, 151, 1);
}
#pos, #pos-modal {
    background: #87DB4B;
    box-shadow: inset -2px -2px 4px #68A839, inset 2px 2px 4px #9DFF57;
}

/* Enregistrement Vocal */
#mic, #mic-modal {
    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);
}

#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;
}

/* Menu */
#nav button {
    color: #F8F9FA;
    text-shadow: 0 4px 4px #225961;
}

.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 {
    overflow: hidden;
    scroll-behavior: smooth;
}

/* Flèches du Carousel */
.prevC,
.nextC,
.prevP,
.nextP,
.nextSCP,
.prevSCP {
    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 {
    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 0 0 20px;
}

/*#pictoField {*/

/*    height: 8rem;*/

/*    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 0 0 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);
}

/*.show{
    z-index: 999;
}*/

/* Sous-Catégories */
.sous-categorie img{
    height: 7rem !important;
    width: 7rem !important;
    border: 4px solid maroon;
    border-radius: .9rem;
    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: .9rem;
    display: inline-block;
    box-shadow: 3px 3px 5px rgba(21, 55, 60, 0.50);
}

/*
#pictoField>.drag{
    margin-right: 1%;
}*/

/* Zone de Drop des Pictogrammes */
#drop div {
    height: 7rem;
    width: 7rem;
    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-drag: none;
    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;
}

/*#picto-wrapper #strict .picto img{*/

/*    height: 7rem;*/

/*    width: 7rem;*/

/*    border-radius: 20px;*/

/*}*/

/*.pictosm {*/

/*    height: 5rem;*/

/*    width: 5rem;*/

/*    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: 20px;*/

/*}*/

    /* 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: #F8F9FA !important;*/
    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;
}
/*.modal-div-btn{*/
/*    position:relative;*/
/*    height:2.5rem;*/
/*    width: 2.5rem;*/
/*    border-radius:50%;*/
/*    padding:2rem;*/
/*}*/
/*.modal-div-btn .fa-play{*/
/*    box-shadow: inset -2px -2px 4px #69E7C2, inset 2px 2px 4px rgba(18, 114, 86, 0.60);*/
/*}*/

/* 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;
}