/* Landing page */


input, label {
    display:block;
}

input{
    padding: 10px;
    border: solid 1px #635449;
    transition: box-shadow 0.3s, border 0.3s;
    border-radius: 10px;
    background-color : #736357;
    width: 88%;
    font-size: 1.5vw;
}

.wrapper-login {
    position: absolute;
    width: 100%;
    height: 85%;
    z-index: 2000;
    display: none;
    margin: 0 auto;
    text-align: center;
}
.wrapper-content {
    position: relative;
    width: 540px;
    margin: 0 auto;
    top: 40%;
    font-size: 30px;
    font-family: 'PT Sans', sans-serif;
    color: #3d6779;
}

.wrapper-content p{
    font-size: 1vw;
}

.wrapper-content label{
    padding-top: 10%;
    font-size: 1vw;
}

/* css exercice */

.bgBox{
  width:100%;
  overflow:hidden;
  position:relative;
}

.bgImg{
  width:100%;
  margin:0;
  padding:0;
  display:block;
  position:relative;
}


.btn_wrapper {
    text-align:center;
    padding : 10px;
    margin: 30px 0;
}


.exercice_wrapper {
    text-align: center;
    height: 28%;
    border-color: #ffffff;
    padding: 4px;
    border-radius: 10px;
    color: white;
    background-color: rgba(190,190,190,0.3);
    border: 3px solid white;
    font-size: 12px;
    bottom: 5%;
    position: absolute;
    width: 90%;
    left: 105%;
    z-index: 2;
}
.good_answer{
    background-color: rgba(32, 244, 102, 0.7);
}
.bad_answer{
    background-color: rgba(227, 41, 41, 0.7);
}

.exercice_star {
    position: absolute;
    width: 5%;
    top: 40%;
    display:none;

}

.left_star {
    left: 6.5%;
}

.right_star {
    left:88.5%;
}

.exercice_title {
    text-align: center;
    position: relative;
    top: 0%;
    width: 60%;
    margin: auto;
}

.exercice_box {
    border: 5px dotted white;
    position: relative;
    width: 15%;
    top: 0%;
    height: 60%;
    border-radius: inherit;
}
.box_label{
    font-size:25px;
    margin-top:-45px;
}

.box_left {
    float:left;
    left:1%
}

.box_right {
    float:right;
    right: 1%;
}

.exercice_words {
    position: absolute;
    width: 60%;
    left: 20%;
}

.label {
    font-size: 26px;
    display: inline-block;
    width: 20%;
    padding: 20px 5px 28px 5px;
    margin: 0% 1% 1% 1%;
    background: url(../media/exercice/exercice-blank_btn.png) no-repeat left 4px;
    background-size: 100% auto;
    text-decoration: none;
    color: #545454;
}
.row1 {
    /**margin:45px 10px**/
}

.leftArrow {
    width: 4%;
    display: inline;
    position: absolute;
    left: 0%;
    top: 20%;
}

.rightArrow{
    display: inline;
    position: absolute;
    right: 0%;
    width: 4%;
    top: 20%;
}

.exerciceExplication {
    font-size:25px;
}

/* AI input css */
.ai-input {
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 15%;
    background: transparent;
     bottom: 0px;
}

#ai-answer {
    z-index: 10;
    position: absolute;
    left: 38%;
    bottom: 5vh;
    text-align: center;
    color: #000;
    font-size: 2vw;
    padding: 5px;
    display: block;
    max-width: 608px;
    width: 25%;
    max-width: 23vw;
    height: 4em;
    max-height: 6vw;
    margin: 0 auto;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    background: rgba(255,255,255,0.5);
    border: 4px solid #fff;

}

@media (max-width: 1640px) {
  .label {
    font-size:18px;
  }
}