#bibmathQuizz
{
	font-size:1em;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}


#endQuizz, #introQuizz
{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	padding-left:40px;
	font-size:1.1em;
}

#bottomQuizz
{
	display:flex;
	flex-direction:column;
}


#titleQuizz:fullscreen
{
	margin-bottom:200px;
	background-color:black;
}

#titleQuizz:-webkit-full-screen
{
	margin-bottom:200px;
}

#textQuizz, #correctionQuizz, #answersQuizz {
	width:100%;
	font-size:1.3em;
}

#answersQuizz
{
/* 	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap; */
}

#answersQuizz input[type=text],#introQuizz input[type=number]
{
	border-radius:5px;
	border:1px solid rgb(var(--heading-color));
	font-size:1em;
	padding:2px;
	padding-left:6px;
	box-sizing:border-box;
}

#introQuizz input[type=number]:focus{
	border-radius:5px;
	border:3px solid rgb(var(--heading-color));
	font-size:1em;
	padding:0px;
	padding-left:4px;	
	box-sizing:border-box;
}


#answersQuizz input[type=text]:focus
{
	outline:none !important;
	border:3px solid rgb(var(--heading-color));
	box-shadow:0;
	padding:0px;
	padding-left:4px;
}	

#progressBarQuizz
{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	margin-top: 25px;
	border-top: dotted 1px;
	padding-top:5px;
}

.goodbutton ,.badbutton ,.goodbuttonend, .badbuttonend, .gooddiv, .baddiv, .gooddivend, .baddivend
{
	background: rgba(var(--text-color), .1);
	color: rgb(var(--text-color));
	border: none;
    width:100%; 
	margin-bottom:10px;
	min-height:30px;
	font-size:1.1em;
	border-radius:5px;
	padding-top:2px;
	padding-bottom:2px;
	cursor: pointer;
	border: 1px solid transparent;
}

.validationbutton
{
	margin-bottom: 20px;
	margin-top:20px;
	width:100%;
	padding: 8px;
	border-radius:5px;
	border:1px solid rgba(var(--heading-color), .2);
	background-color: rgba(var(--heading-color), .2);
	color: rgb(var(--text-color));
	font-size:1.1em;
	cursor:pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.goodbuttonend, .gooddivend
{
	background: rgba(var(--heading-color), .5);
	border: 1px solid rgba(var(--heading-color), .2);
}
.badbuttonend, .baddivend 
{
	
	background: rgba(var(--highlight-color), .5);
	border: 1px solid rgba(var(--highlight-color), .2);
}

.panelbuttonsintro
{
	margin:auto;
	margin-top:30px;
}

.startbutton, .startfullscreenbutton
{
	padding: 8px 12px;
	margin-right:10px;
	border-radius:5px;
	border:1px solid rgba(var(--heading-color), .2);
	background-color: rgba(var(--heading-color), .2);
	color: rgb(var(--text-color));
	font-size:1.1em;
	cursor:pointer;
}

.listanswerstwocolumns
{
    column-count: 2;
    -webkit-column-count:2;
    -moz-column-count:2;       	
}


.listanswers ul
{
	list-style:none;
	margin-left:0px;
	padding-left:0px;
}

.listanswers li 
{
	margin-top:5px;
	margin-left:0px;
}


@media screen and (min-width:728px)
{
	#panelQuizz
	{
		display:flex;
		flex-direction:row;
		justify-content:start;
		padding-left:40px;
	}	
	
	#titleQuizz
	{
		font-size:2em;
		display:block;
		width:80%;
		color: rgb(var(--heading-color));
		font-weight:bold;
		margin:auto;
		margin-bottom:20px;
		text-align:center;
	}	
	
	#contentPanelQuizz
	{
		width:80%;
	}	

	#timerQuizz
	{
		width:20%;
		display:flex;
		flex-direction:row;
		justify-content:space-around;
		padding-top:20px;
		margin-left:20px;
		margin-right:20px;
	}
	
	#correctionQuizz
	{
		padding-top:20px;
	}
}

@media screen and (min-width:600px)
{
	.svgquizz
	{
		width:600px;
	}
}

@media screen and  (min-width:550px) and (max-width:600px)
{
	.svgquizz
	{
		width:550px;
	}
}

@media screen and  (min-width:500px) and (max-width:550px)
{
	.svgquizz
	{
		width:500px;
	}
}

@media screen and  (min-width:450px) and (max-width:500px)
{
	.svgquizz
	{
		width:450px;
	}
}

@media screen and  (min-width:400px) and (max-width:450px)
{
	.svgquizz
	{
		width:400px;
	}
}

@media screen and  (min-width:350px) and (max-width:400px)
{
	.svgquizz
	{
		width:350px;
	}
}

@media screen  (max-width:350px)
{
	.svgquizz
	{
		width:300px;
	}
}

@media screen and  (min-width:450px) and (max-width:500px)
{
	.svgquizz
	{
		width:450px;
	}
}

@media screen and (max-width:727px)
{
	.startfullscreenbutton
	{
		display:none;
	}
	
	#contentPanelQuizz
	{
		width:95%;
	}	
	
	#panelQuizz
	{
		display:flex;
		flex-direction:column;
	}	

	#timerQuizz
	{
		width:100%;
		display:flex;
		flex-direction:row;
		justify-content:space-around;
		padding-top:50px;
		margin:auto;
	}
	
	#titleQuizz
	{
		font-size:2em;
		display:block;
		color: rgb(0,119,24);
		font-weight:bold;
		margin:auto;
		margin-top:5px;
		margin-bottom:10px;
		text-align:center;
	}	
	
}

.cardquizz
{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	line-height:1.5;
	padding: 1em;
	padding-block: 0.5em;

}

.cardquizz a:link { color:#000080; font-style:normal; text-decoration:none }
.cardquizz a:visited { color:#000080; font-style:normal; text-decoration:none }
.cardquizz a:hover {font-style:italic; font-style:normal; color: #738CC6}
.cardquizz a:active { color:#000080; font-style:normal; text-decoration:none}	

.cardquizz .titre
{
	border-radius: 5px 5px 0px 0px;
	background: rgba(var(--heading-color), .2);
	padding: 3px 8px;
	font-size:18px;
	color: rgba(var(--heading-color));
}

.cardquizz  li {
	background: var(--bullet-url) no-repeat 0 6px;
	list-style-type:none;
	margin:3px;
	padding-left: 20px;
}

.cardquizz .contenu
{
	display:flex;
	flex-wrap:wrap;
	background: rgba(var(--heading-color), .1);
	border-radius: 0 0 5px 5px;
	padding: 10px;
}

.vecteur
{
  position: relative;
  display:inline-block;
}
.vecteur:after
{
  position: absolute;
  display:block;
  content:'→';
  font-size:40px;
  top:-0.8em;
  left:-0.1em;
}

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

.cardquizz li
{
    width:49%;    
}

}

@media screen and (max-width:728px)
{
.cardquizz li
{
	width:100%;
}
}



:not(:root):fullscreen {
	background: rgb(var(--background-color-1));
}