p,
div,
button,
span,
a {
  font-family: 'Poppins Regular';
}

h1,
h2,
h3 {
  font-family: 'Metropolis Semi Bold';
}

h4,
h5,
h6 {
  font-family: 'Metropolis Regular';
}

@font-face {
  font-family: 'TCCEB';
  src: url('../fonts/TCCEB.TTF');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'theboldfont';
  src: url('../fonts/theboldfont.ttf');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Petrona';
  src: url('../fonts/Petrona-VariableFont_wght.ttf');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src:
    url('../fonts/OpenDyslexic-Bold.woff2') format('woff2'),
    url('../fonts/OpenDyslexic-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bio Sans';
  src:
    url('../fonts/BioSans-Bold.woff2') format('woff2'),
    url('../fonts/BioSans-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Arial Bold';
  font-style: normal;
  font-weight: normal;
  src:
    local('../fonts/Arial Bold'),
    url('../fonts/ARIALBD.woff') format('woff');
}

.lafekey .wro {
  width: 80px;
  height: 80px;
  font-size: 40px;
}

.frumenu {
  position: fixed;
  top: 20px;
  left: 3%;
  z-index: 2;
}

.frumenu.active {
  background: linear-gradient(180deg, #ffda0e 0%, #f39200 100%);
  border-radius: 30px;
}

.frumenu ul {
  padding-inline-start: 0px;
  padding: 30px;
  display: none;
}

.frumenu.active ul {
  display: block;
}

.frumenu li {
  list-style: none;
  text-align: left;
  margin: 20px 0;
}

.frumenu li a,
.frumenu li a:hover {
  text-decoration: none;
  font-family: 'Bio Sans';
  font-size: 36px;
  font-weight: bold;
  line-height: 40px;
  font-style: normal;
  text-align: left;
  color: #985b00;
}

.frac1,
.frac2 {
  display: none;
}

.frumenu.active .frac1 {
  display: block;
  position: absolute;
  top: 50px;
  right: -48px;
  width: 50px;
  z-index: 1;
}

.frumenu.active .frac2 {
  display: block;
  position: absolute;
  bottom: 50px;
  right: -63px;
  width: 70px;
  z-index: -1;
}

.frumenu > a {
  background: linear-gradient(180deg, #ffda0e 30%, #f39200);
  border-radius: 50%;
  display: block;
  /* pointer-events: none; */
}

.frumenu > a i {
  font-size: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #f39200;
}

.frumenu.active > a {
  background: transparent;
}

.frumenu.active .frm2 {
  display: none;
}

.frm1 {
  position: absolute;
  top: -20px;
}

.frm2 {
  position: absolute;
  bottom: 5px;
  z-index: -1;
}

.frme {
  margin: 0px auto;
  display: none;
}

.hmbtn {
  position: absolute;
  top: -10px;
  z-index: 10;
  right: -10px !important;
}

.papro {
  position: absolute;
  top: -12px;
  left: 172px;
  z-index: 2;
}

.papro-2 {
  top: -6px;
}

.papro ul {
  padding-inline-start: 0px;
}

.papro li {
  display: none;
  list-style: none;
}

.mots .papro li.active {
  display: block;
}

.papro-img-1 {
  width: 175px;
}

.papro-img-2 {
  width: 150px;
}

.papro li img {
  width: 100px;
}

.fll {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 43%;
  z-index: 2;
}

.fr1 {
  position: fixed;
  bottom: 25%;
  right: 0;
  width: 18%;
}

.fr2 {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 40%;
  z-index: 1;
}

.pastWord {
  width: fit-content;
}

.in1 {
  margin: 15px 0;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 54%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.in1 a {
  background: #fff;
  border-radius: 35px;
  text-align: center;
  text-decoration: none;
  color: #61a03d;
  font-family: 'OpenDyslexic';
  font-size: 36px;
  font-weight: bold;
  line-height: 42px;
  font-style: normal;
  display: inline-block;
  padding: 15px 25px;
  text-transform: uppercase;
  min-width: 300px;
  width: 40%;
  z-index: 1;
}

.in2 {
  margin: 15px 0;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 70px;
  left: 0;
  z-index: 1;
  display: none;
}

.in2 a {
  background: #fff;
  border-radius: 35px;
  text-align: center;
  text-decoration: none;
  color: #61a03d;
  font-family: 'OpenDyslexic';
  font-size: 36px;
  font-weight: bold;
  line-height: 42px;
  font-style: normal;
  display: inline-block;
  padding: 15px 25px;
  text-transform: uppercase;
  min-width: 300px;
  width: 40%;
  z-index: 1;
}

.trunk {
  position: fixed;
  top: 0;
  left: 0;
}

.login-bg {
  background: url(../../mots_graphics/HomeBackground_.webp);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.profile-bg {
  background: url(../../mots_graphics/profile_background.webp);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.gradient-overlay {
  /* background: url(../../mots_graphics/HomeMask.webp); */
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.index {
  background: url(../images/back2.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.msg .hmbtn {
  display: block;
}

.msg {
  background: url(../images/back2.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.metxt2 p {
  font-family: 'Arial Bold';
  font-size: 30px;
  font-weight: bold;
  line-height: 30px;
  font-style: normal;
  text-align: left;
  color: #ffffff;
}

.metxt1 {
  background: #fff;
  border-radius: 15px;
  text-align: center;
  z-index: 1;
}

.metxt1 p {
  color: #ff0000;
  margin-bottom: 30px;
  font-family: 'Arial Bold';
}

.metxt1 .col > div {
  border-bottom: 3px solid #164c23;
}

.oral {
  background: url(../images/back2.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
}

.orp p {
  font-family: 'Arial Bold';
  font-size: 30px;
  font-weight: bold;
  line-height: 36px;
  font-style: normal;
  text-align: left;
  color: #ffffff;
  margin-bottom: 0px;
}

.oral .hmbtn {
  display: block;
}

.orl1 img {
  float: right;
}

.orl3 img {
  float: right;
}

.nouv {
  background: url(../images/back2.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
}

.nouv .hmbtn {
  display: block;
}

.noubox img {
  margin: 0 auto;
  display: block;
}

.noubox p {
  font-family: 'Arial Bold';
  font-weight: bold;
  font-style: normal;
  text-align: left;
  color: #ffffff;
  margin-bottom: 0px;
}

.liste {
  background: url(../images/back2.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
}

.listeul img {
  margin: 0 auto 100px auto;
  display: block;
  width: 200px;
}

.listeul ul {
  padding-inline-start: 0px;
  margin-bottom: 0px;
  text-align: center;
}

.listeul li {
  list-style: none;
  display: inline-block;
  margin: 15px;
}

.listeul li a,
.listeul li a:hover {
  color: #164c23;
  font-family: 'Arial Bold';
  text-decoration: none;
  display: flex;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  line-height: 50px;
}

.listeul li:first-child a {
  width: 100px;
  height: 100px;
  background: #2a5827;
  color: #fff;
}

.listeul li:last-child a {
  width: 100px;
  height: 100px;
  background: #2a5827;
  color: #fff;
}

.li4 a {
  border-radius: 0px !important;
  background: #2a5827 !important;
  color: #fff !important;
}

/* .point{position: absolute;left: 120px;top: 75px;width: 70px !important;display: block;} */
.point {
  position: absolute;
  top: 100%;
  left: 100%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 50px !important;
  display: block;
}

.point-s1 {
  position: absolute;
  /* top: 121px !important;
    right: 45%; */
  /* margin-right: -50%;
    transform: translate(-50%, -50%); */
  width: 50px !important;
  display: block;
  z-index: 2;
}

.tutorialhand-2 {
  right: -30px;
  top: 43px;
}

.tutorialhand-screen-1 {
  position: absolute;
  width: 50px !important;
  bottom: -16px;
  z-index: 2;
}

.tutorialhand-screen-2 {
  position: absolute;
  width: 50px !important;
  bottom: -16px;
  z-index: 2;
}

.tutorialhand-screen-3b {
  position: absolute;
  width: 50px !important;
  bottom: -32px;
  left: 50%;
}

.tutorialhand-screen-4 {
  position: absolute;
  width: 50px !important;
  bottom: -16px;
  left: 50%;
  z-index: 2;
}

.tutorialhand-3 {
  top: 43px;
  right: -30px;
}

.tutorialhand-4 {
  top: 43px;
  right: -30px;
}

/* .pointque {position: absolute;left: 54%;top: 39%;width: 70px !important;display: block;} */
.pointque {
  position: absolute;
  /* top: 60%;
    left: 60%;
    margin-right: -50%;
    transform: translate(-50%, -50%); */
  width: 50px !important;
  top: 25px;
  right: -30px;
}

.pointfinal {
  position: absolute;
  top: 85%;
  left: 72%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 70px !important;
  display: none;
}

.prog {
  height: calc(100vh - 125px);
  background: #6ead00;
  position: absolute;
  right: 4px;
  top: 65px;
  width: 20px;
  z-index: 3;
  border-radius: 15px;
  padding: 0px;
  border: 1px solid;
  border-color: #000000;
}

.prog > div {
  height: 25%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border-bottom: 2px solid #fff;*/
}

.prog span {
  visibility: hidden;
}

.prog > div:nth-child(1) {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

.prog > div:nth-child(4) {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom: 0px;
}

.prog .filled {
  background: #c6ff00;
}

.prog .filled.active {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  border-top: 1px solid;
  border-color: #fff;
}

/* .mots {
    background: url(../images/back2.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom;
} */

.mots .frumenu {
  display: none;
}

.mots .hmbtn {
  display: block;
}

.mots .fll {
  width: 15%;
}

.mots .fr1 {
  width: 9%;
  bottom: 37%;
  z-index: 2;
}

.mots .fr2 {
  width: 27%;
  z-index: 2;
}

.motwrap {
  /* height: calc(100vh - 7px); */
  /* background-image: url(../../mots_graphics/GameplayBoard2.webp); */
  background-image: url(../../mots_graphics/new/PopupMain.webp);
  /* margin-top: 30px; */
  z-index: 1;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.popup {
  /* height: calc(100vh - 7px); */
  /* background-image: url(../../mots_graphics/GameplayBoard2.webp); */
  background-image: url(../../liste_graphics/Pop-up.webp);
  /* margin-top: 30px; */
  z-index: 1;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.animalswrap {
  min-height: 470px;
  /* background-image: url(../../mots_graphics/GameplayBoard2.webp); */
  background-image: url(../../animal_graphics/contentbackground.webp);
  /* margin-top: 30px; */
  z-index: 1;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.motul .flex-nowrap {
  background-image: url(../../mots_graphics/new/insidePopup.webp);
  /* margin-top: 30px; */
  z-index: 1;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.motul .flex-nowrap .col-md-2 {
  background: transparent !important;
  /* box-shadow: none !important; */
}

.motul ul,
.mottop ul,
.motbox ul,
.lafebox ul,
.lafepandabox ul {
  margin-bottom: 0px;
  padding-inline-start: 0px;
  text-align: left;
}

.motul li,
.mottop li,
.motbox li,
.lafebox li,
.lafepandabox li {
  list-style: none;
  display: inline-block;
  margin: 0 15px;
  padding: 5px 0px;
}

.motul button,
.motul button:hover,
.motull button:active {
  font-family: 'Arial Bold';
  font-size: 30px;
  /* font-size: 50px; */
  font-weight: bold;
  font-style: normal;
  /* color: #874d19; */
  /* background: url('https://abcdelalecture.fr/public/assets/frontend/images/YellowEmpty.webp'); */
  background: url('../../mots_graphics/new/3_.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clm-1 button {
  color: #f10e0e;
}

.clm-2 button {
  color: #ff9600;
}

.clm-3 button {
  color: #0551fe;
}

.clm-4 button {
  color: #00c6ff;
}

.clm-5 button {
  color: #b423ff;
}

.clm-6 button {
  color: #ff1994;
}

.clm-7 button {
  color: #37de6a;
}

.clm-8 button {
  color: #b74f11;
}

.clm-11 button {
  color: #ff5757;
}

.clm-22 button {
  color: #e63dff;
}

.clm-33 button {
  color: #2d69ad;
}

.clm-44 button {
  color: #00e1c4;
}

.clm-55 button {
  color: #8fca1d;
}

.clm-66 button {
  color: #ab0038;
}

.clm-77 button {
  color: #2889df;
}

.motul button {
  transition: all 0.2s ease-in-out;
  border: 0px solid #75b140;
  margin: 5px auto;
  line-height: 45px;
  width: 100%;
  pointer-events: none;
}

.motul > div:first-child {
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.motul {
  margin: 0 auto;
  display: grid;
}

.motul > div > div {
  margin-left: 28px;
}

.motul > div > div:last-child {
  border-right: 0px;
}

/*.motul > div{margin: 0 auto;}*/
/*.motul > div > div{width: 110px;float:left;padding: 0px;}*/
/*-ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);*/

/*.motul{display: none;}*/

.motimg {
  position: relative;
}

.motimg img {
  width: 160px;
}

.motimg a {
  display: block;
}

.motleaf img {
  margin: 0 auto 50px auto;
  display: none;
}

.motleaf ul {
  padding-inline-start: 0px;
  text-align: center;
}

.motleaf li:nth-child(odd) {
  font-family: 'Arial Bold';
  font-size: 50px;
  font-weight: bold;
  line-height: 50px;
  font-style: normal;
  text-align: left;
  color: #000000;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.motleaf li:nth-child(even) {
  font-family: 'Arial Bold';
  font-size: 50px;
  font-weight: bold;
  line-height: 50px;
  font-style: normal;
  text-align: left;
  color: #ffffff;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.motleaf p {
  display: none;
  transition: all 0.2s ease-in;
  font-family: 'Arial Bold';
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
  font-style: normal;
  text-align: left;
  color: #000000;
  margin-bottom: 50px;
}

.motleaf div {
  margin-bottom: 15px;
  visibility: visible;
}

.motwro p,
.mottru p {
  margin-bottom: 0px;
}

.motbox ul,
.lafepandabox ul,
.lafebox ul {
  text-align: center;
  display: table;
  margin: 0 auto;
  border-radius: 50px;
  padding: 5px 30px;
}

.motbox,
.lafepandabox,
.lafebox {
  /* background: url('https://abcdelalecture.fr/public/assets/frontend/images/BottomWord.webp') 0% 0% no-repeat padding-box; */
  background: url('../../mots_graphics/new/TopText.webp') 0% 0% no-repeat padding-box;
  /* box-shadow: inset 15px 20px 6px #2E6B2D2E; */
  padding: 2px;
  min-height: 60px;
  background-size: 100% 100%;
}

.motbox ul.danger,
.lafepandabox ul.danger,
.lafebox ul.danger {
  border: 3px solid #ff5b5b;
  width: 100%;
  border-radius: 10px;
}

.motbox ul.success,
.lafepandabox ul.success,
.lafebox ul.success {
  border: 3px solid #68c50e;
  width: 100%;
  border-radius: 10px;
}

.motbox .red,
.lafepandabox .red,
.lafebox .red {
  background: transparent;
  /* height: 50px; */
  width: auto;
  /* color: #FF5B5B; */
  color: #ffffff;
  border-radius: 50%;
  font-family: 'Arial Bold';
  font-size: 40px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  line-height: 38px;
}

.lafepandabox .gre,
.lafebox .gre {
  /* height: 50px; */
  width: auto;
  /* color: #FFEF67; */
  color: #ffffff;
  border-radius: 50%;
  font-family: 'Arial Bold';
  font-size: 40px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  line-height: 38px;
}

.motbox .gre {
  /* height: 50px; */
  width: auto;
  color: #ffffff;
  border-radius: 50%;
  font-family: 'Arial Bold';
  font-size: 40px;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  text-align: center;
  line-height: 38px;
}

.motsdet {
  background: url(../images/back2.jpg);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
}

.motsdet .hmbtn {
  display: block;
}

.motsdet .fll {
  width: 27%;
}

.motsdet .fr1 {
  width: 9%;
  bottom: 37%;
}

.motsdet .fr2 {
  width: 27%;
}

.mottop {
  margin-bottom: 0px;
  /* background: url('https://abcdelalecture.fr/public/assets/frontend/images/TopWords.webp') 0% 0% no-repeat padding-box; */
  background: url('../../mots_graphics/new/TopText.webp') 0% 0% no-repeat padding-box;
  /* box-shadow: inset 15px 20px 6px #2E6B2D2E; */
  padding: 13px 7px;
  height: 55px;
  background-size: 100% 100%;
  /* width: fit-content; */
  width: 100%;
}

/* .mottop {
    margin-bottom: 0px;
    background: url('https://abcdelalecture.fr/public/assets/frontend/images/TopWords.webp') 0% 0% no-repeat padding-box;
    box-shadow: inset 15px 20px 6px #2E6B2D2E;
    padding: 5px 7px;
    height: 43px;
    background-size: 100% 100%;
    width: fit-content;
} */

.mottop li:nth-child(odd) {
  font-family: 'Arial Bold';
  font-size: 3vw;
  font-weight: bold;
  line-height: 17px;
  font-style: normal;
  text-align: left;
  color: #000000;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.mottop li:nth-child(even) {
  font-family: 'Arial Bold';
  font-size: 3vw;
  font-weight: bold;
  line-height: 17px;
  font-style: normal;
  text-align: left;
  color: #ffffff;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.mottop ul {
  text-align: center !important;
}

.lafeholder {
  /* background: url('../../mots_graphics/MainRect.webp') no-repeat center center; */
  background: url('../../mots_graphics/new/insidePopup.webp') no-repeat center center;
  background-size: cover;
  border-radius: 25px;
  /* min-height: 45.5vh; */
  height: fit-content;
}

.lafeul button,
.lafeul button:hover {
  border: 0;
  padding: 5px 20px;
  font-family: 'Arial Bold';
  font-weight: bold;
  font-style: normal;
  text-align: center;
  color: #ffffff;
  margin-top: 15px;
  margin-bottom: 0px;
  font-size: 36px;
  width: 100%;

  font-family: 'Arial Bold';
  font-size: 30px;
  /* font-size: 50px; */
  font-weight: bold;
  font-style: normal;
  color: #000000;
  /* background: url('https://abcdelalecture.fr/public/assets/frontend/images/YellowEmpty.webp'); */
  background: url('../../mots_graphics/new/5_.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lafelarge .lafeh2,
.lafelarge .lafeh2:hover {
  border: 0;
  padding-bottom: 35px;
  padding-top: 5px;
  /* padding-left: 30px;
    padding-right: 30px; */
  font-family: 'Arial Bold';
  font-weight: bold;
  font-style: normal;
  text-align: center;
  color: #ffffff;
  margin-top: 30px;
  margin-bottom: 0px;
  font-size: 65px;
  width: 100%;
  min-width: 220px;
  font-family: 'Arial Bold';
  /* font-size: 50px; */
  font-weight: bold;
  font-style: normal;
  color: #ffffff;
  /* background: url('../../mots_graphics/Large_WordHolder.webp'); */
  background: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 60px;
}

/*.lafeact{background: url(../images/spark.webp);background-position: center;background-size: cover;background-repeat: no-repeat;}*/
/* .lafeact button,
.lafeact button:hover {
    background: #164C23 !important;
} */

.lafeul .wro.lafeact {
  background: url('../../mots_graphics/Word_Right.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #007c09;
}

.lafeul .wro.focused {
  background: url('../../mots_graphics/KeyBoardKeyPressed.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #4e2300;
}

.lafeul .wro.active {
  /* background: #FFC5C5;
    color: #ff0000;
    border: 1px solid #FFC5C5; */
  background: url('../../mots_graphics/Word_Wrong.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #d60808;
}

.lafecont {
  background: #75b140;
  padding: 0px 40px;
  border-radius: 45px;
  width: fit-content;
  text-align: center;
  margin: 0 auto 15px auto;
}

.lafele div span {
  font-family: 'Arial Bold';
  font-weight: bold;
  font-style: normal;
  text-align: left;
  color: #ffffff;
  font-size: 50px;
}

.lafele p {
  font-family: 'Arial Bold';
  font-weight: bold;
  font-style: normal;
  text-align: center;
  color: #000;
  font-size: 30px;
}

.lafelarge {
  display: none;
  position: relative;
}

.lafelarge p {
  font-family: 'Arial Bold';
  font-weight: bold;
  font-style: normal;
  text-align: center;
  color: #000;
  font-size: 26px;
  margin-bottom: 0px;
}

/* .lafeh2 {
    background: #75B140;
    padding: 0px 15px;
    border-radius: 80px;
    margin: 30px auto;
    width: fit-content;
} */

/* .lafeh2 h2 {
    font-size: 60px;
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    color: #fff;
    margin-bottom: 0px;
    display: inline-block;
    padding: 5px 20px;
} */

.lafelarge a {
  /* background: #164C23;
    padding: 15px 50px; */
  width: fit-content;
  /* border-radius: 60px; */
  display: inline-block;
  margin-top: 50px;
}

.lafelarge a img {
  width: 120px;
}

.lafepanda,
.lafeul {
  display: none;
}

.lafepanda {
  position: relative;
}

/* .trupanda{position: absolute;width: 15%;top: 50%;left: 0%;margin-right: 0%;transform: translate(5%, -50%);display: none;} */
.trupanda {
  position: absolute;
  width: 20%;
  top: 80%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  display: none;
}

.trupanda.active {
  display: block;
}

.sounxt {
  display: none;
}

.lafekey {
  display: none;
}

.lafekey a img {
  width: 80px;
}

.lafekeybtn {
  width: 100%;
  position: relative;
}

.lafekey .wro {
  /* background: url('../../mots_graphics/KeyboardKey.webp'); */
  background:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url('../../mots_graphics/new/7_1.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* color: #764014; */
  color: #000000;
  /* border-color: #764014; */
  border-color: #000000;
  font-family: 'Arial Bold';
  font-size: 30px;
  margin: 5px;
  text-align: center;
  line-height: 0px;
  border-radius: 5px;
  appearance: none;
  border: none !important;
  /* pointer-events: none; */
}

.lafekey .wro:hover,
.lafekey .wro.active {
  /* background: url('../../mots_graphics/KeyBoardKeyPressed.webp'); */
  background: url('../../mots_graphics/new/7_.webp');
  color: #4e2300;
  border-color: #764014;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-green {
  /* background: url('../../mots_graphics/KeyBoardKeyPressed.webp') !important; */
  background: url('../../mots_graphics/new/7_.webp') !important;
  color: #4e2300 !important;
  color: #000000 !important;
  border-color: #764014 !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lafekey .wro.active.wroans {
  background: url('../../mots_graphics/Word_Wrong.webp') !important;
  color: #4e2300 !important;
  border-color: #764014 !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.lafekey .tru {
  background: #164c23;
  border: 2px solid #164c23;
  height: 80px;
  width: 80px;
  color: #fff;
  border-radius: 50%;
  font-family: 'Arial Bold';
  font-size: 50px;
  padding: 0px 0px 0px 0px;
  margin: 5px;
  text-align: center;
  line-height: 0px;
}

/* .lafekey a {
    background: #164C23;
    padding: 15px 50px;
    width: fit-content;
    border-radius: 60px;
    display: inline-block;
    margin-top: 50px;
} */

/* .lafebox {
    visibility: hidden;
    border: 5px solid #75b140;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: inset 15px 20px 6px #2E6B2D2E;
    border: 5px solid #75B140;
    border-radius: 38px;
    padding: 5px;
    min-height: 80px;
} */

.lafekeybox > div {
  float: left;
  width: 90px;
  padding: 0px;
}

.lafekeybox {
  width: 1079px;
  margin: 0 auto;
  display: block;
}

@media screen and (min-width: 1550px) {
  .lafekeybox {
    width: 1079px;
  }
}

/* @media screen and (min-width: 1400px) {
    .lafekeybox {
        width: 835px;
    }

    .lafekey .wro {
        width: 65px;
        height: 45px;
        font-size: 30px;
    }
} */
@media screen and (min-width: 1400px) and (max-width: 1550px) {
  .lafekeybox {
    width: 1079px;
  }

  .lafekey .wro {
    width: 80px;
    height: 80px;
    font-size: 40px;
  }
}

.lafekeybox > div:nth-child(10) {
  margin-right: 40px;
  display: block;
}

.lafekeybox > div:nth-child(11) {
  margin-left: 50px;
}

.lafekeybox > div:nth-child(21) {
  margin-left: 95px;
}

.lafekeybox > div:last-child {
  margin-right: 0px;
  margin-left: 0px;
}

.lafeimg img {
  margin-top: 15px;
  width: 92px;
  /* margin: 0 auto; */
  visibility: hidden;
  display: block;
}

/* .lafebox .gre {
    background: #75B140;
    height: 50px;
    width: auto;
    color: #fff;
    border-radius: 50%;
    font-family: 'Arial Bold';
    font-size: 50px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 44px;
}

.lafebox .red {
    background: #75B140;
    height: 50px;
    width: auto;
    color: #ff0000;
    border-radius: 50%;
    font-family: 'Arial Bold';
    font-size: 50px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    line-height: 44px;
}

.lafebox ul {
    padding-inline-start: 0px;
    text-align: center;
    display: table;
    margin: 0 auto;
    border-radius: 50px;
    padding: 5px 30px;
}

.lafebox li {
    list-style: none;
    display: inline-block;
    margin: 0 15px;
    padding: 25px 0px;
} */

.lafeimg button {
  border: 0px;
  background: transparent;
  margin: 0 auto;
  display: block;
}

.lie0.active,
.lie1.active,
.lie2.active,
.lie3.active {
  display: block;
}

.stp1,
.stp2,
.stp3,
.stp4,
.stp5,
.stp6,
.stp7 {
  z-index: 3;
  height: 100vh;
  position: relative;
}

.stp1 a,
.stp2 a,
.stp3 a,
.stp4 a,
.stp5 a,
.stp6 a,
.stp7 a {
  color: #000;
}

.stp1 div {
  background: #e2a8a5;
}

.stp2 div {
  background: #937ab1;
}

.stp3 div {
  background: #faa756;
}

.stp4 div {
  background: #59bad1;
}

.stp5 div {
  background: #aac46b;
}

.stp6 div {
  background: #5f95c9;
}

.stp7 div {
  background: #cd665f;
}

.stp1 .point {
  position: absolute;
  right: -38px;
  bottom: -5px;
  width: 70px !important;
  display: block;
}

.logbox {
  height: 100vh;
  position: relative;
  z-index: 1111;
}

.logbox form:not(.left-form, .profile) {
  background: url(../../mots_graphics/LoginBoard.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* background-attachment: fixed; */
  border-radius: 20px;
  position: relative;
}

.logbox .profile {
  background: url(../../mots_graphics/profile_popup.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  border-radius: 20px;
  position: relative;
}

.logbox form .form-inner {
  padding-top: 1rem;
  padding-left: 4rem;
  padding-right: 4rem;
  padding-bottom: 3rem;
}
.logbox .profile .form-inner {
  padding-top: 1.75rem;
  padding-bottom: 1rem;
}

.logbox form .form-header {
  /* background: url(../../mots_graphics/Ribbon.webp); */
  /* background-attachment: fixed; */
  /* background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  position: absolute;
  top: 0px;
  left: 0;
  width: 97%;
  margin-left: 2%; */
}

.logbox form .form-header h3 {
  color: #203c72;
}

.logbox-tcceb {
  font-family: 'TCCEB';
}

.logbox h3 {
  color: #203c72;
  text-align: center;
  font-family: 'TCCEB';
  font-weight: bolder;
  font-size: 1.75rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  /* -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #0e7700; */
  padding-top: 0.65rem;
  padding-bottom: 0.75rem;
}

.logbox .profile .form-inner h3 {
  color: black !important;
}

.logbox .profile .form-header h3 {
  font-size: 3.75rem;
}

.logbox .profile .form-2 .form-header h3 {
  font-size: 2rem;
}

.logbox .profile .form-3 .form-header h3 {
  margin-top: 12px;
  font-size: 2.4rem;
}
.logbox .profile .form-4 .form-header h3 {
  margin-top: 30px;
}

.logbox .profile h3.mb-0 {
  font-size: 3rem !important;
}

.form-forget-password h3,
.form-forget-username h3,
.form-reset-password h3 {
  font-size: 1.65rem;
}

.logbox form {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

@media screen and (max-width: 1200px) {
  .logbox form {
    width: 100%;
  }
  .panda-right {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .login-bg .container {
    margin-top: 0 !important;
    overflow-y: initial !important;
  }

  .profile-bg .container {
    margin-top: 0 !important;
    overflow-y: initial !important;
  }
}

.logbox label {
  /* display: none; */
  /* font-family: 'TCCEB'; */
  font-family: 'Nunito', sans-serif;
  /* font-size: 15px; */
  color: #203c72;
  line-height: 1;
}

.text-danger strong {
  /* font-family: 'Nunito', sans-serif; */
}

.link {
  font-family: 'Nunito', sans-serif;
}
.form-check-input {
  border-color: #15cbf0;
}

.logbox input::placeholder {
  color: #203c72;
  text-transform: uppercase;
}

.form-check-input {
  margin-top: 1px;
  width: 0.9rem;
  height: 0.85rem;
  position: absolute;
}

.form-check-input:checked {
  background-color: #15cbf0;
  border-color: #15cbf0;
}

.form-check-input[type='checkbox'] {
  border-radius: 0.15em;
}

.form-check .form-check-input {
  float: left;
  margin-left: 0em;
}

.form-check {
  padding-left: 0rem;
}

.w-80 {
  width: 80%;
}

.form-check a {
  color: white;
  font-family: 'Nunito', sans-serif;
}

.logbox input[type='text'],
.logbox input[type='password'],
.logbox input[type='email'] {
  font-family: 'TCCEB';
  color: #203c72;
  background: transparent;
  padding: 13px 45px;
  background: url(../../mots_graphics/LoginBoardInput.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  border: none;
  border-color: none;
}

/* For Chrome, Safari, and newer versions of Edge */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  padding: 10px 30px;
  background: url(../../mots_graphics/TextBox.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  border: none;
  border-color: none;
}

/* For Firefox */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
  padding: 10px 30px;
  background: url(../../mots_graphics/TextBox.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;
  border: none;
  border-color: none;
}

.logbox input:focus {
  box-shadow: unset;
  border-color: none;
  border: none;
}
.logbox form:not(.profile) button,
.logbox form:not(.profile) button:hover {
  font-family: 'TCCEB';
  /* padding: 25px 20px; */
  font-family: 'Arial Bold';
  font-weight: bold;
  font-style: normal;
  text-align: center;
  color: #ffffff;
  margin-bottom: 15px;
  border: none;
  font-size: 25px;
  width: 100%;
  border-radius: 45px;
  /* margin-left: 25%; */
  background: url(../../mots_graphics/se-connecter.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.logbox button:focus {
  box-shadow: unset;
  background-color: #75b140;
  border-color: #75b140;
}
.logbox form .form-inner .img-icon-1 {
  height: 17px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  left: 16px;
}
.logbox form .form-inner .img-icon-2 {
  height: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  left: 16px;
}
.logbox form .form-inner .img-icon-3 {
  cursor: pointer;
  position: absolute;
  height: 20px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* 
.signbox {
    height: 100vh;
    position: relative;
    z-index: 1111;
}

.signbox h3 {
    color: #fff;
    text-align: center;
    font-family: 'Arial Bold';
    font-weight: bold;
    color: #000;
    font-size: 40px;
    margin-bottom: 20px;
}

.signbox form {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 80%;
}

.signbox label {
    display: none;
}

.signbox input[type="text"],
.signbox input[type="password"],
.signbox input[type="email"] {
    height: 60px;
    background: #fff;
    border-radius: 30px;
    padding: 10px 30px;
}

.signbox input:focus {
    box-shadow: unset;
}

.signbox button,
.signbox button:hover {
    background: #75B140;
    padding: 10px 20px;
    font-family: 'Arial Bold';
    font-weight: bold;
    font-style: normal;
    text-align: center;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 15px;
    border: 1px solid #75B140;
    font-size: 24px;
    width: 50%;
    border-radius: 45px;
    margin-left: 25%;
} */

/*.stp1{position: absolute;bottom:10% ;left:22%;width: fit-content;}
.stp2{position: absolute;bottom:21% ;left:29%;width: fit-content;}
.stp3{position: absolute;bottom:35% ;left:34%;width: fit-content;}
.stp4{position: absolute;bottom:48% ;left:40%;width: fit-content;}
.stp5{position: absolute;bottom:47% ;left:48%;width: fit-content;}
.stp6{position: absolute;bottom:53% ;left:56%;width: fit-content;}
.stp7{position: absolute;bottom:65% ;left:62%;width: fit-content;}*/

/* Custom Css Start */

.no-link {
  text-decoration: none !important;
}

.text-orange,
li span.nav-user-txt {
  font-family: 'Bio Sans';
  font-size: 26px;
  text-align: left;
  color: #ff8416 !important;
}

.text-green {
  font-family: 'Bio Sans';
  font-size: 26px;
  text-align: left;
  color: #d1ff31 !important;
}

.text-black {
  color: #000 !important;
}

.s3Words {
  justify-content: start !important;
  padding-left: 30px;
  padding-right: 30px;
}

/* .selWordStep2{padding: 30px !important;} */

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
  .motul button,
  .motul button:hover {
    font-size: 30px;
  }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
  .motul button,
  .motul button:hover {
    font-size: 30px;
  }
}

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

.ftext {
  padding: 10px;
  font-size: 12px;
}

.ftext .no-link {
  color: #fff;
  border-color: #090909;
}

.vertical_line {
  width: 2px;
  height: 16px;
  background-color: #fff;
  margin: 0 10px;
}

/* Custom Css End */

.col-md-2 .custom-column {
  background-color: burlywood;
  /* Replace with the actual color code from your image */
  border-radius: 10px;
  /* Adjust the value to match the roundness of your corners */
  box-shadow: inset 0px 10px 8px -10px rgba(0, 0, 0, 0.5);
  /* Adjust the color and spread to match your image */
}

.col-md-motul {
  width: 12%;
  padding: 0px 5px 0px 5px;
  /* background: url('../images/Holder.webp') no-repeat center center; */
}

.container-top {
  display: flex;
  align-items: end;
  padding: 10px;
}

.icon-container {
  text-align: center;
  padding-bottom: 12px;
  width: 70px;
}

.word-container {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.word-box,
.input-box {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 5px;
}

.word-box span {
  background-color: #ffa500;
  /* Adjust the color to match your design */
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 1px 1px 3px #888888;
}

.input-box {
  /* Your input field styles will go here */
}

/* Add styles for the back and speaker icons */
#back-icon img,
#speaker-icon img {
  width: 30px;
  /* Adjust the size as needed */
  height: auto;
}