* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen,
    ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial,
    sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body {
  margin: 0;
  padding: 0;

}
html{
    scroll-padding-top: 100px; /* adds an offset to allow for the fixed nav bar so the href's go to the right place */
}
body {
  background-color: #ffffff;
/*   margin: 10px; */
width:100%;
max-width: 1600px;
  
}

main {
  width: 95%;
  margin: 0 auto;
}

footer {
  /* border-top: 2px solid gray; */
  text-align: center;
}
a {
  text-decoration: none;
}

h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.4rem;
}
ul {
  display: flex;
  gap: 5px;
  flex-direction: column;
  list-style: none;
  margin-left: auto;
}
li {
  color: white;
  font-weight: 600;
  text-align: left;
}
li:hover {
  background-color: #666666;
}
.banner{
  text-align: center;
  width: 100%; /* Ensures the container also scales */
  max-width: 750px; /* You can adjust the maximum width */
  min-width: 200px;
  margin: 0 auto;   /* Centers the image on larger screens */
  padding: 20px;    /* Optional padding */
  & img{
    max-width: 100%;  /* Image will scale down to fit its container */
    height: auto;     /* Maintains aspect ratio */
    display: block;   /* Remove bottom gap in some browsers */
    
  }
}
nav {
    background-color: #3b4656;
    color: white;
    width: 100%;
    position: sticky;
    top:0;
    padding-bottom: 0.3rem;
    box-shadow: 0 4px 2px -2px gray;

}
.navtop {
  display: flex;
  width: 95%;
  /* max-width: 1200px; */
  margin: 0 auto;
  border: 0;

}
/* .navtop h1,
.navtop a {
  display: inline-flex;
} */
.navtop h1 {
  flex: 1;
  padding: 0;
  margin: 0.3rem;
  color: #ebedee;
  font-weight: normal;
}
.navtop a {
  padding: 5px 5px;
  text-decoration: none;
  color: white;
}

.navtop a:hover {
  color: #ebedee;
}
.flex__wrapper{
  display:flex;
  gap: 20px;

}
.overflow__wrapper{
  /*This makes the scrolling thing work*/
  margin:0 auto;
  overflow-x: auto;
  overflow-y: hidden;
}
.user__table{
  width:900px;
}

.calendar {
  min-width: 1200px;
  max-width: 1500px;
  margin: 0 auto;
}
.section {
  background-color: #8ed1f3b3;
  border-radius: 15px;
  padding: 10px;
  margin-bottom: 0.5rem;

  overflow-x: auto;
}
.small__card{
  display:flex;
  flex-direction: column;
  width: 65vw;
  max-width: 600px;
  margin:0 auto;
  text-align: center;
}
input[type="button"],
input[type="submit"],
input[type="reset"]
{
  background-color: #12750d;
  border: #3b4656;
  color: white;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
input[type=button].danger{
  background-color: firebrick;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover{
  opacity: 0.7;
}
.button {
  background-color: rgb(39, 60, 241);
  color: white;
  padding: 5px 8px;
  border-radius: 10px;
  cursor: pointer;
}
.button:hover{
  opacity:0.6;
}
.green {
  background-color: green;
  color: white;
}
.red {
  background-color: crimson;
  color: white;
}

.grid-form {
  display: grid;
  grid-template-columns: 80px auto ; /* Label, input field, optional spans */
  gap: 10px 20px; /* Row and column spacing */
  align-items: center; /* Aligns content vertically in the middle */
  max-width: 600px; /* Set a max width for form */
  /* margin: 0 auto; */ /* Center form on the page */
}

.grid-form label {
  text-align: right; /* Align labels to the right */
}

.grid-form select {
  width: 100%; /* Default full width for all inputs */
  padding: 5px;
  box-sizing: border-box;
}

.grid-form input[type="text"].short,
.grid-form select.short {
  width: 100px; /* Shorter width for specific fields */
}

.grid-form .submit-wrapper {
  grid-column: 1 / 2; /* Center the submit button */
  margin-top: 20px;
}

.grid-form input[type="submit"] {
  width: 100%; /* Full width for submit button */
  padding: 10px;
  background-color: #4CAF50; /* Button color */
  color: white;
  border: none;
  cursor: pointer;
}

.grid-form input[type="submit"]:hover {
  background-color: #45a049; /* Darken button on hover */
}
.grid-form-ignore{
  width: 280px;
}

.schedule-info {
  display: grid;
  border: 1px solid grey;
  border-radius: 10px;
  margin-top: 10px;
  padding: 5px;
  grid-template-columns: 175px auto; /* 2 columns: labels and corresponding values */
  gap: 5px 5px; /* Row and column gaps */
  align-items: center; /* Aligns items vertically */
 /*  margin: 0 auto; */ /* Centers the grid if needed */
width: 350px;

 
}

.schedule-info label {
  text-align: left; /* Align the labels to the right */
  color: black; /* Blue color for labels */
}

.schedule-info span {
  color: #0000ff; /* Blue color for the span text */
}

.schedule-info input[type="checkbox"] {
  justify-self: start; /* Align checkboxes to the left */
}

@media (min-width: 640px) {

    ul {
    flex-direction: row;
  }
  .grid-form {
  grid-template-columns: 180px auto; /* Label, input field, optional spans */
  }
}

table{
  margin:0 auto;
  border-collapse: collapse; /* Ensures borders do not double up */
  border: 1px solid black; /* Sets a 1px solid border for the entire table */

}
td,
th{
  border: 1px solid black; /* Applies borders to individual cells */
}
td{
  padding:5px;
  padding-top: 0;
  padding-bottom: 0;
}
td:nth-last-child(-n+2){
  text-align: center;
}