@font-face {
	font-family: 'LOREALEssentielle-Regular';
	src: url('/assets/fonts/LOREALEssentielle-Regular.woff2') format('woff2'),
		 url('/assets/fonts/LOREALEssentielle-Regular.woff') format('woff'),
	  	 url('/assets/fonts/LOREALEssentielle-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'LOREALEssentielle-Light';
	src: url('/assets/fonts/LOREALEssentielle-Light.woff2') format('woff2'),
		 url('/assets/fonts/LOREALEssentielle-Light.woff') format('woff'),
	  	 url('/assets/fonts/LOREALEssentielle-Light.ttf') format('truetype');
}

@font-face {
	font-family: 'LOREALEssentielle-Bold';
	src: url('/assets/fonts/LOREALEssentielle-Bold.woff2') format('woff2'),
		 url('/assets/fonts/LOREALEssentielle-Bold.woff') format('woff'),
	  	 url('/assets/fonts/LOREALEssentielle-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'LOREALEssentielle-Black';
	src: url('/assets/fonts/LOREALEssentielle-Black.woff2') format('woff2'),
		 url('/assets/fonts/LOREALEssentielle-Black.woff') format('woff'),
	  	 url('/assets/fonts/LOREALEssentielle-Black.ttf') format('truetype');
}

@font-face {
	font-family: 'LOREAL-Royale-Regular';
	src: url('/common/fonts/LOREAL-Royale-Regular.woff2') format('woff2'),
	  	 url('/common/fonts/LOREAL-Royale-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'LOREAL-Royale-Bold';
	src: url('/common/fonts/LOREAL-Royale-Bold.woff2') format('woff2'),
	  	 url('/common/fonts/LOREAL-Royale-Bold.ttf') format('truetype');
}



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

* {
    box-sizing: border-box;
}

input, textarea {
	color: rgb(128, 128, 128);
}

.clear {
    clear: both;
}

img {
    max-width: 100%;
}

.uppercase {
    text-transform: uppercase;
}

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

html {
    height: auto;
    min-height: 100vh;
    position: relative;
}

body {
    height: 100%;
    min-height: 100vh;
	background-color: #fff;
	position: relative;
    overflow: hidden;
	/* background-image: url("/assets/img/internal-control-awards-2023/2-web.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	width: 100%;
	background-size: cover;
    background-position: center; */
}

/* .overlay {
    width: 100%;
    height: auto;
	min-height: 100vh;
    background-color: rgba(0,0,0,0.55);
    position: fixed;
    top: 0px;
    left: 0px;
    
} */

#container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.center-div {
    flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

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

header {
	display: flex;
	max-width: 1300px;
	margin: auto;
	padding: 1em;
    flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
    color: #fff;
    text-align: center;
}

header p,
header h1,
.title-date,
.sessions {
    width: 100%;
}

header h1 {
    font-family: 'CenturyGothic-Bold', Arial, Helvetica, sans-serif;
    /* font-family: 'Open Sans', Arial, Helvetica, sans-serif; */
    text-transform: uppercase;
    font-size: 2em;
    font-weight: 700;
}

header .date {
    font-family: 'LOREAL-Royale-Bold', Arial, Helvetica, sans-serif;
    font-size: 0.9em;
}

header .title {
    font-family: 'LOREAL-Royale-Bold', Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    margin: 5px auto;
    color: #000;
} 

header span {
    font-family: 'LOREAL-Royale-Regular', Arial, Helvetica, sans-serif;
    font-size: 0.9em;
}


.logo {
    max-width: 150px;
    margin: 20px auto;
}

.background-img {
    display: none;
}

@media screen and (min-width: 993px) {
    .logo {
        position: absolute;
        top: 0;
        left: 2em;
    }

    header .title {
        font-size: 1.4em;
        margin: 30px auto 5px auto;
    } 
    
}

/* header img {
	display: inline-block;
} */

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

.txt-countdown {
    text-align: center;
    margin: 0;
    font-family: 'LOREALEssentielle-Bold', Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    text-transform: uppercase;
}


.bloc-video-countdown {
    max-width: 700px;
    margin: 40px auto;
}

.elements-countdown {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    /* font-family: 'CenturyGothic-Bold', Arial, Helvetica, sans-serif; */
}

.bloc-jours,
.bloc-heures,
.bloc-minutes,
.bloc-secondes {
    text-align: center;
    font-family: 'LOREALEssentielle-Bold', Arial, Helvetica, sans-serif;
}

.time-units {
	color: #e8ac01 !important;
}

.letter {
    color: #000;
    font-family: 'LOREALEssentielle-Light', Arial, Helvetica, sans-serif;
}

/* .bloc-jours div,
.bloc-heures div,
.bloc-minutes div {
    border-right: 2px solid #ffffff;
} */

.bloc-jours div,
.bloc-heures div,
.bloc-minutes div,
.bloc-secondes div {
    font-size: 2.4em;
    font-weight: 700;
    padding: 0 0.2em;
    /* height: 54px;
	margin-top: 10px; */
}

.bloc-jours p,
.bloc-heures p,
.bloc-minutes p,
.bloc-secondes p {
    margin: 0;
    color: #e8ac01 ;
}

/* .bloc-jours div p,
.bloc-heures div p,
.bloc-minutes div p,
.bloc-secondes div p {
    width: 55px;
} */

.txt-attente {
    padding: 1em;
	text-align: center;
	line-height: 1.5;
	font-size: 1.2em;
	font-family: 'CenturyGothic-Bold', Arial, Helvetica, sans-serif;
	color: #ffffff;
}

.txt-attente span {
	font-family: 'CenturyGothic-Bold', Arial, Helvetica, sans-serif;
	font-size: 1.2em;
}

.txt-fin {
	text-align: center;
	line-height: 1.5;
	font-size: 2.5em;
	font-family: 'LOREALEssentielle-Bold', Arial, Helvetica, sans-serif;
	color: #000000;
    margin-top: 80px;
    padding: 1em;
}

.bt-logo {
    max-width: 150px;
    margin: 30px auto;
}

.survey-link {
    background-color: #e8ac01;
    display: block;
    padding: 1em 2em;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 50px auto 60px auto;
    transition: all ease 0.3s
}

.survey-link:hover {
    background-color: #a22729;
    color: #fff;
}

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

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

.content-container-chat {
    max-width: 1400px;
    margin: auto;
    padding: 1em;
}

.bloc-video {
    margin-bottom: 30px;
}

.bloc-video-transcript {
    max-width: 1000px;
    margin: 20px auto;
}

.bloc-replays-txt {
    text-align: center;
}

.bloc-replays-txt a {
    display: inline-block;
    font-family: 'CenturyGothic-Bold', Arial, Helvetica, sans-serif;
    color: #fff;
    font-size: 1.5em;
    margin: 10px;
    transition: all ease 0.3s;
}

.bloc-replays-txt a:hover {
    color: #e8ac01;
}

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

.bloc-video-form {
    max-width: 1200px;
    margin: auto;
}

.advice-video-fullscreen {
    color: #fff;
    font-family: 'CenturyGothic', Arial, Helvetica, sans-serif;
}

/*---------------------*/
/*------- QUIZZ -------*/
/*---------------------*/

#pollingContainerOnPage {
    margin-bottom: 30px;
}

.polls-on-page {
    margin-top: 20px;
}

/* la croix ne doit apparaître que sur le polling en video */
.polls-on-page .cross-polls-on-video {
    display: none;
}

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

.polls-on-page #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 #polls label {
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
}

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

.polls-on-page .contentPoll input {
    margin-right: 10px;
    margin-bottom: 0;
    font-family: 'Open Sans', 'Helvetica', 'Arial', 'sans-serif';
}

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

.polls-on-page .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 .sendPollingRow input:hover {
    color: #fff;
    background-color: #000;
    background-color:#afafaf;
}

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

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

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

/* .polls-on-page .bloc-pourcentage {
    background-color: #ff99d6 !important;
} */


/* .polls-on-page .pourcentage {
    display: none;
}

.polls-on-page .bloc-pourcentage {
    height: 25px;
} */



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

.polls-on-page-on-site {
    /* margin-top: 20px; */
}

.polls-on-page-on-site form {
    background-color: #fff;
    padding: 1em;
    /* border: 1px solid #b5bec4; */
    border-radius: 5px;
    /* min-height: 411.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;
}

/* .polls-on-page .bloc-pourcentage {
    background-color: #ff99d6 !important;
} */


/* .polls-on-page .pourcentage {
    display: none;
}

.polls-on-page .bloc-pourcentage {
    height: 25px;
} */




/*-----------------------*/
/*------- AGENDA LIGHTBOX -------*/
/*-----------------------*/



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

/*--------------------------------*/
/*------- PRESENTATION TXT -------*/
/*--------------------------------*/


/*-------------------------------------*/
/*------- PRESENTATION TXTS LOGIN -------*/
/*-------------------------------------*/


/*-------------------------------------*/
/*------- PRESENTATION TXTS CHAT-------*/
/*-------------------------------------*/



/*---------------------*/
/*------- PHOTO -------*/
/*---------------------*/


/*----------------------------*/
/*------- VIDEO (chat) -------*/
/*----------------------------*/



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

.content {
    padding: 0 1em;
}

.container-form-login-for-border {
    background-color: rgb(255, 255, 255);
    background-image: url('../img/countdown-gold-texture-low.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0.3em;
    max-width: 400px;
    margin: auto;
    border-radius: 9px;
}

.bloc-form-login {
    
    background-color: #e8ac01;
    background-color: #fff;
    
    
    /* background-color: #000; */
    padding: 1em;
    border-radius: 7px;
}

.txt-form-heading-login {
    font-family: 'LOREALEssentielle-Regular', Arial, Helvetica, sans-serif;
    color: #fff;
    color: #000;
    margin-top: 0;
}


.bloc-form-login input[type=text],
.bloc-form-login input[type=email],
.bloc-form-login textarea {
    font-family: 'LOREALEssentielle-Regular', Arial, Helvetica, sans-serif;
    border: none;
    padding: 0.8em;
    width: 100%;
    background-color: #d2d2d2;
    /* background-color: #fff; */
    margin: 5.5px 0;
	border-radius: 3px;
	font-size: 0.9em;
}

.bloc-form-login input[type=text]::-webkit-input-placeholder, .bloc-form-login input[type=email]::-webkit-input-placeholder, .bloc-form-login textarea::-webkit-input-placeholder {
    color: #838383;
}

.bloc-form-login input[type=text]::-moz-placeholder, .bloc-form-login input[type=email]::-moz-placeholder, .bloc-form-login textarea::-moz-placeholder {
    color: #838383;
}

.bloc-form-login input[type=text]:-ms-input-placeholder, .bloc-form-login input[type=email]:-ms-input-placeholder, .bloc-form-login textarea:-ms-input-placeholder {
    color: #838383;
}

.bloc-form-login input[type=text]::-ms-input-placeholder, .bloc-form-login input[type=email]::-ms-input-placeholder, .bloc-form-login textarea::-ms-input-placeholder {
    color: #838383;
}

.bloc-form-login input[type=text]::placeholder,
.bloc-form-login input[type=email]::placeholder,
.bloc-form-login textarea::placeholder {
    color: #838383;
}

.error-msg-and-button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.error-success-message-login {
    width: 60%;
    color: #000000;
    font-family: 'LOREALEssentielle-Regular', Arial, Helvetica, sans-serif;
    margin: 0;
}

button {
    font-family: 'LOREALEssentielle-Bold', Arial, Helvetica, sans-serif;
    border: none;
    color: #3d3d3d;
    padding: 0.3em 0.7em;
    background-color: #d5d5d5;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1em;
    transition: all ease 0.3s; 
}

button:hover {
    background-color: #a7a7a7;
}

.mandatory-fields {
    font-family: 'LOREALEssentielle-Regular', Arial, Helvetica, sans-serif;
    color: #fff;
    color: #000;
    margin: 3px 0;
    font-size: 0.9em;
}

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

/* class applies to select element itself, not a wrapper element */
.select-css {
    display: block;
    margin: 5.5px 0 10px 0;
	font-size: 0.9em;
	/* font-family: 'Roboto', 'Helvetica', 'Arial', 'sans-serif'; */
	font-family: 'CenturyGothic-Italic', Arial, Helvetica, sans-serif;
    /* font-weight: 300;
    font-style: italic; */
	color: rgb(142, 142, 142);
	line-height: 1.3;
	padding: 0.9em;
	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: 5px;
	-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%;
}

option {
	color: #454545;
}

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

footer {
    margin-top: 130px;
}

.logo-groupe {
    max-width: 150px;
    margin: 20px auto;
}

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

    footer {
        position: relative;
    }
    
    .line-background {
        position: absolute;
        bottom: 1.5em;
        left: 0;
        width: 50%;
        max-width: 600px;
        z-index: -1;
    }

    .logo-groupe {
        margin: 0;
        position: absolute;
        bottom: 1.5em;
        right: 2em;
        z-index: -1;
    }

}

/*---------------------*/
/*------- DATA PRIVACY -------*/
/*---------------------*/



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

/* .bloc-submit-error-message {
    position: relative;
}

.error-success-message {
    font-family: 'CenturyGothic-Bold', Arial, Helvetica, 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(203, 0, 0);
}

p.success  {
    color: rgb(0, 218, 22);
} */

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

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

@media screen and (min-width: 600px)
{
    header h1 {
        font-size: 2.6em;
    }
    
    /* header .date {
        font-size: 1.6em;
    } */
    
    header .session {
        font-size: 1.6em;
    } 

	.bloc-video-countdown {
		margin: 50px auto;
	}

	.bloc-jours div,
	.bloc-heures div,
	.bloc-minutes div,
	.bloc-secondes div {
		font-size: 3.5em;
		/* height: 78px;
		margin-top: 10px; */
	}

	/* .bloc-jours div p,
	.bloc-heures div p,
	.bloc-minutes div p,
	.bloc-secondes div p {
		width: 85px;
	} */

}

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

    

	.logo-loreal {
		max-width: 200px;
	}
	
	.logo-all-in-rav {
		max-width: 360px;
	}

	.bloc-jours div,
	.bloc-heures div,
	.bloc-minutes div,
	.bloc-secondes div {
		/* font-size: 5em; */
		/* height: 106px;
		margin-top: 15px; */
	}

	/* .bloc-jours div p,
	.bloc-heures div p,
	.bloc-minutes div p,
	.bloc-secondes div p {
		width: 105px;
	} */


}


@media screen and (min-width: 993px)
{
    header {
        padding: 2em;
    }

    header h1 {
        font-size: 2.9em;
    }
    
    /* header .date {
        font-size: 1.9em;
    } */
    
    /* header .session {
        font-size: 1.5em;
    }  */

    .title-date,
    .sessions {
        width: 50%;
    }

    /* header h1,
    header p,
    .session {
        margin: 0px !important;
    } */

	.bloc-video-countdown {
		margin: 70px auto;
	}

	.time-units {
		font-size: 1.2em;
	}

    .content-container-chat {
        padding: 1em 1em 0 1em;
    }

    .bloc-video {
        margin-bottom: 0px;
        width: 100% !important;
        max-width: 750px;
        margin: auto !important;
    }

	/* .bloc-jours div,
	.bloc-heures div,
	.bloc-minutes div {
		border-right: 2px solid #fff;
	} */

/* 
	.bloc-jours div p,
	.bloc-heures div p,
	.bloc-minutes div p,
	.bloc-secondes div p {
		width: 130px;
	} */

	.txt-attente {
		font-size: 1.3em;
	}

    .bloc-form-chatall {
        max-width: inherit;
        margin: inherit;
        float: left;
    }

    /* .bloc-form-chat button {
        margin: auto 0px auto auto;
    }

    .error-success-message {
        text-align: left;
        bottom: 3px;
    } */

    .survey-link {
        margin: 30px auto 60px auto;
    }

}

@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)
{

    .bloc-form-chatall {
        padding-left: 20px;
    }

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

    #pollingContainerOnPage {
        margin-bottom: 0;
    }

}


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

}

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



}