.detail_groupe
{
    display: none;
}

.no_outline:focus{outline: none;}

.cache
{
    display: none;
}

.lds-dual-ring
{
	display: inline-block;
	width: 80px;
	height: 80px;
}
	.lds-dual-ring:after
	{
		position: absolute;
  		top: 40%; /* poussé de la moitié de hauteur du référent */
 		transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
 		left: 0;
 		right: 0;
	  content: " ";
	  display: block;
	  width: 64px;
	  height: 64px;
	  margin: auto;
	  border-radius: 50%;
	  border: 3px solid #0ff;
	  border-color: #0ff transparent #0ff transparent;
	 animation: lds-dual-ring 1.2s linear infinite;
	}

.overlay
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    display: grid;
    place-content : center;
    color: #0FF;
}



@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


html
{
    box-sizing: border-box;
    /*overflow: hidden;*/
}


*, *::before, *::after
{
    box-sizing: inherit;
    margin : 0;
}

@media only screen and (orientation:portrait)
{
	html
	{
		background-image: url("/circuit/Images/Graphismes/paysage.png");
        background-size: cover;
        background-repeat: no-repeat;
	}

    body
    {
        display: none;
    }
}

@media only screen and (orientation:landscape)
{
    html
    {
        height : 100vh;
        height: calc(var(--vh, 1vh) * 100);
        background-image: url("/circuit/Images/Graphismes/cockpit.png"), url("/circuit/Images/Graphismes/cockpit_top.png"), url("/circuit/Images/Graphismes/fond.jpg");
        background-size: contain, contain, cover;
        background-repeat: no-repeat, no-repeat, no-repeat;
        background-position: bottom, top, top;
        background-color: #002ca9;
    }

    body
    {
        height: 100%;
    }
}

/*---- Font ---- */

@font-face
{
    font-family: "slidbot_quantum";
    src: url("/circuit/Assets/fonts/Quantum.otf");
}

@font-face
{
    font-family: "slidbot_space";
    src: url("/circuit/Assets/fonts/space.ttf");
}

/*---- Space ---- */

#space_body
{
    height: 100%;

    display: flex;
    flex-direction: column;
}

    #space_header
    {
        height: 0;
        padding-bottom: 6%;
        position: relative;
    }

    #space_section
    {
        flex-grow: 1;
        height: 100%;
    }

    #space_footer
    {
        height: 0;
        padding-bottom: 12.3%;
    }

/*---- Cadre ---- */

.fenetre
{
    width: 70%;
    height: 100%;
    margin: auto;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    position: relative;

    color: white;
}

    .fenetre > h1
    {
        font-size: 2vw;
        font-family: slidbot_quantum;
        text-align: center;
    }

    .fenetre > div
    {
        height: 100%;
        flex-grow: 1;
        overflow: hidden;
        margin-bottom: 1.5em;
    }

    .fenetre > div > div
    {
        width: calc(100% - 1.5rem);
        height: calc(100% - 1.5rem);

        margin: auto;
        margin-top: 0.75em;
        margin-bottom: 0.75em;
        overflow: visible;
    }

    .fenetre > div > div > div
    {
        height: 100%;
        padding: 2ch;
        overflow: auto;
    }

    .fenetre > div > div > div::-webkit-scrollbar, .eleve_mission_etapes > div::-webkit-scrollbar
    {
            width: 0.5em;
            height: 0.5em;
    }
         
    .fenetre > div > div > div::-webkit-scrollbar-thumb, .eleve_mission_etapes > div::-webkit-scrollbar-thumb
    {
        background-color: #00FFFF;
    }

    .fenetre > div > div > div::-webkit-scrollbar-thumb:hover, .eleve_mission_etapes > div::-webkit-scrollbar-thumb:hover
    {
       background: #4dbad6;
    }

.cadre, .cadre_sans_bordure
{
    position: relative;
    background-color: rgba(13,32,81,0.8);
    border : 1px solid #00FFFF;  
}
    .cadre::before,
    .cadre::after,
    .cadre > div::before,
    .cadre > div::after
    {
        content: '';
        position: absolute;
        width: 1em;
        height: 1em;
        background: transparent;
    }

    .cadre::before
    {
        top: -0.75em;
        left: -0.75em;
        border-top : 2px solid #00FFFF;
        border-left: 2px solid #00FFFF;
    }

    .cadre::after
    {
        top: -0.75em;
        right: -0.75em;
        border-top : 2px solid #00FFFF;
        border-right: 2px solid #00FFFF;
    }

    .cadre > div::before
    {
        bottom: -0.75em;
        left: -0.75em;
        border-bottom: 2px solid #00FFFF;
        border-left: 2px solid #00FFFF;
    }

    .cadre > div::after
    {
        bottom: -0.75em;
        right: -0.75em;
        border-bottom: 2px solid #00FFFF;
        border-right: 2px solid #00FFFF;
    }

/*---- Autres ---- */

.img_deconnexion
{
    width: 2.5vw;
    height: auto;
    padding-top: 1vw;
    margin: auto;
    display: block;
    transform: translateX(0.25vw);
}

.bouton_retour
{
    position: absolute;
    left: 0;
    right: 0;

    width: 2.5vw;
    height: auto;
    padding-top: 1vw;
    margin: auto;
    display: block;
    transform: translateX(-7.5vw);
}

.button-validation
{
    display: block;
    margin : auto;
    margin-top: 5ch;
    background-color: transparent;
    border : 0px;
        
    font-family: slidbot_space;
    color : white;
    cursor: pointer;
    text-align: center;
}

    .button-validation:disabled
    {
        color: #777;
    }

/*---- Important ---- */

.height100
{
    height: 100% !important;
}

.clickable
{
    cursor: pointer !important;
}

.link:hover
{
    text-decoration: underline;
    cursor: pointer;
}

.center
{
    display: grid;
    place-content : center;
    text-align: center;
}

.center_buttons
{
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.panel_missions
{
    height: 100%;
    width: 50%;
    margin: auto;

    align-items: flex-end;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
    .prof_mission_previous, .prof_mission_next
    {
        width: 2.8rem;
    }

.arrow-down
{
    display: inline-block;
    margin-left: 1ch;

    width: 0;
    height: 0;
    
    border-right: 0.4em solid transparent;
    border-left: 0.4em solid transparent;
    
    border-top: 0.7em solid white;
}

/*---- Effets ---- */

.button-effect
{
    opacity: 1;
    position: relative;
}

.button-effect a::before
{
    content: '';
    display: block;
    background-color: #00FFFF;
    height: 3px;
    position: absolute;
    bottom: -0.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform 250ms ease-in-out;
}

.button-effect a:hover::before
{
    transform: scale(1, 1);
}

/*---- Nav ---- */

    .text_descriptif
    {
        font-size: 2.5rem;
        position: absolute;
        left: 0;
        right: 0;
        display: block;
        content: '';
        width: 2.5vw;
        height: 2.5vw;
        margin: auto;
        margin-top: 1vw;
        transform: translateX(7.5vw);
                
        cursor: pointer;
    }

    .nav-toggle-label
    {
        position: absolute;
        left: 0;
        right: 0;
        display: block;
        content: '';
        width: 2.5vw;
        height: 2.5vw;
        margin: auto;
        margin-top: 1vw;
        transform: translateX(7.5vw);
                
        cursor: pointer;
    }

        .nav-toggle-label span,
        .nav-toggle-label span::before,
        .nav-toggle-label span::after
        {
            display: block;
            height: 0.3vw;
            width: 2vw;
            border-radius: 0.3vw;
            background-color: black;
            content: '';
            position: absolute;
        }

        .nav-toggle-label span
        {
            top : 0.5vw;
        }

        .nav-toggle-label span::before
        {
            top : 0.6vw;
        }

        .nav-toggle-label span::after
        {
            top: 1.2vw;

        }

    .nav-toggle
    {
        display: none;
    }

    .nav-toggle:checked ~ nav
    {
        transform: scale(1,1);
    }

    .nav-toggle:checked ~ nav a
    {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
    }   

    nav
    {
        font-family: 'Work Sans', sans-serif;
        font-weight: 400;

        position: absolute;
        top : 3.5vw;
        left: 56.5vw;

        text-align: left;

        background-color: white;
        width: auto;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;

        border-radius: 10px;
        border: 1px solid black;
        background-color: rgb(220, 222, 218);

        z-index: 998;
    }

        nav ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            nav li
            {
                margin: 1em;
                cursor: pointer;
            }

        nav a
        {
            color : black;
            text-decoration: none;
            font-size: 1rem;
            text-transform: uppercase;
            opacity: 0;
            transition: opacity 150ms ease-in-out;
        }

    nav a:hover
    {
        text-decoration: underline;
    }

/*---- Connexion ---- */

.connexion
{
    max-width: 80ch !important;
}

    .connexion > div
    {
        position: relative;
    }

        .button-connexion
        {
            display: block;
        	margin : auto;
            margin-top: 2rem;

            background-color: transparent;
            border : 0px;
            
            font-family: slidbot_space;
            color : white;
            cursor: pointer;
            text-align: center;
        }

    #mdp-section a:hover
    {
        text-decoration: underline;
        cursor: pointer;
    }

/*---- Eleve Creer groupe ---- */

#form_creer_groupe table
{
    width: 70%;
    border-collapse: collapse;
    margin: auto;
    position: relative;
}
    #form_creer_groupe thead
    {
        text-decoration: underline;
    }

    #form_creer_groupe tbody
    {
        margin-top: 5em;
    }

    #form_creer_groupe tbody > tr
    {
        border-top: 1px solid #00FFFF;
    }
        #form_creer_groupe th, td
        {
            padding: 1.5em;
            text-align: center;
        }

/*---- Eleve Home ---- */
.eleve_home_intro_modal
{
	width: 100%;
	height: 100%;

	display: grid;
	place-items : center;

	flex-grow: 1;
}

	.eleve_home_intro_modal > div
	{
		position: relative;
	    width: 60%;
	    height: 80%;

	    background-color: rgba(13,32,81,0.8);
	    border : 1px solid #00FFFF;  
	    
	    color: white;
	    animation: modal 2s;
	    overflow: visible;
	}

		@keyframes modal
		{
			0%   {width: 0%; height: 80%;}
			100% {max-width: 60%; height: 80%;}
		}

		.eleve_home_intro_modal > div::before,
		.eleve_home_intro_modal > div::after,
		.eleve_home_intro_modal > div > div::before,
		.eleve_home_intro_modal > div > div::after
		{
			content: '';
			position: absolute;
			width: 1em;
			height: 1em;
			background: transparent;
		}

		.eleve_home_intro_modal > div::before
		{
			top: -0.75em;
			left: -0.75em;
			border-top : 2px solid #00FFFF;
			border-left: 2px solid #00FFFF;
		}

		.eleve_home_intro_modal > div::after
		{
			top: -0.75em;
			right: -0.75em;
			border-top : 2px solid #00FFFF;
			border-right: 2px solid #00FFFF;
		}

		.eleve_home_intro_modal > div > div::before
		{
			bottom: -0.75em;
			left: -0.75em;
			border-bottom: 2px solid #00FFFF;
			border-left: 2px solid #00FFFF;
		}

		.eleve_home_intro_modal > div > div::after
		{
			bottom: -0.75em;
			right: -0.75em;
			border-bottom: 2px solid #00FFFF;
			border-right: 2px solid #00FFFF;
		}

    .eleve_home_intro
    {
        margin: auto;
        width: 90%;
        animation: show_video 3s;
    }

	@keyframes show_video
	{
		0%   {opacity: 0;}
		50%  {opacity: 0;}
		100% {opacity: 1;}
	}

    .eleve_home_intro video
    {
    	position: absolute;
    	left: 0;
    	right: 0;
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
       	padding-top : 20px;
        margin: auto;

    }
    
    .eleve_button_passer
    {
        position : absolute;
        bottom: 7%;
        right: 5%;
        animation: show_passer 2.5s;
    }

    @keyframes show_passer
    {
        0%   {opacity: 0;}
        66%   {opacity: 0;}
        100% {opacity: 1;}
    }

        .eleve_button_passer:hover
        {
            text-decoration: underline;
            cursor: pointer;
        }

.eleve_home_group
{
    /*height: 6.5vw;*/

    height: 3.5vw;
    
    font-size: 2vw;
    font-family: slidbot_quantum;
    text-align: center;
    color: black;

    position: absolute;
    bottom: 0;
    right: 0;
    left: 0; 

    transform: translateX(1vw);
}

.eleve_home_tutoriel
{
    height: 2vw;
    
    font-size: 1vw;
    text-align: center;
    color: black;

    position: absolute;
    bottom: 0;
    right: 0;
    left: 0; 

    transform: translateX(1vw);
}

.eleve_home
{
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-around;

    align-items: center;
    color : white;
}

    .eleve_home_first
    {
        flex : 0 0 25%;
        order : 3;
        text-align: center;
        font-size: 1.75rem;
        font-family: slidbot_quantum;
    }

        .terre_3d
        {
            width: 40%;
            height: 0;
            padding-bottom: 40%;
            margin : auto;

            background-image: url("/circuit/Images/Graphismes/bastille.gif");
            background-size: 100% 100%;
            background-position: 50% 50%;
            background-repeat:  no-repeat;
        }

        .pourcentage_total
        {
        	display: block;
        	
        	padding-top : 1rem;
        	margin-bottom: 1rem;
        }

        .progression
        {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

            .progression_bar
            {
                width: 60%;
                height: 15px;
                margin: auto;
                margin-top : 15px;
                background-color: #022dac;
                /*#022dac;#00ffff*/
            }

                .progression_remplissage
                {
                    height: 100%;
                    background-color: #00FFFF;
                }

    .eleve_home_second
    {
    	flex : 0 0 50%;
        height: 100%;
        order : 2;

        color : white;
    }

        .eleve_home_tapis_contour
        {
            height: 100%;
            margin: auto;

            padding-left : 2em;
            padding-right: 2em;
            display: grid;
                place-items : center;
        }

            .eleve_home_tapis
            {
                margin: auto;
                perspective: 150vmin;

                display: grid;
                place-items : center;
                position: relative;
            }

            .eleve_home_tapis::before
            {
            	content: '';
            	width: 90%;
            	height: 90%;
            	border : 1px solid #00FFFF;
            	border-radius: 100%;
            	position: absolute;
            }

            .eleve_home_tapis > img:nth-child(1)
            {
                max-width: 90%;
                position: absolute;
                height: auto;
                animation: cadre 2s;
                transform: rotateZ(180deg);
            }

        	@keyframes cadre
        	{
        	   0% {transform: rotateZ(0deg);}
        	   100% {transform: rotateZ(180deg);}
        	}

            .eleve_home_tapis > img:nth-child(2)
            {
                max-width: 60%;
                height: auto;

                transform: rotateX(45deg) rotateY(0deg) rotateZ(20deg);
                animation: tapis 2s;
            }

        	@keyframes tapis
        	{
        	   0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
        	   100% {transform: rotateX(45deg) rotateY(0deg) rotateZ(20deg);}
        	}

    .eleve_home_third
    {
        flex : 0 0 25%;
        order : 1;
		height: 100%;      
    }

	    .eleve_home_third > div
	    {
	        height: 100%;

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

	    	.eleve_home_third > div > p
	    	{
	    		font-size: 1.75rem;
        		font-family: slidbot_quantum;
       			text-align: center;
	    	}

		    .eleve_home_third > div > div
		    {
		    	height: auto;
		        width: 70%;
		       
		        font-size: 1vw;

		        margin-top: 2rem;

		        color : white;
                padding: 2ch;
		    }

    .eleve_home_tutoriel:hover
    {
        text-decoration: underline;
    }

/*---- Eleve Mission ---- */

    .eleve_mission_descriptif
    {
        margin: auto;
        padding: 5ch;
        padding-top : 2ch;
		height: 100%;
    }


    .eleve_mission_descriptif_titre
    {
    	animation: show_titre 3s;
    }

    @keyframes show_titre
    {
            0%   {opacity: 0;}
            50%   {opacity: 0;}
            100% {opacity: 1;}
    }

    .eleve_mission_descriptif_texte 
    {
        margin-top : 2rem;
        overflow: hidden;
        animation: show_descriptif 3s;
    }

    @keyframes show_descriptif
    {
        0%   {opacity: 0; height: 0px;}
        66%   {opacity: 0; height: 0px;}
        100% {opacity: 1; height: 100%;}
     }

	.close
	{
		color: white;
		float: right;
		font-size: 28px;
		font-weight: bold;
	}

    	.close:hover, .close:focus
    	{
    		color: #000;
    		text-decoration: none;
    		cursor: pointer;
    	}

.eleve_mission
{
    width: 100%;
    height: 100%;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

    .eleve_titre_split
    {
        width: 100%;
        display: flex;
        flex-direction: row;
        height: 5rem;
    }

        .eleve_titre_split > div
        {
            flex : 0 0 50%;
            text-align: center;
            font-size: 2rem;
            font-family: slidbot_quantum;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .pannel_mission
        {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            align-items: flex-end;
        }

        .pannel_mission .fas
        {
            cursor: pointer;
        }

            .eleve_mission_video
            {
                text-align: center;
            }

            .eleve_mission_video > div
            {
                width: 70%;
                height: auto;
                margin : auto;

                position: relative;
                border : 1px solid white;
            }

            .eleve_mission_video > div > div
            {
            	display: grid;
            	place-items: center;
            }

                .eleve_mission_video > div > div video
                {
                    width: 100%;
                    height: auto;
                }


    .eleve_mission_video > div::before,
    .eleve_mission_video > div::after,
    .eleve_mission_video > div > div::before,
    .eleve_mission_video > div > div::after
    {
        content: '';
        position: absolute;
        width: 1em;
        height: 1em;
        background: transparent;
    }

    .eleve_mission_video > div::before
    {
        top: -0.75em;
        left: -0.75em;
        border-top : 2px solid white;
        border-left: 2px solid white;
    }

    .eleve_mission_video > div::after
    {
        top: -0.75em;
        right: -0.75em;
        border-top : 2px solid white;
        border-right: 2px solid white;
    }

    .eleve_mission_video > div > div::before
    {
        bottom: -0.75em;
        left: -0.75em;
        border-bottom: 2px solid white;
        border-left: 2px solid white;
    }

    .eleve_mission_video > div > div::after
    {
        bottom: -0.75em;
        right: -0.75em;
        border-bottom: 2px solid white;
        border-right: 2px solid white;
    }

    .eleve_mission_split
    {
        flex : 1;
        display: flex;
        flex-direction: row;
        height: 100%;
    }

        .eleve_mission_split > div
        {
            flex : 0 0 50%;
            height: 100%;
            display: grid;
            place-items : center;
        }
        
            .eleve_mission_niveau
            {
                height: 90%;
                width: 70%;

                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }

            .eleve_mission_etapes
            {
                flex-grow: 1;
                width: 100%;
                height: 100%;
            }

                .eleve_mission_etapes > div
                {
                    height: 100%;
                    display: flex;
                    flex-direction: column; 
                    justify-content: flex-start;
                    padding: 2ch;
                    overflow-y: auto;
                    max-height: 100%;
                 
                }

                .slide
                {
                    width: 100%;
                    height: auto;
                    display: none;
                }

                .slide.active
                {
                    display: block;
                    flex-grow: 1;
                }

    .eleve_mission_etape_control
    {
        padding-top: 20px;
        width: 100%;
        min-height: 76px;
        height: auto;
        margin : auto;

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

        .eleve_mission_previous, .eleve_mission_next
        {
            width: 2.8rem;
        }

        .eleve_mission_previous .fas, .eleve_mission_next .fas, .create_campagne .fas
        {
            font-size: 2.5rem;
            cursor: pointer;
        }


        .eleve_mission_progress_etape
        {
            width: 60%; 
            text-align: center;
        }

        .eleve_mission_progress_etape h2
        {
        	font-size: 1.5rem;
            font-family: slidbot_quantum;
            margin: 0;
        }

#eleve_mission_aide_modal
{
    z-index: 1; /* Sit on top */
    position: fixed;
    top: 45%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%,-50%);

        animation: aide 2s;
}


@keyframes aide
{
  0%   {width: 0%; height: 0%;}
  100% {max-width: 80%; max-height: 80%;}
}

    #eleve_mission_aide_modal > div
    {
        position: relative;
        width: 100%;
        height: 100%;

        background-color: #FFF;
        border : 1px solid #FFF; 

        color: black;
        overflow: visible;

        padding: 1rem;
    }


        #eleve_mission_aide_modal > div > div
        {
            width: 100%;
            height: 100%;

            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

    #eleve_mission_aide_modal > div::before,
    #eleve_mission_aide_modal > div::after,
    #eleve_mission_aide_modal > div > div::before,
    #eleve_mission_aide_modal > div > div::after
    {
        content: '';
        position: absolute;
        width: 1em;
        height: 1em;
        background: transparent;
    }

    #eleve_mission_aide_modal > div::before
    {
        top: -0.75em;
        left: -0.75em;
        border-top : 2px solid white;
        border-left: 2px solid white;
    }

    #eleve_mission_aide_modal > div::after
    {
        top: -0.75em;
        right: -0.75em;
        border-top : 2px solid white;
        border-right: 2px solid white;
    }

    #eleve_mission_aide_modal > div > div::before
    {
        bottom: -0.75em;
        left: -0.75em;
        border-bottom: 2px solid white;
        border-left: 2px solid white;
    }

    #eleve_mission_aide_modal > div > div::after
    {
        bottom: -0.75em;
        right: -0.75em;
        border-bottom: 2px solid white;
        border-right: 2px solid white;
    }

    .eleve_mission_aide, .eleve_mission_validation
    {
        width: 100%;
        text-align: center;
        padding-bottom: 1rem;
        padding-top: 1rem;
    }




        .eleve_mission_aide_titre
        {
            padding-bottom: 0.5rem;
        }

        .eleve_mission_aide_titre > p
        {
            font-size: 2vw;
            font-family: slidbot_quantum;
            text-align: center;
        }

        .eleve_mission_aide_texte
        {
            width: 100%;
            height: 100%;
            margin: auto;
            overflow: auto;
            flex-grow: 1;
            padding-bottom: 2rem;
        }

            .eleve_mission_aide_texte::-webkit-scrollbar
            {
                width: 0.5em;
                -webkit-appearance: none;
                -webkit-overflow-scrolling: auto;
            }

            .eleve_mission_aide_texte::-webkit-scrollbar-track
            {


            }
             
            .eleve_mission_aide_texte::-webkit-scrollbar-thumb
            {
              background-color: black;
            }

            .eleve_mission_aide_texte::-webkit-scrollbar-thumb:hover
            {
              background-color: #4dbad6;
            }

            .close_aide
            {
                color: #aaaaaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
            }

            .close_aide:hover, .close_aide:focus
            {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

.eleve_mission_voir_descriptif
{
    height: 2vw;
    
    font-size: 1vw;
    text-align: center;
    color: black;

    position: absolute;
    bottom: 0;
    right: 0;
    left: 0; 

    transform: translateX(1vw);
}

    .eleve_mission_voir_descriptif:hover
    {
        text-decoration: underline;
    }

/*---- Voir missions ----*/

#nom_tapis
{
    color: white;
    background: transparent;
    background-color: transparent; 
    border : 1px solid white;
    width: auto;
    display: inline;
}

    #nom_tapis > option
    {
        color: black;
    }


/*---- Prof ---- */

.prof
{
    width: 70%;
    margin: auto;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    position: relative;

    color: white;
}

    .prof > h1
    {
        font-size: 2vw;
        font-family: slidbot_quantum;
        text-align: center;
    }

    .prof > div
    {
        width: 100%;
        height: 100%;
        border: 1px solid #00FFFF;
        border-radius: 10px;

        background-color: rgba(13,32,81,0.8);
        margin-bottom: 1.5em;

        overflow: auto;
        padding: 2ch;
    }


    .prof > div::-webkit-scrollbar
    {
            width: 0.5em;
            height: 0.5em;
    }
         
    .prof > div::-webkit-scrollbar-thumb
    {
        background-color: #00FFFF;
        border-radius: 10em;

    }

    .prof > div::-webkit-scrollbar-thumb:hover
    {
       background: #4dbad6;
       cursor: pointer;
    }

/*---- Mdp oublié ---- */

#form_mdp_oublie
{
    width: 50%;
    margin: auto;
}

/*---- Inscription ---- */

#form_inscription
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    width: 100%;
    height: 100%;
    margin: auto;
}

    #form_inscription > div
    {
        flex : 1 1 50%;
        min-width: 25ch;

    }

    .prof-inscription-champs > div
    {
        width: 70%;
        margin: auto;
        text-align: center;
        margin-bottom: 2em;
    }

    .prof-inscription-champs table, .prof-inscription-champs tr
    {
        width: 100%;
    }

    .prof-inscription-champs td
    {
        width: 50%;
    }

    .inscription_input
    {
        height: 50px;
        width: 100%;

        position: relative;
        overflow: hidden;

        margin-bottom: 10px;
    }

        .inscription_input input
        {
            width: 100%;
            height: 100%;
            padding-top : 20px;
            border: none;
            background: none;
            outline: none;
            color : white;
            font-size: 1rem;
        }

        .inscription_input input:focus + label span,
        .inscription_input input:valid + label span
        {
            transform: translateY(-100%);
            color : var(--myVar);
            background-color: transparent;
        }

        .inscription_input input:focus + label::after,
        .inscription_input input:valid + label::after
        {
            transform: translateX(0%);
            background-color: transparent;
        }

        .inscription_input label
        {
            position: absolute;
            bottom : 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            pointer-events: none;
            border-bottom: 1px solid white;
            color : white;
            --myVar: #00FFFF;
        }

            .inscription_input label::after
            {
                content: '';
                position: absolute;
                bottom : -1px;
                left: 0%;
                width: 100%;
                height: 100%;
                
                border-bottom: 3px solid var(--myVar);
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }

            .inscription_input label span
            {
                position: absolute;
                bottom: 5px;
                left: 0px;
                transform: all 0.3s ease;
            }

/*---- Campagne ---- */

.campagnes table
{
    width: 70%;
    border-collapse: collapse;
    margin: auto;
    position: relative;
}
    .campagnes thead
    {
        text-decoration: underline;
    }

    .campagnes tbody
    {
        margin-top: 5em;
    }

    .campagnes tbody tr
    {
        
        border-top: 1px solid #00FFFF;
    }


        .campagnes th, td
        {
            padding: 1.5em;
            text-align: center;
        }

    .detail_groupe
    {
        border : 0.5em !important;
    }

        .detail_groupe td
        {
            padding: 2px;
        }

        .detail_groupe_name
        {
            text-align: right;
        }

    .last_row td
    {
        padding-bottom: 1.5em;
    }

.campagnes button
{
    display: block;
    margin: auto;
}

.campagnes img
{
    max-width: 25px;
    max-height: 25px; 
}

/*---- Campagnes ---- */

.campagne_partager
{
    height: 100%;
    display: grid;
    place-content : center;
}

    .campagne_partager > div
    {
        font-size: 50px;
        text-align: center;
    }

    .campagne_partager span
    {
        color : #EA7D60;
        font-weight: bold;
    }

/*---- Tutoriels ----*/

.tutoriels
{
    display: flex;
    flex-direction: column;
    width: 100%;
}

    .showVideos
    {
        margin-bottom: 2em;
    }

        .show_hide_videos
        {
            display: none;
        }

    .tutoriels video
    {
        display: block;
        max-width: 50%;
        max-height: 50%;
        height: auto;
        margin: auto;
        border-radius: 10px;
        margin-top : 2em;

    }

    .tutoriels video:nth-child(1)
    {
        margin-top : 0;
    }

/*---- Suivi campagne ----*/
        
.suivi_campagne
{
    width: 90% !important;
}

    .suivi_campagne > div > div > div
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2em;
        padding: 0ch !important;
    }

        .suivi_campagne > div > div > div > div
        {
            overflow: auto;
        }

        .suivi_campagne_demandes
        {
            flex-basis: 25%;
            border-right: 1px solid #00FFFF;
            padding: 2ch;
        }

        .suivi_campagne_table
        {
            flex-grow: 1;
            flex-basis: 50%;
        }

        .suivi_campagne_parametres
        {
            flex-basis: 25%;
            border-left: 1px solid #00FFFF;
            padding: 2ch;
        }

        .suivi_campagne > div > div > div > div::-webkit-scrollbar
        {
                width: 0.75em;
        }
             
        .suivi_campagne > div > div > div > div::-webkit-scrollbar-thumb
        {
              background-color: #00FFFF;
        }

        .suivi_campagne > div > div > div > div::-webkit-scrollbar-thumb:hover
        {
              background: #4dbad6;
        }

/*
    .suivi_campagne > h1
    {
        font-size: 2vw;
        font-family: slidbot_quantum;
        text-align: center;
    }

    .suivi_campagne > div
    {
        max-width: 100%;
        border : 3px solid green;

        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2em;
    }

    .suivi_campagne > div > div
    {
        flex: 25% 1 1;
    }

    .suivi_campagne_table
    {
        
    }

    .suivi_campagne_demandes, .suivi_campagne_parametres
    {
        
    }

        .suivi_campagne > div > div > div::-webkit-scrollbar
        {
                width: 0.5em;
                height: 0.5em;
        }
             
        .suivi_campagne > div > div > div::-webkit-scrollbar-thumb
        {
              background-color: #00FFFF;
        }

        .suivi_campagne > div > div > div::-webkit-scrollbar-thumb:hover
        {
              background: #4dbad6;
        }
*/




    .suivi_campagne h2
    {
        font-size: 1.5vw;
        font-family: slidbot_quantum;
        text-align: center;
        margin: 0;
    }

    .suivi_campagne img
    {
        max-width: 25px;
        max-height: 25px; 
    }

        .suivi_campagne table
        {
            width: 90%;
            border-collapse: collapse;
            margin: auto;
            position: relative;
        }
            .suivi_campagne  thead
            {
                text-decoration: underline;
            }

            .suivi_campagne  tbody
            {
                margin-top: 5em;
            }

            .suivi_campagne  tbody tr
            {
                
                border-top: 1px solid #00FFFF;
            }
                .suivi_campagne  th, td
                {
                    padding: 1.5em;
                    text-align: center;
                }

    .modify
    {
        margin: 0 !important;
    }

/*---- Creer campagne ----*/

.create_campagne
{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.create_campagne > div:first-child, .create_campagne > div:last-child
{
    height: 100%;
    width: 2.8rem;

    display: grid;
    place-content : center;
}

#form_choix_date
{
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#form_choix_date .step_section
{
    width: 50%;
    margin: auto;
}

#form_create_campagne, #form_create_competition
{
    flex-grow: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    #form_create_campagne .radio_item, #form_create_campagne .checkbox_item, #form_create_competition .radio_item, #form_create_competition .checkbox_item
    {
        display: none !important;
    }

    .step_section
    {
        flex-grow: 1;
        overflow: auto;
    }
        .step_section::-webkit-scrollbar
        {
            width: 0.5em;
            height: 0.5em;
        }
         
        .step_section::-webkit-scrollbar-thumb
        {
          background-color: #00FFFF;
        }

        .step_section::-webkit-scrollbar-thumb:hover
        {
          background: #4dbad6;
        }

    .center_input
    {
    	height: 100%;

    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    }

    .input_campagne
    {
        height: 50px;
        width: 50%;
        margin: auto;

        position: relative;
        overflow: hidden;
    }

        .input_campagne input
        {
        	width: 100%;
        	height: 100%;
            padding-top : 20px;
            border: none;
            background: none;
            outline: none;
            color : white;
            font-size: 1.2rem;
        }

        .input_campagne input:focus + label span,
        .input_campagne input:valid + label span
        {
            transform: translateY(-100%);
            color : #0FF;
        }

        .input_campagne input:focus + label::after,
        .input_campagne input:valid + label::after
        {
            transform: translateX(0%);
        }

        .input_campagne label
        {
        	position: absolute;
        	bottom : 0px;
        	left: 0px;
        	width: 100%;
        	height: 100%;
        	pointer-events: none;
        	border-bottom: 1px solid white;
        	color : white;
        }

	        .input_campagne label::after
	        {
	        	content: '';
	        	position: absolute;
	        	bottom : -1px;
	        	left: 0%;
	        	width: 100%;
	        	height: 100%;
	        	border-bottom: 3px solid #00FFFF;
	        	transform: translateX(-100%);
	        	transition: transform 0.3s ease;
	        }

        .input_campagne label span
        {
        	position: absolute;
        	bottom: 5px;
        	left: 0px;
        	transform: all 0.3s ease;
        }

    .checkbox_item:checked + label
    {
        border : 3px solid #00FFFF;
        border-radius: 2em;
    }

    .checkbox_item:disabled + label
    {
        opacity: 0.3;
        cursor: initial;
    }

    .radio_item:checked + label
    {
        border : 3px solid #00FFFF;
        border-radius: 2em;
    }

    .grille
    {
        height: 100%;
        width: 100%;

        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-auto-rows: calc(50% - 0.75em);
        gap : 1.5em;

        text-align: center;
    }

            .grille > div > label
            {
                height: 100%;
                display: flex;
                flex-direction: column;

                cursor: pointer;

                font-size: 1.5vh;
                border : 3px solid transparent;
            }

                .grille > div > label > div:first-child
                {
                    flex-grow: 1;
                    height: calc(100% - 2vh);
                }

                    .grille > div > label > div:first-child img
                    {
                        max-height: 100%;
                        width: auto;
                    }

                .grille > div > label > div:last-child
                {
                    min-height: 0;
                }
                

                .img_tapis
                {
                    perspective: 150vmin;
                    padding-top: 2%;
                    padding-bottom: 4%; 
                }

                .img_tapis img
                {
                    transform: rotateX(45deg) rotateY(0deg) rotateZ(20deg);
                    animation: tapis 2s;             
                }
                

    .step_part
    {
        margin-top : 1em;
        text-align: center;
    }
        .step_section
        {
            height: 100%;
        }

    	.step_section, .h2_step
    	{
    		display: none;
    	}

    	.step_section.active, .h2_step.h2_step_active
    	{
    		display: block;
    	}

        .step_part h2
        {
            font-size: 2rem;
            font-family: slidbot_quantum;
            margin: 0;
        }

        .step
        {
          height: 15px;
          width: 15px;
          margin: 0 2px;
          background-color: #00FFFF;
          border: none;
          border-radius: 50%;
          display: inline-block;
          opacity: 0.2;
        }

            .step_active
            {
              opacity: 1;
            }

	.create_campagne_parametres
	{
		padding : 3ch;
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.create_campagne_parametres > div:last-child
	{
		flex-grow: 1;
        display: grid;
        place-content : center;
	}

/*---- Admin ---- */

#admin_duplicate_modal
{
    z-index: 1; /* Sit on top */
    position: fixed;
    top: 45%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%,-50%);
    
    background-color : white;
    border : 1px solid black;
    overflow: auto;
    display: none;
}

/* Admin */

    .duplicate_step_section
    {
        display: none;
    }

    .duplicate_step_section.duplicate_active
    {
        display: block;
    }

    .radio_item, .checkbox_item
    {
        display: none !important;
    }

    .grid_tapis
    {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(350px, 1fr));
    }



textarea
{
  width: 100%;
  height: 250px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
}

/*------TinyMCE------*/

.mce-tinymce
{
  border: 0px !important;
}

p
{
    margin : 0px!important;
    padding : 0px!important;
}