.form2 {
  margin: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center;
}
.div2 {
  margin: 15px; 
  padding: 5px; 
  /*border: black solid 1px; */
  border-radius: 6px;
/*display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center; */
}

/*.div3 {
  padding: 5px; 
  border: black solid 0px; 
  border-radius: 6px;
  display: flex; 
  justify-content: center; 
  align-items: center;
}*/

#DirectResultsDiv {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media only screen and (min-width: 801px) {
  .DirectResulta {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures the height stretches within the grid */
  }
}

.div3 {
display: flex; 
flex-direction: row;
flex-wrap: wrap;
justify-content: center; 
align-items: center;
text-align: center;
}

.div4 {
display: flex; 
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; 
align-items: center;
text-align: center;
}

.div5 {
display: flex; 
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between; 
align-items: center;
text-align: center;
}

button {
  color: white; background-color: black; border: black solid 0px; padding: 4px; border-radius: 6px; margin: 5px; font-weight: bold; box-sizing: border-box; min-height: 30px;
  font-family: 'Helvetica', Arial, Lucida Grande, sans-serif; font-size: 12px; line-height: 100%; 
  cursor: pointer;
}

select {
  background-color: #ebecf0; border: black solid 0px; padding: 4px; border-radius: 6px; margin: 5px; box-sizing: border-box; min-height: 30px;
  font-family: 'Helvetica', Arial, Lucida Grande, sans-serif; font-size: 12px; line-height: 100%; 
  cursor: pointer;
}

input {
  background-color: #ebecf0; border: black solid 0px; padding: 4px; border-radius: 6px; margin: 5px; box-sizing: border-box; min-height: 30px;
  font-family: 'Helvetica', Arial, Lucida Grande, sans-serif; font-size: 12px; line-height: 100%; 
  cursor: pointer;
  /*box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;*/
}
.blacklist {
  /*border: red solid 2px;*/
  color: red;
  width: 48%;
}
.whitelist {
  /*border: #0096FF solid 2px;*/
  color: #0096FF;
  width: 48%;
}

a {
  cursor: pointer;
}

h1 {
  text-align: center; font-size: 24px; color: black; 
  margin: 15px;
  font-family: georgia, 'Times New Roman', Times, serif;
  /*'Courier New', Courier, monospace;*/
  margin-top: 40px;
}

h2 {
  text-align: center; font-size: 16px; color: black; 
  margin: 5px;
  font-family: georgia, 'Times New Roman', Times, serif;
  /*'Courier New', Courier, monospace;*/
  margin-top: 20px;
  width: 100%;
}

p {
font-family: georgia, 'Times New Roman', Times, serif;
/*'Courier New', Courier, monospace;*/
line-height: 150%; 
}

html, body {
  overflow-x: hidden;
  height: 100%;
}

body {
  margin: 0; padding: 0px; box-sizing: border-box;
}

#main-body {
  max-width: 800px; margin: 0 auto; padding: 10px; box-sizing: border-box;
}

.button{
transition: 0.5s ease;
transition-timing-function: ease;
transition-timing-function: cubic-bezier(.05,1.61,.07,1.01); /*cubic-bezier(.44,.73,.13,1.6);*/
}

.button:active {
background-color: #0096FF; border: #0096FF solid 0px;
}

/* Dropdown menu for search engines */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown button */
.dropbtn {
background-color: #ebecf0; border: black solid 0px; padding: 8px; border-radius: 6px; margin: 5px; box-sizing: border-box; min-height: 30px;
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif; font-size: 12px; line-height: 100%; 
user-select: none;
cursor: pointer;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
width: 330px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 40px;
left: 0px;
text-align: left;
border: black solid 0px; padding: 8px; border-radius: 6px; margin: 0px;
}

.dropdown-content-locations {
  left: -280px;
}

.dropdown-content-languages {
  left: -140px;
}

.dropdown-content-sections {
  display: none;
  position: absolute;
  background-color: white;
  width: 250px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
  top: 40px;
  left: -95px;
  text-align: left;
  border: black solid 0px; padding: 8px; border-radius: 6px; margin: 0px;
  }

/* Show the dropdown content when hovering over the button */
.dropdown:hover .dropdown-content {
/*display: block;*/
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Three columns */
}

.dropdown:hover .dropdown-content-sections {
  /*display: block;*/
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns */
  }

/* Style checkboxes within the dropdown */
.dropdown-content label {
display: flex;
align-items: center;
margin: 1px;
padding: 2px;
gap: 3px;
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif; font-size: 12px; line-height: 100%; 
}

.dropdown-content label {
  display: flex;
  align-items: center;
  margin: 1px;
  padding: 2px;
  gap: 3px;
  font-family: 'Helvetica', Arial, Lucida Grande, sans-serif; font-size: 12px; line-height: 100%; 
  }

.dropdown-content-menu label {
  display: flex;
  align-items: center;
  margin: 1px;
  padding: 2px;
  font-family: 'Helvetica', Arial, Lucida Grande, sans-serif; font-size: 12px; line-height: 100%; 
  color: white;
  }

.dropdown-content-menu a {
  text-decoration: none;
  }

/* Optional: Style checkboxes */
.dropdown-content input[type="checkbox"] {
accent-color: black;
min-height: 0px;
box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px inset;
}

.sections {
display: flex;
align-items: center;
margin: 1px;
padding: 2px;
gap: 3px;
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif; font-size: 12px; line-height: 100%; 
}

.sections input[type="checkbox"] {
accent-color: black;
box-shadow: rgb(0, 0, 0) 0px 0px 0px 0px inset;
}



/* Header */

.header {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  position: fixed;
  height: 60px!important;
  overflow: hidden;
  z-index: 10;
}

#sidebarMenu {
  height: 100%;
  position: fixed;
  z-index: 9;
  left: 0;
  width: 250px;
  margin-top: 0px;
  padding-top: 60px;
  transform: translateX(-250px);
  transition: transform 250ms ease-in-out;
  background: linear-gradient(90deg, 
    rgba(0, 0, 0, 0.9) 0%, 
    rgba(0, 0, 0, 0.8) 30%, 
    rgba(0, 0, 0, 0.7) 60%, 
    rgba(0, 0, 0, 0.6) 75%, 
    rgba(0, 0, 0, 0.5) 80%, 
    rgba(0, 0, 0, 0.4) 85%, 
    rgba(0, 0, 0, 0.3) 90%, 
    rgba(0, 0, 0, 0.1) 95%, 
    transparent 100%);
}
.sidebarMenuInner{
  margin:0;
  padding:0;
  border-top: 0px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
  list-style: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  padding: 20px;
  border-bottom: 0px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li a{
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}

.sidebarMenuInner li a label{
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 255); 
  cursor: pointer;
}

.input2[type="checkbox"]:checked ~ #sidebarMenu {
  transform: translateX(0);
}

.input2[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}
.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 22px;
  left: 15px;
  height: 22px;
  width: 22px;
}
.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: white;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 255);
}
.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}
.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}
.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}
.input2[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}
.input2[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}
.input2[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}



@media only screen and (max-width: 800px) {
  h1 {
      font-size: 20px;
  }
  h2 {
  text-align: center; font-size: 16px; color: black; 
  margin: 5px;
  font-family: georgia, 'Times New Roman', Times, serif;
  /*'Courier New', Courier, monospace;*/
  margin-top: 20px;
  width: 100%;
  }
  button {
      font-size: 14px;
      padding: 7px;
  }
  .dropbtn {
    font-size: 14px;
    padding: 8px;
  }
  input, select {
      font-size: 14px;
      padding: 5px;
  }
  .form2 {
    margin: 5px 2px;
    padding: 0px;
  }
  .div2, .div3 {
      margin: 15px 0;
  }
  .div3 {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  #DirectResultsDiv {
    display: block;
  }
  select[name="day_of_week"] {
        width: 120px;
  }
  input[name="time_of_day"] {
        width: 90px;
  }
  select[name="frequency"] {
        width: 90px;
  }
  input {
      margin: 5px 1px;
  }
  select {
      margin: 5px 1px;
  }
  button {
      margin: 5px 1px;
  }
  .dropbtn {
      margin: 5px 1px;
  }
}        
@media only screen and (max-width: 490px) {
  #main-body {
  margin-top: 20px;
  }
  select[name="day_of_week"] {
    width: 115px;
  }
  input[name="time_of_day"] {
    width: 85px;
  }
  select[name="frequency"] {
    width: 85px;
  }
  .blacklist {
    width: 100%;
  }
  .whitelist {
    width: 100%;
  }
  button {
    font-size: 15px;
  }
  .dropbtn {
    font-size: 15px;
  }
  input, select {
    font-size: 15px;
  }
  .dropdown-content-locations {
    left: -275px;
  }
  
  .dropdown-content-languages {
    left: -165px;
  }
}
@media only screen and (max-width: 430px) {
  /*.div5 {
    flex-wrap: wrap;
  }*/
}