/*
    structure.css

    Description :
    Cette feuille de styles CSS définit le style que doit prendre les bloc structurel de l'application

    Auteur : Shendar Ali
    Date : 06.05.2024
    Version : 2.0

    Modifications :
    [Liste des modifications avec dates et descriptions]
*/

:root {
	--background-color: white;
	--button-color: #e6f0ff;
	--text-color: black;
}

header {
	display: flex;
	flex-direction: row;
	height: 10vh !important;
	justify-content: space-between;
	background-color: #e6f0ff;
	/* Ajoutez la couleur de fond souhaitée */
	position: fixed;
	top: 0;
	width: 100%;
}

/* Style du footer */
footer {
	height: 7vh !important;
	background-color: #433f3f;
	/* Ajoutez la couleur de fond souhaitée */
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: row;
	color: white !important;
	z-index: 1000;
	/* Valeur arbitraire, ajustez selon vos besoins */
}

img {
	max-width: 100%;
	height: 9vh;
	margin-top: 0.5vh;
	margin-left: 0.5vw;
	margin-right: 0.5vw;
}

.titre {
	background-color: #d9e8ff;
	border-radius: 10000px;
}

body {
	background: var(--background-color) !important;
	overflow: hidden;
	margin: 0;
	display: flex;
	flex-direction: column;
}

#content {
	margin-left: 2vw !important;
	width: 96vw;
	height: 80vh;
	margin-right: 2vw !important;
	flex: 1;
}

div:where(.swal2-container).swal2-center>.swal2-popup {
	border: 2px solid #000000 !important;
	border-radius: 5px !important;
	padding: 10px !important;
}

nav {
	margin-top: 10vh;
}

#titre-page {
	margin-top: 5vh;
	margin-bottom: -5vh;
	color: white !important;
}

#loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70vh;
	/* Ajustez la hauteur selon vos besoins */
	font-size: 40px;
	/* Ajustez la taille de la police selon vos besoins */
}

#infoCache {
	height: 50%;
	width: 25%;
	color: red !important;
	font-size: larger;
	font-weight: bold;
	display: flex;
	justify-content: center;
	/* Centrer horizontalement */
	align-items: center;
	/* Centrer verticalement */
}

html,
body {
	margin: 0;
	padding: 0;
	min-width: 100%;
	min-height: 100%;
	padding-top: constant(safe-area-inset-top);
	/* iOS 11.0 */
	padding-top: env(safe-area-inset-top);
	/* iOS 11.2+ */
	height: env(safe-area-inset-top);
	width: env(safe-area-inset-left);
}

h1 {
	margin-top: 2vh !important;
	flex: 1;
	text-align: center;
}

div:where(.swal2-container).swal2-center>.swal2-popup {
	border: 2px solid #000000 !important;
	border-radius: 5px !important;
	padding: 10px !important;
}

.card {
	display: flex;
	flex-direction: column;
	/* Aligner les enfants verticalement */
	align-items: center;
	/* Centrer horizontalement */
	margin-top: 5vh;
	margin-left: 35%;
	margin-right: 35%;
	width: fit-content;
	height: fit-content;
	/* Hauteur de la carte */
}

@media screen and (max-width: 800px) {
	.card {
		margin-left: 5vw;
		margin-right: 5vw;
	}

	.swal-about {
		width: 100vw !important;
		padding: 0 !important;
	}

	.swal2-html-container {
		margin: 0 !important;
	}

	.swal-about td {
		font-size: 15px;
	}

	#listeLogs {
		height: 43vh;
	}
}

#swal2-html-container thead {
	background-color: white;
	color: black !important;
}

#swal2-html-container table {
	width: 100%;
	border-collapse: collapse;
}

#swal2-html-container th,
#swal2-html-container td {
	border: 1px solid black;
}

#swal2-html-container thead {
	background-color: rgb(50, 37, 96);
	color: white !important;
	font-weight: bold;
}

.swal-about {
	width: 50vw;
}


#button {
	display: flex;
	gap: 10px;
	/* espace entre les boutons */
	position: absolute;
	bottom: 10px;
	/* ajuster pour descendre les boutons */
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 20%;
}

#Telemetrie, #Batterie {
	background-color: #4285F4;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 10px 20px;

}