.for_comp{
  display:flex !important;
  justify-content: center !important;
  align-items: center !important;
  height:100vh !important;
  width:100vw !important;
  background-color:#f9f9f9 !important;
}
.for_comp body{
  width:60vw;
  height:40vw;
  min-height:40vw !important;
  border-radius:20px;
  border: solid 2.5vw black;
  overflow-y:auto !important;
  font-size:.91vw !important;
  box-sizing: border-box !important;
}
.for_comp body button{
  cursor: pointer !important;
}
.for_comp body *:not(h1):not(h2):not(h3):not(h4){
  font-size:.91vw !important;
}
.for_comp .accueil_switch h2{
  font-size:1.74vw !important;
}
.for_comp h1{
  font-size:1.96vw !important;
}
.for_comp .header_left main h2{
  font-size:1.3vw !important;
}
.for_comp body main, .for_comp body footer, .for_comp body header{
  width:100%;
}
.for_comp .staff main, .for_comp .create main, .for_comp .category main{
  height:100% !important;
  min-height:100%;
}
.for_comp .accueil_switch header{
  height:5vw !important;
}
.for_comp .accueil_switch header img{
  height:100% !important;
}
.for_comp .accueil_switch main ul li{
  width:17vw;
  height:17vw;
}
.for_comp .accueil_switch footer{
  height:14%;
}
.for_comp .accueil_switch footer ul{
  height:100%;
}
.for_comp .accueil_switch footer ul li a{
  height:2.4vw;
  width:2.4vw;
}
.for_comp .index_classroom main ul li{
  width:40%;
}
.for_comp .index_classroom main ul li a{
  height:8vw;
}
.for_comp .category .back_button{
  position:absolute;
  height:8vh;
}
.for_comp .category main ul, .for_comp .category main ul li, .for_comp .category main ul li a{
  height:100%;
}
.for_comp .category main ul li{
    min-width:calc(55vw / 3);
}
.for_comp .galerie main ul li {
    width: 14vw;
    height: 14vw;
}
.for_comp .galerie .apercu{
  height:100%;
  width:100%;
  position:absolute;
}
.for_comp .galerie .apercu div{
  width: 25vw;
  height:25vw;
}
.for_comp .galerie .apercu p{
  width:25vw;
}
.for_comp .index_personalities header, .for_comp .index_personalities section{

    height: 100% !important;
    width:100% !important;

}
.for_comp .index_personalities{
  overflow-y:hidden !important;
}
.for_comp .index_personalities .welcome {
    position: absolute !important;
    top: -35vw;
    overflow-y: auto;
    height: 35vw !important;
    min-height: 35vw !important;
}
.for_comp .index_personalities main .questionnaire li {
    width: 55vw !important;
    height: 35vw !important;
}
.for_comp .index_personalities main .questionnaire li ul li {
    height: 5vw !important;
    width: 40% !important;
}
.for_comp .index_personalities .resultats{
      height: 35vw !important;
}
.for_comp .index_personalities .description{
    /* position: absolute; */
    height: 35vw !important;
    width: 55vw !important;
    /* margin: auto; */
    left: 22.5vw;
    top: calc((100vh - 35vw) / 2);
}
.for_comp .index_personalities .jauge {
    width: 55vw;
    left: 22.5vw;
    bottom: calc((100vh - 35vw) /2 );
}
.for_comp .index_horoscope main ul li img {
    height: 5vw;
}
.for_comp .index_horoscope main ul li {
    height: auto;
}
.for_comp .index_horoscope .show {
    width: 55vw;
    height: 35vw;
    left: 22.5vw;
    top: calc((100vh - 35vw) / 2);
}
.for_comp .accueil_switch .login {
    position:absolute;
    width:55vw !important;
    height:35vw !important;
}
.for_comp .accueil header, .for_comp .header_left header {
    background-color: #070707;
    max-width: 12vw;
    min-width: 12vw;
    min-height: 100% !important;
    height: 100% !important;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 0;
}
.for_comp header .small_qr_code, .for_comp .header_left header .small_qr.code {
    width: 9vw;
    height: 9vw;
}
.for_comp .accueil main,.for_comp .header_left main{
  height:100% !important;
}
.for_comp .accueil main ul li {
    background-color: transparent;
    color: white;
    width: 8vw;
    height: fit-content;
    margin: 9px;
}
.for_comp .accueil main ul li button span {
    height: 8vw;
  }
  .for_comp .accueil main .form_profile {
    height: 35vw !important;
    min-height: 35vw !important;
  }
  .for_comp section.session_confirm {
    position: absolute !important;
    height: 35vw !important;
    width: 55vw !important;
}
.for_comp .session_confirm .confirm_bloc {
    width: 75% !important;
  }
.for_comp .cats_list li {
    width: 9vw;
    height: 9vw;
}
.for_comp .arbre main ul {
    width: 80%;
  }
.for_comp .arbre .video_section {
    width: 55vw !important;
    height: 35vw !important;
    left: 22.5vw !important;
    top: calc((100vh - 35vw) / 2) !important;
}
.for_comp .accueil_switch main::-webkit-scrollbar {
  display: block !important;
    position:absolute;
  bottom:0;
  height:15px;
  width:100%;
  opacity:1;
}
.for_comp .accueil_switch main::-webkit-scrollbar-track {
  background:#0f0f0f;
}
.for_comp .accueil_switch main::-webkit-scrollbar-thumb {
  background-color: #9999 !important;
  margin:0 2px;
  border-left:solid 5px #0f0f0f;
  border-right:solid 5px #0f0f0f;
}
.for_comp .accueil_switch main::-webkit-scrollbar-button
{
  border-style: solid;
  height: 15px;
  width: 10px;
  background:#0f0f0f;
  padding:2px;
}
/* Left */
.for_comp .accueil_switch main::-webkit-scrollbar-button:horizontal:decrement
{
  border-width: 7.5px 15px 7.5px 0;
  border-color: transparent #9999 transparent transparent;
}

.for_comp .accueil_switch main::-webkit-scrollbar-button:horizontal:decrement:hover
{
  border-color: transparent #9999 transparent transparent;
}


/* Right */
.for_comp .accueil_switch main::-webkit-scrollbar-button:horizontal:increment
{
  border-width: 7.5px 0 7.5px 15px;
  border-color: transparent transparent transparent #9999;
}

.for_comp .accueil_switch main::-webkit-scrollbar-button:horizontal:increment:hover
{
  border-color: transparent transparent transparent #9999;
}
/* Hide scrollbar for IE and Edge */
.for_comp .accueil_switch main {
  -ms-overflow-style: initial !important;
}
.for_comp .category main::-webkit-scrollbar {
  display: block !important;
    position:absolute;
  bottom:0;
  height:15px;
  width:100%;
  opacity:1;
}
.for_comp .category main::-webkit-scrollbar-track {
  background:#0f0f0f;
}
.for_comp .category main::-webkit-scrollbar-thumb {
  background-color: #9999 !important;
  margin:0 2px;
  border-left:solid 5px #0f0f0f;
  border-right:solid 5px #0f0f0f;
}
.for_comp .category main::-webkit-scrollbar-button
{
  border-style: solid;
  height: 15px;
  width: 15px;
  background:#0f0f0f;
  padding:2px;
}
/* Left */
.for_comp .category main::-webkit-scrollbar-button:horizontal:decrement
{
  border-width: 7.5px 15px 7.5px 0;
  border-color: transparent #9999 transparent transparent;
}

.for_comp .category main::-webkit-scrollbar-button:horizontal:decrement:hover
{
  border-color: transparent #9999 transparent transparent;
}


/* Right */
.for_comp .category main::-webkit-scrollbar-button:horizontal:increment
{
  border-width: 7.5px 0 7.5px 15px;
  border-color: transparent transparent transparent #9999;
}

.for_comp .category main::-webkit-scrollbar-button:horizontal:increment:hover
{
  border-color: transparent transparent transparent #9999;
}
/* Hide scrollbar for IE and Edge */
.for_comp .category main {
  -ms-overflow-style: initial !important;
}
.for_comp .galerie main::-webkit-scrollbar {
  display: block !important;
    position:absolute;
  bottom:0;
  height:15px;
  width:100%;
  opacity:1;
}
.for_comp .galerie main::-webkit-scrollbar-track {
  background:#f1f1f1;
}
.for_comp .galerie main::-webkit-scrollbar-thumb {
  background-color: #9999 !important;
  margin:0 2px;
  border-left:solid 5px #f1f1f1;
  border-right:solid 5px #f1f1f1;
}
.for_comp .galerie main::-webkit-scrollbar-button
{
  border-style: solid;
  height: 15px;
  width: 15px;
  background:#f1f1f1;
  padding:2px;
}
/* Left */
.for_comp .galerie main::-webkit-scrollbar-button:horizontal:decrement
{
  border-width: 7.5px 15px 7.5px 0;
  border-color: transparent #9999 transparent transparent;
}

.for_comp .galerie main::-webkit-scrollbar-button:horizontal:decrement:hover
{
  border-color: transparent #9999 transparent transparent;
}


/* Right */
.for_comp .galerie main::-webkit-scrollbar-button:horizontal:increment
{
  border-width: 7.5px 0 7.5px 15px;
  border-color: transparent transparent transparent #9999;
}

.for_comp .galerie main::-webkit-scrollbar-button:horizontal:increment:hover
{
  border-color: transparent transparent transparent #9999;
}
/* Hide scrollbar for IE and Edge */
.for_comp .galerie main {
  -ms-overflow-style: initial !important;
}
.for_comp .categories .chapter_row::-webkit-scrollbar {
  display: block !important;
    position:absolute;
  bottom:0;
  height:15px;
  width:100%;
  opacity:1;
}
.for_comp .categories .chapter_row::-webkit-scrollbar-track {
  background:#0f0f0f;
}
.for_comp .categories .chapter_row::-webkit-scrollbar-thumb {
  background-color: #9999 !important;
  margin:0 2px;
  border-left:solid 5px #0f0f0f;
  border-right:solid 5px #0f0f0f;
}
.for_comp .categories .chapter_row::-webkit-scrollbar-button
{
  border-style: solid;
  height: 15px;
  width: 15px;
  background:#0f0f0f;
  padding:2px;
}
/* Left */
.for_comp .categories .chapter_row::-webkit-scrollbar-button:horizontal:decrement
{
  border-width: 7.5px 15px 7.5px 0;
  border-color: transparent #9999 transparent transparent;
}

.for_comp .categories .chapter_row::-webkit-scrollbar-button:horizontal:decrement:hover
{
  border-color: transparent #9999 transparent transparent;
}


/* Right */
.for_comp .categories .chapter_row::-webkit-scrollbar-button:horizontal:increment
{
  border-width: 7.5px 0 7.5px 15px;
  border-color: transparent transparent transparent #9999;
}

.for_comp .categories .chapter_row::-webkit-scrollbar-button:horizontal:increment:hover
{
  border-color: transparent transparent transparent #9999;
}
/* Hide scrollbar for IE and Edge */
.for_comp .categories .chapter_row {
  -ms-overflow-style: initial !important;
}

.for_comp .red_back_btn{
  position:absolute !important;
  top:5vh !important;
  left:20px !important;
  width:auto !important;
}
.for_comp #tablette_button, .for_comp #tablette_objectif{
  display:block !important;
}
.for_comp svg#tablette_objectif {
    width: 0.5vw;
    height: 0.5vw;
    position: fixed;
    top: calc((100vh - 40vw) / 2 + 1vw);
    left: 49.5vw;
}
.for_comp svg#tablette_button {
    height: 3vw;
    width: 1vw;
    position: fixed;
    right: 20.75vw;
    top: calc((100vh - (100vh - 40vw) / 2) - 21.5vw);
}
.for_comp .trying_timer {
    position: fixed !important;
    width: 100vw !important;
    padding:0;
    left: 2.5vw !important;
    background: transparent;
    z-index: 9999 !important;
    text-align: center !important;
    width: 15vw !important;
    border-radius: 5px !important;
    color: white !important;
    height: 35vw;
    display: flex !important; 
    flex-direction: column !important;
    justify-content: center !important;
    top: calc((100vh - 35vw) / 2);
}
.for_comp .trying_doc {
    position: fixed !important;
    width: 100vw !important;
    padding: 0 !important;
    right: 2.5vw !important;
    background: transparent;
    z-index: 9999 !important;
    text-align: center !important;
    width: 15vw !important;
    border-radius: 5px !important;
    color: white !important;
    height: 35vw;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    top: calc((100vh - 35vw) / 2);
}
.for_comp .trying_doc a {
  display:block !important;
  margin:5px auto !important;
  color:white !important;
  font-weight: bold !important;
  text-align: center !important;
  font-size:1.06vw !important;
}
.for_comp .trying_timer p, .for_comp .trying_doc p{
  font-size:1.06vw !important;
  background-color:#e21617!important;
  border-radius:5px!important;
  padding:25px 20px!important;
}
.for_comp .trying_doc p{
  background-color:#191919!important;
}
.for_comp .trying_timer p b{
  font-size:1.06vw !important;
}