body {
	font-family: Poppins;
	margin: 0;
	padding: 0;
	background-color: #f4f4f4;
}



.login-container,
.dashboard-container {
	max-width: 500px;
	margin: 50px auto;
	padding: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h2 {
	margin-top: 0;
	color: #333;
}

.form-group {
	margin-bottom: 15px;
}

.btn-dashboard {
	background-color: #007bff; /* Couleur de fond */
	color: white; /* Couleur du texte */
	padding: 5px 10px; /* Espacement interne */
	margin-right: 10px; /* Espace à gauche */
	text-decoration: none; /* Pas de soulignement */
	border-radius: 5px; /* Bordures arrondies */
}

.btn-dashboard:hover {
	background-color: #0056b3; /* Couleur de fond au survol */
}


@media only screen and (max-width: 768px) {
.user-name{
	display: none;
	
}
}
.success-box {
	padding: 15px;
	border: 1px solid green;
	background-color: #e6ffe6;
	color: green;
	margin: 10px 0;
	border-radius: 5px;
	text-align: center;
}


label {
	display: block;
	margin-bottom: 5px;
	color: #555;
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
input[type="file"] {
	width: 95%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

button {
	padding: 10px 15px;
	background-color: #DAA520;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
}

button:hover {
	background-color: #0056b3;
}

a {
	color: #007BFF;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.error {
	color: #FF0000;
	margin-bottom: 10px;
}

.message {
	margin-bottom: 10px;
}
.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background-color: hsl(218deg 50% 91%);
	margin: 0 auto; /* Centre l'en-tête */
	padding: 0 15px; /* Ajoute un peu d'espace sur les côtés */

}

.logo-container {
	flex: 1;
}

.site-logo {
	max-width: 300px; /* Vous pouvez ajuster cette valeur selon la taille souhaitée pour votre logo */
	height: auto;
}

.user-info-container {
	display: flex;
	align-items: center;
}

.user-name {
	color: black;
	font-size: 18px;
	margin-right: 20px;
}

.btn-logout, .btn-login {
	padding: 10px 20px;
	background-color: #DAA520;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-size: 18px;
	transition: background-color 0.3s;
}

.btn-logout:hover, .btn-login:hover {
	background-color: #2e60fe;
}

/* Styles pour la table */
.table {
	width: 100%;
	border-collapse: collapse;
	margin: 25px 0;
	font-size: 0.9em;
	min-width: 400px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.table thead tr {
	background-color: #009879;
	color: #ffffff;
	text-align: left;
}

.table th, .table td {
	padding: 10px 15px;
	border: 1px solid #dddddd;
}

.table tbody tr {
	border-bottom: 1px solid #dddddd;
}

.table tbody tr:nth-of-type(even) {
	background-color: #f3f3f3;
}

.table tbody tr:last-of-type {
	border-bottom: 2px solid #009879;
}

.table tbody tr:hover {
	background-color: #f5f5f5;
	cursor: pointer;
}

.table tbody tr.active-row {
	font-weight: bold;
	color: #009879;
}

/* Styles pour le bouton */
.table .btn-action {
	background-color: #009879;
	color: #ffffff;
	padding: 5px 15px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.table .btn-action:hover {
	background-color: #00765e;
}
/* Styles pour le tableau de bord admin */
.admin-dashboard-container {
	padding: 20px;
	background-color: #f9f9f9;
}

.admin-table {
	width: 100%;
	border-collapse: collapse;
}

.admin-table th, .admin-table td {
	padding: 15px;
	border: 1px solid #ddd;
}

.admin-table th {
	background-color: #f2f2f2;
}

.admin-table tr:hover {
	background-color: #f5f5f5;
}
/* CSS pour le message de succès */
.success-message {
	border: 1px solid #a5d6a7;
	background-color: #e8f5e9;
	padding: 15px;
	border-radius: 5px;
	color: #2e7d32;
	margin-bottom: 20px;
	text-align: center;
}
.error-message {
	border: 1px solid #ef9a9a;
	background-color: #ffebee;
	padding: 15px;
	border-radius: 5px;
	color: #c62828;
	margin-bottom: 20px;
	text-align: center;
}


.document-preview {
	width: 150px;  /* ou toute autre largeur appropriée */
	height: auto;
}

.button.action-btn {
	background-color: #4CAF50;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	border-radius: 3px;
}


.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 30px;
	background-color: #ffffff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid #DAA520;
}

.logo-container {
	flex: 0 0 auto;
}

.site-logo {
	max-width: 250px;
	height: auto;
}

.user-info-container {
	display: flex;
	align-items: center;
}

.user-name {
	color: #333;
	font-size: 16px;
	margin-right: 20px;
	font-weight: 600;
}

.buttons {
	display: flex;
	gap: 10px;
	margin-right: 20px;
}

.buttons button {
	padding: 10px 16px;
	background-color: #DAA520;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s;
}

.buttons button:hover {
	background-color: #0056b3;
}

.buttons button a {
	color: #fff;
	text-decoration: none;
}

.btn-dashboard {
	padding: 10px 16px;
	background-color: #2064da;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	margin-right: 10px;
	transition: background-color 0.3s;
}

.btn-dashboard:hover {
	background-color: #9facba;
	color: white;
}

.btn-logout {
	padding: 10px 16px;
	background-color: #cd234d;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.3s;
}

.btn-logout:hover {
	background-color: #bfc6cd;
}

.btn-login {
	padding: 10px 16px;
	background-color: #DAA520;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 0.3s;
}

.btn-login:hover {
	background-color: #0056b3;
}

.success-message {
	background-color: #e6f7ff;
	color: #1a6fb0;
	padding: 16px;
	margin-bottom: 24px;
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}



.filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	justify-content: center;
}

.filter-btn {
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	transition: transform 0.3s, box-shadow 0.3s;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.filter-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.2);
	transition: left 0.3s;
}

.filter-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.filter-btn:hover::before {
	left: 0;
}

.filter-btn.active {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.filter-btn.active::before {
	left: 0;
	background-color: rgba(255, 255, 255, 0.4);
}

@media screen and (max-width: 768px) {
	.filter-btn {
		flex: 0 0 calc(33.33% - 10px);
	}
}

@media screen and (max-width: 480px) {
	.filter-btn {
		flex: 0 0 calc(50% - 10px);
	}
}