/* ============== colors =============== */

.color1{
    color:white;
}

a{
    color:white;
    text-decoration: none;
    font-weight: 900;
}


html, body {
  height: 100%;
  margin: 0px;
  padding:0px;
  font-family: 'Cairo', sans-serif;
}

body{
    background-image: url('./../../../img/game/bg2.jpg');
    background-repeat: no-repeat;
    background-size:cover;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}



.box .row.header {
  flex: 0 1 50px;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}



/* ============== navbar =============== */
#game_navbar_container{
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #32353c;
    height: 100%;
}

#game_navbar_container #logo{
    height:40px;
}

#game_level{
    text-decoration: none;
    margin:0px;
    padding:0px;
   
}
.level_unit{
    display: inline-block;
    background-color: white;
    border-radius: 50%;
    width:20px;
    height: 20px;
    text-align: center;
    font-size: 8px;
    font-weight: 900;
    margin:10px;
    padding:2px 2px 2px 2px;
}


.level_unit_selected{
    cursor: pointer;
    background-color: #f36e4b;
    color:white;    
}
.level_unit:hover{
    cursor: pointer;
    background-color: #0096db;
    color:white;
}

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

/* ============== score =============== */

#score_container_score{
    background-color: red;
    margin-right: 20px;
    padding-right:10px;
    font-weight: 900;
    color: white;
    font-size: 18px;
    border-radius: 10px;
    background-color: rgb(50, 53, 60);
    box-shadow: inset 0px 2px 14px 0px rgba(0, 0, 0, 0.63);
}

#score_container_score img{width:50px;margin-right:10px;}
/* ============== navbar =============== */





/* ==================== menu container =================*/
.menu_container{
    width: 100%;
    height:100%;
    background-color: rgb(107, 107, 107);
}


.game_container{
    width: 100%;
    height: 100%;
}

.flex_center{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items:center;
}

.flex_end{
   width: 100%;
   height: 100%;
    display: flex;
    justify-content:space-evenly;
    align-items: flex-end;
}
#game_animation{
    width: 30%;
}

#game_content_background{
    width: 65%;
    height: 95%;
    background-image: url("./../../../img/table.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#game_content{
    width: 90%;
    height: 95%;
    margin: 0% 5% 6% 5%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

#exercice_titre{
    padding: 10px 80px 20px 80px;
    text-align: center;
    color:white;
    flex: 0 1 0px;
    text-align: center;
    margin-top: -1px;
    background-image: url('./../../../img/title.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    margin: 0px 0px 10px 0px;

}

#exercice_text{
    font-size: 22px;
    font-weight: 700;
    width: 100%;
    margin: 0px;
    padding:0px;
    text-align: center;
   
}

#game_content_exercice{
    width: 90%;
    flex: 1 1 auto;
}

#zegame{
    width: 100%;
    height: 100%;
    display: flex;
    xflex-direction: row;
    flex-wrap: wrap;
    justify-content:space-evenly;
    align-items:center;
}

.zegame_elements{
    cursor: pointer;
    border-radius: 5px;
    xbackground: red;
}

#zegame div span{
    color:red;
}

#zegame div h4{
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#zegame img{
    width:100%;
    background: url('https://tarik-ai.com/common/img/loading.gif') 50% no-repeat;
}



/*  ============================  info element  ============================*/
#info_main_container{
    background-color: #095098;
    width:100%;
    height:100%;
    max-width:800px;
    max-height: 500px;
    display: flex;
    position:absolute;
    border-radius: 10px;
}

.info_container{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:20px;

}

.info_img{
    height: 100%;
    border-radius: 10px 0px 0px 10px;
}

.close_button{
    position:relative;
    top: -15px;
    right: -15px;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.close_button i{
    font-size: 30px;
}

#info_p{
    text-align: center;
}

/*  ============================  /info element  ============================*/

/*======================= score ==================== */
#score_container{
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.9);
    position:fixed;
    top:0px;
    left:0px;
    z-index:1000;
    display:none;
    justify-content: center;
    align-items: center;
}

#party_container{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index:1000;
    display:none;
    justify-content: center;
    align-items: center;
}


/* ================= loding container : start =============== */
#loading_container{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index:2000;
    margin: 0px;
    padding: 0px;
	background: radial-gradient(#CECECE, #fff);
	display: flex;
	justify-content: center;
	align-items: center;
    overflow: hidden;
    flex-direction: column;
}

#reloading_page{
    text-align: center;
    display:none;
}

.loader_container {
	width:20%;
	height: 0px;
    padding-bottom: 20%;
	border-radius: 100%;
	background: linear-gradient(165deg, rgba(255,255,255,1) 0%, rgb(220, 220, 220) 40%, rgb(170, 170, 170) 98%, rgb(10, 10, 10) 100%);
	position: relative;
}

@media screen  and (max-width:450px) {
    .loader_container {
        width:300px;
        padding-bottom: 300px;
    }
}
.loader {
}

.loader:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 100%;
	border-bottom: 0 solid #ffffff05;
	
	box-shadow: 
		0 -10px 20px 20px #ffffff40 inset,
		0 -5px 15px 10px #ffffff50 inset,
		0 -2px 5px #ffffff80 inset,
		0 -3px 2px #ffffffBB inset,
		0 2px 0px #ffffff,
		0 2px 3px #ffffff,
		0 5px 5px #ffffff90,
		0 10px 15px #ffffff60,
		0 10px 20px 20px #ffffff40;
	filter: blur(3px);
	animation: 2s rotate linear infinite;
}

@keyframes rotate {
	100% {
		transform: rotate(360deg)
	}
}


.loader img{
    width:80%;
    margin: 20% 10% ;
}

#loading_barre{
    width:20%;
    height: 5px;
    border: 1px solid white;
    margin-top: 20px;
}

#loaded_barre{
    width: 100%;
    height: 100%;
    width:90%;
    background-color: white;
    animation: 10s loading_animation ease;
}

@keyframes loading_animation {
    0%{width:0%}
    5%{width:5%}
    10%{width:5%}
    50%{width:50%}
    60%{width:50%}
    100%{width:90%}
}
/* ================= loding container : end =============== */

/* ================= short cut buttons : start =============== */
#shortCut_container{
    background-color: black;
    width:30px;
    position:fixed;
    top:50%;
    left: 0px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px 3px 10px 0px;
    border-radius: 0 5px 5px 0;
}


.icon{
    fill: white !important;
    margin: 5px 0px;
    width: 17px;
    height: 17px; 
}

.icon:hover{
    fill: #4dd1e9 !important;
    cursor: pointer;
}

#play{
    display: none;
}

@media screen and (max-width:800px) {
    #shortCut_container{ top:15%;}
}
/* ================= short cut buttons : end =============== */




#score,#replay, #diplome{
    width:500px;
    height:350px;
    border-radius:10px;
    background: rgb(65,151,220);
    background: radial-gradient(circle, rgba(65,151,220,1) 0%, rgba(34,82,126,1) 100%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:45px;
    border: 1px solid white;
}


#fanec{
    margin-left:-120px;
}

.game_title1{
    width:100%;
    font-size:25px;
    font-weight:800;
    text-align: center;
}

.score_button {
    width:200px;
    height:45px;
    border-radius: 5px;
    background-color:#ff8c1a;
    color:white;
    font-weight: 700;
    font-size:20px;
    border:none;
    border-bottom: solid #db6b00 4px;
    margin:5 0;
    font-family: 'Cairo',Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    cursor: pointer;
}

.animate_stars {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
}

@-webkit-keyframes zoom {
    0% {transform:scale(1);}
    50% {transform:scale(1.1);}
    100% {transform:scale(1);}
    
}



@media screen  and (max-width:800px) {
    

    /* ============== ze game ==============*/

    #exercice_titre{
        font-size: 1.5rem;
        padding: 10px 20px 20px 20px;
    }

    #exercice_text{
        font-size: 16px;
    }
   
     #game_animation{
        width:50%;
     }

     #game_content_background{
        width: 100%;
     }

     .info_img{
        width: 50%;
        height: unset;
    }

    .info_container{
        width:100%;
        padding: 0px;

    }

    .game_title1 {
        font-size: 16px;
    }



    #info_main_container{
        max-width: unset;
        max-height: unset;
       flex-direction: row;
    }

   

   
}


@media screen  and (max-height:500px) {
    

    /* ============== ze game ==============*/
    #exercice_titre{
        font-size: 1.2rem;
        padding: 5px 20px 10px 20px;
    }

    body{
        height:110%;
    }

}

@media screen  and (max-width:450px) {
    #exercice_titre{
        font-size: 1.7rem;
        padding: 20px 30px 30px 30px;
    }

    .flex_end{
         flex-direction: column;
     }

     #game_animation{
        width:50%;
     }

     #game_content_background{
        width: 100%;
     }

     #zegame{
        flex-direction: column;
     }

     .info_img{
        width: 100%;
        height: 50%;
    }

    .info_container{
        width:100%;
        padding: 0px;

    }

    .game_title1 {
        font-size: 16px;
    }



    #info_main_container{
        max-width: unset;
        max-height: unset;
       flex-direction: column;
    }

    #info_p{
        margin: 0px 10px;
    }

   
}



/* ========================== write alphabet ============================== */
#zeGame_addText_container{
    background-color: #fdf1d8;
    min-width:80%;
    height:50px;
    position: relative;
}

#zeGame_addText{
    min-width: 100%;
    text-align: center;
    font-size: 1.7em;
    font-weight: 700;
}

#cancel_button{
 min-height: 30px;
 min-width: 30px;
 max-width: 30px;
 background-color: red;
 position: absolute;
 top:10px;
 right: 10px;
 border-radius: 50%;
 color:white;
 line-height: 23px;
 font-size: 25px;
 text-align: center;
 cursor:pointer;
}

#keyboard{
    min-width: 100%;
    max-width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.letter{
    cursor: pointer;
    background-color: green;
    text-align: center;
    xwidth: 50px;
    padding:5px 20px;
    margin: 5px;
    color: white;
    font-size: 1.5em;
    font-weight: 700;
    border-radius: 10px;
}

@media screen  and (max-width:450px) {
    .letter{
        font-size: 12px;
        xwidth: 20px;
        padding:5px 20px;
    }

}

@media screen  and (max-height:500px) {
    #zeGame_addText_container{height: 30px;font-size: 14px;line-height: 25px;}
    #cancel_button{top: 0px;right:0px;}
    .letter{
        font-size: 12px;
        xwidth: 20px;
        padding:5px 20px;
    }
}