@import url(https://fonts.googleapis.com/css?family=Roboto);

:root {
  --gradianPrimary1: rgb(82, 67, 170);
  --gradianPrimary2: rgb(237, 80, 180);

  --navPrimary: linear-gradient(120deg, var(--gradianPrimary1), var(--gradianPrimary2));
  --bs-nav-pills-link-active-bg: var(--gradianPrimary2) !important;
  --paneliconBody: #f4edfc;
}

html,
body {

  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#myinfos {
  border: dotted 1px rgb(158, 86, 240)
}

#menuButtonModal {
  width: 110px;
  height: 110px;
  border: solid 1px #6518ca;
  background-color: none;
  transition: rotate 0.2s width 0.5s, height 0.5s;
}

#menuButtonModal:hover {
  width: 110px;
  height: 110px;
  rotate: 1deg;
  background-color: rgba(142, 50, 255, 0.10);
}

#appNavContainer {
  background: var(--navPrimary);
  margin: 8px;
  border-radius: 15px;

}

#appNavContainer:hover {
  /* --gradianPrimary2: #1414ca; */
  background: linear-gradient(var(--gradianPrimary1), var(--gradianPrimary2));
  /* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
  background-size: 400% 400%;
  /* animation: gradient 15s ease infinite; */


}

/* @keyframes gradient {
  0% {
    background-position: 0% 0%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
} */

.nav-link.active {
  background-color: #32005a54;
  f: #ff2d2d;
}

#panelIcon>button:hover {
  height: 54px;
  width: 54px;
  background-color: #f1e9fd;

}

#panelIcon>button {
  width: 48px;
  height: 48px;
  background-color: var(--paneliconBody);
  transition: width 0.25s height 0.25s background-color 1s;
}

[class*=" bi-"]::before {
  display: flex;
}

.ck.ck-content.ck-editor__editable {
  max-height: 500px;
  overflow-y: auto;
  /* Défilement si la hauteur max est atteinte */
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

#choixQuestionSujet {
  max-height: 750px;

}

.bookImg {
  object-fit: cover;
}