/*---------------------*/
/*------- GENERAL -------*/
/*---------------------*/

@font-face {
	font-family: "Helvetica Neue Light";
	src:
	  url("/common/fonts/HelveticaNeue-Light.ttf") format("truetype"),
	  url("/common/fonts/HelveticaNeue-Light.woff") format("woff"),
	  url("/common/fonts/HelveticaNeue-Light.woff2") format("woff2");
}

@font-face {
	font-family: "Helvetica Neue";
	src:
	  url("/common/fonts/HelveticaNeue.ttf") format("truetype"),
	  url("/common/fonts/HelveticaNeue.woff") format("woff"),
	  url("/common/fonts/HelveticaNeue.woff2") format("woff2");
}

@font-face {
	font-family: "Helvetica Neue Bold";
	src:
	  url("/common/fonts/HelveticaNeue-Bold.ttf") format("truetype"),
	  url("/common/fonts/HelveticaNeue-Bold.woff") format("woff"),
	  url("/common/fonts/HelveticaNeue-Bold.woff2") format("woff2");
}

#fullscreenLink {
    width: 25px !important;
    margin: 8px 8px 0 0 !important;
}

/* Correction overlay slide */
.overlay-image .hover {
    bottom: 0px !important;
}

/* Masquer l'Iframe */
#iframeEvents {
    position: absolute;
    bottom: 0;
    left: -10px;
}

* {
	box-sizing: border-box;
}

.clear {
    clear: both;
}

img {
    max-width: 100%;
}

body {
    /* background-image: url("../../img/paper.png");
    background-repeat: repeat; */
    background-color: rgb(238, 238, 238);
    /* background-color: #ffffff; */

    /* background: url('../../img/visuels-workshop.png') no-repeat center center fixed;
    background-size: cover; */
}

.center-div {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header-and-content {
    flex: 1 0 auto;
    padding: 0 1em;
}

:root {
    --main-color: #008b92;
    --secondary-color: #f5a623;
    --tertiary-color: #ff6f61;
}

/*----------------------*/
/*------- HEADER -------*/
/*----------------------*/

header {
    padding: 2em 1em 0 1em;
}

.languages {
	position: absolute;
	top: 1em;
	right: 1.5em;
}

.languages a {
	display: inline-block;
	cursor: pointer;
	margin: 0 3px;
}

.languages a img {
	width: 30px;
}

.logo {
    width: 100%;
    max-width: 160px;
    margin: auto;
}

/*----------------------------*/
/*------- COUNTDOWN -------*/
/*----------------------------*/

.countdown-container {
    width: 100%;
    max-width: 480px;
    margin: 50px auto;
    position: relative;
    padding: 0 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    font-family: 'Gotham Bold', Arial, Helvetica, sans-serif;
}

.bloc-temps {
    width: 25%;
    text-align: center;
}

.bloc-temps .number {
    font-size: 3em;
    margin: auto;
}

.bloc-temps p {
    margin: auto;
    color: #008b92;
}

.bloc-temps .time-units{
    font-size: 0.9em;
    margin-top: -10px;
}

.end-countdown-txt {
    text-align: center;
    font-size: 2.1em;
}

@media screen and (min-width: 1000px) {

    .countdown-container {
        max-width: 550px;
    }

    .bloc-temps .time-units{
        font-size: 1.1em;
    }

    .bloc-temps .number {
        font-size: 4.6em;
    }
}

/*-----------------------*/
/*------- CONTENT -------*/
/*-----------------------*/

.page-lobby,
.page-login,
.page-live,
.page-fin,
.page-replay {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
}

/*---------------------*/
/*------- VIDEO -------*/
/*---------------------*/

.bloc-video-transcript {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
    /* padding: 0 1em; */
}

.content_free_chat .post-time {
    display: none !important;
}

.advice-video-fullscreen {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: 400;
    color: #fff;
}

/*--------------------------*/
/*------- FORM LOGIN -------*/
/*--------------------------*/


.bloc-form-login,
.bloc-form-questions {
    width: 100%;
    max-width: 400px;
    margin: 30px auto;
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
}

.txt-form-login,
.txt-form-questions {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 300;
    font-size: 1em;
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
}

.bloc-form-login input,
.bloc-form-questions input,
.bloc-form-login textarea,
.bloc-form-questions textarea {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    width: 100%;
    padding: 0.7em;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.bloc-form-login textarea,
.bloc-form-questions textarea {
    min-height: 100px;
    resize: none;
}

.bloc-form-login .mandatory-fields,
.bloc-form-questions .mandatory-fields {
    color: #fff;
    font-size: 0.7em;
    margin: 0;
    text-align: center;
}

.bloc-form-login button, 
.bloc-form-questions button {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    width: 100%;
    margin-top: 10px;
    padding: 0.7em;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    color: #fff;
    background-color: #68c1bb;
    font-size: 0.9em;
    cursor: pointer;
    transition: all ease 0.3s;
}

.bloc-form-login button:hover,
.bloc-form-questions button:hover {
    color: #fff;
    background-color: #4c8a86;
}

.bloc-polling-on-page-and-free-chat {
    position: relative;
}




/*---------------------------------*/
/*------- QUIZZ page onsite -------*/
/*---------------------------------*/

.polls-on-page-on-site form {
    background-color: #fff;
    padding: 1em;
    border-radius: 5px;
}

.polls-on-page-on-site #polls legend {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 700;
    border-bottom: 2px solid #ff0099;
    width: 100%;
    padding-bottom: 0.6em;
}

.polls-on-page-on-site .titre_questions {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 600;
    text-align: center;
    color: #008fa4;
}

.polls-on-page-on-site .contentPoll input {
    margin-right: 10px;
    margin-bottom: 0;
}

.polls-on-page-on-site .contentPoll span {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 0.9em;
}

.polls-on-page-on-site .sendPollingRow input {
    float: right;
    color: #fff;
    background-color: #ff0099;
    margin: 0;
    width: inherit;
    border-radius: 5px;
    padding: 0.8em 2em;
    transition: all ease 0.3s;
    box-shadow: inherit !important;
}

.polls-on-page-on-site .sendPollingRow input:hover {
    color: #fff;
    background-color: #000;
    background-color:#afafaf;
}

.polls-on-page-on-site .displayNbReponses {
    display: none;
}

.polls-on-page-on-site .valeurAbsReponse {
    display: none;
}

.polls-on-page-on-site .reponseRow input {
    margin-bottom: 0 !important;
    margin-right: 10px;
    top: 4px !important;
}

/*---------------------*/
/*------- SESSIONS -------*/
/*---------------------*/

.session-choice {
    text-align: center;
    margin-bottom: 20px;
}

.session-choice a {
    color: #fff;
    text-align: center;
    display: inline-block;
    margin: auto 10px;
    text-decoration: none;
    transition: all ease 0.3s;
    padding: 0.5em 1em;
    border-radius: 20px;
    font-size: 1.1em;
    /* text-transform: uppercase; */
    font-family: 'Avenir LT Std 55 Roman', Arial, Helvetica, sans-serif;
}

.session-choice a:hover {
    color: #454545;
    background-color: #FAB203;
}

/*--------------------------------*/
/*------- CURRENT QUESTION -------*/
/*--------------------------------*/

/* .current_question_page {
    background-color: #fdc6e7;
    padding: 1em;
    border-radius: 5px;
    margin-top: 20px;
    position: relative;
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
}

.current_question_page .current-question-heading {
    position: relative;
}

.current_question_page h3 {
    font-size: 1em;
    font-weight: 700;
    margin-top: 0;
    color: #ff0099;
    text-transform: uppercase;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #ff0099;
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
}

.current_question_page #currentPseudo {
    color: #000;
    font-weight: 700;
}

.current_question_page #currentQuestion {
    color: #000;
    font-style: italic;
}

.current_question_page .current-question-heading svg {
    position: absolute;
    top: 0;
    right: 0;
}

.current_question_page svg {
    width: 25px;
}

.current_question_page svg path {
    fill: #ff93d4;
    
}

/*---------------------------*/
/*------- PAGE de FIN -------*/
/*---------------------------*/

.txt-end {
    text-align: center;
}

/*--------------------------------*/
/*------- QPV -------*/
/*--------------------------------*/

.question-video-wrapper {
    line-height: 0;
  }
  
  .question-video-wrapper iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
  }
  
  .qpv-link {
    display: block;
    background-color: #ff0099;
    margin: 20px 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-decoration: none;
    padding: 1em;
    color: #fff;
    transition: all ease 0.3s;
    position: relative;
    cursor: pointer;
  }
  
  .qpv-icon {
    display: flex;
    line-height: 0;
  }
  
  .qpv-icon .icon {
    margin: auto;
    border-radius: 40px;
    padding: 0.8em 0.7em 0.8em 0.8em;
    border: 2px solid #fff;
    fill: #fff;
  }
  
  .qpv-icon .icon svg {
    width: 30px;
    height: 30px;
  }
  
  .qpv-link:hover {
    background-color: #cf007c;
  }
  
  .qpv-link .video-question-txt {
    padding-left: 0.8em;
  }
  
  .qpv-link .video-question-txt h3,
  .qpv-link .video-question-txt p {
    margin: 0px;
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
  }
  
  .qpv-link .video-question-txt h3 {
    font-weight: 800;
    font-size: 1.3em;
  }
  
  .qpv-link .video-question-txt p {
    font-weight: 300;
    font-size: 1.1em;
  }
  
  .shape-triangle-qpv {
    width: 0;
    height: 0;
    border-bottom: 20px solid rgb(255, 255, 255);
    border-left: 20px solid transparent;
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
  }


  /*---------------------*/
/*------- SELECT -------*/
/*---------------------*/

/* class applies to select element itself, not a wrapper element */
.select-css {
    display: block;
    margin: 10px 0;
	/* font-size: 16px; */
	font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 300;
    font-style: italic;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	border: 1px solid #aaa;
	/* box-shadow: 0 1px 0 1px rgba(0,0,0,.04); */
	/* border-radius: .5em; */
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
	
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}

/*---------------------------*/
/*------- FOOTER -------*/
/*---------------------------*/

footer {
    text-align: center;
    padding: 1em;
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 0.8em;
    color: #888;
    background-color: #fff;
}

/*-----------------------------*/
/*--- ERROR/SUCCESS MESSAGES ---*/
/*-----------------------------*/

.error-success-message-login,
.error-success-message-questions {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 400;
    font-size: 0.9em;
    text-align: center;
    margin: 10px auto 10px auto;
    width: 100%;
    height: 25px;
    color: #fff;
}

/* .error-success-message-modules {
    text-align: center;
} */

/* .error-success-message {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 400;
    font-size: 1em;
    text-align: center;
    margin: 0px auto 10px auto;
    width: 100%;
    height: 25px;
    display: none;
    position: absolute;
    bottom: 35px;
    left: 0;
}

.error-success-message-login {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
    font-weight: 400;
    font-size: 1em;
    text-align: center;
    margin: 0px auto 10px auto;
    width: 100%;
    height: 25px;
    position: absolute;
    bottom: -45px;
    left: 0;
}

p.error {
    color: rgb(219, 38, 38);
}

p.success  {
    color: rgb(81, 219, 54);
} */

/*----------------------------*/
/*------- MEDIA QUERIES -------*/
/*----------------------------*/

@media screen and (min-width: 600px)
{




}

@media screen and (min-width: 720px)
{



}



@media screen and (max-width: 993px)
{

    /*-- Version onsite --*/
    .bloc-form-chatall-on-site {
        margin-top: 60px;
    }
    /*-- Version onsite --*/
    .container-current-question-page-on-site {
        margin-top: 30px;
    }

}


@media screen and (min-width: 993px)
{


    .container-current-question-page-on-site {
        padding-left: 20px;
    }

    #pollingContainerOnPage {
        margin-bottom: 0;
    }

}




@media screen and (min-width: 1024px)
{


}

@media screen and (min-width: 1400px)
{


}