/*Tout changement effectué dans ce fichier CSS doit être reporté dans l'autre fichier. 
Sauf si vous souhaitez modifier les couleurs ou si les modifications sont spécifiquement destinées à ce fichier.*/
/*Any changes made to this CSS file must be reflected in the other file. 
Unless you want to modify the colors or if the changes are specifically intended for this file.*/

/*debut index.css*/
body {
	background: #d9ecfc;
	background-size: 100% 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	margin: 0;
	padding: 0;
	font-family: 'roboto', serif;
}
/* pour footer */
.fixed-footer {
	position: fixed;
	bottom: 0;
	border-top: 1px solid #dee2e6;
	width: 100%;
	text-align: center;
	padding: 0;
	z-index: 1000;
	font-weight: 900;
	/*epesseur du text*/
	background-color: #3083b8;
	color: #061d34;
	font-size: 13px;
}
footer p {
	padding: 10px;
	margin: 0;
}
footer a {
	color: #9b0e2d;
	text-decoration: none;
}
/* fin-footer */
h1 {
	text-align: center;
	background-color: #ADD8E6;
	padding: 10px;
}
.banniere td {
	border-radius: 2px;
}
#bannere {
	width: 70%;
	margin: auto;
}
.entt {
	border: 0px solid #000;
	padding: 0;
}
.icm {
	height: 120px;
	width: 120px;
	text-align: center;
	margin-left: 20px;
	margin-top:10px;
}
.logo-title {
	font-size: 30px;
	font-weight: 600;
	text-align: center;
	color:#061d34;
	margin-left:8.85pt;
}
.bl01{
	display: block;
	width: 80%;
	margin: 0 40px 5px;
	padding: 0 15px 5px;
}
.tex01 {
	font-size: 17px;
	color: #061d34;
	text-align: left;
}
/*.mrg01{
	margin-left: 50px;
	margin-right: 50px;
}
*/
/* pour iframe */
.iframe-container {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	/*height: 400px;
	*/
}
.iframe-container iframe {
	width: 100%;
	height: 100%;
	border: 0;
}
.iframe-title {
	position: absolute;
	font-size: 25px;
	top: 0;
	left: 0;
	right: 0;
	text-align: center;
	background-color: lightblue;
	padding: 5px;
	margin: 0;
}
.center-content {
	text-align: center;
	margin: auto;
	display: block;
}
/*debut css text défilement */
/* le block conteneur */
.txdefl{
	max-width: 30em;
	/* largeur de la fenêtre */
	margin: 0 auto 0;
	overflow: hidden;
	/* masque tout ce qui dépasse */
	font-size: 23px;
	font-family: 'roboto', serif;
	font-weight: 600;
	color:#061d34;
}
/* le bloc défilant */
.txdefl > :first-child {
	display: inline-block;
	/* modèle de boîte en ligne */
	padding-right: 2em;
	/* un peu d'espace pour la transition */
	padding-left: 100%;
	/* placement à droite du conteneur */
	white-space: nowrap;
	/* pas de passage à la ligne */
	animation: defilement-rtl 20s infinite linear;
}
@keyframes defilement-rtl {
	0% {
		transform: translate3d(0,0,0);
		/* position initiale à droite */
	}
	100% {
		transform: translate3d(-100%,0,0);
		/* position finale à gauche */
	}
}
/*fin css text défilement */

.styled-fieldset {
    width: 50%;
    box-shadow: 0 0 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.lien {
	text-decoration: underline;
	color: #9b0e2d;
}
/* Button Animation */
#squareLigt {
	padding-inline: 10px;
}
#squareDARK {
	padding-inline: 10px;
}
.boxbt {
	flex: 1;
	min-width: 250px;
	margin: 0 0 20px;
	padding: 0 10px 15px;
}
.button {
	padding: 8px 5px;
	background: white;
	text-align: center;
	display: inline-block;
	font-size: 17px;
	font-weight: 500;
	/*epesseur du text*/
	position: relative;
	will-change: transform;
	border: none;
	cursor: pointer;
}
.button-mat:hover {
	color: transparent;
}
.btn01 {
	letter-spacing: 0.05rem;
	position: relative;
	background-image: linear-gradient(to bottom right,#00BCD4, #061d34);
	color: white;
	/*couleur text*/
	overflow: hidden;
	transition: 0.3s ease-in-out;
	border-radius: 0.3rem;
	z-index: 1;
	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.btn01:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	transform: scale(0.95);
}
.btn01:active {
	background-color: transparent;
	background-image: linear-gradient(to bottom right,#061d34, #454545);
}
.btntogl {
	letter-spacing: 0.05rem;
	padding: 20px 8px;
	margin-left: 8px;
	font-size: 17px;
	font-weight: 500;
	/*epesseur du text*/
	background-image: linear-gradient(to bottom right,#00BCD4, #061d34);
	color: white;
	/*couleur text*/
	overflow: hidden;
	transition: 0.3s ease-in-out;
	border-radius: 15px;
	border: none;
	z-index: 1;
	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}
.btntogl:hover {
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	transform: scale(0.95);
}
.btntogl:active {
	background-color: transparent;
	background-image: linear-gradient(to bottom right,#061d34, #454545);
}
/* Media Query For smartphones screens */
@media all and (max-width:1024px) and (max-width: 1280px){
	body {
		background-size: auto 100%;
	}
	#bannere {
		width: 60em;
	}
	.logo-title {
		margin-left:0;
	}
	.entt {
		padding-left: 15px;
	}
	.tex01 {
		font-size: 50%;
	}
	/* Button Animation */
	.boxbt {
		min-width: 250px;
		margin: 0 30px 20px;
		padding: 0 10px 10px;
	}
	.bl01 {
		margin: 0 30px 20px;
		padding: 0 10px 5px;
	}
	.text-b {
		font-size: 23px;
	}
	.icm {
		height: 100%;
		width: 13em;
		margin-left: 0;
	}
	.btntogl {
		margin-left: 4%;
	}
	.fixed-footer {
		font-size: 1em;
	}
}
/*Fin index.css*/
#container {
	width: 99%;
	margin: auto;
}
table {
	width: 100%;
	margin-bottom: 20px;
}
th, td {
	padding: 15px;
}
/* Si vous faite des motif ici il faut les faire aussi dans "th.logline" */
th, td, tr {
	border: 0.4rem outset #3083b8;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
th {
	font-size: 1em;
	background: #3083b8;
	color: #FFF;
	padding: 0.1em 1.5em;
	border-collapse: separate;
	vertical-align: middle;
}
td.tx {
	padding: 0em;
	font-size: 20px;
	background: #FA5858;
	background: url(/icon/tx.gif) center center no-repeat;
	text-align:center;
	vertical-align: middle;
}
/*th.logline {
	border: 2px;
	padding: 2px;
	border: 0.5rem outset #3083b8;
}*/
th.led {
	padding: 0em;
	font-size: .8em;
	background: url(/icon/led.png) center right no-repeat;
	padding: 2px 6px;
	border-collapse: separate;
	border: 1px solid #000;
	text-align:center;
	vertical-align: middle;
}
td.double {
	padding: 0em;
	font-size: 20px;
	background: #FA5858;
	background: url(/icon/double.png) center center no-repeat;
	/*border: 1px solid #DDD;*/
	text-align:center;
	vertical-align: middle;
}
td.denied {
	padding: 0em;
	font-size: 20px;
	background: #FA5858;
	background: url(/icon/accden.png) center center no-repeat;
	/*border: 1px solid #DDD;*/
	text-align:center;
	vertical-align: middle;
}
td.ear {
	padding: 0em;
	width: 0px;
	text-align: center;
	margin-left: 0px;
	background: url(/icon/ear.png) center center no-repeat;
	background-position: center;
	transition: all 0.6s ease-in;
}
/*Tableau du Logfil */
td.logshow {
	padding: 0em;
	text-align: left;
	font-size: 90%;
	width: 500px;
	background: linear-gradient(to left, transparent 50%, #1F7DE2 50%), linear-gradient(#F7f7f7, #527efd);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all 0.6s ease-in;
	border-radius: 15px;
}
.tooltip {
	font-size: 1em;
	position: relative;
	display: inline-block;
	padding: 0em;
	text-align: center;
	margin-left: 0px;
	transition: all 0.6s ease-in;
}
.tooltip .tooltiptext {
	font-size: 0.8em;
	visibility: hidden;
	width: 120px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	/* blending in */
	opacity: 0;
	transition: opacity 1s;
	-webkit-transition: opacity 1s;
	/* */
	top: -5px;
	left: 110%;
}
.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%;
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #555 transparent transparent;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}
td.darkgrey {
	padding: 0.3em;
	font-size: 1.2em;
	text-align: center;
	vertical-align: middle;
	background: linear-gradient(to bottom, transparent 10%, #a5a5a5 80%), linear-gradient(#F7f7f7, #EEE);
	background-size: 100% 100%;
	background-position: right bottom;
	transition: all 0.6s ease-in;
}
/* background des case du tableau */
td.grey {
	padding: 0.3em;
	font-size: 1em;
	text-align: center;
	vertical-align: middle;
	/*background: linear-gradient(to bottom, transparent 10%, #F3f3f3 80%), linear-gradient(#F7f7f7, #EEE);
	background-size: 100% 100%;	*/
	background-color: transparent;
	background-position: right bottom;
	transition: all 0.6s ease-in;
}
td.green {
	padding: 0.3em;
	font-size: 1.2em;
	text-align: center;
	vertical-align: middle;
	background: linear-gradient(to bottom, transparent 10%, #1F7DE2 80%), linear-gradient(#F7f7f7, #EEE);
	background-size: 100% 100%;
	background-position: right bottom;
}
td.red {
	padding: 0.3em;
	font-size: 1.3em;
	text-align: center;
	vertical-align: middle;
	background: linear-gradient(to bottom, transparent 10%, #FA5858 80%), linear-gradient(#F7f7f7, #EEE);
	background-size: 100% 100%;
	background-position: right bottom;
	transition: all 0.6s ease-in;
}
td.yellow {
	padding: 0.3em;
	font-size: 1.3em;
	text-align: center;
	vertical-align: middle;
	background: linear-gradient(to bottom, transparent 10%, #F4FA58 80%), linear-gradient(#F7f7f7, #EEE);
	background-size: 100% 100%;
	background-position: right bottom;
	transition: all 0.6s ease-in;
}