/*========================
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;

  background-color: var(--color-primary);
  margin: 8px;
  cursor: pointer;
  font-size: 1.4rem;
  color: #222629;
  transition: all 0.6s;
  user-select: none;
  
  font-size: 2rem;
  color: #222629;  
  
}

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

.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);
  
  
  
  position:relative;
  min-height:100vh;
}

/*========================
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_list {
  position: absolute;

  
  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) or (max-height: 500px) ) {
  .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: wrap;
}

.library_menu_bottom {
  display: flex;
  /* flex-direction: row; */
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  
  margin-top: 120px;
  /*margin-bottom: 20px;*/ /* generate again an issue with grey area */
  
}

/* 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_menu_bottom .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;
  position: relative;
  border-radius: 0.3rem;
  width: 120px;
  height: 150px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.module * {
  transition: all 0.3s;
}

.module_image-wrapper {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  overflow: hidden;
  background-color: var(--color-background);
  border-radius: 50px;
}

.module_image {
  width: 100%;
  height: 100%;
  object-fit: 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;
  height: 24px;
  width: 24px;
  -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 {
  height: 24px;
  width: 24px;
  background-image: url("../../images/icons/moduleDetails.svg");
}



.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_label_center {
  text-align: center;
  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;

  width: 100%;
}

.edit_tab_element {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;

  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_list_elements {
  /*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-couple-details {
  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;
  width:80%;
  margin-top:1rem;
  margin-bottom:1rem;
}

.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_change {
  position: relative;
  background: none;
  border: none;
  height: 2.5rem;
  width: 2.5rem;
  background-image: url("../../images/icons/moduleDetails.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;
}

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


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


.edit_elt_imageviewer-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_imageviewer-imageviewer{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  /*cover;*/
  object-position: 50% 50%;
  
}

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

.editStep {
	position: relative; /* just to avoid warning if empty */
}


.editVolumeContainer{
	display:flex;
	flex-direction:column-reverse;
	/*justify-content:center;*/
	
	height:100px;
	width:50px;
	
	background-color:grey;
	border-style:solid;
	border-width:2px;
	border-color:black;
	border-radius:10px;
	padding:0px;
	overflow:hidden;
}

.editVolume{
	height:0px;/*20px;*/
	width:50px;
	background-color:red;
}


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

.button_file * {
  transition: all 0.6s;
}


.button_file * {
  cursor: pointer;
}

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

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

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


.edit_video_label {
  text-align: center;
  width: 100vw;
  /*margin-right: 1rem;*/
}

.edit_content-video {
  flex: 1;
  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;  
  width: 100vw;
}

.edit_content-videowrapper{
	margin: 0 auto;
	border: 0.1rem solid  var(--color-text);
	border-radius: 0.3rem;
}

/*========================
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 {
  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);
}

.profile_change_private_log_input {

}

.profile_change_private_log_console_input {

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

.about_title {
  margin: 2rem;
}

.about_version {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.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: 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;

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

}

.modal_percentages_container {

  display: flex;
  flex-direction: row;
  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;

}


.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;
}


/* ------------------------- */
.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;
}


.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 - IMAGEVIEWER
========================*/
.imageviewer_container{
 position:absolute;
 top:0px;
 left:0px;
 width: 100%;
 height : 100%;
}

.imageviewer_viewer{
  display: block;
  margin-left: auto;
  margin-right: auto;	
	border-radius: 8px;
	max-width:85%;
	max-height:85%;
}

/*========================
SECTION - VIDEO RUN
========================*/
.video_container{
 position:absolute;
 top:0px;
 left:0px;
 width: 100%;
 height : 100%;
}

.video_run{
  display: flex;
  margin-left: auto;
  margin-right: auto;	
  border-radius: 8px;
  max-width:85%;
  max-height:85%;
}

.video_run-videowrapper{
  margin: 0 auto;
  border: 0.1rem solid  var(--color-text);
  border-radius: 0.3rem;
  width:85vw;
  height:85vh;	
}


@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;
}

.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));
}


.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;
	}


/******** profile **********/
/* local logs */

.local_log_label {
position:relative; /* dummy to avoid warning empty class*/
}

/* games parameters */
.profile_change_games_settings_title{
  position:relative; /* dummy to avoid warning empty class*/

}

.profile_change_games_settings_game_title{
  position:relative; /* dummy to avoid warning empty class*/

}

.profile_change_games_settings_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);
}








/* end of file */