/* imports de la font en fonction de la weight */

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Thin.ttf") format("truetype");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-ExtraLight.ttf") format("truetype");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/* Exemple fourni */
@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-ExtraBold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("/app/resources/font/Poppins-Black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* Définition de Poppins comme étant la font principale */
:root {
	--fallback-font: Arial, sans-serif;
	--font-family: "Poppins", var(--fallback-font);
}

/* style du body */
body {
	margin: 0;
	line-height: 1.3em;
	font-family: var(--font-family);
	color: #333867;
}

/* style du body au moment ou une popup est ouverte pour empêcher le scroll */

body.no-scroll::before {
	content: "";
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	height: 0;
}
body.no-scroll {
	height: auto;
}

/* définition de la weight de base pour les balises html */

h1 {
	font-family: var(--font-family);
	font-weight: 600;
}
h2 {
	font-family: var(--font-family);
	font-weight: 500;
	line-height: 1.1em;
}
h3 {
	font-family: var(--font-family);
	font-weight: 400;
}
strong {
	font-family: var(--font-family);
	font-weight: 600;
}

/* style des bouttons */

.centered {
	text-align: center;
}
.button {
	display: inline-block;
	width: auto;
	max-width: 250px;
	margin: 10px 20px 0 20px;
	padding: 10px 10px;
	font-weight: 600;
	font-size: 0.9rem;
	text-align: center;
	color: #FFF;
	background-color: #D8004C;
	border: 2px solid #D8004C;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.5s;
}
.button.launch-cv-selector {
	border-radius: 20px;
}
.button.launch-cv-selector svg {
	width: 60px;
	height: 60px;
	margin: 0px 0 -10px;
}
.button:active,
.button:hover {
	color: #D8004C;
	background-color: #b3003a;
	background-color: #fff;
}
.button.blue {
	background-color: rgba(51, 56, 103, 1);
	border-color: rgba(51, 56, 103, 1);
}
.button.blue:hover,
.button.blue:active {
	color: rgba(51, 56, 103, 1);
	background-color: #FFF;
}

/* style des liens */

.link {
	text-align: center;
	margin-top: 40px;
	font-size: 1.0em;
	cursor: pointer;
}
.link a {
	color: rgba(51, 56, 103, 1);
}
svg.link {
	margin: 0;
}

/* style des notices dans l'app */

.notice {
	font-size: 0.9rem;
	line-height: 1.5em;
	margin: 40px 0 0;
	text-align: center;
}
.notice.blue {
	color: #110028;
}
.notice.red {
	color: #d8004c;
}
.notice.green {
	color: #00bd65;
}
.red-txt {
	color: rgba(216, 0, 76, 1);
}
.grey-txt {
	color: rgba(131, 131, 131, 1);
}

/* Style pour la page de connexion et renouvellement mot de passe */
@media only screen 
and (max-width : 1100px) {
	.login-background{
		width: 100%;
		height: 100vh;
		background: url("/resources/images/smartphone_background.jpg") no-repeat center center fixed;
		background-attachment: fixed;
		background-size: cover;
	}
}
.login,
.forgot-pwd,
.reset-pwd {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 76%;
	padding: 20px 25px;
	border-radius: 10px;
	box-shadow: 0 0 6.2px 0 rgba(0, 0, 0, 0.25);
	background-color: #FFF;
	transform: translate(-50%, -50%);
}
.login .input-container,
.forgot-pwd .input-container,
.reset-pwd .input-container{
	margin: 20px 0 0 0;
}
.login .input-container input,
.forgot-pwd .input-container input,
.reset-pwd .input-container input{
	padding: 15px 0 10px 20px;
}
.login .link,
.forgot-pwd .link,
.reset-pwd .link{
	font-size: 0.8rem;
	margin: 10% 0 10% 0;
}
.login .button,
.forgot-pwd .button,
.reset-pwd .button{
	margin: 10% 0 0 0;
}
.logo-container {
	margin: 0 10% 0 10%;
	width: 80%;
	text-align: center;
}
.logo-container #logo {
	width: 100%
}
.login #connexion_txt {
	margin: 10px 0 0 0;
	font-size: 1.2rem;
}
.login h2 {
	margin: 0;
	font-size: 24px;
}
.login #txt {
	margin: 10% 0;
	font-size: 0.9rem;
}

/* style relatif aux inputs*/
form {
	box-sizing: border-box;
}
.input-container {
	position: relative;
	margin-bottom: 20px;
	text-align: center;
	color: rgba(51, 56, 103, 1);
}
.input-container label {
	display: block;
	position: absolute;
	left: 20px;
	max-width: calc(100% - 80px);
	margin: 0 0 0 0;
	padding: 5px 10px;
	color: rgba(51, 56, 103, 1);
	background-color: white;
	font-size: 0.9rem;
	font-weight: 500;
	transition: all 0.5s;
	
}
.input-container:hover label {
	padding-left: 30px;
}
/* style pour les input qui permettent de rentrer du texte */
.input-container textarea,
.input-container input {
	width: calc(100% - 30px);
	height: 50%;
	margin-bottom: 5px;
	margin-top: 15px;
	padding: 15px 10px 15px 20px;
	border: 1.5px solid #333867;
	border-radius: 5px;
	outline: none;
	color: rgba(51, 56, 103, 1);
}:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0px 1000px white inset !important; /* couleur de fond */
	box-shadow: 0 0 0px 1000px white inset !important;
	-webkit-text-fill-color: #000 !important; /* couleur du texte */
	transition: background-color 5000s ease-in-out 0s; /* empêche le flash */
}
.input-container textarea {
	padding: 20px 10px;
	font-family: var(--regular-font);
	font-size: 1.0em;
	background-color: #FFF;
	overflow-y: auto;
	scrollbar-width: thin;
	resize: none;
}
.input-container.red textarea {
	margin: 20px 0;
	border: 2px solid rgba(216, 0, 76, 1);
	border-radius: 15px;
}
.input-container.red label {
	text-align: left;
	color: rgba(216, 0, 76, 1);
}

/* style pour les input qui permettent de rentrer du texte */

.input-container select {
 	width: calc(100% - 10px);
	margin: 15px 0 5px 0;
	padding: 20px 0 20px 0;
	font-family: var(--regular-font);
	font-size: 1.0em;
	text-align: center;
	background-color: #FFF;
	border: 1.5px solid #333867;
	border-radius: 10px;
}
.input-container select option {
	font-size: 1.2em;
}
.input-list {
	position: relative;
	margin: 20px 0;
	padding: 20px 20px;
	border: 2px solid rgba(216, 0, 76, 1);
	border-radius: 15px;
	color: rgba(216, 0, 76, 1);
}
.input-list .select-title {
	display: block;
	position: absolute;
	left: 20px;
	top: -15px;
	max-width: calc(100% - 60px);
	padding: 3px 10px;
	color: rgba(216, 0, 76, 1);
	background-color: white;
}
.input-list .choice-list {
	margin: 20px 0 0 0;
}
.input-list .choice-list.big-title {
	margin: 50px 0 0 0;
}
input[type="checkbox"] {
	appearance: none;
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(51, 56, 103, 1);
	border-radius: 5px;
}
input[type="checkbox"]:checked::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 40%;
	width: 5px;
	height: 8px;
	border: solid rgba(51, 56, 103, 1);
	border-width: 0 3px 3px 0;
	border-radius: 2px;
	transform: translate(-50%, -50%) rotate(45deg);
}
input[type="radio"] {
	appearance: none;
	position: absolute;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(51, 56, 103, 1);
	border-radius: 5px;
}
input[type="radio"]:checked::after {
	content: '';
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 40%;
	width: 5px;
	height: 8px;
	border: solid rgba(51, 56, 103, 1);
	border-width: 0 3px 3px 0;
	border-radius: 2px;
	transform: translate(-50%, -50%) rotate(45deg);
}
.green-checkbox input[type="radio"] {
	border: 2px solid rgba(77, 214, 134, 1);
}
.green-checkbox input[type="radio"]:checked::after {
}
.input-list .select-choice {
	display: block;
	padding-left: 30px;
	color: rgba(51, 56, 103, 1);
}
input[type="file"] {
	display: none; /* hide the native input */
}
.input-container input#job-search {
	color: rgba(51, 56, 103, 1);
}
.results {
	display: none;
}
.results.visible {
	display: inline-block;
	width: calc(100% - 20px);
	border-radius: 10px;
	box-shadow: 0 0 4px 0px #AAAAAA;
}
.results.visible {
	max-height: 200px;
	overflow-y: auto;
}
.results .result {
	padding: 5px 5px;
	color: rgba(51, 56, 103, 0.8);
	text-align: left;
	transition:	padding-left 0.5s;
	cursor: pointer;
}
.results .result:hover{
	padding-left: 20px;
}
.results .result:nth-child(even) {
	background-color: rgba(0, 8, 81, 0.1);
}
.results .result.beneficiary {
	display: none;
}
.results .result.beneficiary.visible {
	display: block;
}

/* style du header de l'application */

.header {
	z-index: 100;
	position: fixed;
	top: 0;
	width: calc(100% - 40px);
	height: 170px;
	padding: 30px 20px 30px;
	box-shadow: 0 0 4px 4px #F5F5F5;
	background: #FFFFFF;
	transition: all 0.5s;
}
.header.mini {
	height: 65px;
	padding: 22px 20px 0px;
}
.header .logo-container #logo {
	width: 173px;
}
.header.mini .logo-container #logo {
	width: 150px;
}
.header .logout-button {
	display: inline-block;
	position: absolute;
	top: 50px;
	right: 30px;
	margin: 0;
	transform: translateY(-50%);
}
.header .buttons-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 30px;
	align-items: center;
	justify-items: center;
	width: 100%;
	margin-top: 10px;
}
.header.mini .buttons-container {
	display: none;
}
.header .select-button {
	position: relative;
	width: 100%;
	height: 65px;
	text-decoration: none;
	padding: 10px 5px;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.5s;
}
.header .select-button .icon {
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 20px;
	width: 22px;
	height: 22px;
	transform: translateX(-50%);
}
.header .select-button span {
	display: inline-block;
	margin: 20px auto 0;
	font-size: 0.85rem;
	font-weight: 400;
}
.header #orange-button {
	background-color: #FF7900;
	color: #FFF;
	border: 2.5px solid #FF7900;
}
.header #orange-button:hover,
.header #orange-button.active {
	background-color: #FFF;
	color: #FF7900;
	border: 2.5px solid #FF7900;
	fill: #FF7900;
}
.header #red-button {
	background-color: #D8004C;
	color: #FFF;
	border: 2.5px solid #D8004C;
}
.header #red-button:hover,
.header #red-button.active {
	background-color: #FFF;
	color: #D8004C;
	border: 2.5px solid #D8004C;
}
.header #black-button {
	background-color: #110028;
	color: #FFF;
	border: 2.5px solid #110028;
}
.header #black-button:hover,
.header #black-button.active {
	background-color: #FFF;
	color: #110028;
	border: 2.5px solid #110028;
}

/* fonctions d'animations pour les popup */

@keyframes slideInFromBottom {
	from {
		opacity: 0;
		transform: translateY(100vh) scale(0.8)
	}
	to {
		opacity: 1;
		transform: translateY(0vh) scale(1);
	}
}
@keyframes slideOutToBottom {
	from { 
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	to { 
		opacity: 0;
		transform: translateY(100vh) scale(0.8);
	}
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes gelatine {
	from, to { transform: translate(-50%, -50%) scale(1, 1); }
	25% { transform: translate(-50%, -50%) scale(0.95, 1.05); }
	50% { transform: translate(-50%, -50%) scale(1.05, 0.95); }
	75% { transform: translate(-50%, -50%) scale(0.925, 1.25); }
}

/* style pour les popup */

.popup {
	position: fixed;
	z-index: 500;
	width: 100%;
	height: 100%;
}
.popup .background {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: #FFF;
	opacity: 0.7;
}
.popup .content {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 400px;
	margin: 0 0px 0;
	padding: 55px 0 55px 0;
	text-align: center;
	line-height: 1.2;
	background-color: #FFF;
	border: 1px transparent;
	border-radius: 50px 50px 0 0;
	box-shadow: 0 0 8px 0 #D9D9D9;
	animation: slideInFromBottom 0.5s cubic-bezier(1,.02,0,.99);
}
.popup .content .body {
	width: calc(100% - 90px);
	height: 100%;
	padding: 45px;
	scrollbar-width: thin;
	scrollbar-color: rgb(200, 200, 200)	transparent;
	overflow-y: auto;
	overflow-x: hidden;
}
.popup.waiting .content svg {
	animation: spin 1.5s ease-in infinite;
}
.popup.alert {
	z-index: 1000;
}
.popup.alert .content {
	height: 30%;
}
.popup.alert.bad .content {
	background-color: #D8004C;
}
.popup.alert.good .content {
	background-color: #4DD686;
}
.popup.alert .content p {
	display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	font-size: 1.5em;
	font-weight: 500;
	color: #FFF;
	animation-delay: 0.75s;
	animation: gelatine 0.5s;
	transform: translate(-50%, -50%);
}
.popup.closing .content {
	opacity: 0;
	animation: slideOutToBottom 1s cubic-bezier(1,.02,0,1);
}
.popup .content .close-button {
	display: inline-block;
	position: absolute;
	right: 40px;
	top: 20px;
	margin: 0;
	cursor: pointer;
}
.popup .content .print-button {
	display: inline-block;
	position: absolute;
	right: 80px;
	top: 20px;
	margin: 2px 0 0;
	cursor: pointer;
}

/* Liste des modules dans la partie ai-modules*/

.ai-modules.page .modules-list {
	display: none;
	padding: 10px 20px;
	margin: 235px 0 30px;
}
.ai-modules.page .modules-list.visible {
	display: block;
}
.ai-modules.page .modules-list .module-item {
	position: relative;
	display: grid;
	align-items: center;
	height: 60px;
	margin: 20px 0;
	padding: 10px 15px;
	box-shadow: 0 1px 4.2px 0px #AAAAAA;
	border-radius: 10px;
	cursor: pointer;
}
.ai-modules.page .modules-list .lock-module {
	opacity: 0.6;
	filter: grayscale(0.7);
}
.ai-modules.page .modules-list .module-item h2 {
	display: inline-block;
	width: calc(70% - 10px);
	margin: 0;
	font-size: 1.0rem;
	font-weight: 400;
	color: #D8004C;
}
.ai-modules.page .modules-list .module-item h3 {
	display: inline-block;
	margin: 0;
	width: calc(70% - 10px);
	font-size: 0.85rem;
	line-height: 1.2em;
	font-weight: 400;
}
.ai-modules.page .modules-list .module-item .module-img{
	position: absolute;
	top: 50%;
	right: 0;
	width: 30%;
	height: 100%;
	border-radius: 0 10px 10px 0;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	transform: translateY(-50%);
}
.ai-modules.page .modules-list .module-item .module-img#img-1 {
	background-image: url("/resources/images/1 - Exploration parcours 2.jpg");
}
.ai-modules.page .modules-list .module-item .module-img#img-2 {
	background-image: url("/resources/images/2 - Boussole des motivations 2.jpg");
}
.ai-modules.page .modules-list .module-item .module-img#img-3 {
	background-image: url("/resources/images/3 - Detecteur de competences transferables 2.jpg");
}
.ai-modules.page .modules-list .module-item .module-img#img-4 {
	background-image: url("/resources/images/4 - Analyse de CV 2.jpg");
}
.ai-modules.page .modules-list .module-item .module-img#img-5 {
	background-image: url("/resources/images/5 - Maitriser les questions des recruteurs 2.jpg");
}
.ai-modules.page .modules-list .module-item .module-img#img-6 {
	background-image: url("/resources/images/6 - Croyances peurs doutes 2.jpg");
}
.ai-modules.page .modules-list .module-item .module-img#img-7 {
	background-image: url("/resources/images/07 - Explorateur Metiers 2.jpg");
}
.ai-modules.page .modules-list .module-item .module-img#img-8 {
	background-image: url("/resources/images/08 - Explorateur formations 2.jpg");
}

/* Boxes text style */

.txt-box {
	display: inline-block;
	position: relative;
	border-radius: 15px;
	margin: 20px 0;
	border: 1.9px solid transparent;
}
.txt-box li {
	margin: 0 0 0 10px;
	padding: 0;
}
.txt-box.tips {
	padding: 0 10px 0 50px;
	line-height: 1.3em;
	font-weight: 500;
	box-shadow: 0 0 6.2px 0px rgba(170, 170, 170, 1);
}
.txt-box.tips svg {
	display: inline-block;
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translate(-50%, -50%);
}
.txt-box.svg-left {
	display: grid;
	justify-items: center;
	padding: 0 10px 0 50px;
}
.txt-box.svg-left svg {
	display: inline-block;
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translate(-50%, -50%);
}

.selected-cv {
	
}
.selected-cv .txt-box.green-checkbox {
	padding: 0px 0px;
}
.selected-cv .txt-box.green-checkbox input {
	
}
.selected-cv .txt-box.green-checkbox label {
	display: grid;
	align-items: center;
	height: 70px;
	margin: 0 50px 0 50px;
}
.selected-cv .txt-box.green-checkbox svg {
	top: 25px;
}

.txt-box.ai-result {
	margin: 40px 0 0 0;
	padding: 20px 20px;
	border-color: rgba(51, 56, 103, 1);
}
.txt-box.ai-result svg {
	display: inline-block;
	position: absolute;
	left: 15px;
	top: 15px;
}
.txt-box.ai-result p {
	margin: 0 0 0 40px;
}
.txt-box.ai-result-txt {
	margin: 50px 0 0px;
	padding: 0 10px 0px;
	position: relative;
	border-color: rgba(77, 214, 134, 1);
}
.txt-box.ai-result-txt label {
	display: block;
	position: absolute;
	left: 20px;
	max-width: calc(100% - 60px);
	padding: 0 10px;
	color: rgba(77, 214, 134, 1);
	background-color: white;
	font-size: 1.2em;
	transform: translate(0, -50%);
}

/* Zone d'affichage de la réponse de l'IA */

.txt-box.ai-result-txt .response {
	margin: 30px 10px;
}
.txt-box.ai-result-txt .response h1 {
	font-size: 1.2rem;
	line-height: 1.4rem;
}
.txt-box.ai-result-txt .response h2 {
	font-size: 1.1rem;
	line-height: 1.6rem;
	text-align: left;
}
.txt-box.ai-result-txt .response h3 {
	text-align: left;
}
.txt-box.ai-result-txt .response p {

}
.txt-box.ai-result-txt .response ol {
	padding-left: 15px;
}
.txt-box.ai-result-txt .response ol li {
	margin: 0;
	padding-left: 5px;
}
.txt-box.ai-result-txt .response ul {
	padding-left: 18px;
}
.txt-box.ai-result-txt .response ul li {
	margin: 0;
	padding-left: 2px;
	text-align: left;
}
.txt-box.ai-result-txt .response blockquote {
	font-style: italic;
	color: #333867;
	border-left: 3px solid #4dd686;
	margin: 0px 0;
	padding: 10px;
	background-color: #4cd68608;
	line-height: 1.6;
	position: relative;
}
.txt-box.ai-result-txt .response blockquote p {
	margin: 10px 10px;
	color: #333867;
}
.txt-box.ai-result-txt .response hr {
	width: 50%;
	height: 1px;
	margin: 30px auto 30px;
	background-color: #4dd686;
	border: none;
}

.txt-box.relaunch-analyze {
	width: calc(100% - 40px);
	color: #FFF;
	background-color: rgba(255, 138, 32, 1);
	border-color: rgba(255, 121, 0, 1);
}
.txt-box.relaunch-analyze .centered .button {
	background-color: rgba(255, 138, 32, 1);
	border-color: #FFF;
}
.centered .button svg {
	transform: translate(10%, 10%);
}

.txt-box.relaunch-analyze .centered .button:hover {
	color: rgba(255, 138, 32, 1);
	background-color: #FFF;
}
.txt-box.title-svg-button {
	position: relative;
	padding: 20px 30px;
	box-shadow: 0 0 6.2px 0px rgba(170, 170, 170, 1);
}
.txt-box.title-svg-button h2 {
	margin: 0 40px 0 0;
	color: #D8004C;
	font-size: 1.1rem;
}
.txt-box.title-svg-button svg {
	display: inline-block;
	position: absolute;
	right: 30px;
	top: 30px;
}
.txt-box.title-svg-button p {
	margin: 10px 35px 10px 0;
}

.txt-box.lvl {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-rows: 1fr 1fr;
	align-items: center;
}
.txt-box.lvl .etape {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	margin: 0 0 10px 0;
	font-size: 1.0em;
	align-self: end;
	text-align: center;
}
.txt-box.lvl h2 {
	position: relative;
	grid-column: 1;
	grid-row: 2;
	margin: 0 0 10px 0;
	padding: 0 0 0 0;
	align-self: start;
	text-align: center;
	font-size: 1.9em;
	font-weight: 600;
}
.txt-box.lvl .content {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin: 0;
	padding: 10px 10px 10px 0;
	line-height: 1.3em;
}
.txt-box.lvl .content ul {
	margin: 0;
	padding: 0 0 0 10px;
}
.txt-box.regular {
	padding: 20px 20px 20px 20px;
	line-height: 1.3em;
	margin: 20px 0;
	border-color: rgba(51, 56, 103, 1);
}
.txt-box.regular p {
	margin: 0;
}
.txt-box.regular li {
	padding: 0 30px 0 0;
}
.txt-box#lvl-1 {
	border-color: rgba(255, 121, 0, 1);
}
.txt-box#lvl-2 {
	border-color: rgba(17, 0, 40, 1);
}
.txt-box#lvl-3 {
	border-color: rgba(216, 0, 76, 1);
}
.txt-box.shadow {
	box-shadow: 0 0 6.2px 0px rgba(170, 170, 170, 1);
}
.txt-box.checkbox-container {
	position: relative;
	width: 100%;
	padding: 15px 0px;
	text-align: left;
}
.txt-box.checkbox-container input[type="radio"] {
	display: inline-block;
	position: absolute;
	left: 10px;
	top: 23px;
}
.txt-box.checkbox-container label {
	display: grid;
	align-items: center;
	height: 70px;
	margin: 0 50px 0 50px;
}
.txt-box.green-checkbox {
	box-shadow: 0 0 6.2px 0px rgba(77, 214, 134, 1);
}

/* page de séléction du bénéficiaire (pour un admin ou un consultant */

.page.beneficiary {
	margin: 265px 0 0 0;
	padding: 40px 40px 0 40px;
}
/* Contenu des modules */
.ai-modules.page {
	display: inline-block;
	width: 100%;
}
.ai-modules.page .modules-content{
	display: block;
	width: 100%;
	padding: 0 0 0 0;
}
.ai-modules.page .modules-content .module-content {
	display: none;
}
.ai-modules.page .modules-content .module-content.visible {
	display: block;
	width: 100%;
}
.ai-modules.page .modules-content .module-content .step {
	display: none;
	margin-top: 80px;
}
.ai-modules.page .modules-content .module-content .step.visible {
	display: block;
	width: 100%;
	text-align: center;
}
.ai-modules.page .modules-content .module-content .step .page-top {
	position: relative;
	height: 300px;
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img{
	display: inline-block;
	width: 100%;
	height: 300px;
	background-size: cover;
	background-position: 50% 10%;
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img#img-1 {
	background-image: url("/resources/images/1 - Exploration parcours.jpg");
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img#img-2 {
	background-image: url("/resources/images/2 - Boussole des motivations.jpg");
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img#img-3 {
	background-image: url("/resources/images/3 - Detecteur de competences transferables.jpg");
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img#img-4 {
	width: 100%;
	background-image: url("/resources/images/4 - Analyse de CV.jpg");
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img#img-5 {
	width: 100%;
	background-image: url("/resources/images/5 - Maitriser les questions des recruteurs.jpg");
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img#img-6 {
	width: 100%;
	background-image: url("/resources/images/6 - Croyances peurs doutes.jpg");
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img#img-7 {
	width: 100%;
	background-image: url("/resources/images/7 - Explorateur Metiers.jpg");
}
.ai-modules.page .modules-content .module-content .step .page-top .module-img#img-8 {
	width: 100%;
	background-image: url("/resources/images/8 - Explorateur formations.jpg");
}
.ai-modules.page .modules-content .module-content .step .page-top .title {
	display: inline-block; 
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	padding: 10px 20px;
	font-size: 0.8em;
	line-height: 1.5em;
	text-align: center;
	border-radius: 40px;
	background: rgba(51, 56, 103, 0.70);
	color: #FFF;
	transform: translateY(-50%);
}
.ai-modules.page .modules-content .module-content .step .page-top .title h2 {
	text-align: center;
	margin: 2px 0;
}
.ai-modules.page .modules-content .module-content .step .page-top .title p {
	margin: 2px 0;
}
.ai-modules.page .modules-content .module-content .step .page-top .title p {
	margin: 2px 0;
}
.ai-modules.page .modules-content .module-content .page {
	display: inline-block;
	padding: 20px;
	font-size: 0.9em;
	text-align: left;
}
.ai-modules.page .modules-content .module-content .page .link u {
	font-size: 1.0em;
}
.ai-modules.page .modules-content .module-content .page .link svg {
	display: inline-block;
	display: inline-block;
	transform: translate(-25%, +25%);
}
.ai-modules.page .modules-content .module-content .step .top-page {
	position: relative;
	margin-top: 90px;
	padding: 40px 20px 0;
	text-align: left;
	color: rgba(216, 0, 76, 1);
}
.ai-modules.page .modules-content .module-content .step .top-page svg {
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 10px
}
.ai-modules.page .modules-content .module-content .step .top-page h2 {
	margin: 0 30px 0 0;
	font-size: 1.5em;
	line-height: 1.1em;
}
.ai-modules.page .modules-content .module-content .step .top-page p {
	line-height: 1.0em;
	margin: 10px 0 20px 0;
}
.ai-modules.page .modules-content .module-content .step .page form {
	color: rgba(51, 56, 103, 1);
}
.ai-modules.page .modules-content .module-content .step .page form label {
	line-height: 1.0em;
	text-align: left;
}
.ai-modules.page .modules-content .module-content .step .page form label p {
	background-color: transparent; 
	font-weight: 300;
}

.ai-modules.page .modules-content .module-content .step .page.end-module {
 
}
.ai-modules.page .modules-content .module-content .step .page.end-module .txt-box.ai-result.save-confirm {
	font-weight: bold;
	border-color: rgba(255, 121, 0, 1);
}
.ai-modules.page .modules-content .module-content .step .page.end-module .txt-box.ai-result.save-confirm a {
	color: rgba(51, 56, 103, 1);
}
.ai-modules.page .modules-content .module-content .step .page .padding-10-80 {
	min-height: 110px;
	padding: 80px 10px 20px 10px;
}
.ai-modules.page .modules-content .module-content .step .page .padding-10-60 {
	padding: 60px 10px 20px 10px;
}
.ai-modules.page .modules-content .module-content .step .page .padding-10-120 {
	padding: 120px 10px 120px 10px;
}
/* style de la popup de séléction des cv */

.popup.cv {
	position: relative;
	text-align: center;
}
.popup.cv .content {
	height: 70%;
	margin: 20px 0 0px 0;
}
.popup.cv .content .body {
	padding-top: 0;
}
.popup.cv .content h2 {
	text-align: center;
	font-size: 1.2rem;
}
.txt-box.checkbox-container svg {
	display: inline-block;
	position: absolute;
	right: 15px;
}
.popup.cv .content .body .centered{
	margin: 10px 0;
}
.popup.cv .content .body .button{
	margin: 0 auto;
}
.popup.cv .content .link {
	display: block;
	margin: 30px 0 40px;
}
.popup.cv .content .link.preview-button {
	position: absolute;
	right: 15px;
	top: 24px;
	margin: 0;
}
.popup.cv .content .link u {
	padding: 0 0 0 10px;
	font-size: 1.0rem;
}
.popup.cv .content .link svg {
	transform: translateY(10%);
	cursor: pointer;
}
.popup.cv .content .choice-list {
	margin: 30px 0 10px 0;
}
.popup.cv .content .choice-list .txt-box.checkbox-container {
	/* display: grid; */
	margin: 10px 0;
	padding: 0;
	/* align-items: center; */
}
.popup.cv .content .choice-list p {
	color:rgba(216, 0, 76, 1);
}
.popup.cv .content .button.blue {
	margin: 20px auto 30px;
}

/* style de la preview du pdf */

.cv-preview {
}
.cv-preview .pdf-container{
	height: 100vh;
}

/* style de l'historique */

.history {
	margin: 235px 0 30px;
	text-align: center;
}
.history .conversations-list {
	display: inline-block;
	width: calc(100% - 50px);
	margin: 25px 0 20px 0;
	padding: 0 25px 0 25px;
}
.history .conversations-list .analyze-container {
	display: inline-block;
	position: relative;
	width: calc(100% - 40px);
	margin: 10px 0 10px 0;
	padding: 15px 20px;
	text-align: left;
}
.history .conversations-list .analyze-container h2 {
	margin: 0;
	font-size: 1.0rem;
}
.history .conversations-list .analyze-container p {
	margin: 0;
	font-size: 0.85rem;
}
.history .conversations-list .analyze-container svg {
	display: block;
	position: absolute;
	top: 50%;
	width: 20px;
	height: 20px;
}
.history .conversations-list .analyze-container svg.glass.link{
	right: 60px;
	transform: translateY(-40%);
}
.history .conversations-list .analyze-container svg.transfer.link{
	right: 17px;
	transform: translateY(-50%);
}
.history .link {
	display: none;
}
.history .link.visible {
	display: inline-block;
	position: relative;
	color: rgba(200, 200, 200, 1)
}
.history .link.visible svg {
	display: inline-block;
	position: absolute;
	bottom: 0;
}
.history .link.visible u {
	padding: 0 0 0 25px; 
}
.popup.history .content {
	text-align: left;
	height: calc(100vh - 120px);
	padding: 50px 0 0px;
}
.popup.history .content .body {
	width: calc(100% - 50px);
	height: 100%;
	margin: 0;
	padding: 0px 25px;
	scrollbar-width: thin;
	scrollbar-color: rgb(200, 200, 200)	transparent;
	overflow-y: auto;
	overflow-x: hidden;
}
.popup.history .content h2 {
	margin: 10px 0;
	font-size: 1.25rem;
}
.popup.history .content p.grey-txt {
	margin: 0;
	font-size: 0.9em;
}
.popup.history .content .module-txt {
	margin: 0;
	font-size: 1.0rem;
	font-weight: 500;
}
.popup.history .content .step-txt {
	margin: 20px 0 5px 0;
	font-size: 1.0rem;
	font-weight: 500;
}
.popup.history .content .module-txt.module-title {
	margin: 20px 0 0 0;
	font-size: 1.0rem;
}
.popup.history .content .txt-box.regular {
	display: block;
	position: relative;
	margin: 30px 0 0 0;
	text-align: left;
}
.popup.history .content .txt-box h1 {
	font-size: 1.1rem;
	line-height: 1.5rem;
	text-align: left;
}
.popup.history .content .txt-box h2 {
	font-size: 1.0rem;
	line-height: 1.5rem;
	text-align: left;
}
.popup.history .content .txt-box h3 {
	font-size: 0.95rem;
	line-height: 1.3rem;
	text-align: left;
}
.popup.history .content .txt-box p,
.popup.history .content .txt-box li {
	font-size: 0.85rem;
	line-height: 1.2rem;
	text-align: left;
}
.txt-box.regular .label {
	text-align: left;
	display: block;
	margin: -30px 20px 0 0;
	padding: 0 10px;
	font-size: 0.9rem;
	background-color: #FFF;
}
.popup.history .content .txt-box.regular .value {
	margin: 10px 0px 0 0;
	padding: 0;
	font-size: 0.9rem;
	background-color: #FFF;
}

/* style de la popup lié au statistiques de l'utilisateur */
.popup.beneficiary-stat {
	position: relative;
}
.popup.beneficiary-stat .content {
	height: 70%;
	padding-bottom: 120px;
}
.popup.beneficiary-stat .content .body h2 {
	text-align: left;
}
.popup.beneficiary-stat .content .body .txt-box.regular{
	display: block;
	position: relative;
	margin: 40px 0 0 0;
	text-align: left;
}
.popup.beneficiary-stat .content .body .txt-box.regular .label {
	display: block;
	/*! position: absolute; */
	/*! top: 10px; */
	margin: -30px 20px 10px 0;
	padding: 0 10px;
	font-weight: bold;
	text-align: left;
	background-color: #FFF;
}
.popup.beneficiary-stat .content .body .txt-box.regular input {
	width: 100%;
	font-size: 1.0rem;
	border: 0px;
	color: rgba(51, 56, 103, 1);
	font-family: var(--regular-font);
}
.popup.beneficiary-stat .content .button.blue{
	margin-top: 30px;
}
.popup.beneficiary-stat .content .button.beneficiary-connect {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	margin: 0;
}

/* styles de séléction des départements */
.select-departement {
	text-align: center;
}
.select-departement .txt-box .label {
	margin-bottom: 20px;
}
.select-departement .txt-box .selected-departements{
    display: inline;
	position: relative;
}

.select-departement .txt-box .selected-departements .selected-departement{
    display: inline-block;
	padding: 5px 10px;
	margin: 5px 10px; 
	box-shadow: 0 0 6.2px 0px rgba(170, 170, 170, 1);
	border-radius: 20px;
}
.select-departement .txt-box .selected-departements .selected-departement p{
    display: inline-block;
}
.select-departement .txt-box .selected-departements .selected-departement svg{
    display: inline-block;
	margin-left: 5px;
	cursor: pointer;
}

/* styles des mentions */
.data-gouv-mention {
	font-style: italic;
	margin: 0;
	padding: 10px 15px;
	font-size: 0.85rem;
}