body {
  padding-top: 4.5rem;
  background-color: #181818;
  color: #f5f5f5
}

#navbar {
  background-color: #141414;
}

#navbar-ul * {
  color: #f5f5f5;
}

#logo {
  color: #f5f5f5;
  font-size: 2rem;
  margin-right: 2rem;
}

#planner * {
  color: #f5f5f5;
}

td {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px dashed #444 !important;
  color: #f5f5f5;
}

th {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid black !important;
  color: #f5f5f5;
}

#welcome {
  margin-top: 2rem;
  background-color: #141414
}

#filters {
  background-color: #282828;
  border: #444 solid 1px !important;
}

#filters-section {
  border-top: #444 solid 1px;
  /* margin-top: 2rem; */
  /* margin-bottom: 2rem; */
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#report {
  border-top: #444 solid 1px;
  border-bottom: #444 solid 1px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.header {
  position: relative;
  left: -3.8rem;
}

.icon {
  width: 3rem;
  height: 3rem;
  position: relative;
  left: -2vw;
  top: -0.3rem;
}

.header-lg {
  position: relative;
  left: -6rem;
}

.icon-lg {
  width: 5rem;
  height: 5rem;
  position: relative;
  left: -1vw;
  top: -0.8rem;
}

.alert-pre {
  word-wrap: break-word;
  word-break: break-all;
  white-space: pre-wrap;
}

#footer {
  height: 20vh;
  background-color: #141414;
  margin-top: 4rem;
  overflow: hidden;
}

#main {
  min-height: 63.5vh;
}

/** # Job Card */

/** ## Accordion */
.accordion-body, .accordion-button {
  background-color: #282828;
  color: #f5f5f5;
}

.accordion-button {
  font-size: x-large;
  /* font-weight: bold; */
  padding: 1rem;
  padding-left: 2rem;
}

.accordion-button:hover {
  background-color: #f2f2f2;
  color: #181818;
}

.accordion-button:not(.collapsed) {
  background-color: #f2f2f2;
  color: #181818;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button > i {
  margin-right: 2rem;
}

.accordion {
  border: 1px solid #f2f2f2;
  border-radius: .5rem;
}

#accordion-table {
  font-size: large;
  display: grid;
  grid-template-columns: 1fr 3fr;
  border: #444 solid 2px;
  background-color: #181818;
  padding: 1rem;
  /* padding-top: 1rem; */
  margin: .8rem;
  color: white;
  text-decoration: none;
  border-radius: .5rem;
}

#accordion-table > * {
  align-self: center;
  margin-top: auto;
  margin-bottom: auto;
}

#accordion-table:hover {
  background-color: #f2f2f2;
  color: #181818;
  border: 2px solid #141414;
}

/** ## Report */

#job-card {
  background-color: #f2f2f2;
  border: 2px solid black;
  padding: 2rem !important;
  margin: .8rem !important;
  color: black;
  text-decoration: none;
  box-shadow: #000 5px 5px 10px;
}

#job-card #title {
  border-bottom: 1px solid black;
  padding-bottom: 1rem !important;
}

#job-card #title > div {
  display: flex !important;
  justify-content: space-between !important;
}

#job-card #dates {
  display: flex !important;
  justify-content: space-between !important;
  align-content: center;
  margin: 1rem;
}

#job-card #dates > div {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin-left: 2rem;
  margin-right: 2rem;
}

#job-card #dates > div > * {
  padding-top: 0px !important;
  /* margin: 0px!important; */
  margin-top: 0px !important;
  margin-bottom: 0px !important;

}

#job-card #dates > div > p {
  padding-top: 5px!important;
  padding-left: 1rem;
  padding-right: 3rem;
}


#job-card th, #job-card td {
  color: black;
}

@media print {

  body *:not(#job-card *) {
      /* visibility: hidden;
      display: hidden; */
      box-sizing: border-box !important;
      height: 0px !important;
      padding: 0px !important;
      margin: 0px !important;
  }
  
  #job-card * {
    visibility: visible;
    position: relative !important;
    left: 0px !important;
    top: 0px !important;
    height: auto !important;  

  }
}