@charset "utf-8";
/* CSS Document */

<style>
	table, th, tr, td {
	  border: 1px solid black;
	}
	table {
	  border-spacing: 20px;
	}
	
    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;
  width: 200px;
  justify-content: center;
  text-align: left;
  transition: transform 0.2s 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);
  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: blue;
		text-decoration: none;
		margin-right: 5px;
	}

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

	.btn-edit:hover, .btn-delete:hover {
		text-decoration: underline;
	}
 	a.button {
       padding: 5px 10px;
       color: white;
       background-color: #007BFF;
       text-decoration: none;
       border-radius: 4px;
       margin: 0 2px;
   }
.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: 250px; /* fixed or use flex-basis */
  text-align: left;
}
.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>