body 
{
/*    background-color: #009426;*/
}

.container {
	background-color: #eef1f0;
	min-height: 30em;
	margin-bottom: 2em;
	padding-top: 0.1em;
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 0em;
}

h5 
{
	text-decoration: underline;
	margin: 1.2em 0 0.2em 0;
	color: #595959;
	font-weight: 600;
	text-align: start;
}

h4 
{
	color: #595959;
	font-weight: 600;
	margin: 1rem 0 1rem 0;
	text-align: center;
}

.Instructions_Row 
{
	display: flex;
	align-items: center;
	margin-bottom: 0;
	text-align: center;
}

.col.s1 
{
	text-align: center;
}

.tabs .tab a:hover, .tabs .tab a.active
{
	background-color: #e5f4e9;
	color: #009426;
	border: solid rgb(0 148 38 / 40%);
}

.tabs .tab a:focus, .tabs .tab a:focus.active
{
	background-color: rgb(0 148 38 / 20%);
	outline: none;
}

.tabs .indicator 
{
	background-color: #009426;
	display: none;
}

.tabs .tab a 
{
	color: rgb(0 148 38 / 70%);
	border: solid rgb(0 148 38 / 10%);
}

.tabs .tab 
{
	line-height: 42px;
	padding: 0.1em;
}

.tabs 
{
	position: relative;
	overflow-x: auto;
	overflow-y: auto;
	height: auto;
	width: 100%;
	background-color: #fff;
	margin: 0 auto;
	white-space: nowrap;
}

label 
{
	font-size: 1rem;
	color: #000000;
}

label.proposition 
{
	padding-left: 2em;
}

.question 
{
	margin-top: 0.5em;
	margin-bottom: 1em;
	display: flex;
	flex-direction: column;
}

.libelle 
{
	max-width: 100%;
	width: fit-content;
	padding: 0.5em 0 0 0;
	font-weight: 900;
	font-size: 1.1em;
	display: flex;
	align-items: center;
	gap: 0.5em;
}

[type="radio"]+span:before, [type="radio"]+span:after 
{
	margin: 1px;
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after
{
	background-color: #952321;
}

[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after 
{
	border: 2px solid #952321;
}

[type="radio"]:not(:checked)+span:before
{
	background-color: #5a5a5a;
}

[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after 
{
	border: 2px solid #5a5a5a;
}


input#email 
{
	width: 100%;
	text-align: center;
	background-color: white;
	border-radius: 0.3em;
	border-bottom: none;
}

.btn-outline-danger
{
	display: flex;
	align-items: center;
	gap: 1em;
	background-color: #35a77a;
	transform: scale(1.5);
	margin-top: 2em;
	height: auto;
}

.btn-outline-danger:hover
{
	background-color: #51c597;
	transition: 0.5s;
}

hr 
{
	width: 85%;
	margin-bottom: 2em
	border: solid 1px grey;
	border-radius: 1em;
}

h3 
{
	font-size: 1.8em;
	line-height: 100%;
	margin: 0.7em 0 0.2em 0;
	color: #595959;
	font-weight: 600;
	text-align: start;
}

label.name_input 
{
	font-size: 2em;
	color: #595959;
	font-weight: 600;
	margin-top: -0.3em;
	margin-bottom: 0em;
}


input[type=text]:not(.browser-default):focus:not([readonly])
{
	border-bottom: 1px solid #009426;
	box-shadow: 0 1px 0 0 #009426;
}
input[type=text]:not(.browser-default):focus:not([readonly])+label
{
	color: #009426;
}

input[type=email]:not(.browser-default):focus:not([readonly])
{
	border-bottom: 1px solid #009426;
	box-shadow: 0 1px 0 0 #009426;
}
input[type=email]:not(.browser-default):focus:not([readonly])+label
{
	color: #009426;
}


.item_microcredit 
{
	text-align: left;
	cursor: pointer;
	transition: 0.25s;
	text-transform: lowercase;
	font-weight: 700;
	background-color: white;
	border-radius: 0.3em;
	padding: 0.3em 0.2em !important;
	margin: 0.6em 0.5em 0.5em 0em;
}

.item_microcredit:first-letter
{
	text-transform: uppercase;
}

.item_microcredit:hover
{
	background-color: #35a77a9c !important;
	transition: 0.25s;
}

p
{
	margin-block-start: 0;
	margin-block-end: 0;
	line-height: 0.5;
}

.round-number
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	height: fit-content;
	padding: 0.1em 0.5em 0.1em 0.5em;
	background-color: #35a77a;
	color: #ffffff;
	font-size: 1em;
	font-weight: bold;
	border-radius: 50%;
	text-align: center;
	margin-left: 0.5em;
}

.send_info 
{
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 10px 10px 10px #dddddd;
	padding: 2em;
	border-radius: 0.6em;
	background-color: #eef1f0;
	margin: 1.9em;
}

.btn-outline-danger 
{
	transform: scale(1.5);
}

div#toast-container 
{
	position: fixed;
	display: flex;
	width: 100%;
	top: 10%;
	flex-direction: column;
	align-items: center;
}


@keyframes goodAnswerAnimation-glow {
	0% {
	left: -110%;
	}
	50% {
	left: 50%; /* Midway through */
	}
	100% {
	left: 110%; /* End */
	}
}

.animation_green 
{
	color: #ffffff !important; 
	background: linear-gradient(to bottom, #65d281, #00691b);
	font-size: 2em;
	font-weight: bold;
	overflow: hidden;
}

.animation_green::before {
	content: "";
	position: absolute;
	top: 0;
	left: -108%;
	width: 100%;
	height: 100%;
	background: linear-gradient(
	120deg,
	transparent,
	rgba(255, 255, 255, 0.6), /* white glow */
	transparent
	);
	transform: skewX(-20deg);
	animation: goodAnswerAnimation-glow 0.5s ease-in-out;
}

@keyframes badAnswerAnimation 
{
	0% 
	{
		background: linear-gradient(to bottom, #f66d6d, #8b0000);
		transform: translateX(0);
	}
	10% 
	{
		transform: translateX(-6px);
	}
	20% 
	{
		transform: translateX(6px);
	}
	30% 
	{
		transform: translateX(-6px);
	}
	40% 
	{
		transform: translateX(6px);
	}
	50% 
	{
		transform: translateX(-6px);
	}
	60% 
	{
		transform: translateX(6px);
	}
	70% 
	{
		transform: translateX(-6px);
	}
	80% 
	{
		transform: translateX(6px);
	}
	90% 
	{
		transform: translateX(-6px);
	}
	100%
	{
		background: linear-gradient(to bottom, #f66d6d, #8b0000);
		transform: translateX(0);
	}
}

.animation_red 
{
	background: linear-gradient(to bottom, #f66d6d, #8b0000);
	animation: badAnswerAnimation 0.5s ease-in-out;
	color: white;
	font-weight: bold;
	font-size: 2em;
}

.progress
{
	display: flex;
	flex-direction: row;
	gap: 1em;
	font-size: 2em;
	font-weight: bold;
	background: linear-gradient(to bottom, #4599ff, #003f8b);
}

.circle-clipper .circle 
{
	border-width: 6px;
}

.spinner-layer 
{
	border-color: white;
}

.preloader-wrapper
{
	width: 50px !important;
	height: 50px !important;
}

#surname, #name
{
	background-color: white;
	border-radius: 0.3em;
	border-bottom: none;
	margin-bottom: 1em;
	text-align: center;
}

.user_info 
{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0em;
	align-items: center;
}

[type="radio"]:not(:checked)+span, [type="radio"]:checked+span 
{
	height: auto;
	line-height: normal;
	position: relative;
	margin-left: 1.7em;
	padding-left: 30px;
	cursor: pointer;
	display: flex;
	font-size: 1rem;
	-webkit-transition: .28s ease;
	transition: .28s ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.container2 
{
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3em;
}

.row_microcertification 
{
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.row_question 
{
	margin-left: 0em;
	margin-right: unset;
	margin-top: 0.3em;
	margin-bottom: 0.5em;
	background-color: white;
	display: flex;
	align-items: center;
	border-radius: 0.3em;
	padding: 0.2em 0em;
}

.row_reponse 
{
	margin-left: -1em;
	margin-right: unset;
	margin-top: 0.3em;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.material-icons.speaker_icon 
{
	color: #35a77a;
	cursor: pointer;
}

i.material-icons
{
	vertical-align: middle;
	margin-left: -0.3em;
}

/* Assure que le canvas ou #viewerContainer prenne de la place */
#viewerContainer 
{
	overflow: auto;
	background: #fff;
}

.pdf-page-canvas 
{
	display: block;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.pdf_icon
{
	color: #3262cf;
	cursor: pointer;
}


.modal-trigger 
{
	font-family: monospace;
	font-size: 1.4em;
	font-weight: 900;
	color: white;
	background-color: #35a77a;
	padding: 0em 0.1em;
	border-radius: 5em;
	border: 2px solid #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	margin-left: auto;
	margin-right: auto;
}

.modal-trigger:hover 
{
	background-color: #4ed09c;
	transition: 0.1s;
}

#modal-body 
{
		line-height: 1.15em;
		padding-left: 4em;
		padding-right: 4em;
		padding-bottom: 4em;
		padding-top: 2em;
}

.modal-content
{
		padding: 0px !important;
}

#modal-title 
{
		background-color: #00901e;
		color: #f1db00;
		padding: 1em;
}

.modal-close 
{
		font-weight: 900;
		color: #c8102e;
		font-size: 1.4em;
		background-color: #ffd4db;
}

/*
.modal
{
	max-height: 75%;
	width: fit-content;
}



.modal-content 
{
	padding: 0px !important;
	min-height: fit-content;
}*/

.Instructions 
{
	padding-left: 0 !important;
}

@media screen and (min-width : 100px) and (max-width : 600px) 
{
	.libelle
	{
		width: 100%;
	}

	.tabs 
	{
		display: block;
	}
	h5.Microcredit_title
	{
		font-size: 1.4em;
	}
	.btn-outline-danger 
	{
		transform: scale(1);
		font-size: 1em;
	}
	label.name_input
	{
		font-size: 1.25em;
	}
	div#toast-container 
	{
		position: fixed;
		display: flex;
		width: 100%;
		padding: 1em;
		top: 0%;
		flex-direction: column;
		align-items: center;
	}
	input#email 
	{
		width: 100%;
		text-align: center;
	}
	.progress
	{
		flex-direction: column;
	}
	.container2 
	{
		width: 90%;
	}
	.send_info 
	{
		margin: 0em;
	}

	.pdf-page-canvas 
	{
		width: -webkit-fill-available;
	}

	#modal-title 
	{
	    font-size: 1.4em;
	}

	/*.modal 
	{
		max-height: 80%;
		width: 95%;
	}*/
}

@media screen and (min-width : 601px) and (max-width : 992px) 
{
	.tabs 
	{
		display: block;
	}
	h5.Microcredit_title
	{
		font-size: 1.4em;
	}
	.btn-outline-danger 
	{
		transform: scale(1.2);
		font-size: 1.2em;
	}
	label.name_input
	{
		font-size: 1.6em;
	}
	div#toast-container 
	{
		position: fixed;
		display: flex;
		width: 100%;
		top: 5%;
		flex-direction: column;
		align-items: center;
	}
	input#email
	{
		width: 100%;
		text-align: center;
	}
	.progress
	{
		flex-direction: column;
	}
	.container2 
	{
		width: 85%;
	}
	.send_info 
	{
		margin: 0em;
	}
	.pdf-page-canvas 
	{
		width: -webkit-fill-available;
	}

	#modal-title 
	{
	    font-size: 1.6em;
	}
	/*.modal 
	{
		max-height: 80%;
		width: 95%;
	}*/
}