/* All styles used in the website many might be unused */
html { font-family: "HeadlandOne", 'Times New Roman', Times, serif;font-size: 20px;font-style: normal;font-weight: 400; letter-spacing: 0px;line-height: normal; background: #ffffff;}
body { max-width: 1500px; margin: 0 auto; background: #ffffff; }
/* Change h1 to update the titles on each page eg, login, AI Installers */
h1 { font-family:  "Archivo Black", Helvetica; color: #000000; margin: 1rem 0; }
a { color: #ffffff; }
label { color: #0c4c04; }  
hr { border: none; border-top: 1px solid #b4b0ac; }
nav { background: #0c4c04; display: flex; align-items: center; justify-content: space-between; padding: 0 0.5rem; height: 100px;
    /* position: absolute; */
    width: 100%;
  }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }

/* Change below to modify nav bar icons such as Admin, EPO etc. */
nav ul { display: flex; align-items: center; list-style-type: none; padding: 0; margin: 0; }
nav ul li a{ text-align: center; padding: 0.7rem;
    border-radius: 10px; font-family: "HeadlandOne", Helvetica;font-size: 15px;font-style: normal;font-weight: 400;
  }
/* Change below to modify logout and logged-in - admin boxes. */
nav ul li a.logout, nav ul li span, header .action{margin-right: 16px; margin-left: 16px; color: #ffffff; text-align: center; padding: 0.7rem; border: 2px solid;
    border-color: #ffffff; text-decoration: none;
    border-radius: 5px; font-family: "HeadlandOne", Helvetica;font-size: 15px;font-style: normal;font-weight: 400;
}

/* Change below to modify box for image. */
nav ul1 { display: flex; justify-content: flex-end; align-items: center; list-style-type: none; padding: 0; margin-left: 20;}
nav ul1 li a, nav ul1 li span, header .action {display: block;}

/* Change to modify hover for logout and logged in boxes */
nav ul li a.logout:hover, nav ul li span:hover {margin-right: 16px; margin-left: 16px; color: #0c4c04; text-align: center; padding: 0.7rem; border: 2px solid;
  border-color: #0c4c04; background-color: #ffffff; text-decoration: none;
  border-radius: 5px; font-family: "HeadlandOne", Helvetica;font-size: 15px;font-style: normal;font-weight: 400;}
/* nav ul  { display: flex; list-style: none; margin: 0; padding: 0; } */
/* nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; } */
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid #b4b0ac; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
/* Change below of the the flashes */
.flash { margin: 1em 0; padding: 1em; background: #6d0d0d; border: 1px solid; color : #ffffff; opacity: 94%; border-radius: 10px; text-align: center;}
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { min-width: 10em; }
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
/* Change below for tables */
table.data {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.5em;
}
table.data th, table.data td {
    border: 1px solid #ddd;
    padding: 4px 8px;
    text-align: left;
}
table.data th {
    background-color: #0c4c04;
    color: #ffffff;
    font-family:  "Archivo Black", Helvetica;
}
table.data tr:nth-child(even) {
    background-color: #f9f9f9;
}
table.data tr:hover {
    background-color: #ddd;
}

/* Change below for the container of the tables */
.table-container {
    max-height: 400px;  /* Adjust this value as needed */
    overflow-y: auto;
    overflow-x: auto;
    border-bottom: 1px solid;
    border-color: #000000;
}

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

.table-container th {
    position: sticky;
    top: 0;
    background-color: #f1f1f1;  /* Adjust color as needed */
    z-index: 1;
}

/* Change below fo the text inputs such as date/ or address */
.textinputs {
    background-color: #0c4c0426;
    border: 1px solid;
    border-color: #000000;
    border-radius: 10px;
    box-shadow: inset 0px 4px 4px #00000040;
    height: 47px;
    width: 330px;
    /* align-self: center;  //Yes of no need opinions*/
  }

/* Used for the selects, used in ai installer mostly */
select:not(.hello){
    background-color: #0c4c0426;
    border: 1px solid #000000;
    border-radius: 10px;
    height: 47px;
    width: 195px;
    color: #000000;
    padding: 0 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* background-image: url('path-to-your-dropdown-arrow.svg'); */
    background-repeat: no-repeat;
    background-position: right 12px center;
}

/* Change below to modify the select/submit buttons */
input[type="submit"] {
    background-color: #537380;
    border: none;
    border-radius: 10px;
    height: 47px;
    width: 153px;
    color: #ffffff;
    font-family: "Archivo Black-Regular", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
  }
  
  input[type="submit"]:hover {
    background-color: #45616d;
  }

  button[type="submit"] {
    background-color: #537380;
    border: none;
    border-radius: 10px;
    height: 47px;
    width: 153px;
    color: #ffffff;
    font-family: "Archivo Black-Regular", Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
  }
  
  button[type="submit"]:hover {
    background-color: #45616d;
  }

  /* Change below to modify the dropdown buttons such as Admin, EPO etc. */
.dropbtn {
  background: #0c4c04;
  color: #ffffff;
  padding: 0.7rem;
  font-size: 15px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 16px;
  margin-right: 16px;
  
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #b4b0ac;
  opacity: 98%;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 10px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #bdb9b6;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #ffffff; color: #0c4c04; border-radius: 5px;}


/* Change below to format the input forms for epo returns, ai installer etc. */
.information_entry_big{
  display: flex; gap:30px; align-items: center;
}

.information_entry_little{
  display: flex; flex-direction: column;
}

/* Styling for the form container */
.form-container-two {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 equal columns */
  gap: 20px; /* Space between fields */
  max-width: 900px;
  margin: 0 auto; /* Center the form on the page */
}

/* Form group ensures labels and inputs stay together */
.form-group {
  display: flex;
  flex-direction: column; /* Stack label and input vertically */
}

/* Ensuring that labels and fields align properly */
.form-container-two label {
  display: block;
  margin-bottom: 5px;
}

/* Ensuring each field is 100% of the column width */
.form-container-two select,
.form-container-two input[type="text"],
.form-container-two input[type="file"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box; /* Ensures padding doesn't increase width */
}

/* To span file input and submit button across both columns */
.full-width {
  grid-column: span 2;
}

/* Center the submit button */
.submit-button {
  text-align: center;
}

/* footer */
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #f1f1f1;
  color: #0c4c04;
  text-align: center;
  padding: 15px;
}