/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 20 févr. 2015, 18:02:19
    Author     : lsmpascal
*/

:root{

    --bgGradWhite: linear-gradient(120deg, rgba(252,253,255,1) 0%, rgba(226,249,255,1) 100%);
    --bgGradSalmon: linear-gradient(342deg, rgba(254,247,228,1) 0%, rgba(255,238,198,1) 100%);

    --shadowLight: 0px 6px 10px rgba(25, 41, 70, 0.4);
    --shadowLightShort: 0px 2px 5px rgba(25, 41, 70, 0.3);
}

/* Mobile : To avoid blue blink on scene touch */
#game_outer { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/* Mobile : To avoid the menu to appear on long touch */
#game_outer:not(input):not(textarea) {
  -webkit-user-select: none; /* disable selection/Copy of UIWebView */
  -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */
}


#game_outer_container{margin-top:20px;}

/* RESET selector for element and children */

/*#game_outer a:hover,
#game_outer a:visited,
#game_outer a:active,*/
#game_outer, 
#game_outer .label{
    background:none;
    border:none;
    bottom:auto;
    clear:none;
    cursor:default;
    display: block;
    float:none;
    
    font-size:medium;
    font-style:normal;
    font-weight:normal;
    height:auto;
    left:auto;
    letter-spacing:normal;
    line-height:normal;
    max-height:none;
    max-width:none;
    min-height:0;
    min-width:0;
    overflow:visible;
    position:static;
    right:auto;
    text-align:left;
    text-decoration:none;
    text-indent:0;
    text-transform:none;
    top:auto;
    visibility:visible;
    white-space:normal;
    width:auto;
    z-index:auto;
}

/* Common ressources */
table.vAlign{width: 100%;}
table.vAlign td{vertical-align: middle;}


/* for reg game */
#game_outer canvas {
    background: var(--color1) !important;
}

/* Base css */


/* ----- */

/*

*/

#waiter_game_load{padding: 220px;}

#game_outer{ margin: auto; 
            
            letter-spacing: -0.06em;}
#game_outer .popup{
    width:300px; 
    height:400px; 
    background: var(--bgGradWhite);
    position: absolute; 
    top:90px; 
	margin-top:0px;
    padding: 15px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow:  var(--shadowLight);
    box-shadow:  var(--shadowLight);
}

/*
BUTTONS
 */
.button{
    /*background:#fee145; */
    background: linear-gradient(180deg, rgba(254,225,69,1) 0%, rgba(254,194,69,1) 100%);
    color: #994d04; 
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border:none;
    border-radius: 20px; border-radius: 20px;
    box-shadow:  var(--shadowLight);

    -webkit-tap-highlight-color: rgba(201, 62, 39,0.5);
}

.button:hover{background-color: #FEF0A7;}


/*
a.button:active, 
a.button:focus,
a.button:hover,
input.button:active, 
input.button:focus,
input.button:hover
{
    background: #f00 !important;
}
*/

/* To avoid the browser frame on focus */
.button:focus{
    outline: none;
}
.MathJax:focus {
    outline: none;
}

.button_interface{
    font-size:2em; 
    display:inline-block;
    padding:10px 25px 6px 25px; 
    webkit-box-shadow: var(--shadowLight);
    box-shadow: var(--shadowLight);
}

.button_interface.small{font-size:1.5em;}
/*
#game_outer .button{
    padding:5px 25px;
	color:#333;
    display:inline-block;
    font-size: 2em;
    font-weight: bold;
    background: #ccc;
    border:solid 4px #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
    cursor: pointer;
}

#game_outer .button:hover{
    background: #66F;
}

#game_outer .button:active{
    background: #0ff;
}
*/


/* winOverlay */
#winOverlay{
  position: absolute;
  top: 1px;
  left: 0px;
  width: 840px;
  height: 565px;
  background: rgba(87, 144, 247, 0.3);
  border-radius: 20px;
}

#winOverlay.hideGameOnWinEndGameDisplay{

    height: 100%;
    background: var(--color1);
    transition:.5s ease-in-out;
}

#topLayer.overlay{
    background: var(--color1);
    transition:1s ease-in-out;
}


/* winIntro */
#winIntro.popup{right:20px; text-align: center;}
#winIntro_inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
}
/*#winIntro tr:first-child{height: 250px;}
#winIntro tr:nth-child(2){height: 120px;}
#winIntro tr:last-child{height: 50px; text-align: center;}*/
#winIntro .label{
    padding:0px 20px;
    color:#427ECF;
    text-align: center;
    font-size:2em;
    font-weight: bold;
   }
#winIntro .label .notice{
  font-size:0.6em;
  font-weight: 200;
}
#winIntro label{cursor:pointer;color:#427ECF;}
#winIntro #playMode{text-align: left;}
#winIntro .playModeButtonBloc{margin-left:50px; margin-bottom:15px; font-size:1.3em;}
#winIntro .playModeButtonBloc:last-child{margin-bottom:0px;}

#winIntro .perso_prof{position: absolute; top: 245px; left: 230px;
                  width: 150px; height: 150px;}

#button_training_notes{color:#427ECF; cursor:pointer;}

#winIntro #buttonStart{ 
    margin-top: -10px;
    font-size: 3em;
}

/* winEndGame */
#winEndGame {left:50%; margin-left: -168px;}

#winEndGame tr:first-child{height: 140px;}
#winEndGame tr:first-child td{padding-bottom: 40px;}
#winEndGame tr:nth-child(2){height: 140px;}
#winEndGame tr:nth-child(3){height: 100px;}
#winEndGame tr:last-child{height: 50px; text-align: center;}

#winEndGame .text{
    padding:0px 20px;
    color:#427ECF;
    text-align: center;
    font-size:1.8em;
    font-weight: bold;
   }
#winEndGame .percentSuccessTitleLabel{font-size:1.5em;}
#winEndGame .scoreTitleLabel{font-size:3.5em;}
#winEndGame .scoreLabel{font-size:4em; font-weight: bold;}
#winEndGame .scoreTitleLabel{font-size:1.5em;}
#winEndGame .scoreLabel{font-size:4em; font-weight: bold;}
#winEndGame .bonusTitle{font-size:2em; font-weight: bold;}
#winEndGame .bonusLabel{font-size:3.5em; font-weight: bold;}
#nbErrorsTitle{}
#nbErrorsLabel{}

#winEndGame #stars_in_winEndGame{font-size: 4em; text-align: center;}
#winEndGame #stars_in_winEndGame i{position: absolute;}
#winEndGame #stars_in_winEndGame i.star_1{top: 50px; left: 37px;}
#winEndGame #stars_in_winEndGame i.star_2{top: 85px; left: 122px;}
#winEndGame #stars_in_winEndGame i.star_3{top: 50px; right: 43px;}



/* winEdnGame without table 200817 */
#winEndGame{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start; /*space-between;*/
    flex-direction: column;
}


#stars_in_winEndGame{
    position: absolute;
    width: 310px;
    top: 0px;
    left: -5px;
}

#winEndGame .scoreTitleLabel{margin-top: 80px;}
#winEndGame .bonusTitle{margin-top: 12px;}

#buttonContainerInWinEndGame{
    /*display: flex;*/
    /*justify-content: center;*/
    margin-top: 25px;
    text-align: center;
}

.bestScoreWarning{
    position: relative;
    line-height: 1em;
    height: 122px;
    display:flex;
    align-items: center;
    justify-content: center;
}

.bg_success::before {
    content: '\f00c';
    color: var(--colGreenLight);
    font-family: 'FontAwesome';
    left: calc(50% - 61px);
    top: 40px;
    position: absolute;
    font-size: 5em;
    z-index: -2;
}


.bg_failure::before {
    content: '\f00d';
    color: var(--colRed);
    font-family: 'FontAwesome';
    left: calc(50% - 61px);
    top: 40px;
    position: absolute;
    font-size: 5em;
    z-index: -2;
    opacity: .4;
}


/* --- end --- */


#timerBloc{
    position: absolute; 
    bottom: 40px; 
    right: 20px; 
    width: 20px; 
    height: 500px; 
    border: solid 3px #fff;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
    box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
}
#timerBar{
    background: linear-gradient(155deg, rgba(71,255,44,1) 0%, rgba(255,212,45,1) 100%);
    height: 500px; 
    width: 16px;
    position: absolute; 
    bottom: 0px; 
    right: -1px;
          
    -webkit-border-radius: 0px 0px 6px 6px;;
    border-radius: 0px 0px 6px 6px;
  }



#best_score_student_bloc{position: absolute; bottom:18px; left:40px;width: 700px;}
#best_score_student_bloc .student_name, #best_score_student_bloc .best_score_bloc, #best_score_student_bloc .best_percent_success_bloc{display:inline-block; margin-right: 30px;}

/* No student_name in best_score_bloc in famille */
#best_score_student_bloc .student_name{
    display: none;
}

.mobile_full_screen #best_score_student_bloc {
    font-size: 1.6em;
    color: #FFF;
    bottom: 15px;
    width: 800px;
    text-align: center;
    opacity: 0.6;
}

/* G_KID_INTERFACE == false */
.no_kid .perso_prof{display:none;}

/* Button */
#buttonPlayAgain, #buttonBack{display:inline-block;}
#buttonBack{margin-right: 10px;}


/*gamespecialid_note*/
.gamespecialid_note{position: absolute;
bottom: 20px;
right: 70px;
font-family: arial;
font-size: 0.6em;
text-align: right;
letter-spacing: 0.01em;
}

.mobile_full_screen .gamespecialid_note{
    display:none;
}


/*PublishScoreWin*/
#game_outer .popup#winPublishScore{right:20px; top: 170px; text-align: center; height: 250px; width: 250px; z-index:200;}
.labelPublishScore{margin-top:30px; color: #427ECF;}



/*btn_fullscreen*/
#btn_fullscreen{
    position: absolute;
    bottom: 7px;
    left: 630px;
    text-align: center;
    z-index: 200;
}

/*fullscreen*/
#game_outer_container.fullscreen_mozilla{position: fixed; z-index: 9999;
    top:0px; left:0px; background: #FFF; margin:auto; width:100%; height:100%;
}



/* winEndGame reduction and move to display the video */
.winEndGameReducedAndMoved {
    transition:1s ease-in-out;
    transform: translate(-304px, -110px) scale(0.6);
}

.winEndGameMoved {
    transition:1s ease-in-out;
    transform: translate(-280px, 0px);
}

/* winHofResult */
/*-----------------------------------*/
.popup#winHofResult {
    height: 95px;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    left: auto;
    width: 560px;
}
#winHofResult .content{
    text-align: center;
    color:#427ECF;
}
#winHofResult .content.bg_success::before{
    top: -50px;
}
#winHofResult .content.bg_failure::before{
    top: -30px;
}

/* winGamePreco */
/*-----------------------------------*/
.popup#winGamePreco {
    height: 340px;
    right: 0px;
    /*display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;*/
    font-size: 1.8em;
    left: auto;
    width: 560px;
    top: 200px;
}

.popup#winGamePreco .game_preco_list .gameThumbIcon {
    margin: 11px 3px 5px;
}

.popup#winGamePreco h3{
    color:var(--color1);
}
.popup#winGamePreco .txt{
    text-align: center;
    font-size: 0.8em;
    margin-bottom:10px;
}

.popup#winGamePreco .gameThumbIcon.smallThumbPreco {
    width: 170px;
    height: 120px;
}

.popup#winGamePreco .gameThumbIcon.smallThumbPreco .game_name {
    font-size: 16px !important;
}
.popup#winGamePreco .gameThumbIcon.smallThumbPreco{
    font-size: 14px;
}
.popup#winGamePreco .gameThumbIcon.smallThumbPreco .iconSupBloc{
    display: none;
}

#game_preco_title {
    text-align: center;
    font-size: 0.9em;
    font-family: Blogger_Sans_Bold;
}
.game_preco_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 10px;
}
.game_preco_list .gameThumbSquare {
    margin:10px;
}
.game_preco_list .flex_break {
    margin-top: 21px;
    border-bottom: solid 1px rgba(0,0,100,0.2);
    margin-bottom: 5px;
}


/* winEndVideo */
/*-----------------------------------*/

#game_outer .popup#winEndVideo{
  width: 600px;
  height: 355px;
  padding: 20px;
  top:130px;
  left:233px;
  z-index: 900;
}


/* portrait_landscape_bloc */
.portrait_landscape_bloc{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    z-index: 2000;
    color:#FFF;
    background: var(--bgGradBlue);
}
.portrait_landscape_bloc img.logo{
    width:200px;
}
.portrait_landscape_bloc img.warning_img{
    width:240px;
}
.portrait_landscape_bloc .text{
    padding:20px;
    text-align: center;
}
#btn_hide_portrait_landscape_bloc{
   /* display:none;  This button is ueseless */
    margin-top: 150px;
    color:rgba(255,255,255,.6);
    font-size: 3em;
}
/* Tablets. This is a security for the tablets to never have the warning
@media only screen and (max-device-width : 736px),
            screen and (max-device-width : 768px) and (orientation : portrait){
    #portrait_landscape_bloc{display:none;}
}
*/


/* --------------------------------------- */
/* MOBILES / TABLETS */
/* --------------------------------------- */

/* Rules for mobile_full_screen (see index_c_01.js) */<
body.mobile_full_screen{
    overflow-x: hidden;
}

.mobile_full_screen #game_outer,
.mobile_full_screen #game_outer.wrap_quiz,
.mobile_full_screen #game_outer.wrap_reg{background: none;}
.mobile_full_screen #game_outer_container{
    background:var(--color1); /*#4eaaeb;*/
    position:fixed;
    top:0px;
    left:0px;
    z-index:500;
    /*height: 100%;*/
    margin-top:0px;
    /*overflow : hidden;*/
}

.mobile_full_screen .gamespecialid_note{color:#FFF;}

.mobile_full_screen #timerBar{right: 0px;}

.mobile_full_screen #timerBloc{
    width: 16px;
    border: none;
    background: #417BE7;
}

/* game_menu_for_mobile */
#game_menu_for_mobile{
    text-align: right;
    font-size: 2em;
}
#game_menu_for_mobile li{
    margin:10px;
}

.mobile_full_screen #game_menu_for_mobile{
    position: absolute;
    top:0px;
    right: -2px;
    z-index:20;
    font-size:2em;
    text-align:right;
}


.mobile_full_screen #game_menu_for_mobile .ico_btn{
    color: #FFF;
}

#game_menu_popup_for_mobile{
    padding:15px;
    background: #4eaaeb;
    border:solid 2px var(--colBlueDark);
}


/* we hide the btn_navbar_toggle */
/*-----------------------------------*/
.mobile_full_screen #btn_navbar_toggle{
    display:none;
}

/* For TABLETS */ 
/*-----------------------------------*/
@media only screen and (max-device-width : 1300px){

    #questionLabelBloc{top:7px; margin-left: 20px;}
    #mainScoreLabel{top: 2px;} 

    /* Game */
    #topInterface{top:55px !important;}
    #timerBloc{}/*top:5px;*/




    /* We want the text shadows only for .wrap_reg */
    #mainScoreLabel, #questionIndexLabel, .wrap_reg #questionTextLabel{ color:#FFF !important;
        text-shadow: -1px 0 2px #000, 0 1px 2px #000, 1px 0 2px #000, 0 -1px 2px #000;}
    
    #questionTextSupLabel{text-shadow: -1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF;}

    /* For reg : special rules.*/
    .mobile_full_screen .wrap_reg #questionLabelBloc,
    .mobile_full_screen .wrap_reg #mainScoreLabel{
        top:-18px;
        background: #FFFFFF;
        padding: 1px 19px 4px !important;
        border-radius: 20px;
        color:#225164 !important;
        text-shadow:none;
    }
    .mobile_full_screen .wrap_reg #mainScoreLabel{
        font-size: 2em;
    }

    .mobile_full_screen .wrap_reg #questionLabelBloc{ /* at start we need to hide */
        display:none;
    }
    .mobile_full_screen .wrap_reg #questionIndexLabel,
    .mobile_full_screen .wrap_reg #questionTextLabel,
    .mobile_full_screen .wrap_reg #questionTextSupLabel{
        color:#225164 !important;
        text-shadow:none;
    }

   
    #questionLabelBloc{left:50px;}
    #mainScoreLabel{ /*margin-right:20px*/;}
    .score_comparator { display: block;}

    #game_outer #winSolution.popup{top: 130px;}

    #best_score_bloc_content_result{bottom:auto !important; z-index:2000 !important; top:22px; }
    

}

/*#########################################
# >>    toastAchEndGame
#########################################*/
.toastAchEndGame{
    
}


/*#########################################
#         For tablets and desktop
#########################################*/
@media (min-width: 992px) {
    /*md xl*/
    #best_score_student_bloc{bottom:8px;}
}


/*#########################################
#       MEDIA QUERIES
#########################################*/
@media (max-width: 768px) {
    /*xs*/

   #game_outer #best_score_student_bloc{
        display:none;
    }

    #speechIconContainerSup{
        display:none;
    }

}

@media (min-width: 768px) and (max-width: 992px) {
    /*sm*/

}

@media (min-width: 992px) and (max-width: 1200px) {
    /*md*/

    .mobile_full_screen #best_score_student_bloc{
        bottom: -10px;
    }
}


@media (min-width: 1200px) {
    /*lg*/

}



/*#########################################
# >>    animations
#########################################*/
@keyframes popArrivalWest {
  from {transform: translate(-200px, 0px);}
  to {transform: translate(0px, 0px);}
}

@keyframes popArrivalEast {
  from {transform: translate(200px, 0px);}
  to {transform: translate(0px, 0px);}
}

@keyframes popArrivalNorth {
  from {transform: translate(0px, -200px);}
  to {transform: translate(0px, 0px);}
}
@keyframes popArrivalSouth {
  from {transform: translate(0px, 200px);}
  to {transform: translate(0px, 0px);}
}


.popArrival{
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(0, 0, 0.32, 1.2);
}

.popArrivalWest{
    animation-name: popArrivalWest;
}
.popArrivalEast{
    animation-name: popArrivalEast;
}
.popArrivalNorth{
    animation-name: popArrivalNorth;
}
.popArrivalSouth{
    animation-name: popArrivalSouth;
}