aside {
    width: 200px;
    flex-shrink: 0;
}

.is-vertical-aligned {
    vertical-align: middle;
}

.btn-close {
    display: inline-block;
    border-radius: 0.8em;
    width: 1.6em;
    height: 1.6em;
    font-size: 0.8em;
    background-color: dimgray;
    text-align: center;
    color: whitesmoke;
    font-weight: bold;
    margin-left: 1em;
}

.btn-export {
    border: #8BD7D2 1px solid;
    padding: 0 0.3em;
    margin-left: 1em;
}

.btn-export:hover {
    background-color: #8BD7D2;
    /* ombre */
    box-shadow: 0 0 10px #8BD7D2, 0 0 20px #8BD7D2, 0 0 40px #8BD7D2;
}

.qm-rel-top1 {
    position: relative;
    top: 0.1em;
}

.qm-card {
    width: 90%;
    max-width: 350px;
}

.qm-card2 {
    width: 90%;
    max-width: 500px;
}

.ri-ml1 {
    margin-right: 0.1em;
}

header button {
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

#students-list .student {
    width: 100%;
}

#selectCameraChoice {
    width: 150px;
}

#QCMCamShow.double .student {
    width: 30%;
    display: inline-block;
}

#QCMCamShow.double .onlyNumbers .student {
    width: inherit;
    display: inline-block;
}

.qcm-cache {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(246, 220, 200, 0.9);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 150;
    cursor: pointer;
}

#students-list-commands button {
    margin-right: 0.3em;
}

#groups-commands button {
    font-size: 1.5em;
}

.columns.student:hover {
    background-color: rgb(209, 209, 209);
}

.modal-select-student-groups {
    position: absolute;
    margin-left: -50%;
    z-index: 5;
    padding: 1em;
    background-color: aliceblue;
    border: 1px solid rgb(176, 176, 176);
    border-radius: 0.5em;
}

#qcm-name-commands,
#students-list-commands {
    float: right;
    padding-top: 0.75rem;
}

.editable {
    color: darkblue;
    border: 1px solid cornflowerblue;
}

#defaultColors input,
#defaultColorsEditor input {
    width: 3em;
}

#defaultColors label,
#defaultColorsEditor label {
    margin-left: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

#defaultColorEditor0 span {
    width: 1em;
    height: 100%;
}

/* couleur des bonnes reponses */
.showCorrectAnswers .is-correct {
    background-color: greenyellow !important;
}

.showCorrectAnswers .is-correct::before {
    border-radius: 1em;
    /*border:0.12em solid green;*/
}

/* boutons de suppression et coche bonne réponse */
.absolute-left {
    position: absolute;
    left: -1em;
    z-index: 10;
}

.answer-destroy {
    color: rgb(167, 167, 167);
    transform: translateY(-70%);
}

.answer-is-good {
    color: rgb(167, 167, 167);
    transform: translateY(-130%);
}

.classic .answer-destroy,
.imageAbove .answer-destroy {
    transform: translateY(30%);
}

.classic .answer-is-good,
.imageAbove .answer-is-good {
    transform: translateY(-30%);
}

.imageAbove .absolute-left,
.imagesInAnswers .absolute-left {
    left: 0;
}

#questions-list .is-correct .answer-is-good {
    color: rgb(5, 192, 5);
}

#questions-list.showCorrectAnswers .is-correct {
    background-color: rgb(233, 253, 213) !important;
}

.answer>div:not(.statsbar):first-of-type {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

/* Numérotation */
.answers {
    counter-reset: li;
}

.answers>li {
    list-style-type: none;
    position: relative;
}

.question {
    position: relative;
}

.question:not(.answerWithoutContent) .answers>li::before {
    counter-increment: li;
    content: counter(li, upper-alpha) ". ";
    padding: 0.1em;
    margin-right: .3em;
    font-weight: bold;
}

.answerWithoutContent .answers>li::before {
    counter-increment: li;
    content: counter(li, upper-alpha);
    text-align: center;
    border-radius: 1em;
    border: 0;
    font-weight: bold;
    position: absolute;
    width: 100%;
    height: 100%;
}

.answerWithoutContent .answers>li {
    border: 0.3em solid rgb(167, 167, 167);
    border-radius: 1em;
    width: 2em;
}

/* Désactivation du p engendré par ckeditor */
.answers>li>p {
    all: unset;
}

/* Statistiques */
#scores-container table td,
#scores-container table th {
    border: 1px solid black;
    text-align: center;
}

#scores-container table td.good {
    background-color: greenyellow;
}

#scores-container table tr:nth-child(even) {
    background-color: #f2f2f2;
}

#stats-container .is-active {
    background-color: rgb(171, 230, 188);
  }

.statsbar {
    width: 100%;
    height: 7px;
    background-color: transparent;
    position: absolute;
    bottom: 0.1em;
}

.percentbar {
    background-color: #3e95cd;
    height: 100%;
}

/** trucs pour empêcher les mises en formes de ck-editor **/
.ck.ck-editor__editable_inline> :last-child {
    margin-bottom: 0 !important;
}

.ck.ck-editor__editable_inline> :first-child {
    margin-top: 0 !important;
}

#questions-list .question-commands {
    font-size: 1rem;
}

#questions-list.copy-mode .paste-btn {
    display: initial !important;
}

#questions-list.copy-mode .copy-btn {
    display: none;
}

.btn32 {
    width: 32px;
    height: auto;
    vertical-align: middle;
}

.question {
    aspect-ratio: 4 / 3;
    /* https://chenhuijing.com/blog/math-and-front-end/#%F0%9F%8E%B9 */
    /* à peaufiner */
    /* font-size: calc(22px + (90 - 22)*((100vw - 640px) / (2400 - 640)));*/
    border: 1px grey solid;
    /* margin-bottom: 1em;*/
    overflow-y: scroll;
    font-size: 1em;
    padding: 0.3em;
    overflow: auto;
    margin: 0 auto 1em;
    max-height: 85vh;
}

.question.copied {
    border: 3px rgb(168, 168, 168) dashed;
}

.question.cutted {
    border: 3px rgb(168, 168, 168) dashed;
    filter: opacity(0.5);
}

.qcm-container {
    position: relative;
    overflow: hidden;
}

.qcm-container .question {
    max-width: 100%;
    max-height: calc(100vh - 200px - 1.5rem);
    margin: auto;
    position: relative;
}

.question.minus100,
.end.minus100 {
    margin-top: -100%;
    z-index: 1;
    opacity: 0;
}

.qcm-container .question.slidein,
.qcm-container .end.slidein {
    animation: slidein 1s;
    margin-top: 0;
    z-index: 100;
    opacity: 1;
}

.qcm-container .question.slideout {
    animation: slideout 1s;
    /*display: none;*/
}

.qcm-container .fin {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
}

#qcm-container .chrono-container,
#qcm-container1 .chrono-container {
    position: absolute;
    height: 0.5em;
    width: 100%;
}

.chrono-container .chrono {
    background-color: #4bb5f7;
    height: 100%;
    width: 100%;
}

#QCMCamShow:not(.double) #participant-container {
    height: calc(100vh - 1.5rem);
    overflow-y: scroll;
}

#QCMCamShow.double #participant-container0 {
    margin-bottom: unset;
}

@keyframes slidein {
    0% {
        opacity: 0;
        margin-top: -100%;
        z-index: 1;
    }

    50% {
        opacity: 0;
        margin-top: -100%;
        z-index: 1;
    }

    100% {
        opacity: 1;
        margin-top: 0;
        z-index: 100;
    }
}

@keyframes slideout {
    0% {
        opacity: 1;
        margin-top: 0;
        z-index: 100;
    }

    50% {
        opacity: 0;
        margin-top: +100%;
        z-index: 1;
    }

    100% {
        opacity: 0;
        margin-top: +100%;
        z-index: 1;
    }
}

/* disposition des éléments de question */
.question header h4,
.question header h3,
.question header h2,
.question header h1 {
    font-weight: bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.question header h1 {
    font-size: 1.1em;
}

.question header h2 {
    font-size: 1.075em;
}

.question header h3 {
    font-size: 1.05em;
}

.question header h4 {
    font-size: 1.025em;
}

.question header>div {
    width: 100%;
}

.question .answers {
    padding-left: 5%;
}

.question .answer>div:first-child {
    width: calc(100% - 1em);
}

.question .btn-add-answer {
    position: absolute;
    right: 0.5em;
    bottom: 0.5em;
}

.question:not(.imageAbove) .answer {
    margin-top: 0.5em;
}

.question.imageAbove,
.question.imagesInAnswers,
.question.classic,
.question.answerWithoutContent {
    display: flex;
    flex-direction: column;
}

.question.imageAside {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.question.imagesInAnswers .answers {
    flex-grow: 1;
}

.question.imagesInAnswers .answers .answer,
.question.imageAbove .answers .answer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.question.answerWithoutContent .answers {
    display: flex;
    justify-content: space-around;
}

.question.answerWithoutContent .answers .answer {
    flex-grow: 1;
    margin-left: 1em;
    margin-top: 1em;
}

.question.imageAbove header,
.question.imageAside header,
.question.classic header,
.question.answerWithoutContent header {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#qm-qcm-editor .question header>div {
    border: rgb(167, 167, 167) 1px solid;
}

.question.classic ol {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.question.classic ol li {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.question.imageAbove .answers,
.question.imagesInAnswers .answers {
    display: grid;
    grid-template-columns: 45% 45%;
    column-gap: 5%;
    row-gap: 1em;
}

.question.imageAbove .answers {
    margin-top: 0.6em;
}

.question.imageAbove .answer,
.question.imagesInAnswers .answer {
    box-sizing: border-box;
    text-align: center;
    padding: 0.2em;
    position: relative;
}

.question.imagesInAnswers .answer {
    width: 100%;
    height: auto;
}

.question.imagesInAnswers .answer::before,
.question.imageAbove .answer::before {
    display: flex;
    align-items: center;
    padding: 0 0.2em 0.2em;
    font-size: 1em;
    background-color: grey;
    color: white;
    content: counter(li, upper-alpha);
    position: absolute;
    left: -10%;
    border-radius: 0.5em 0 0 0.5em;
}

.question.imageAbove .answer::before {
    height: calc(100% + 00.2em);
    top: -0.1em;
}

.question.imagesInAnswers .answer::before {
    height: 100%;
    top: 0;
}

.showCorrectAnswers .question .answer.is-correct::before,
.question.showCorrectAnswers .answer.is-correct::before {
    background-color: green;
    color: rgb(223, 255, 192);
}

.answerWithoutContent.showCorrectAnswers .answers>li.is-correct {
    border: 0.3em solid greenyellow;
}

.question.imageAbove:not(.colored) .answer {
    border: 0.1em solid grey;
}

.answer.ck.ck-editor__editable_inline {
    overflow: visible;
}

#qcms-list section>article {
    width: 260px;
    display: inline-block;
    vertical-align: top;
}

#qcms-list .media-content p {
    font-size: 1em;
}

#QCMCamShow {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: white;
    z-index: 35;
    display: grid;
    column-gap: 1.25rem;
    grid-template-areas:
        'commands camera names'
        'questions questions names';
    grid-template-rows: 120px auto;
    grid-template-columns: auto 360px 200px;
}

#cameraCopy.inactiv {
    opacity: 0.4;
}

#QCMCamShow:not(.double) #qcm-commands1,
#QCMCamShow:not(.double) #qcm-commands0 {
    display: none;
}

#QCMCamShow.double #qcm-commands,
#QCMCamShow.double #qcm-commands {
    display: none;
}

#QCMCamShow.duel {
    grid-template-areas:
        'names0 commands camera names'
        'names0 questions questions names';
    grid-template-rows: 120px auto;
    grid-template-columns: 200px auto 360px 200px;
}

#QCMCamShow.double {
    grid-template-areas:
        'commands camera'
        'commands0 commands1'
        'questions0 questions'
        'names0 names';
    grid-template-rows: 0px 50px 39vw auto;
    grid-template-columns: 48% 48%;
}

#QCMCamShow .message {
    position: absolute;
    width: 30%;
    z-index: 150;
    left: 50%;
    transform: translate(-50%);
    top: 8em;
    cursor: move;
}

#participant-container0 {
    display: none;
}

#QCMCamShow.duel #participant-container0,
#QCMCamShow.double #participant-container0 {
    grid-area: names;
    display: unset;
}

#participant-list.onlyNumbers .student,
#participant-list0.onlyNumbers .student {
    display: inline-block;
    margin: 0.2em;
}

#participant-list.onlyNumbers .student .studentname,
#participant-list0.onlyNumbers .student .studentname {
    display: none;
}

#participant-list.onlyNumbers .student .markerid,
#participant-list0.onlyNumbers .student .markerid {
    width: 1.8em;
    font-size: x-large;
}

#commands-container {
    grid-area: commands;
}

#camera-container {
    grid-area: camera;
}

#qcm-commands1 {
    grid-area: commands0;
}

#qcm-commands0 {
    grid-area: commands1;
}

#qcm-container0 {
    display: none;
}

#QCMCamShow.double #qcm-container0 {
    grid-area: questions;
    display: unset;
}

#QCMCamShow.double #qcm-container {
    grid-area: questions0;
}

#qcm-container {
    grid-area: questions;
}

#QCMCamShow.double #participant-container, #QCMCamShow.duel #participant-container {
    grid-area: names0;
}

#participant-container {
    grid-area: names;
}

.height80 {
    height: 120px;
}

#participant-container .student>div,
#participant-container0 .student>div,
#presents-container .student>div,
#absents-container .student>div,
#gpA-container .student>div,
#gpB-container .student>div {
    display: inline-block;
    vertical-align: middle;
}

#participant-container .student .markerid,
#participant-container0 .student .markerid,
#presents-container .student .markerid,
#absents-container .student .markerid,
#gpA-container .student .markerid,
#gpB-container .student .markerid {
    margin-right: 5%;
    border: 1px solid gray;
    text-align: center;
    width: 15%;
    position: relative;
}

#participant-container .student .markerid.hasVoted,
#participant-container0 .student .markerid.hasVoted {
    background-color: #49C6E5;
    color: aliceblue;
}

#participant-container .student .markerid.addVote::before,
#participant-container0 .student .markerid.addVote::before {
    content: " + ";
    background-color: #00BD9D;
    color: #FFFBFA;
    font-weight: bold;
    position: absolute;
    top: -0.3em;
    right: -0.5em;
    width: 1em;
    height: 1em;
    text-align: center;
    border: 1px solid #49C6E5;
    border-radius: 0.5em;
    line-height: 0.8em;
}

#participant-container .student .markerid.removeVote::before,
#participant-container0 .student .markerid.removeVote::before {
    content: " - ";
    background-color: #8BD7D2;
    color: rgb(4, 1, 1);
    font-weight: bold;
    position: absolute;
    top: -0.3em;
    right: -0.5em;
    width: 1em;
    height: 1em;
    text-align: center;
    border: 1px solid rgb(17, 40, 174);
    border-radius: 0.5em;
    line-height: 0.8em;
}

#participant-container .student .markerid.hasgood,
#participant-container0 .student .markerid.hasgood {
    background-color: rgb(5, 192, 5);
    color: aliceblue;
}

#participant-container .student .studentname,
#participant-container0 .student .studentname,
#presents-container .student .studentname,
#absents-container .student .studentname {
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 1.5em;
}

#presents-container,
#absents-container,
#gpA-container,
#gpB-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
}

#presents-container .student,
#absents-container .student,
#gpA-container .student,
#gpB-container .student {
    width: 30%;
    margin: 0.5em;
}

.heightFlexBasis1 {
    flex-basis: calc(100vh - 200px)
}

.heightFlexBasis1 .tile {
    justify-content: center;
    align-content: center;
    display: flex;
}

.closeShowButton {
    position: absolute;
    right: 0;
    top: 15px;
    width: 30px;
}

/* CkEditor compatibility */
.image-style-side,
.image-style-align-right {
    float: right
}

.image-style-align-left {
    float: left;
}

.image-style-align-center {
    clear: both;
    margin: auto;
}

.image-style-block-align-right {
    margin-left: auto;
    margin-right: 0;
}

.image-style-block-align-left {
    margin-left: 0;
    margin-right: auto;
}

/* Alignment styles for images, videos and iframes in editable regions */

/* Center (default) */
[data-editable] iframe,
[data-editable] image,
[data-editable] [data-ce-tag=img],
[data-editable] img,
[data-editable] video {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Left align */
[data-editable] .align-left {
    clear: initial;
    float: left;
    margin-right: 0.5em;
}

/* Right align */
[data-editable].align-right {
    clear: initial;
    float: right;
    margin-left: 0.5em;
}

/* Alignment styles for text in editable regions */
[data-editable] .text-center {
    text-align: center;
}

[data-editable] .text-left {
    text-align: left;
}

[data-editable] .text-right {
    text-align: right;
}