@charset "utf-8";
/* CSS Document */
<style>
        table {
            width: 80%;
            margin: 30px auto;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
        }

        th, td {
            border: 1px solid #aaa;
            padding: 12px;
            text-align: center;
		}

        th {
            background-color: #1D2659;
            color: #fff;
        }
		thead {
            background-color: #1D2659;
            color: #fff;
        }

		td.actions a.button {
			display: inline-block; /* Keep them side-by-side */
			margin: 0 4px;          /* Space between buttons */
			min-width: 60px;        /* Optional: keeps them the same width */
			text-align: center;
		}

        a.button {
            padding: 5px 10px;
            color: white;
            background-color: #027541;
            text-decoration: none;
            border-radius: 4px;
            margin: 0 2px;
        } 
       	
		body {
		  font-family: Arial, sans-serif;
		  margin: 0;
		  background: #fff;
		}
		header {
			display: flex;
			align-items: center;                                                               
			background-color: #1D2659; /* Blue background for visibility */
			color: #fff;
			padding: 15px;
			box-shadow: 0 4px 12px rgba(28, 102, 51, 0.6); /* 👈 Green shadow */
			padding-right: -10%;
			text-align: center;
			border-radius: 10px; /* Adjust the value to control roundness */
		}

		  header reuse {
			background-color: #1D2659;
			color: #fff;
			padding: 1rem 0;
			text-align: center;
			border-radius: 15px; /* Adjust the value to control roundness */
		  }
		 nav {
		  background: #1D2659;
		  padding: 1rem;
		  color: #fff;
		  display: flex;
		  justify-content: space-around;
		}
		.dashboard {
		  padding: 2rem;
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		  gap: 1.5rem;
		}
		.centered-box {
		  width: 50%;
		  margin: 0 auto; /* This centers it horizontally */
		}
		.card {
		  display: grid;
		  background-color: #fff;
		  border-radius: 12px;
		  box-shadow: 0 4px 12px rgba(2, 117, 65, 0.25); /* green shadow */
		  padding: 20px;
		  margin-right: 10px;  
		  justify-content: center;
		  text-align: center;
		  text-shadow: 0px 1px 1px #1D2659; /* 2px right, 2px down, 5px blur, blue color */
		  font-family: Cambria, Georgia, "Times New Roman", Times, serif;
		  transition: transform 0.5s ease;
		}
		.card a {
		  font-family: Arial, Helvetica, sans-serif; /* change to desired font */
		  text-shadow: none; /* optional if you don't want the card's text shadow */
		}
		.container .box-row .card:hover {
		  box-shadow: 0 6px 18px rgba(2, 117, 65, 0.4);
		  background-color: #027543 !important;
		  transform: translateY(-4px);
		  color: #fff; /* optional: makes text pop on green */
		}

		.card {
		  transition: all 0.3s ease;
		}

		.card-container {
		  display: grid;
		  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		  gap: 30px 40px; /* 30px horizontal, 40px vertical spacing */
		  justify-items: center;
		}

		.card-containera {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center;
		}
		.card:hover {
		  box-shadow: 0 6px 18px rgba(2, 117, 65, 0.4);
		  background-color: #027543; !important; /* force override */
		  transform: translateY(-4px);
		}

		.cardb {
		  background: #fff;
		  color: #027541;
		  padding: 1.5rem;
		  border-radius: 10px;
		  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		}
		.btn-edit {
			color: #027541;
			text-decoration: none;
			margin-right: 5px;
		}

		.btn-delete {
			color: #027541;
			text-decoration: none;
		}

		.btn-edit:hover, .btn-delete:hover {
			text-decoration: underline;
		}

		.box-row {
			display: flex;		
			justify-content: space-around; /* or 'space-between' or 'center' */
			margin-top: 40px;
			flex-wrap: wrap; /* Optional: allows wrapping on small screens */
		}

		.box {
		  background-color: white;
		  border-radius: 12px;
		  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		  padding: 20px;
		  width: 300px; /* fixed or use flex-basis */
		  text-align: center;
		}
		.containera {
			  width: 100%;
			  margin: auto;
			  display: flex;
			  align-items: center;
			  padding: 10px;
			}
		.container {
		  max-width: 100%;
		  margin: 0 auto;
		  padding: 0 20px;
		  color: #027541;
		  display: flex;
		  justify-content: center;

		}	
		.containerb {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20px; /* Adjust the gap between boxes as needed */
				padding: 20px;
			}	

		label {
		  display: block;
		  margin-top: 12px;
		  margin-bottom: 4px;
		  font-size: 16px;
		}

		input[type="text"],
		input[type="password"] {
		  width: 100%;
		  padding: 6px;
		  font-size: 14px;
		  border: 1px solid #888;
		  border-radius: 2px;
		  box-sizing: border-box;
		}
		input {
		  transition:
			background-color 0.1s linear,
			border-color 0.1s linear,
			color 0.1s linear,
			box-shadow 0.1s linear,
			transform 0.1s ease;
		  transition:
			background-color var(--animation-duration) linear,
			border-color var(--animation-duration) linear,
			color var(--animation-duration) linear,
			box-shadow var(--animation-duration) linear,
			transform var(--animation-duration) ease;
		}

@media (prefers-color-scheme: dark) {

	  inputa {
	  transition:
		background-color 0.1s linear,
		border-color 0.1s linear,
		color 0.1s linear,
		box-shadow 0.1s linear,
		transform 0.1s ease;
	  transition:
		background-color var(--animation-duration) linear,
		border-color var(--animation-duration) linear,
		color var(--animation-duration) linear,
		box-shadow var(--animation-duration) linear,
		transform var(--animation-duration) ease;
	  }
	.input {
	  border: 2px solid transparent;
	  width: 15em;
	  height: 2.5em;
	  padding-left: 0.8em;
	  outline: none;
	  overflow: hidden;
	  background-color: #F3F3F3;
	  border-radius: 10px;
	  transition: all 0.5s;
	}

	.input:hover,
	.input:focus {
	  border: 2px solid #4A9DEC;
	  box-shadow: 0px 0px 0px 7px rgb(74, 157, 236, 20%);
	  background-color: white;
	}

	}

	textarea {
	  transition:
		background-color 0.1s linear,
		border-color 0.1s linear,
		color 0.1s linear,
		box-shadow 0.1s linear,
		transform 0.1s ease;
	  transition:
		background-color var(--animation-duration) linear,
		border-color var(--animation-duration) linear,
		color var(--animation-duration) linear,
		box-shadow var(--animation-duration) linear,
		transform var(--animation-duration) ease;
	}

	@media (prefers-color-scheme: dark) {

	@media (max-width: 768px) {
	  .box-row {
		flex-direction: column;
		align-items: center;
	  }
	 }	
</style>