
body {
  font-family: 'Arial', sans-serif;
  background-color: #fafafa;

  /* Page Margin */
  margin: 0;

  padding: 50px;
  padding-bottom: 0px;
  padding-top: 15px;

/*
  justify-content: left;
  align-items: left;
  */

  /* Force Width */
  width: calc(100% - 2*var(--border-margin));
  /* border: 1px solid magenta; */
}

/* On Smaller Devices, Reduce the Padding */
@media screen and (max-width: 600px) {
  body {
      margin: 20px;
      padding: 20px;
  }
}

.main {
  display: flex;
  margin-top: 20px;
  /* border: 1px solid red; */
}

.wide {
  /* left: 0; */
  /* top: 18px; */
  width: 100%;
  text-align: center;
  /* border: 1px solid red; */
}

/* Hide The Card Container until done loading cards initially. */
#cardContainerBigger {
  /* display: none */
  width: 100%;
  justify-content: center;
  text-align: left;
}

#cardsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
  /* border: 1px solid red; */
}

#cardsContainerSponsors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
  /* border: 1px solid red; */
}

#jobseeker {
  margin-top: 30px;
}

#footer {
  margin-top: 30px;
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  text-align: left;
}

.loading-cards {
  margin-top: 50px;
  margin-bottom: 50px;
  padding-top: 25vh;
  padding-bottom: 25vh;

  justify-content: center;
  align-items: center;
}

.lack-of-cards {
  margin-top: 50px;
  margin-bottom: 50px;

  /* Center Vertically */
  padding-top: 25vh;
  padding-bottom: 25vh;
}

.header {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.header img {
  height: 150px;
  text-align: center;
  display: flex;
  justify-content: center;

  margin-top: 30px;
}

.header h1 {
  position: static;
  text-align: center;
}

.header h2 {
  position: static;
  text-align: center;
}

#siteinfo p {
    /* border: 1px solid red; */
    margin-bottom: 5px;
    overflow: hidden;
}

#jobseeker {
  margin-bottom: 30px;
}

.bottomLineSeperator {
  border-bottom: 1px solid grey;
  width: 100%;
}

.section-spacer {
  height: 50px;
}


/* 
Filter CSS
*/

#filterForm {
  margin-bottom: 20px;
}

.filterHeader h2 {
    margin-bottom: -10px;
}

.filter-nav-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 15px;
  margin-top: 20px;
}

.filterContainer .dropdown {
  margin-bottom: 20px;
}

#nameFilter {
  width: 30rem;
  margin-bottom: 5px;
}

/* On Smaller Devices, Reduce the Padding */
@media screen and (max-width: 720px) { /* Arbitrary Number */

  .filter-nav-row {
    flex-direction: column;
    gap: 0px;
  }

  #filter-dropdown {
    margin-bottom: 10px;
  }

  #nameFilter { /* Search Bar */
    width: 100%;
  }
}


.row {
  margin-top: 30px;
}

.form-check {
  font-weight: 400;

  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  margin-left: 25px;
}

.form-check:hover {
  color: #202020;
  text-decoration: none;
  background-color: #f5f5f5;
}

.form-check:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

.form-check-input {
  margin-right: .5em;
} 

.form-check label {
  cursor:pointer;
  user-select: none; 
  margin-right: 15px;
}

/* 

PAGE SCROLLING
*/

.page_scroll_section {
  height: 40px;
  width: 100%;
  padding-top: 30px;
  display: flex;

  align-items: center;
  /* vertically */
  justify-content: center;
  /* horizontally */

  user-select: none;

}

.pagebutton {
  margin-left: 20px;
  margin-right: 20px;
  user-select: none;
}