/* To avoid ios styling */

input[type=button],
input[type=submit] {
    -webkit-appearance: none;
}



#topLayer {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 900px;
    height: 600px;
}

#topInterface {
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 90;
    width: 900px;
}

#mainScoreLabel {
    position: absolute;
    right: 35px;
    top: 25px;
    font-size: 2.5em;
    font-weight: bold;
    text-align: right;
    color: #FFF;
}


/* winIntro */


/*-----------------------------------*/

#winIntro.popup {
    background: none;
    box-shadow: none;
    webkit-box-shadow: none;
    width: 900px;
    height: 600px;
    right: auto;
    left: 0px;
    padding: 35px;
    top: 0px;
}

#winIntro .label {
    color: #FFF;
    text-align: left;
    font-size: 2em;
    font-weight: bold;
}

#winIntro_bloc_under_title {
    align-items: baseline;
    margin-top: -30px;
}

#winIntro_bloc_under_title .right {
    width: 390px;
    border-radius: 10px;
    background: rgba(35, 115, 185, .8);
    padding: 17px;
    border: solid 3px #FFF;
    box-shadow: 0px 2px 27px rgb(35 115 185 / 61%);
}

#winIntro #game_notes {
    color: #FFF;
    font-size: 1.2em;
    text-align: center;
}

#winIntro .questionsNbLabel {
    color: #FFF;
    margin-top: 50px;
    font-size: 1.5em;
    padding: 0px 20px;
    width: 450px;
}

#winIntro .durationLabel {
    color: #FFF;
    margin-top: 50px;
}

#winIntro label {
    color: #FFF;
}

#winIntro #playMode {
    display: none;
    text-align: left;
    position: inherit;
    margin-top: 80px;
}

#winIntro .playModeButtonBloc {
    margin-left: 16px;
}

#winIntro .playModeButtonBloc label {
    font-weight: normal;
}

#buttonStart {
    position: absolute;
    bottom: 50px;
    left: 50%;
    margin-left: -150px;
    width: 300px;
    text-align: center;
}

#button_training_notes {
    color: #FFF;
}


/* winEndGame */


/*-----------------------------------*/

#winEndGame.popup {
    background: none;
    box-shadow: none;
    webkit-box-shadow: none;
    width: 720px;
    height: 600px;
    right: auto;
    left: 0px;
    padding: 35px;
    top: 0px;
    color: #FFF;
    margin-left: 0px;
}

#winEndGame .text {
    color: #FFF;
}

#winEndGame #stars_in_winEndGame i {
    position: inherit;
    top: auto;
    left: auto;
    right: auto;
}

#winEndGame .percentSuccessBloc {
    width: 450px;
}

#winEndGame .scoreBloc {
    width: 450px;
    margin-top: 40px;
}

#winEndGame .bonusBloc {
    width: 450px;
    margin-top: 20px;
}

#winEndGame .button_bloc {
    margin-top: 50px;
    text-align: right;
}


/* Good / Bad */

.green {
    color: #6fff64;
}

.red {
    color: #f9a656;
}


/* game css derogation */

.button {
    background: none;
    color: #2570b6;
    webkit-box-shadow: none;
    box-shadow: none;
}

.button:hover {
    background: none;
    color: #20ace3;
}


/* .button_interface */


/*-----------------------------------*/

.button_interface {
    background: #CEF;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    border: solid 3px #FFF;
}

.button_interface:hover {
    background: #FFD;
}


/*
#questionLabelBloc{position: relative; left:50%; top:100px; width:700px;  
        text-align:center;
        font-size:1.4em;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);}
*/

#exerciceNoteLabel {
    display: table;
    width: 547px;
    margin: auto;
    margin-top: 9px;
    background: rgba(255, 255, 255, 0.9);
    color: #283b83;
    text-align: center;
    padding: 5px 20px;
    font-size: 1.5em;
    color: #427ecf;
}

#exerciceNoteLabel .text_content {
    display: table-cell;
    vertical-align: middle;
    line-height: 1.2em;
}

#exerciceNoteLabel.big {
    margin: auto;
    margin-top: 50px;
    font-size: 2em;
    text-align: center;
    padding: 30px;
    width: 435px;
}

#button_continue_exerciceNoteLabel {
    position: absolute;
    top: 450px;
    left: 360px;
    font-size: 2em;
}

#questionIndexLabel {
    position: absolute;
    left: auto;
    bottom: 50px;
    font-size: 1.6em;
    color: #ededed;
    font-weight: bold;
    right: 35px;
}

#questionIndexLabel.buttonsMode {}


/* left:380px; */


/*
orange : fc7c00
bleu : 427ecf
cyan : dcf2fc
green : 61cd51
brown : dfa000
dark yellow : fee145
dark brown : 994d04
 */

#questionTextLabel {
    display: table;
    position: absolute;
    top: 80px;
    left: 50%;
    width: 714px;
    margin-left: -357px;
    height: 113px;
    text-align: center;
    font-size: 2em;
    color: #FFF;
    padding: 15px;
}

#questionTextLabel .text_content.small {
    font-size: 0.7em;
}

#questionTextLabel .text_content.super_small {
    font-size: 0.6em;
}

#game_outer.isHoverButtonsNeeded #questionTextLabel {
    color: #684a23;
    background: rgba(255, 255, 255, 0.9);
}

#game_outer.groupWords #questionTextLabel {
    top: 220px;
}

#questionTextLabel .text_content {
    display: table-cell;
    vertical-align: middle;
    line-height: 1.2em;
    background: rgba(255, 255, 255, 0.9);
    color: #283b83;
    border-radius: 5px;
}

.quizImage #questionTextLabel .text_content {
    background: none;
    color: #FFF;
}

#questionLabelNote {
    font-size: 0.6em;
    color: #283b83;
    font-style: italic;
}

.quizImage #questionLabelNote {
    color: #FFF;
}

#questionTextLabel.keyboardDisplayed {
    top: 410px;
}

#questionTextLabel .verb {
    font-weight: bold;
    color: #fc7c00;
    font-style: italic;
}

#questionTextLabel .textSup {
    color: #d6ff7d;
}

#game_outer.buttonsInQuestion #questionTextLabel {
    top: 150px;
}

#game_outer.buttons #questionTextLabel {
    top: 150px;
}

#game_outer.longInputQuestion #questionTextLabel {
    top: 36px;
}

#questionTextSupLabel {
    font-size: 1.5em;
    color: #666;
    margin-left: 10px;
}

#buttonRefreshQuestion {
    position: absolute;
    right: 10px;
    top: 25px;
}

#labelAboveButtons {
    position: absolute;
    top: 223px;
    left: 50%;
    width: 560px;
    height: 67px;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-size: 1.6em;
    color: #ce6bdd;
    margin-left: -280px;
}

#labelAboveButtonsTable {
    display: table;
    width: 100%;
    height: 100%;
    padding: 0px 60px 0 20px;
}

#labelAboveButtonsInner {
    vertical-align: middle;
    display: table-cell;
    line-height: 0.9em;
}

#labelAboveButtons.subjectOnly {
    color: #279e1e;
    font-size: 2em;
}


/*
#resultOnHoverLabel{position: absolute; top: 240px; left: 50px; width: 770px;
                    color:#ffCded; text-align: center; font-size: 1.5em;}
                    */

#labelAboveButtons .verb {
    color: #dfa000;
}

#labelAboveButtons .subject {
    color: #279e1e;
}


/* INPUT */

#inputBloc {
    position: absolute;
    top: 320px;
    left: 50px;
    width: 770px;
    text-align: center;
    font-size: 1.2em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}


/*#inputBloc.keyboardDisplayed{top:360px;}*/


/* buttonSpeechForInputBloc */

#buttonSpeechForInputBloc {
    position: absolute;
    top: 200px;
    width: 106px;
    left: 50%;
    margin-left: -73px;
}

.inputTitle {
    font-size: 1.2em;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(50, 50, 100, 1);
}

#tf_userAnswer {
    font-size: 1.5em;
    color: #666666;
    border: none;
    width: 420px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 5px 10px;
}

#ta_longAnswer {
    width: 597px;
    height: 250px;
    font-size: 1.2em;
    color: #666666;
    border: none;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    top: 185px;
    left: 150px;
    webkit-box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.2);
}

#ta_longAnswer::placeholder {
    color: #ccc;
}

#longInputBloc .charsRemaining {
    position: absolute;
    top: 435px;
    left: 660px;
    width: 60px;
    height: 20px;
    text-align: center;
    background: #EEE;
    border: solid 1px #DDD;
    -webkit-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
}

#submitButton {
    position: absolute;
    bottom: 80px;
    left: 49%;
    margin-left: -100px;
    width: 200px;
    z-index: 10;
}


/* input assets for ipad */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    #buttonSpeechForInputBloc {
        top: 330px;
        left: 200px;
    }
    #submitButton {
        top: 320px;
        left: 630px;
    }
}


/* Math */


/*-----------------------------------*/

.squareRootLetterSpacing {
    /* NOT USED */
    letter-spacing: -0.1em;
}


/* QUIZ BUTTONS */

.answerButton {
    position: absolute;
    width: 346px;
    height: 56px;
    display: block;
    font-size: 1.4em;
    line-height: 1em;
    background: #FFF;
    border-radius: 5px;
    webkit-box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.2);
    font-weight: normal;
    padding: 0px 20px;
}

.answerButton .v_align_inner.text_content {}

.answerButton:hover {
    background: #FFF;
}

.answerButton.small {
    font-size: 1.2em;
}

.answerButton.super_small {
    font-size: 1em;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1em;
}

.imageBullets .answerButton {
    width: 71px;
    height: 71px;
    border-radius: 50px;
    color: #354283;
    border: solid 3px #354283;
    font-size: 2em;
}

#button1 {
    top: 270px;
    left: 90px;
    color: #5f4c79;
    text-align: center;
}

#button2 {
    top: 270px;
    left: 460px;
    color: #5f4c79;
    text-align: center;
}

#button3 {
    top: 355px;
    left: 90px;
    color: #5f4c79;
    text-align: center;
}

#button4 {
    top: 355px;
    left: 460px;
    color: #5f4c79;
    text-align: center;
}

#buttonsAssets .button:hover {
    background: #FFC;
}


/*color:#9077b2;*/


/* multiAnswers */

.multiAnswers #button1 {
    top: 320px;
    left: 90px;
    text-align: left;
}

.multiAnswers #button2 {
    top: 320px;
    left: 460px;
    text-align: left;
}

.multiAnswers #button3 {
    top: 385px;
    left: 90px;
    text-align: left;
}

.multiAnswers #button4 {
    top: 385px;
    left: 460px;
    text-align: left;
}


/*isHoverButtonsNeeded*/

.isHoverButtonsNeeded #button1 {
    top: 340px;
    left: 90px;
}

.isHoverButtonsNeeded #button2 {
    top: 340px;
    left: 460px;
}

.isHoverButtonsNeeded #button3 {
    top: 405px;
    left: 90px;
}

.isHoverButtonsNeeded #button4 {
    top: 405px;
    left: 460px;
}


/* QUIZ IMG */

.quizImage #button1 {
    top: 150px;
    right: 35px;
    left: auto;
    text-align: left;
}

.quizImage #button2 {
    top: 230px;
    right: 35px;
    left: auto;
    text-align: left;
}

.quizImage #button3 {
    top: 310px;
    right: 35px !important;
    left: auto !important;
    text-align: left;
}

.quizImage #button4 {
    top: 390px;
    right: 35px !important;
    left: auto !important;
    text-align: left;
}

.imageBullets #button1 {
    right: 95px !important;
}

.imageBullets #button2 {
    right: 95px !important;
}

.imageBullets #button3 {
    right: 95px !important;
}

.imageBullets #button4 {
    right: 95px !important;
}


/* */

.checkboxMarker {
    font-size: 1.5em;
    position: absolute;
    right: 10px;
    top: 15px;
}

.multiAnswers .v_align_inner {
    text-align: left;
    padding-right: 30px;
}

.answerButton.big_buttons {
    height: 65px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
}

#button1.big_buttons {
    top: 370px;
    left: 90px;
}

#button2.big_buttons {
    top: 370px;
    left: 460px;
}

.button_centered {
    left: 270px !important;
}


/* QUIZ BUTTONSINQUESTION */

.buttonsInQuestion {
    display: inline-block;
    cursor: pointer;
    padding: 0px 5px;
    margin: 0px 5px;
    line-height: 1.1em;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: #fcd02b;
}

.buttonsInQuestion:hover {
    background: #eee;
}

.buttonsInQuestion.selected {
    background: #3f3;
    color: #333;
}

.buttonsInQuestion.selected:hover {
    background: #d6ff7d;
}


/* QUIZ buttonsGroupWords */

.buttonsGroupWords {
    cursor: pointer;
    background: #EEC689;
    padding: 2px 5px;
}

.buttonsGroupWords:hover {
    color: #49A2E7;
}


/* QUIZ IMG */

.quizImage .button_centered {
    right: 35px !important;
    left: auto !important;
}

.quizImage #questionTextLabel {
    background: none;
    color: #FFF;
    top: 27px;
    left: 35px;
    width: 600px;
    height: auto;
    padding: 0px;
    text-align: left;
    margin-left: 0px;
}

.quizImage #imgContainer {
    position: absolute;
    top: 70px;
    left: 35px;
    height: 480px;
    display: flex;
    align-items: center;
}

.quizImage #imgContainer img {
    vertical-align: middle;
    max-width: 400px;
    max-height: 420px;
    border: solid 3px #FFF;
}
.quizImage #imgContainer .img_credits{
    font-size:0.7em;
}

.quizImage #imgContainer .imageValignHelper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.quizImage #imgContainer img.need_shadow {
    border: solid 3px #FFF;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    -webkit-border-radius: 0px;
    max-width: 400px;
    max-height: 420px;
}


/* quizImageHorizontal */

.imageBullets #imgContainer {
    width: 650px;
    top: 77px;
}

.imageBullets #imgContainer img.need_shadow {
    max-width: 610px;
}


/* Academic */


/*-----------------------------------*/

.academic .answerButton {
    width: 500px;
    height: 56px;
    webkit-box-shadow: none;
    box-shadow: none;
}

.academic #button1 {
    top: 170px;
    left: 90px;
    color: #OOO;
    text-align: left;
}

.academic #button2 {
    top: 220px;
    left: 90px;
    color: #OOO;
    text-align: left;
}

.academic #button3 {
    top: 270px;
    left: 90px;
    color: #OOO;
    text-align: left;
}

.academic #button4 {
    top: 320px;
    left: 90px;
    color: #OOO;
    text-align: left;
}

.academic #buttonsAssets .button:hover {
    background: #FFC;
}


/*color:#9077b2;*/


/* RESULT ICONS */

#answerResultBloc {
    position: absolute;
    top: 100px;
    left: 700px;
}


/*top: 300px; left: 500px;*/

#answerResultBloc.buttonsMode {
    top: 100px;
    left: 700px;
}

#answerResultIcoOk {
    /*background: url(images/ico_ok_300.png) no-repeat;*/ /* In quizTheme_default.css */
    background-size: 150px 150px;
    width: 150px;
    height: 150px;
}

#answerResultIcoError {
    /*background: url(images/ico_error_300.png) no-repeat;*/ /* In quizTheme_default.css */
    background-size: 150px 150px;
    width: 150px;
    height: 150px;
}


/* CELLS */

#cellsBloc {
    position: absolute;
    bottom: 55px;
    left: auto;
    width: 830px;
    text-align: right;
    right: 110px;
    line-height: 0.7em;
}

#cellsBloc .cell {
    width: 20px;
    height: 8px;
    display: inline-block;
    background: #ededed;
    margin-left: 5px;
}

#cellsBloc .cellWin {
    background-color: #3ae41e;
}

#cellsBloc .cellLost {
    background-color: #ffd800;
}

#cellsBloc .cellNeutral {
    background-color: #20a6df;
}


/* winSolution */

#winSolutionBloc {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 900px;
    height: 600px;
    text-align: center;
    padding: 35px;
}

#winSolutionWin {}

#winSolutionLost {}

#winSolutionBloc .title {
    font-size: 3em;
    font-weight: bold;
    margin-top: 30px;
    color: #fff;
}


/*#winSolutionWin{text-shadow: 1px 3px 0px #31af0a;}
#winSolutionLost{text-shadow: 1px 3px 0px #d16c00;}*/

#winSolutionBloc .baseline {
    text-align: center;
    font-size: 1.6em;
    margin-top: 30px;
    color: #fff;
}


/*
#winSolutionWin .baseline{color:#e5ef09;width: 100%;}
#winSolutionLost .baseline{color:#f9a656;}
*/

#winSolutionLost .red {
    color: #ffe050;
}

#winSolutionBloc .label {
    text-align: center;
    color: #fff;
    font-size: 2.2em;
    font-weight: bold;
    background: #FFF;
    padding: 20px 10px;
    width: 580px;
    margin: 10px auto 0 auto;
    border-radius: 5px;
}

#winSolutionBloc .strSolutionItem{
    background: #3ae41e;
    border-radius: 5px;
    margin-bottom: 3px;
}

/* FOR DEV : until I solve the linker question order issue */
.linker #winSolutionBloc .strSolutionItem{
    background: #3ae41e;
    border-radius: 5px;
    margin-bottom: 3px;
}

#winSolutionBloc .strSolutionItem.error{
    background: #fc5c34;
}

#winSolutionWin .label {
    background: #3ae41e;
}

#winSolutionLost .label {
    background: #fc5c34;
}

.text_success {
    background: #3ae41e;
}

.text_danger {
    background: #fc5c34;
}

#game_outer.imageBullets #winSolutionBloc .label {
    justify-content: space-evenly;
    display: flex;
    align-items: center;
}

#game_outer.imageBullets #winSolutionBloc .label .text_content {
    display: inline-block;
    width: 71px;
    height: 71px;
    border-radius: 50px;
    border: solid 3px #FFF;
    font-size: 1.6em;
}

#winSolutionBloc .label.alt {}

#winSolutionBloc .label.small {
    font-size: 1.7em;
}

#winSolutionBloc .baseline .question {
    margin-bottom: 10px;
    font-size: 1.3em;
    opacity: 0.6;
    filter: alpha(opacity=60);
}

#winSolutionBloc .baseline .question.small {
    font-size: 1em;
    line-height: 0.9em;
}

#winSolutionBloc .baseline .question.super_small {
    font-size: 0.8em;
    line-height: 0.8em;
    margin-bottom: 0px;
}

#winSolutionBloc .verb {
    color: #fcff00;
}

#winSolutionBloc .txtSupSol {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

#winSolutionBloc .txtSupSolPost {
    font-size: 0.8em;
}

#winSolutionBloc .nextButton {
    position: absolute;
    bottom: 80px;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}


/*
#winSolutionBloc .nextButton:hover{background: #48a1cb;}
*/

#pinScoreAdd {
    position: absolute;
    top: 50px;
    right: 60px;
    text-align: right;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    font-size: 2.2em;
    font-weight: bold;
}

#goodAnswerBloc {
    position: absolute;
    top: 470px;
    left: 50px;
    width: 770px;
    text-align: center;
}

#goodAnswerTitle {
    font-size: 1.2em;
    color: #4485f5;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

#goodAnswerLabel {
    font-size: 2em;
    font-weight: bold;
    color: #fff29c;
    text-shadow: 0 1px 0 rgba(75, 90, 115, 1);
}


/* soundController */

#soundController {
    position: absolute;
    right: 65px;
    bottom: 33px;
    color: #fff;
    font-size: 2.5em;
    cursor: pointer;
}

#volumeOff {}

#volumeOff i {
    vertical-align: middle;
    margin-top: -7px;
}

#volumeOff i.volumeMuteCross {
    margin-left: 2px;
}


/* gamespecialid_note */


/*-----------------------------------*/

.gamespecialid_note {
    position: absolute;
    right: 35px;
    font-family: arial;
    font-size: 0.6em;
    text-align: right;
    letter-spacing: 0.01em;
    bottom: 3px;
    display:none;
}


/* Timer */


/*-----------------------------------*/

#timerBloc {
    position: absolute;
    bottom: 35px;
    left: 35px;
    right: auto;
    width: 830px;
    height: 12px;
    background-image: linear-gradient(to right, #3ae41e 0%, #ffd800 100%);
    border-radius: 0px;
    webkit-border-radius: 0px;
    box-shadow: none;
    webkit-box-shadow: none;
    border: none;
}

#timerBar {
    background: #ededed;
    height: 12px;
    width: 0px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-radius: 0px;
    webkit-border-radius: 0px;
    box-shadow: none;
    webkit-box-shadow: none;
}


/* win_recap_answers Exclusive for Ludo (181121) */


/*-----------------------------------*/

#win_recap_answers {
    position: absolute;
    top: 35px;
    left: 410px;
    width: 450px;
    background: #FFF;
    padding: 15px;
    max-height: 430px;
    overflow-y: auto;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

#win_recap_answers li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    padding-right: 5px;
    border-bottom: solid 1px #DDD;
}

#win_recap_answers li .text {
    order: 1;
    flex-grow: 1;
    padding-top: 5px;
}

#win_recap_answers li .res {
    order: 2;
    font-size: 1.6em;
}


/*#########################################
#     DRAGDROP
#########################################*/

#drags_container,
#drops_container {
    display: flex;
    justify-content: space-around;
    align-content: center;
    /*flex-wrap: wrap;*/
    width: 100%;
    padding: 10px;
    height: 120px;
}

#drags_container {
    position: absolute;
    bottom: 100px;
}

#drops_container {
    position: absolute;
    top: 230px;
}


/* DragDrop */


/*-----------------------------------*/

.dragItem {
    position: relative;
    border: solid 2px #CCC;
    padding: 5px;
    background: #FFF;
    text-align: center;
    height: 60px;
    border-radius: 10px;
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
}


/*.dragItem.ui-draggable-dragging{background:#;}*/

.dropTarget {
    position: relative;
    border: dashed 2px #CCC;
    padding: 10px;
    /*text-align: center;*/
    height: 60px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    margin: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
}

.dragIco {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #000;
    font-size: 0.9em;
    opacity: .2;
}

.dragLabel,
.dropLabel {
    line-height: 1em;
}

.dropLabel {
    margin-top: -110px;
    color: #FFF;
    font-weight: var(--fontBigW);
    font-family: var(--fontBigF);
    font-size: 1.4em;
}

.dropTarget.bigDrop {
    height: 120px;
    flex-grow: 1;
}

.dropTarget.bigDrop .dropLabel {
    position: absolute;
    top: -52px;
    font-size: 1.2em;
    margin-top: 0px;
    text-align: center;
}



/*#########################################
#     LINKER
#########################################*/

#linker {
    position: relative;
    width: 80%;
    top: 250px;
    left: 90px;
    text-align: center;
}

.fieldsLinker div {
    font-weight: bold;
}

.fieldsLinker #select1,
.fieldsLinker #select2 {
    display: none;
}

#linkerBloc {
    text-align: center;
}

#fieldLinkerCheck {
    top: 90px;
    position: relative;
    z-index: 200;
}

.fieldsLinker ul {
    list-style: none;
    margin-left: 0px;
    padding-left: 0px;
    font-weight: normal;
}

tr td {
    padding-left: 10px;
}

tr td:not(:last-child) {
    border-right: 1px solid grey;
}

.fieldsLinker li {
    position: relative;
    /*padding: 5px 2px 5px 8px;*/
    padding: 8px 2px 8px 15px;
    margin-top: 15px;
    /* CAUTION : the top and bottom margin have to be equal */
    margin-bottom: 15px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
    background-color: #fff;
    box-shadow: 1px 1px 5px rgb(0 0 50 / 40%);
    color: #333;
    border-radius: 10px;
    text-overflow: ellipsis;
    /*overflow: hidden;*/
}

.fieldsLinker .FL-right li {
    padding-left: 27px;
}

.fieldsLinker li.selected {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.fieldsLinker li[data-mandatory='true'] {
    background-color: #D7504C;
    background: linear-gradient(#D7504C, #C12F2B);
    color: white;
}

.fieldsLinker li.inactive {
    opacity: 0.5;
}

.fieldsLinker li.linkOver {
    border: solid 2px transparent;
    /*plus 1px*/
    padding: 4px 1px 4px 7px;
    /* minus 1px*/
}

/* AJOUTS OLIVIER */
#linker{
  width:90%;
  left:48px;
  top:200px;
}

.FL-right, .FL-left{
  width:40% !important;
}
.FL-mid{
  width:20% !important;
}

.fieldsLinker .FL-right li{
  background-color: #85d7ff;
  padding-left: 30px;
}
.fieldsLinker .FL-left li{
  background-color: #ffd2fa;
}
.fieldsLinker .fa{
  color:rgba(0,0,0,.4) !important;
}
#fieldLinkerCheck {
    top: 10px;
}

/*#########################################
#     gapsInTextInput
#########################################*/

#gapsInTextInputBloc {
    top: 40px;
    left: 80px;
    width: 730px;
    font-size: 1.35em;
    line-height: 2em;
    position: relative;
    color: #FFF;
    height: 380px;
    text-align: center;
}

#gapsInTextNote {
    margin-bottom: 30px;
}

#gapsInTextInputBloc .content {
    text-align: left;
}

#gapsInTextInputBloc .submitButton {
    position: absolute;
    top: 400px;
    left: 280px;
}

.inputInGapsInTextMode {
    padding: 2px;
    border-radius: 10px;
    border: solid 1px rgba(255, 255, 255, 0.3);
    text-align: center;
    color: #FFF;
    background: rgba(255, 255, 248, 0.3);
}

.spanResultInSolution {
    display: inline-block;
    padding: 0px 5px;
}


/*#########################################
#     SCORM assets
#########################################*/

#btn_learner_page_small {
    position: absolute;
    bottom: 10px;
    left: 20px;
    z-index: 900;
}


/*#########################################
#     VIDEO
#########################################*/

#btn_video_replay {
    position: absolute;
    bottom: 82px;
    right: 35px;
}

#videoPlayerBloc {
    position: absolute;
    background: rgba(0, 0, 0, .7);
    padding-top: 46px;
    height: 600px;
    width: 900px;
    z-index: 2000;
}