/*========================
VARIABLES 
========================*/
.dark {
  --color-background: #222629;
  /* idéalement, il faudrait le même niveau de transparence en thème sombre et en thème clair
  mais l'image est plus "visible" en thème sombre donc, pour l'atténuer, on réduit la transparence avec a = 0.95 */
  --color-background-transparent: rgba(34, 38, 41, 0.95);
  /*0.8*/
  --color-background-secondary: #505a61;
  --color-text: rgb(255, 255, 255);
  /*#f5f5f5;*/
  --error-text: red;
  --invert: 100%;
  --no-invert: 0;
}

.light {
  --color-background: #f5f5f5;
  /* idéalement, il faudrait le même niveau de transparence en thème sombre et en thème clair
  mais l'image est moins "visible" en thème clair donc, pour la voir un peu mieux, on augmente la transparence avec a = 0.85 */
  --color-background-transparent: rgba(225, 225, 225, 0.85);
  /*0.6*/
  --color-background-secondary: #c5c5c5;
  --color-text: rgb(0, 0, 0);
  /*#222629;*/
  --error-text: red;
  --invert: 0;
  --no-invert: 100%;
}

.green {
  --color-primary: #86c232;
  --color-secondary: #61892f;
}

.orange {
  --color-primary: #f48020;
  --color-secondary: #c76706;
}

.blue {
  --color-primary: #009bd6;
  --color-secondary: #00719c;
}

.yellow {
  --color-primary: #ffdf01;
  --color-secondary: #f1a300;
}

/*========================
POLICES 
========================*/
@font-face {
  font-family: Inter;
  src: url("../fonts/Inter-Thin.ttf");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Light.ttf");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.ttf");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Black.ttf");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Freeday";
  src: url("../fonts/FREEDAY.ttf");
}

/*========================
MIXINS 
========================*/
/*========================
RESET 
========================*/
* {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-family: "Inter";
  max-width: 100%;
  box-sizing: border-box;
}

*:focus {
  border: 0.2rem solid var(--color-primary);
}

html {
  font-size: 62.5%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

textarea {
  cursor: text;
}

/*========================
COMMONS 
========================*/
body {
  font-size: 1.6rem;
  max-width: 100vw;
  width: 100%;
  background-attachment: fixed;
}

.hidden {
  display: none !important;
}

p {
  word-wrap: break-word;
  max-width: 100%;
  /* padding: 8px; */
}

.inputContainer {
  text-align: center;
}

.submitButton {
  background-color: var(--color-primary);
  color: #222629;
  margin: 8px;
  border: none;
  border-radius: 0.6rem;
  padding: 0.8rem 1.5rem;
}

.button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0.6rem;
  background-color: var(--color-primary);
  padding: 0.8rem 1.5rem;
  /* margin: 1rem; */
  margin: 8px;
  cursor: pointer;
  font-size: 1.4rem;
  color: #222629;
  transition: all 0.6s;
  user-select: none;
}

.button * {
  transition: all 0.6s;
}

.button_icon {
  vertical-align: middle;
  height: 24px;
  margin-right: 0.3rem;
}

.button_text {
  font-size: 2rem;
  color: #222629;
}

.button * {
  cursor: pointer;
}

.button:hover {
  scale: 1.05;
  border-color: var(--color-primary);
  background-color: var(--color-secondary);
  color: #f5f5f5;
}

.button:hover .button_icon {
  -webkit-filter: invert(1);
  -moz-filter: invert(1);
  -ms-filter: invert(1);
  -o-filter: invert(1);
  filter: invert(1);
}

.button:hover .button_text {
  color: #f5f5f5;
}

/*========================
CONTAINER 
========================*/
#vueContainer {
  margin: 0;
  /*added*/
  padding: 0;
  /*added*/
  width: 100vw;
  max-width: 100%;
  min-height: 100vh;
  background-color: var(--color-background-transparent);
}

/*========================
BACKGROUND
========================*/

/*========================
NAV
========================*/
.nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;

  width: 100%;
  max-width: 150rem;
  height: 4rem;
  margin: auto;
  background-color: var(--color-background);

}

.nav_bar {
  z-index: 21;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 150rem;
  height: 4rem;
  margin: auto;
  background-color: var(--color-background);
}

.nav_burger {
  position: relative;
  z-index: 3;
  height: 100%;
  width: 4rem;
  opacity: 0;
  border: none;
  cursor: pointer;
  z-index: 23;
  /* Etienne 04/03/2022 : je ne sais pas pourquoi mais il faut mettre une valeur plus élevée ici sinon, quand on clique pour fermer, ça ne marche pas*/
}

.nav_burger_label {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 22;
  height: 4rem;
  width: 4rem;
  padding: 0.5rem;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
}

.nav_burger_icon {
  width: 100%;
  transition: all 0.5s;
}

.nav_burger:checked~.nav_list {
  /*transform: translate(100%, 0);*/
  transform: translate(0, 100%);
}

.nav_burger:checked~.nav_burger_label img {
  /*rotate: 90deg;	*/
  /*transform: translate(100%, 0);	*/
  transform: rotate(90deg);
}

/*
.nav_settings:checked~.nav_settings_label img {
  transform: rotate(180deg);
}
*/

/*
.nav_burger:checked~.nav_burger_label img {
  rotate: 90deg;
}
*/

.nav_list {
  position: absolute;

  /*
  top: 0;
  left: -20rem;
  */


  bottom: 4rem;
  left: 0;


  width: 20rem;
  height: max-content;
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--color-background);
  font-size: 1.4rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.5s;
}



.nav_item {
  height: 5rem;
  width: 100%;
  background-color: var(--color-background);
  padding: 0 0.3rem;
  user-select: none;
  transition: all 0.5s;
}

.nav_item:hover {
  background-color: var(--color-background-secondary);
}

.nav_button {
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  background: none;
  margin: 0;
  padding: 0.1rem 0.6rem;
  border: none;
  border-radius: 0;
  height: 100%;
  cursor: pointer;
  width: 100%;
}

.nav_button-lang {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  border-radius: 0;
  height: 2.5rem;
  margin: 0 0.5rem;
  padding: 0.3rem;
  cursor: pointer;
}

.nav_button-lang:hover {
  transition: all 0.3s;
  box-shadow: inset 0px 0px 5px 0px #9e8d86;
}

.nav_icon {
  width: 2rem;
  margin: 0 0.3rem;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
}

.nav_icon-lang {
  width: 2rem;
  margin: 0 0.3rem;
}

.nav_settings {
  position: relative;
  appearance: none;
  z-index: 22;
  height: 100%;
  width: 4rem;
  margin-left: auto;
  cursor: pointer;
}

.nav_settings_label {
  position: absolute;
  overflow: hidden;
  top: 0;
  right: 0;
  z-index: 22;
  height: 4rem;
  width: 4rem;
  padding: 0.5rem;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
}

.nav_settings_icon {
  transition: all 0.5s;
  width: 100%;
}

.nav_settings:checked~.nav_options {
  transform: translate(0, 100%);
}

.nav_settings:checked~.nav_settings_label img {
  transform: rotate(180deg);
}

.nav_options {
  position: absolute;
  bottom: 4rem;
  right: 0;
  width: 20rem;
  height: max-content;
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: var(--color-background);
  font-size: 1.4rem;
  user-select: none;
  transition: all 0.5s;
}

.nav_option {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 5rem;
  width: 100%;
  background-color: var(--color-background);
  padding: 0 0.3rem;
  user-select: none;
}

.option_lang {
  width: 80%;
  padding: 0.3rem 1rem;
  background-color: var(--color-background);
  font-size: 1.6rem;
  color: var(--color-text);
  border: 0.1rem solid var(--color-background-secondary);
  border-radius: 0.3rem;
  cursor: pointer;
}

.option_color {
  margin: auto;
  appearance: none;
  width: 2rem;
  height: 2rem;
  background-color: var(--color-background);
  border: 0.4rem solid var(--color-background);
  border-radius: 50%;
  cursor: pointer;
}

.option_color:checked {
  border-color: var(--color-text);
}

.option_color.green {
  background-color: #86c232;
}

.option_color.orange {
  background-color: #f48020;
}

.option_color.blue {
  background-color: #009bd6;
}

.option_color.yellow {
  background-color: #ffdf01;
}

.option_theme {
  position: relative;
  z-index: 3;
  height: 100%;
  width: 4rem;
  opacity: 0;
  border: none;
  cursor: pointer;
}

.option_theme_label {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  height: 4rem;
  width: 4rem;
  padding: 0.5rem;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
}

.option_theme_icon {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  background-image: url("../../images/icons/themeDark.svg");
}

.option_theme:checked~.option_theme_label div {
  transform: rotate(720deg);
  background-image: url("../../images/icons/themeLight.svg");
}

/*========================
LOGO
========================*/
.logo {
  text-align: center;
  margin-top: 8rem;
}

.logo_image {
  position: relative;
  margin: auto;
  font-size: 12rem;
  color: var(--color-primary);
  text-shadow: 0 0 0.7rem black;
  font-family: "Freeday";
  line-height: 5rem;
  animation: 2s title;
  transition: all 0.5s;
}

@keyframes title {
  from {
    top: -5rem;
    opacity: 0;
  }

  to {
    top: 0;
    opacity: 1;
  }
}

/*========================
MEDIA QUERIES : min-width: 750px
========================*/
@media screen and (min-width: 750px) {
  .logoImage {
    display: none;
  }

  .nav_burger {
    display: none;
  }

  .nav_burger_label {
    display: none;
  }

  .nav_list {
    position: relative;
    top: 0;
    bottom: none;
    left: 0 !important;
    flex: 1;
    padding-top: 0;
    flex-direction: row;
    height: 100%;
    width: auto;
    z-index: 22;
  }

  .nav_item {
    height: 100%;
    width: auto;
  }

  .nav_burger:checked~.nav_list {
    transform: none;
  }
}

@media screen and (max-width: 640px) {
  .logo {
    display: none;
  }

  .logo_image {
    display: none;
  }
}

/*========================
SECTIONS
========================*/
section {
  position: relative;
  /* nécessaire pour les boutons !!! */
}

/*========================
SECTION - MAIN
========================*/
.main {
  /*margin:0; /* added */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main_title {
  font-size: 2.4rem;
  margin-bottom: 2rem;
}

.main_description {
  font-size: 2rem;
}

.main_button {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 0.6rem;
  overflow: hidden;
  background-color: var(--color-secondary);
  padding: 1rem 2rem;
  margin: 3rem;
  transition: all 0.4s;
  cursor: pointer;
  font-size: 2.2rem;
  color: #f5f5f5;
}

.main_button::before {
  position: absolute;
  content: "";
  top: 0;
  left: -88%;
  z-index: -1;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 85% 0, 95% 50%, 85% 100%, 0 100%);
  background-color: var(--color-primary);
  transition: all 0.4s ease-in-out;
}

.main_button:hover {
  scale: 1.15;
  color: #222629;
}

.main_button:hover::before {
  transform: translateX(88%);
}

/*========================
SECTION - SIGN UP & LOGIN
========================*/
.connect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.connect_title {
  margin-bottom: 2rem;
}

.connect_label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.connect_button {
  border: 0.1rem solid black;
  border-radius: 0.4rem;
  padding: 0.5rem 1rem;
}

.connect_input {
  background-color: var(--color-background);
  border-radius: 0.3rem;
  border: 0.2rem solid var(--color-background-secondary);
  padding: 0.8rem;
  margin: 0.5rem;
  color: var(--color-text);
  padding-left: 3px;
}

.sign_up_to_sign_in_link {
  text-decoration: underline;
  cursor: pointer;
  color: rgba(240, 192, 192, 0.774);
}

.sign_up_to_sign_in_link:hover {
  color: white;
}

.sign_in_to_sign_up_link {
  text-decoration: underline;
  cursor: pointer;
  color: rgba(240, 192, 192, 0.774);
}

.sign_in_to_sign_up_link:hover {
  color: white;
}

/*========================
SECTION - PASSWORD FORGOTTEN
========================*/
.password_forgotten_section {
  position: relative;
  text-align: center;
  /* width: 90%; */
  max-width: 150rem;
  margin: auto;
  /* padding: 1rem; */
  padding: 0;
}

.password_forgotten {

  text-decoration: underline;
  cursor: pointer;
  color: rgba(240, 192, 192, 0.774);
}

.password_forgotten:hover {
  color: white;
}

.password_forgotten_input {
  background-color: var(--color-background);
  border-radius: 0.3rem;
  border: 0.2rem solid var(--color-background-secondary);
  padding: 0.8rem;
  margin: 0.5rem;
  color: var(--color-text);
}

.password_forgotten_button {
  margin: auto;
}


/*========================
SECTION - ABOUT
========================*/
.aboutContentContainer {
  /*margin:0; /* added */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*========================
SECTION - MODULES & CATALOG
========================*/
.library {
  position: relative;
  /* nécessaire pour les boutons !!! */
  /*text-align: center;*/
  /* pas utile*/
  /*width: 90%;*/
  /* quelle merde ce truc, ça génère une marge */
  /*max-width: 150rem;*/
  /* max-width: 92.5rem; => max 6 colonnes de modules => voir avec Oro */
  margin: auto;
  /*padding: 1rem;*/
  padding: 0;
  /* added */
  /*margin:0; /* added */
}

.library_menu {
  display: flex;
  /* flex-direction: row; */
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

/* TODO tentative malhabile de faire tenir les trois boutons (importer, nouveau module et exporter) sur une seule ligne dans la page de sélection de module  */
.library_menu .button {
  display: flex;
  flex-wrap: wrap;
  margin: 8px;
  font-size: 0.7rem;
  padding: 5px;
}

.library_list {
  margin: auto;
  /*added*/
  margin-top: 16px;
  padding: 0;
  /*added*/
  display: flex;
  /* flex-direction: row; */
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 800px;
}

.library_text {
  margin-top: 3rem;
  width: 80%;
}

.library_paragraph {
  width: 100%;
  margin-bottom: 2rem;
  text-align: left;
}

.library_input {
  display: none;
  padding-left: 3px;
  vertical-align: middle;
}

.module {
  box-sizing: border-box;
  margin: 0;
  /*added*/
  /* padding: 8px; added */
  position: relative;
  /* overflow: hidden; */
  border-radius: 0.3rem;
  /* min-width: 11rem; 12rem; */
  /* width: 18%; */
  width: 120px;
  /* max-width: 15rem;20rem; */
  /* height: 20rem; */
  height: 150px;
  /* margin:0.2rem; */
  /* margin: 8px; */
  /*margin: 1rem;*/
  /*margin-left:auto;/*added*/
  /*margin-right:auto;/*added*/
  /*margin-top:1rem;/*added*/
  /*margin-bottom:0;/*added*/
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  /* background-color: var(--color-background); */
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.module * {
  transition: all 0.3s;
}

.module_image-wrapper {
  box-sizing: border-box;
  /* margin: 8px; */
  width: 100px;
  height: 100px;
  /* position: relative; */
  overflow: hidden;
  /* border: 1px solid var(--color-text); */
  background-color: var(--color-background);
  /* display: flex; */
  /* flex-direction: row; */
  /* justify-content: center; */
  /* align-items: center; */
  border-radius: 50px;
}

.module_image {
  /* box-sizing: border-box; */
  /* padding: 8px; */
  width: 100%;
  height: 100%;
  /* position: absolute; */
  /* top: 0; */
  /* left: 0; */
  object-fit: cover;
  /*contain; /* cover*/
  object-position: 50% 50%;
}

.module_details {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40%;
  padding: 1rem;
  flex-grow: 1;
}

.module_name {
  font-weight: bold;
  text-align: center;
  font-size: 12px;
}

.module_size {
  /* display: none; */
  font-weight: bold;
  text-align: center;
  font-size: 12px;
}

.module_author {
  font-weight: bold;
  display: none;
  align-self: flex-end;
  font-size: 1.2rem;
}

.module_details_label {
  position: absolute;
  top: -12px;
  right: 0px;
  /* overflow: hidden; */
  /* z-index: 2; */
  height: 24px;
  width: 24px;
  /* padding: 0.5rem; */
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
  cursor: pointer;
}

.module_details_icon {
  /* width: 100%; */
  /* height: 100%; */
  /* transition: all 0.5s; */
  height: 24px;
  width: 24px;
  background-image: url("../../images/icons/moduleDetails.svg");
}

.game_image {
  /* dice.svg size : 100 x 72 */
  width: 70%;
  height: 70%;
  position: absolute;
  /*top: 0;
  left: 0;*/
  /*object-fit: cover;*/
  object-fit: contain;
  object-position: 50% 50%;
}

/* .module_actions {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}

.module_actions .button {
  margin: 8px;
} */

.module:hover {
  scale: 1.1;
}

.module:hover .module_actions {
  opacity: 1;
  pointer-events: all;
}

.module_progression {
  position: absolute;
  top: 0;
  right: 0;
}

.general_title {
  text-align: center;
}

/*========================
SECTION - EDIT
========================*/
.edit_general {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  min-height: 32rem;
  padding-bottom: 2rem;
}

.edit_image {
  position: relative;
  height: 32rem;
  width: 30rem;
  /*margin-right: 2rem;*/
}

.edit_image-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;

}

.edit_image-wrapper {
  width:
    /*480px;*/
    30rem;
  height:
    /*480px;*/
    30rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--color-background);
  border-radius: 0.5rem;
  margin: 4px;
}

.edit_image_input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

.edit_infos {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
}

.edit_info {
  min-height: 5rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.edit_info_label {
  text-align: right;
  width: 15rem;
  margin-right: 1rem;
}

.edit_info_input {
  position: relative;
  height: 60%;
  /*min-width: 12rem;*/
  font-size: 2rem;
  border: 0.1rem solid var(--color-background-secondary);
  border-radius: 0.3rem;
  background-color: var(--color-background);
  color: var(--color-text);
  padding-left: 3px;
  min-width: 20px;
  margin: 4px;
}

.edit_tab {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  /*padding: 0.5rem;/*1rem*/
  /*min-height: 5rem;*/
  width: 100%;
}

.edit_toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--color-background);
  border-bottom: 0.1rem solid var(--color-background-secondary);
  cursor: pointer;
  transition: all 0.5s;
}

.edit_toggle:hover {
  background-color: var(--color-background-secondary);
}

.edit_icon {
  position: relative;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
  width: 2.5rem;
  transform: rotate(90deg);
  transition: transform 0.3s;
  pointer-events: none;
}

.edit_name,
.edit_add {
  position: relative;
  margin-left: 2rem;
  margin-right: auto;
  height: 60%;
  flex: 1;
  font-size: 1.8rem;
  /* border: none; */
  background: none;
  color: var(--color-text);
  padding-left: 3px;
  min-width: 20px;
}

.edit_list {
  margin-left: 3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.6s;
  height: fit-content;
}

.edit>.edit_list {
  margin: 0;
}

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

.edit_item.folded .edit_list {
  height: 0;
}

.edit_item.folded>.edit_tab>.edit_icon {
  transform: none;
}

.edit_item.folded>.edit_tab>.edit_name {
  pointer-events: none;
}

.edit_name:hover {
  border: 0.1rem solid var(--color-text);
}

.edit_content-text,
.edit_content-couple {
  position: relative;
  margin: 0.2rem;
  height: 2.8rem;
  border: 0.1rem solid var(--color-text);
  border-radius: 0.3rem;
  font-size: 2rem;
  word-wrap: normal;
  background: none;
  color: var(--color-text);
  padding-left: 3px;
  min-width: 20px;
}

.edit_content-text {
  flex: 1;
  min-height: 7rem;
}

.edit_content-couple {
  flex: 1;
}

.edit_options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 4px;
  /*0.5rem;*/
}

.edit_order {
  width: 2.5rem;
  height: 1.2rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 0.5rem;
  border: none;
  border-radius: 0.3rem;
  background: none;
  cursor: pointer;
  transition: all 0.5s;
}

.edit_order:hover {
  background-color: var(--color-background-secondary);
}

.edit_order-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
}

.edit_order-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 2.8rem;
}

.edit_swap {
  width: 2.8rem;
  height: 2.8rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 0.1rem solid var(--color-text);
  border-radius: 0.3rem;
  margin: 4px;
  /*1rem;*/
  background: none;
  transition: all 0.5s;
  cursor: pointer;
}

.edit_swap:hover {
  background-color: var(--color-background-secondary);
}

.edit_swap-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
}

.edit_delete {
  position: relative;
  background: none;
  border: none;
  height: 2.5rem;
  width: 2.5rem;
  background-image: url("../../images/icons/editDelete.svg");
  background-size: cover;
  background-position: center;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
  cursor: pointer;
  transition: all 0.5s;
}

.edit_duplicate {
  position: relative;
  background: none;
  border: none;
  height: 2.5rem;
  width: 2.5rem;
  background-image: url("../../images/icons/content_copy.svg");
  background-size: cover;
  background-position: center;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
  cursor: pointer;
  transition: all 0.5s;
}

.edit_delete:hover {
  scale: 1.1;
}

.edit_add {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;
}

.edit_unchangeable {
  cursor: not-allowed;
  min-width: 20px;
}

.edit_step_type {
  position: relative;
  /*width: 20rem;*/
  padding: 0.3rem 1rem;
  background: none;
  font-size: 1.6rem;
  color: var(--color-text);
  border: 0.1rem solid var(--color-background);
  border-radius: 0.3rem;
  cursor: pointer;
  background-color: var(--color-background);
}

.edit_elt_image-label {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.edit_elt_image-wrapper {
  width: 13rem;
  /* 20rem */
  height: 13rem;
  /* 20rem */
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0.5rem;
  border: 0.1rem solid var(--color-text);
  border-radius: 0.5rem;
  background-color: var(--color-background);
}

.edit_elt_image-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  /*cover;*/
  object-position: 50% 50%;
}

.edit_elt_image-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/*========================
SECTION - PROFILE
========================*/
.profile_field {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.profile_label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30rem;
  cursor: pointer;
}

.profile_username {
  cursor: not-allowed;
  background-color: var(--color-background);
  border-radius: 0.3rem;
  border: 0.2rem solid var(--color-background-secondary);
  padding: 0.8rem;
  margin: 0.5rem;
  color: var(--color-text);
}

.profile_image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

.profile_image-wrapper {
  width: 20rem;
  height: 20rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.profile_input {
  display: none;
}

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

.profile_change_password_input {
  background-color: var(--color-background);
  border-radius: 0.3rem;
  border: 0.2rem solid var(--color-background-secondary);
  padding: 0.8rem;
  margin: 0.5rem;
  color: var(--color-text);
}

.change_profile_title {
  margin-bottom: 2rem;
  /* width: 100%; */
  /* flex-shrink: 0; */
}

.change_password_title {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.profile_change_other_data_title {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

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

/*
.profile_change_email_input {
  position: relative;
  height: 60%;
  min-width: 12rem;
  font-size: 2rem;
  border: 0.1rem solid var(--color-background-secondary);
  border-radius: 0.3rem;
  background-color: var(--color-background);
  color: var(--color-text);
  padding-left: 3px;
}
*/
.profile_change_email_input {
  background-color: var(--color-background);
  border-radius: 0.3rem;
  border: 0.2rem solid var(--color-background-secondary);
  padding: 0.8rem;
  margin: 0.5rem;
  color: var(--color-text);
}

.edit_learning_plan_kind {
  position: relative;
  padding: 0.3rem 1rem;
  background: none;
  font-size: 1.6rem;
  color: var(--color-text);
  border: 0.1rem solid var(--color-background);
  border-radius: 0.3rem;
  cursor: pointer;
  background-color: var(--color-background);
}

/*========================
SECTION - ABOUT
========================*/
.about_paragraph {
  font-size: 1.8rem;
  line-height: 2.5rem;
}

.about_title {
  margin: 2rem;
}

.about_contributors {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.about_contributor {
  text-decoration: underline;
  margin: 1rem;
  font-size: 1.8rem;
}

/*========================
SECTION - CONTACT
========================*/
.contactContentContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact_reasons {
  list-style-type: circle;
  text-align: left;
}

.contact_text {
  margin: 10px;
}

.contact_share_email {
  margin: 10px;
}

.contact_email_label {
  display: block;
  margin: 10px;
}

.contact_email_input {
  background-color: var(--color-background);
  border-radius: 0.3rem;
  border: 0.2rem solid var(--color-background-secondary);
  padding: 0.8rem;
  margin: 0.5rem;
  color: var(--color-text);
}

.contact_textarea {
  background-color: var(--color-background);
  border-radius: 0.3rem;
  border: 0.2rem solid var(--color-background-secondary);
  padding: 0.8rem;
  margin: 0.5rem;
  color: var(--color-text);
}

.contact_text_label {
  display: block;
  margin: 10px;
}


/*========================
MODAL
========================*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  /*width: 100vw;
  height: 100vh;*/
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  animation: 0.6s modalAppearance;
}

.modal_background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.6;
}

.modal_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 60%;
  /* 80%*/
  /*60%*/
  min-width: 35rem;
  height: 60rem;
  /*80vh;*/
  min-width: 34rem;
  min-height: 36rem;
  /*34rem*/
  padding: 0.5rem;
  background-color: var(--color-background);
  border-radius: 0.5rem;
  box-shadow: 0.2rem 0.2rem 0.5rem black;
}

.modal_close {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  top: 0;
  right: 0;
  margin: 0.5rem;
  background-color: #c5c5c5;
  background-image: url("../../images/icons/x.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  border-radius: 50%;
  -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert));
  transition: filter 0.6s;
  cursor: pointer;
}

.modal_close:hover {
  -webkit-filter: invert(var(--no-invert));
  -moz-filter: invert(var(--no-invert));
  -ms-filter: invert(var(--no-invert));
  -o-filter: invert(var(--no-invert));
  filter: invert(var(--no-invert));
}

.modal_general {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.modal_image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: 50% 50%;
}

.modal_image-wrapper {
  width: 25vw;
  height: 25vw;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 20rem;
  max-height: 20rem;
}

.modal_infos {
  margin: 1.5rem 0 0 1rem;
}

.modal_info {
  text-align: left;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.modal_info:first-child {
  font-size: 2rem;
  font-weight: 600;
}

.modal_description {
  width: 100%;
  max-height: 20rem;
  overflow-y: auto;
}

.modal_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.modal_item {
  /*margin: 1rem;*/
  margin: auto;
}

.modal_pie_container {

  display: flex;
  flex-direction: row;

  /*justify-content: center;*/

  align-items: center;
  flex-wrap: wrap;

}

.modal_percentages_container {

  display: flex;
  flex-direction: row;
  /*justify-content: center;*/
  align-items: center;
  flex-wrap: wrap;
}

@keyframes modalAppearance {
  from {
    opacity: 0;
    pointer-events: none;
  }

  to {
    opacity: 1;
    pointer-events: all;
  }
}

/*========================
SECTION - MEMORY
========================*/
.memory_all_container {
  /*row;*/

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: middle;

}

/* .memory_with_button_container {} */

.memoryContainer {
  /* align sub element vertically middle */
  vertical-align: middle;
  background-color: var(--color-background);
  color: var(--color-text);
  width: 300px;
  height: 300px;
}

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

.memoryModuleContainer {
  display: flex;
  align-items: center;
}


.memoryModule {
  /*font-size: 1.4rem;*/
  margin: 0.2rem;
}

/* .memoryModulePie {} */


/* ------------------------- */
.memoryGroupContainer {
  /*font-size: 1rem;*/
  margin: 0.2rem;
}

.memoryGroupDetailsContainer {
  display: flex;
  align-items: center;
}

.memoryGroupText {
  margin: 0.2rem;
}

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

.memoryButton {
  border: none;
  border-radius: 0.2rem;

  background-color: var(--color-primary);
  width: 2.4rem;
  cursor: pointer;

  font-size: 2.4rem;
  color: #222629;
  transition: all 0.6s;
}


.memoryButton * {
  transition: all 0.6s;
}

.memoryButton * {
  cursor: pointer;
}

.memoryButton:hover {
  scale: 1.05;
  border-color: var(--color-primary);
  background-color: var(--color-secondary);
  color: #f5f5f5;
}


.memoryEmptyButton {
  border: none;
  border-radius: 0.2rem;

  background-color: var(--color-primary);
  width: 2.4rem;
  cursor: pointer;

  font-size: 2.4rem;
  color: var(--color-primary);
}

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

.memoryStepsContainer {
  margin-left: 0.3rem;
}


.memoryStepContainer {
  margin: 0.2rem;
}

/* .memoryStepDetailsContainer {} */

.memoryStepText {
  margin: 0.2rem;
}

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

.memoryElementsContainer {
  margin-left: 0.3rem;
}

.memoryElementContainer {
  margin: 0.2rem;
}

.memoryElementDetailsContainer {
  display: flex;
  align-items: center;
}

.memoryElementText {
  border: 1rem;
  border-radius: 0.2rem;
  background-color: #FFFFFF;
  color: #000000;
  margin: 0.3rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.memorySeparatorText {
  margin: 0.2rem;
}

/* ------------------------- */
.elementDetailsContainer {
  margin-left: 0.3rem;
}

.elementDetailContainer {
  margin: 0.5rem;
}

.elementDetailText {
  padding: 0.2rem;
  border: 1rem;
  border-radius: 0.2rem;
}


/* ------------------------- */
/* Colors of kind of result */
.elementDetailInPlanText {
  color: #2B5DC3;
  margin: 0.2rem;
}

.elementDetailMSOK {
  color: rgb(255, 255, 255);
  background-color: rgb(33, 102, 0);
}

.elementDetailMSTooLate {
  color: rgb(255, 255, 255);
  background-color: rgb(213, 29, 0);
}

.elementDetailMSNeedRevision {
  color: rgb(0, 0, 0);
  background-color: rgb(247, 104, 0);
}

.elementDetailMSPossibleRevision {
  color: rgb(0, 0, 0);
  background-color: rgb(242, 180, 71);
}

.elementDetailMSUnknown {
  color: rgb(0, 0, 0);
  background-color: rgb(184, 192, 190);
}

.elementDetailLevelContainer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.elementDetailLevelText {
  color: rgb(0, 0, 0);
  /*#2B5DC3;*/
  margin: 0.2rem;
}


/* ------------------------- */
.memoryEventsContainer {
  margin-left: 0.3rem;
}

.memoryEventContainer {
  margin: 0.2rem;
}

.memoryEventText {
  margin: 0.2rem;
}

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

.memoryEventDetailsContainer {
  margin-left: 0.3rem;
}

.memoryEventDetailContainer {
  margin: 0.2rem;
}

.memoryEventDetailText {
  margin: 0.2rem;
}

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

.memoryPercentagesContainer {
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: left;
}

.memoryPercentageText {
  padding: 0.2rem;
}


/*========================
SECTION - GAME
========================*/
.game {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  margin: 0px;
  padding: 0px;
  max-width: auto;
  width: 100%;
  z-index: 15;
}

.game_button {
  position: fixed;
  left: 1px;
  bottom: 1px;
}

/*========================
CANVAS (voir _canvas.scss)
========================*/
.gameCanvasContainer {
  text-align: center;
}

.gameCanvas {
  margin-left: auto;
  margin-right: auto;
  width: 360px;
}


@keyframes uncollapse {
  from {
    transform: translate(250px, 0px);
  }

  to {
    transform: translate(0px, 0px);
  }
}

@keyframes collapse {
  from {
    transform: translate(0px, 0px);
  }

  to {
    transform: translate(250px, 0px);
  }
}

#notificationContainer {
  pointer-events: none;
  position: fixed;
  right: 0px;
  bottom: 0px;
  z-index: 21;
}

#notificationContainer * {
  color: black;
}

#notificationContainer .singleNotificationContainer {
  width: 250px;
  background-color: white;
  text-align: center;
}

#notificationContainer .notificationContainerWithBar {
  width: 250px;
  background-color: white;
  text-align: left;
}

#notificationContainer .notificationTimer {
  width: 0px;
  height: 4px;
  background-color: darkgrey;
}

#notificationContainer .notificationParagraph {
  margin: 0px;
  padding: 10px;
}

#notificationContainer .notificationParagraph {
  vertical-align: middle;
}

#notificationContainer .notificationPinImage {
  pointer-events: auto;
  height: 2rem;
  width: 2rem;
  margin-right: 20px;
  border: 1px solid white;
  cursor: pointer;
  padding: 3px;
  vertical-align: middle;
  float: left;
}

#notificationContainer .notificationPinImage:hover {
  border: 1px solid black;
}

#notificationContainer .pinned {
  border: 1px solid black;
}

/* .gameCanvasContainer {
  margin: none;
  padding: none;
  color: none;
  font-family: none;
  max-width: none;
  box-sizing: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
} */

/* .gameCanvas {
  margin: none;
  padding: none;
  color: none;
  font-family: none;
  max-width: none;
  box-sizing: none;
  position: relative;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
} */

/* .gameBackground {
  margin: none;
  padding: none;
  color: none;
  font-family: none;
  max-width: none;
  box-sizing: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: right bottom;
} */

.game_button_find_the_correct_one {
  /* reset */
  border: none;
  cursor: pointer;
  transition: none;
  /* actual values */
  display: inline-block;
  background-color: black;
  color: beige;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
}

.game_button_find_the_correct_one_wrong {
  /*border: 1px solid red;*/
  background-color: red;
}

.game_button_find_the_correct_one_unclickable {
  /* reset */
  border: none;
  cursor: pointer;
  transition: none;
  /* actual values */
  display: inline-block;
  background-color: rgb(0, 92, 20);
  color: beige;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  font-size: 16px;
}

.game_progression_bar {
  width: 100vw;
}

.game_button_find_the_correct_one img {
  max-width: 100%;
  width: 400px;
}

.game_button_find_the_correct_one_unclickable img {
  min-width: 200px;
  max-width: 400px;
  object-fit: contain;

  /*
  max-width: 100%;
  width: 400px;
  max-height: 450px;
  */
}

.questionContainer {
  text-align: center;
}

.buttonsContainer {
  text-align: center;
  padding-bottom: 50px;
}

.victoryParagraph {
  font-size: 72px;
  text-align: center;
  background-color: rgba(50, 200, 50, 0.5);
  border-radius: 30px;
}

.GameTypeAllLettersContainers {
  text-align: center;
  /* padding: 10px; */
}

.GameTypeAllLettersSubContainers {
  /*min-width:200px;
  max-width:600px;*/
  width: 100%;
  height: 100%;
}

.GameTypeAllLettersImage {
  /*width:inherit;
  height:inherit;  	*/
  min-width: 200px;
  max-width: 400px;
  /*360px;*/
  object-fit: contain;
  background-color: var(--color-background);
  border-radius: 10px;
  border: 10px solid rgb(0, 92, 20);

}

.GameTypeAllLettersContainersFoundLetters {
  text-align: center;
  /* padding: 10px; */
  /* font-size: xx-large; */
}

/*===================================
SECTION - GAME - GameDominantCouples
=====================================*/

.GameDominantCouplesContainer {
  display: flex;
  align-items: flex-start;
}

.GameDominantCouplesManipulableContainer1 {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* flex-direction: column; */
}

.GameDominantCouplesManipulableContainer2 {
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* flex-direction: column; */
}

.gameDominantCouplesGameElementText {


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;



  /*
  box-sizing: border-box;
  display: inline-block;
  max-width: 200px;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;
  */
}

.gameDominantCouplesGameElementTextSub {

  border: 1px solid var(--color-text);
  border-radius: 10px;

  padding: 10px;
  margin: 10px;


  box-sizing: border-box;
  display: inline-block;
  max-width: 200px;
  background-color: var(--color-background);
  color: var(--color-text);

  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;

  pointer-events: none;
}

.gameDominantCouplesGameElementImage {
  text-align: center;
  line-height: 0;
  box-sizing: border-box;
  display: inline-block;
  /*width:100%;
  height:100%;  */
  /*max-width: 200px;
  min-width: 100px;*/
  /* background-color: var(--color-background); */
  color: var(--color-text);
  vertical-align: middle;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;
}

.gameDominantCouplesImage {
  /*max-width: 200px;*/
  /* fout la merde */

  min-width: 100px;
  max-height: 200px;
  /* là, ça marche ! */
  border-radius: 6px;
  padding: 1px;
}


.gameDominantCouplesGameElementImage image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.GameDominantCouplesGameElementScaleSelect {
  transform: scale(0.9, 0.9);
}

.GameDominantCouplesGameElementScaleDown {
  transform: scale(1, 0);
}

.GameDominantCouplesGameElementCorrect {
  border: 1px solid green;
}

.GameDominantCouplesGameElementWrong {
  border: 1px solid red;
}

/* .GameDominantCouplesGameElementScaleSelect p {
  border: 1px solid var(--error-text);
  color: var(--error-text);
} */

.GameDominantCouplesTime {

  position: fixed;
  right: 50px;
  bottom: 20px;


  width: 50px;
  height: 20px;
  background-color: transparent;
  color: var(--color-text);

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}


/*==============================
SECTION - GAME - GameFallingDOM
================================*/

.GameFallingDOMContainer {
  width: 360px;
  /* 98%;*/
  margin: auto;
  /*max-width:500px;
  min-height:100px;*/
  height: 670px;
  /*560px;/*70%;*/
  position: relative;
}

.GameFallingDOMFrame {
  width: 360px;
  /* 98%;*/
  margin: auto;
  /*max-width:500px;
  min-height:100px;*/
  height: 670px;
  /*740px;/*560px;/*70%;*/
  /*max-height:800px;*/
  border-top: 35px solid var(--color-secondary);
  border-bottom: 0px solid var(--color-secondary);
  border-left: 1px solid var(--color-secondary);
  border-right: 1px solid var(--color-secondary);
  border-radius: 10px;


  position: absolute;
  top: -20px;
  left: 0px;
  /* au dessus du reste */
  z-index: 2;
  /* les éléments en dessous doivent être clickables */
  pointer-events: none;
}

.GameFallingDOMBottomFrame {
  position: absolute;
  top: 480px;
  left: 0px;

  width: 360px;
  /* 98%;*/
  margin: auto;
  /*max-width:500px;
  min-height:100px;*/
  height: 200px;
  /*70%;*/
  /*max-height:800px;*/
  background-color: var(--color-secondary);
  border: 50px solid var(--color-secondary);
  border-radius: 10px;



  /* au dessus du reste */
  z-index: 3;
  /* les éléments en dessous doivent être clickables */
  pointer-events: none;
}



.GameFallingDOMGameElementScaleDown {
  transform: scale(1, 0);
}

.GameFallingDOMGameElementCorrect {
  border: 1px solid green;
}

.GameFallingDOMGameElementLeft {
  left: 1px;
}

.GameFallingDOMGameElementRight {
  left: 180px;
}


.GameFallingDOMGameElement {
  position: absolute;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  width: 178px;
  height: 109px;
  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 1px;
  margin: 0px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;
  text-align: center;
}

.GameFallingDOMGameElementImage {
  position: absolute;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 0px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;
}


.GameFallingDOMGameSubElement {
  /*
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	
    width: 100%;
    height: 40%;
    padding: 1rem;
	
    flex-grow: 1;
	*/

  display: inline-block;

  /*max-width: 200px;*/



}

.GameFallingDOMGameSubElementImage {
  /*
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	
    width: 100%;
    height: 40%;
    padding: 1rem;
	
    flex-grow: 1;
	*/

  display: inline-block;
  width: 176px;
  height: 107px;
  object-fit: contain;

  /*max-width: 200px;*/



}


.GameFallingDOMGameElementText {

  pointer-events: none;
  font-size: 12px;
}

.GameFallingDOMGameElementScaleSelect {
  border: 2px solid blue;
}

.GameFallingDOMGameElementCorrect {
  border: 1px solid green;
}

.GameFallingDOMGameElementScaleDown {
  /*transform: scale(0.9, 0.9);*/
  /*transform: scale(0.1, 0.1);*/
  transform: scale(0.0, 0.0);
}

.GameFallingDOMGameElemenWrong {
  border: 1px solid red;
}

.GameFallingDOMGameElementBottom3 {
  position: absolute;
  left: -20px;
  top: 482px;

  /* au dessus */
  z-index: 4;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex-start;*/
  flex-wrap: wrap;
  overflow: hidden;

  width: 144px;
  height: 104px;
  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  /*10px;*/
  margin: 0px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;

  transform: scale(0.6, 0.6);
  text-align: center;
}

.GameFallingDOMGameElementBottom3Image {
  position: absolute;
  left: -20px;
  top: 482px;

  /* au dessus */
  z-index: 4;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex-start;*/
  flex-wrap: wrap;
  overflow: hidden;

  /*width:144px;
  height: 104px;  */
  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  /*10px;*/
  margin: 0px;
  border-radius: 10px;
  transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;

  transform: scale(0.6, 0.6);
}


.GameFallingDOMGameElementBottom2 {
  /*width: 70px;*/
  /*left:60px;*/
  top: 482px;
  transform: scale(0.8, 0.8) translateX(110px);
  z-index: 5;
}

.GameFallingDOMGameElementBottom1 {
  /*width:30px;*/
  /*left:180px;*/
  top: 482px;
  transform: scale(1, 1) translateX(200px);
  z-index: 6;
}

.GameFallingDOMGameSubElementImageBottom {

  display: inline-block;
  width: 176px;
  height: 107px;
  object-fit: contain;

}

.GameFallingDOMGameElementButtonDown {
  position: absolute;
  left: 150px;
  top: 585px;
  z-index: 7;
}

.GameFallingDOMImage {
  width: inherit;
  height: inherit;
  /*width: 100%;
  height: 100%;*/
  object-fit: contain;
  background-color: var(--color-background);
  /*  
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  overflow: hidden;
  
  border-radius: 50px;
  */
}


.GameFallingDOMTime {
  position: absolute;
  left: 250px;
  top: -2px;

  /* au dessus */
  z-index: 4;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex-start;*/
  flex-wrap: wrap;
  overflow: hidden;

  width: 50px;
  height: 20px;
  /*box-sizing: border-box;  */
  background-color: transparent;
  color: var(--color-text);
  /*border: 2px solid var(--color-text);*/
  /*padding: 4px;/*10px;*/
  /*margin: 10px;*/
  /*border-radius: 10px;*/
  /*transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;	
  
  transform: scale(0.6, 0.6);*/

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}

.GameFallingDOMPoints {
  position: absolute;
  left: 20px;
  top: -2px;

  /* au dessus */
  z-index: 4;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*flex-start;*/
  flex-wrap: wrap;
  overflow: hidden;

  width: 50px;
  height: 20px;
  /*box-sizing: border-box;  */
  background-color: transparent;
  color: var(--color-text);
  /*border: 2px solid var(--color-text);*/
  /*padding: 4px;/*10px;*/
  /*margin: 10px;*/
  /*border-radius: 10px;*/
  /*transform: scale(1, 1);
  transform-origin: center;
  transition: transform 0.3s;	
  
  transform: scale(0.6, 0.6);*/

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}

.victoryParagraphAbsolute {
  position: absolute;

  /* au dessus */
  z-index: 7;
  width: 100%;

  top: 100px;
  font-size: 72px;
  text-align: center;
  background-color: rgba(50, 200, 50, 0.5);
  border-radius: 30px;
}


/*===================================
SECTION - GAME - GameFixDominantCouples
=====================================*/

.GameFixDominantCouplesContainer {
  display: flex;
  align-items: flex-start;

  width: 360px;
  margin: auto;
  height: 700px;
  position: relative;

  /*border: 1px solid rgb(255,0,0);*/
}

.GameFixDominantCouplesManipulableContainer1 {
  /*border: 1px solid rgb(0,255,0);*/
  width: 180px;
  margin: auto;
  height: 700px;
  position: relative;
}

.GameFixDominantCouplesManipulableContainer2 {
  /*border: 1px solid rgb(0,255,255);*/
  width: 180px;
  margin: auto;
  height: 700px;
  position: relative;
}



.GameFixDominantCouplesGameElementText {

  /*border: 1px solid rgb(255,255,0);*/
  width: 178px;
  margin: auto;
  height: 126px;
  position: relative;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;

}

.GameFixDominantCouplesGameElementTextSub {

  padding: 10px;
  pointer-events: none;
}

.GameFixDominantCouplesGameElementImage {
  /*border: 1px solid rgb(255,0,255);*/
  width: 178px;
  margin: auto;
  height: 126px;
  position: relative;


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;
}

.GameFixDominantCouplesImage {
  object-fit: contain;
  width: 178px;
  height: 126px;
}


.GameFixDominantCouplesGameElementImage image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.GameFixDominantCouplesGameElementScaleSelect {
  transform: scale(0.9, 0.9);
}

.GameFixDominantCouplesFog {
  z-index: 1;
  background-color: rgba(127, 127, 127, 0.7);
  width: 178px;
  height: 132px;
  position: absolute;
}

.GameFixDominantCouplesGameElementCorrect {
  border: 1px solid green;
}

.GameFixDominantCouplesGameElementWrong {
  border: 1px solid red;
}

.GameFixDominantCouplesGameElementDone {
  /*border: 1px solid var(--color-background-secondary); */
  /*border: 1px solid rgb(0,45,20); 
  background-color: rgb(0,45,20);*/
  pointer-events: none;
}


/* .GameFixDominantCouplesGameElementScaleSelect p {
  border: 1px solid var(--error-text);
  color: var(--error-text);
} */

.GameFixDominantCouplesTime {

  position: fixed;
  right: 50px;
  bottom: 20px;


  width: 50px;
  height: 20px;
  background-color: transparent;
  color: var(--color-text);

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}


/*===================================
SECTION - GAME - GameSmallDominantCouples
=====================================*/

.GameSmallDominantCouplesContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  align-items: start;

  /*width:360px;*/
  /*height: 700px;*/
  max-width: 500px;
  max-height: 800px;
  margin: auto;
  position: relative;

  /*border: 1px solid rgb(255,0,0);*/
}

/*
.GameSmallDominantCouplesManipulableContainer1 {
  width:180px;
  margin:auto;
  height: 700px;
  position : relative;    
}

.GameSmallDominantCouplesManipulableContainer2 {
  width:180px;
  margin:auto;
  height: 700px;
  position : relative;     
}
*/
.GameSmallDominantCouplesGameElement {
  width: 115px;
  height: 115px;
}

.GameSmallDominantCouplesGameElementText {

  margin: auto;
  position: relative;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;

}

.GameSmallDominantCouplesGameElementTextSub {

  padding: 10px;
  pointer-events: none;
  font-size: 14px;
}

.GameSmallDominantCouplesGameElementImage {
  margin: auto;
  position: relative;


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;
}

.GameSmallDominantCouplesImage {
  object-fit: contain;
}


.GameSmallDominantCouplesGameElementImage image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.GameSmallDominantCouplesGameElementScaleSelect {
  /*transform: scale(0.9, 0.9);*/
  background-color: rgba(127, 127, 255, 0.5);
  z-index: 1;
  width: 178px;
  height: 132px;
  position: absolute;
}

.GameSmallDominantCouplesFog {
  z-index: 1;
  background-color: rgba(127, 127, 127, 0.7);
  width: 178px;
  height: 132px;
  position: absolute;
}

.GameSmallDominantCouplesGameElementCorrect {
  /*border: 1px solid green;*/
  background-color: rgba(127, 255, 127, 0.3);
  z-index: 1;
  width: 178px;
  height: 132px;
  position: absolute;
}

.GameSmallDominantCouplesGameElementWrong {
  /*border: 1px solid red;*/
  background-color: rgba(255, 127, 127, 0.3);
  z-index: 1;
  width: 178px;
  height: 132px;
  position: absolute;
}

.GameSmallDominantCouplesGameElementDone {
  /*border: 1px solid var(--color-background-secondary); */
  /*border: 1px solid rgb(0,45,20); 
  background-color: rgb(0,45,20);*/
  pointer-events: none;
}


/* .GameSmallDominantCouplesGameElementScaleSelect p {
  border: 1px solid var(--error-text);
  color: var(--error-text);
} */

.GameSmallDominantCouplesTime {

  position: fixed;
  right: 50px;
  bottom: 20px;


  width: 50px;
  height: 20px;
  background-color: transparent;
  color: var(--color-text);

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}


/*===================================
SECTION - GAME - GameMemoryDOM
=====================================*/

.GameMemoryDOMContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;

  flex-wrap: wrap;
  align-items: start;

  /*width:360px;*/
  /*height: 700px;*/


  /*
  min-width: 50vmin;
  min-height: 50vmin;
  max-width: 100vmin;
  max-height: 100vmin;
*/


  min-width: 50vw;
  min-height: 80vh;
  max-width: 90vw;
  max-height: 90vh;



  /*
  width: 500px;
  height: 800px;
  */
  /*
  min-width: 500px;
  min-height: 800px;
  max-width: 500px;
  max-height: 800px;
  */
  /*
  max-width: 674px;
  max-height: 665px;
  */

  margin: auto;
  position: relative;

  /*border: 1px solid rgb(255,0,0);*/
}

/*
.GameMemoryDOMManipulableContainer1 {
  width:180px;
  margin:auto;
  height: 700px;
  position : relative;    
}

.GameMemoryDOMManipulableContainer2 {
  width:180px;
  margin:auto;
  height: 700px;
  position : relative;     
}
*/
.GameMemoryDOMGameElement {
  width: 13vmax;
  height: 20vmax;
  ;
}

.GameMemoryDOMGameElementText {

  margin: auto;
  position: relative;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;
  text-align: center;

}

.GameMemoryDOMGameElementTextSub {

  padding: 10px;
  pointer-events: none;
  /*font-size: 14px;*/
  font-size: 1.5vmax;
}

.GameMemoryDOMGameElementImage {
  margin: auto;
  position: relative;


  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;

  box-sizing: border-box;
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  padding: 0px;
  margin: 1px;
  border-radius: 10px;
}

.GameMemoryDOMImage {
  object-fit: contain;
}

.GameMemoryDOMImageBack {
  background-image: url("../../images/Games/1.png");
  position: absolute;
  object-fit: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;

}

/*
.GameMemoryDOMImageBackHidden {
}
*/

.GameMemoryDOMImageBackScale {
  transition: transform 0.3s;
  transform: scale(0, 1);
}

.GameMemoryDOMGameElementImage image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.GameMemoryDOMGameElementScaleSelect {
  /*transform: scale(0.9, 0.9);*/
  background-color: rgba(127, 127, 255, 1);
}

.GameMemoryDOMFog {
  z-index: 1;
  background-color: rgba(127, 127, 127, 0.7);
  width: 13vmax;
  height: 20vmax;
  position: absolute;
}

.GameMemoryDOMGameElementCorrect {
  /*border: 1px solid green;*/
  background-color: rgba(127, 255, 127, 1);
}

.GameMemoryDOMGameElementWrong {
  /*border: 1px solid red;*/
  background-color: rgba(255, 127, 127, 1);
}

.GameMemoryDOMGameElementDone {
  /*border: 1px solid var(--color-background-secondary); */
  /*border: 1px solid rgb(0,45,20); 
  background-color: rgb(0,45,20);*/
  pointer-events: none;
}


/* .GameMemoryDOMGameElementScaleSelect p {
  border: 1px solid var(--error-text);
  color: var(--error-text);
} */

.GameMemoryDOMTime {

  position: fixed;
  right: 50px;
  bottom: 20px;


  width: 50px;
  height: 20px;
  background-color: transparent;
  color: var(--color-text);

  pointer-events: none;
  font-size: 12px;
  text-align: right;
}

.GameMemoryDOMMainContainer {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
}

.current {
  background-color: var(--color-text);
}

.current .nav_button .nav_text {
  color: var(--color-background);
}

.current .nav_button .nav_icon {
  /* color: var(--color-background) !important; */
  /* background-color: var(--color-text) !important; */
  /* -webkit-filter: invert(var(--invert));
  -moz-filter: invert(var(--invert));
  -ms-filter: invert(var(--invert));
  -o-filter: invert(var(--invert));
  filter: invert(var(--invert)); */

  -webkit-filter: invert(var(--no-invert));
  -moz-filter: invert(var(--no-invert));
  -ms-filter: invert(var(--no-invert));
  -o-filter: invert(var(--no-invert));
  filter: invert(var(--no-invert));
}

/*===================================
SECTION - GAME - GameAngryCouples
=====================================*/

.GameAngryCoupleProgressionBar {
  width: 100%;
  z-index: 13;
  position: fixed;
  left: 0px;
  top: 0px;
}

.game_container {
  width: 100vw;
  height: 100vh;
}

.editModuleDescbutton {
  text-align: right;
  width: 15rem;
  margin-right: 1rem;
}

.edit_infoDesc {
  position: relative;
  height: 60%;
  /* min-width: 12rem; */
  font-size: 2rem;
  border: 0.1rem solid var(--color-background-secondary);
  border-radius: 0.3rem;
  background-color: var(--color-background);
  color: var(--color-text);
  padding-left: 3px;
  width: 80vw;
  margin: 4px;
  height: 15vh;
  text-align: center;

}

.edit_infoDesccription {
  min-height: 5rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/*===================================
  SECTION - GAME - GameProgressiveLearning
  =====================================*/

.gameProgressiveLearningContainer {
  display: flex;
  box-sizing: border-box;
  max-height: 100vh;
  justify-content: space-evenly;
}

.progressiveLearningLeftSide {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-end;
}

.progressiveLearningRightSide {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}

.gameProgressiveLearningContainerElement {
  min-height: 100px;
  /* line-height: 100px; */
}

.gameProgressiveLearningImage {
  max-height: 18vh;
  float: left;
}

.gameProgressiveLearningSpan {
  display: inline-block;
  padding: 20px;
  border: 1px solid beige;
  border-radius: 10%;
  background-color: black;
}

.gameProgressiveLearningProgressionBarContainer {
  width: 100%;
  min-height: 5px;
  background-color: red;
}

.gameProgressiveLearningProgressionBarBar {
  /* display: inline-block; */
  min-height: 5px;
  background-color: green;
  transition: width 300ms;
  /* line-height: 5px; */
}

/*===================================
  Trophies
  =====================================*/

.trophiesSection {
  display: flex;
  flex-wrap: wrap;
}

.trophiesScoreContainer {
  box-sizing: border-box;
  padding: 8px;
  margin: 8px;
  border: 1px solid black;
  width: 360px;
}

.trophiesScore, .trophiesModulesScore, .trophiesdownloadScore, .trophiesSignups {
  text-align: center;
  padding: 8px;
}

.trophiesElements {
  background-color: rgba(225, 225, 225, 0.05);
  padding: 4px;
  font-size: large;
}

.trophiesElements:nth-child(1)::before {
  content : "🥇";
}

.trophiesElements:nth-child(2)::before {
  content : "🥈";
}

.trophiesElements:nth-child(3)::before {
  content : "🥉";
}

.trophiesElements:nth-child(odd) {
  background-color: rgba(225, 225, 225, 0.05);
}

.trophiesElements:nth-child(even) {
  background-color: rgba(225, 225, 225, 0.09);
}

.trophiesRight {
  float: right;
}

.trophiesLeft {
  /* float: left; */
}

/* end of file */