/** Jumbotron */

.jumbotron {
  min-height: 300px;
  padding: 0 0 20px;
}

.jumbotron svg {
  min-height: 600px;
  width: 100%;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
}

#income-source-description {
  margin-bottom: 3rem;
  text-align: center;
}

#filters {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.9);;
  border-radius: 15px;
  margin: 150px auto -100px;
  max-width: 400px;
  padding: 20px;
  position: relative;
}

#annual-or-hourly-radio-container {
  margin-top: 20px;
}

#currency, #sort-by, #sort-direction {
  margin-top: 20px;
}

#income-container {
  padding-top: 100px;
}

.percentile-table {
  width: 100%;
  margin-top: 20px;
}

#percentile-tbody > tr:nth-child(odd of :not(.d-none)) > td {
  background-color: rgba(230, 243, 255, 1);
}

.rounded-tbody tr:nth-child(odd of :not(.d-none)) {
  background-color: #e6f3ff;
}

.rounded-tbody > tr:nth-child(1 of :not(.d-none)) > td:first-child {
  border-radius: 15px 0 0 0;
}

.rounded-tbody > tr:nth-child(1 of :not(.d-none)) > td:last-child {
  border-radius: 0 15px 0 0;
}

.rounded-tbody > tr:nth-last-child(1 of :not(.d-none)) > td:first-child {
  border-radius: 0 0 0 15px;
}

.rounded-tbody > tr:nth-last-child(1 of :not(.d-none)) > td:last-child {
  border-radius: 0 0 15px 0;
}

.percentile-table td {
  width: 14%;
}

.region-name {
  text-align: right;
}

.median-table {
  margin-top: 20px;
  width: 100%;
}

.median-table td.income {
  width: 8rem;
  white-space: nowrap;
}

.median {
  font-weight: bold;
  font-size: 1rem;
  line-height: .8rem;
}

.income-table {
  background: #fff;
  border: 1px solid #0f3247;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 15px;
  font-size: .8rem;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

  .income-table th {
    padding: 10px;
  }

  .income-table td {
    padding: 10px 5px 10px 5px;
  }

  .col-region {
    width: 25%;
  }

  .col-income {
    width: 15%;
  }

  .column-labels {
    background-color: #0f3247;
    color: #fff;
  }

  .column-labels th:first-child {
    border-top-left-radius: 15px;
  }

  .column-labels th:last-child {
    border-top-right-radius: 15px;
  }

#next {
  padding-bottom: 0 !important;
}

#next .list-group {
  min-width: 10rem;
}

@media only screen and (min-width: 576px) {
  .income-table {
    font-size: 1rem;
  }

  .median {
    font-size: 1.4rem;
  }

  .median-table {
    max-width: 500px;
    margin-left: 0;
    margin-right: 0;
  }
}

@media only screen and (min-width: 768px) {
  #income-container {
    padding-top: 250px;
  }

  .median-table {
    margin-left: auto;
    margin-right: auto;
  }

  .jumbotron svg {
    top: 200px;
  }
}