:root {
    --bgColor: #1f3456;
    --txtColor: #b4cbdc;
    --bgColor2: #1f3456; /*#113653;*/

    --txtColor: #284578;
    --bgColor: #ececec;
    --bgColor2: #ececec;  
    --txtHoverColor:#6386a0;

    --pageContentBgColor:#091a36;
    --middleBgColor:#0b2943;

    --footerOpacity: .3;
    --fontSize: 1.7em;
    --borderBouts: solid 2px var(--bgColor);
}

section#game_container {
    margin-top: 0px;
    margin-bottom: 73px;
}

#game_outer{
    background: none!important;
}
#map_frame_for_quiz_dark_mode{
    width:1px;
    height: 1px;
}
#btn_fullscreen{
    background-color: var(--txtColor);
    color:#091a36;
    bottom:2px;
}
#btn_fullscreen:hover{
    opacty:.5;
}

body.quiz_imgSatGame h1 {
    
    text-transform: none;
    margin-top: 7px;
    margin-bottom: 7px;
    font-size: 2em;
    font-family: Helvetica, sans-serif;
    text-shadow: none;
}

.quizImage #imgContainer {
    position: absolute;
    top: 22px;
    left:0;
    width: 900px;
    height: 446px;
    overflow: hidden;
    border-radius: 230px;
    border: var(--borderBouts);
    line-height: unset;
}

.quizImage #imgContainer img{
    width:100%;
}

.sight{
    position:absolute;
    width:78px;
    height: 64px;
    z-index:100;

    opacity: 0; 
    animation: scaleBounce 0.3s ease-out 0.2s forwards, 
                fadeIn 2s linear 2s forwards,
                scaleShake 5s linear 4s infinite
}

@keyframes scaleBounce {
    0% {
        opacity:0;
        transform: scale(3); 
    }
    80% {
        opacity:1;
        transform: scale(0.5); 
    }
    100% {
        opacity:1;
        transform: scale(1); 
    }
}

@keyframes fadeIn {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.4; 
    }
}

@keyframes scaleShake {
    0% {
        transform: scale(1); 
        opacity: 0.4; 
    }
    96% {
        transform: scale(1); 
        opacity: 0.4; 
    }
    97% {
        transform: scale(1.25); 
        opacity: 1; 
    }
    98% {
        transform: scale(1); 
        opacity: 0.7; 
    }
    99% {
        transform: scale(1.25); 
        opacity: 1; 
    }
    100% {
        transform: scale(1); 
        opacity: 0.4; 
    }
}

.sight img{
    width:100%;
}


#game_outer_container_2 {
    box-shadow: none!important;
    background: none!important;  
}

/*
body.is_game_page .page-content {
    background: rgba(9, 26, 54, .5), url(../_common_spe/imgSat/quiz_imgSat_bg.jpg) ;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
*/

#cellsBloc.smallCells {
    bottom:32px;
    opacity: var(--footerOpacity);
    display:none!important;
}

#timer_pie_chart {
    position: absolute;
    right: 2px;
    top: 412px;
    -ms-transform: rotate(22deg);
    -webkit-transform: rotate(22deg);
    transform: rotate(22deg);
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: .5;
}

#timer_seconds{
    display:none;
}

#topInterface{
    top:0px;
}

/* questionLabel & scoreLabel */
/*-----------------------------------*/
.quizImage #questionTextLabel {
    top: 1px;
    right: auto;
    left: 160px;
    width: 380px!important;
    height: 42px!important;
    padding: 0px 0px;
    font-size: var(--fontSize);
    z-index: 5;
    background-image: none;
    background-color: var(--bgColor2);
    color: var(--txtColor);
    border-radius: 37px;
    width: unset;
    height: unset;
    border: var(--borderBouts);
    display: flex!important;
    justify-content: center;
    align-items: center;
    padding-top: 3px;

    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;

    margin-left: -20px;
}

.quizImage #questionTextLabel small{
    font-size:.5em;
    opacity: .4;
}

.quizImage .letterSep{
    letter-spacing: -0.3em;
}

#mainScoreLabel {
    z-index: 5;
    background-color: var(--bgColor2);
    color: var(--txtColor)!important;
    border-radius: 37px;
    height: 42px;
    font-size: var(--fontSize);
    width: 198px!important;
    top: 1px;
    right: 160px;
    border: var(--borderBouts);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3px;
}
.dark_mode #mainScoreLabel{
    color:var(--txtColor);
}

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

#questionIndexLabel{
    color:#FFF!important;
    opacity:var(--footerOpacity);
    left:40px;
    bottom:30px;
}



/* BUTTONS */
/*-----------------------------------*/

.answerButton {
    color:var(--txtColor);
    border: none;
    background: var(--bgColor);
    position: absolute;
    width: 288px;
    height: 47px;
    display: block;
    font-size: 1.7em;
    webkit-box-shadow: none;
    box-shadow: none;
    font-weight: normal;
    padding: 5px;
    line-height: 0.7em;
    border-radius: 37px;
    border: var(--borderBouts);
}
.answerButton:hover{
    background: #FFF;
    border: #FFF;
    color:var(--txtHoverColor)!important;

}

#game_outer .button_text::first-letter{
    text-transform: uppercase;
}

.quizImage #button1 {
    top: 444px;
    left: 159px;
}
.quizImage #button2 {
    top: 444px;
    left: 450px;
}
.quizImage #button3 {
    top: 495px;
    left: 159px!important;
}
.quizImage #button4 {
    top: 495px;
    left: 450px;
}

.gamespecialid_note{
    display: none;
}

#btn_fullscreen {
    left: 405px;
}

#best_score_bloc_content_result{
    opacity: var(--footerOpacity);
    bottom:0px;
}

#soundController{
    opacity:var(--footerOpacity);

}

.dark_mode .podium_xl_l{
    background-color: rgba(9, 26, 54, .7);
    border-radius: 30px;
    padding: 10px 20px;
}
.dark_mode #podium_title{
    display: none!important;
}


/*#########################################
# >>    QUIZ_IMGSAT
#########################################*/

body.quiz_imgSatGame .page-content{
    background-color: #091a36 ;
    background-image: url(../_common_spe/quiz_imgSat/quiz_imgSat_bg.jpg)!important;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100%;
}

body.imgSatPays .page-content{ 
    background-image: url(../_common_spe/quiz_imgSat/quiz_imgSatPays_bg.jpg)!important;
}


body.quiz_imgSatGame h1{
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: left;
}

body.quiz_imgSatGame #podium_title {
    display: none;
}


/*#########################################
# >>    WIN INTRO
#########################################*/
#winIntro.popup .img_game_title {
    margin: auto;
    width: 756px;
}
    #winIntro.popup .img_game_title_bloc {
    margin-top: -144px;
}

#winIntro.popup #buttonStart {
    width: 202px;
    padding: 7px;
    padding-top: 11px;
    border-radius: 50px;
    position: absolute;
    top: 199px;
    left: 374px;
    background-color: var(--bgColor);
    color: var(--middleBgColor);
    font-family: Blogger_Sans_Bold;
    text-transform: uppercase;
    font-size: 1.7em;
}


#winIntro.popup #buttonStart:hover {
    background-color: #FFF;
    color: var(--txtHoverColor);
}

.button_interface {
    width: 202px;
    padding: 7px;
    border-radius: 50px;
    
    background-color: var(--bgColor);
    color: var(--middleBgColor);
    font-family: Blogger_Sans_Bold;
}

.button_interface:hover{
    background-color: #FFF;
    color: var(--txtHoverColor);
}

#nb_plays_and_stars_details_in_game {
    top:443px;
}

#best_score_bloc_in_stars_detail{
    display:none;
}
#soundController {
    right: 71px;
    bottom: -6px;
    color: #fff;
    font-size: 2em;
}
#best_score_bloc_content_result .rank {
    position: absolute;
    top: -1px;
    right: 38px;
}

.button:active {
    background-color: var(--bgColor);
}

#misc_data_in_best_score_bloc{
    display:none;
}

/*#########################################
# >>    Game's windows
#########################################*/

#game_outer #winNextEvent.popup {
    top: 55px;
    left: 150px;
    height: 303px;
    width: 569px;
    margin-left: 0px;
    padding: 40px 80px;
    border: solid 2px #FFF;
    border-radius: 200px;
    box-shadow: inset 0 0 70px rgba(255, 255, 255, 0.4);
    color: #FFF;
}

#winNextEvent .label{
    color:#FFF;
}

#winNextEvent .buttonNextEvent{
    position:absolute;
    left:179px;
}

#winSolutionLost {
    width: 650px;
    height: 278px;
    -webkit-border-radius: 20px;
    border-radius: 200px;
    background: none;
    border: solid 2px #FFF;
    box-shadow: inset 0 0 70px rgb(255 40 40 / 40%)
}

#winSolutionBloc{
    top:110px;
    left:127px;
}

#winSolutionBloc .title {top:50px;}

#winSolutionBloc .baseline {top:109px;}

#winSolutionBloc .label {
    top:143px;
    width: 650px;
}

#winSolutionBloc .label::first-letter {
    text-transform: uppercase;
}

#winSolutionBloc .nextButton {
    top: 250px;
    left: 34%;
    margin-left: 0px;
}

#game_outer #winEndGame.popup {
    top: 55px;
    left: 108px;
    height: 360px;
    width: 676px;

    margin-left: 0px;
    padding: 10px 80px;

    border: solid 2px #FFF;
    border-radius: 200px;
    box-shadow: inset 0 0 70px rgba(255, 255, 255, 0.4);
}

#endWarmupTitle1{
    display: none;
}

#winEndGame #buttonPlayAgain {
    margin-top: 0;
    position: absolute;
    bottom: -19px;
    left: 235px;
}

#winEndGame .statsBloc {
    border: solid 1px #FFF;
    border-radius: 60px;
    opacity: .5;
    margin: 0 60px;
}

#winEndGame .text {
    color: #FFF;
}

#winEndGame .scoreLabel {
    color: #FFF;
}

#winButtonsEndGame.popup {
    width: 824px;
    bottom: 38px;

}


#game_outer .popup {
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#winEndWarmup {
    color: #FFF!important;
    height: unset!important;
    padding-top: 25px;
    margin-top: 10px!important;
    text-shadow: 0 0 13px #091936;

    
}
#winEndWarmup .button_interface{
    position:absolute;
    left:148px;
    text-shadow: none;
}

#game_outer .note{
    color:#FFF;
}

#buttonDisplayGameStats{
    opacity: .3;
    font-size: .9em;
}


body.quiz_imgSatGame #podium_day a.login_link{
    color: #FFF;
}

body.quiz_imgSatGame #podium_day .favusers_button_ADD{
    color: #FFF;
}