/*
 * MEDIA QUERIES - ADJUST FOR EACH NEW TABLE
 */

/*set table based on either feature width () or datalab width (610px) */

/*columns to disappear at landscape mobile*/

@media screen and (max-width: 480px) {
  td:nth-child(2),th:nth-child(2){
    display:none;
  }
}

/*additional columns to disappear at portrait mobile*/


@media screen and (max-width: 320px) {
  td:nth-child(3),th:nth-child(3),
  td:nth-child(4),th:nth-child(4){
    display:none;
  }
}


/*
 * TABLE STYLES - KEEP THE SAME FOR EACH TABLE
 */

 th {
  cursor: pointer;
 }

/*
 * TABLE STYLES - KEEP THE SAME FOR EACH TABLE
 */

@font-face {
  font-family: DecimaMonoPro;
  src: url('//projects.fivethirtyeight.com/shared/fonts/DecimaMonoPro-Bold.woff2') format('woff2'), /* Firefox, Chrome, Opera */
       url('//projects.fivethirtyeight.com/shared/fonts/DecimaMonoPro-Bold.woff') format('woff'); /* Other browsers */

  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: DecimaMonoPro;
  src: url('//projects.fivethirtyeight.com/shared/fonts/DecimaMonoPro.woff2') format('woff2'), /* Firefox, Chrome, Opera */
       url('//projects.fivethirtyeight.com/shared/fonts/DecimaMonoPro.woff') format('woff'); /* Other browsers */

  font-style: normal;
  font-weight: 400;
}


@font-face {
  font-family: AtlasGrotesk;
  src: url('//projects.fivethirtyeight.com/shared/fonts/AtlasGrotesk-Bold.woff2') format('woff2'), /* Firefox, Chrome, Opera */
       url('//projects.fivethirtyeight.com/shared/fonts/AtlasGrotesk-Bold.woff') format('woff'); /* Other browsers */

  font-style: normal;
  font-weight: 700;
}


@font-face {
  font-family: AtlasGrotesk;
  src: url('//projects.fivethirtyeight.com/shared/fonts/AtlasGrotesk-Regular.woff2') format('woff2'), /* Firefox, Chrome, Opera */
       url('//projects.fivethirtyeight.com/shared/fonts/AtlasGrotesk-Regular.woff') format('woff'); /* Other browsers */

  font-style: normal;
  font-weight: 400;
}

html, body,.container {
  -webkit-text-size-adjust:100%;
  margin: 0;
  height: 476px;
  }

table.dataTable {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .875em;
}

.numbers{
  font-family: DecimaMonoPro;
  text-align: right;
}
.rank, .text{
  font-family: AtlasGrotesk;
  text-align: left;
}
table.dataTable tbody th, table.dataTable tbody td.text {
  padding-bottom: 2px;
}
.rank{
  font-size: 0.8571em;
  font-weight: bold;
  text-align: center;
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-size: .8em;
  font-weight: bold;
  font-family: AtlasGrotesk;
  vertical-align: bottom;
}
table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 8px;
  border-bottom: 2px solid #111111;
}
table.dataTable thead th:active,
table.dataTable thead td:active {
  outline: none;
}
table.dataTable tfoot th,
table.dataTable tfoot td {
  padding: 10px 10px 6px 10px;
  border-top: 1px solid #111111;
}
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
  cursor: pointer;
  *cursor: hand;
}

table.dataTable tbody th,
table.dataTable tbody td {
  padding: 6px 7px;
}
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
  border-top: 1px solid #DCDCDC;
}
table.dataTable.row-border tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th,
table.dataTable.display tbody tr:first-child td {
  border-top: none;
}

/*hovering over rows*/
table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover,
table.dataTable.hover tbody tr.even:hover, table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
  background-color: #f9f9f9;
}

/*sorted column color*/
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
  background-color: #f9f9f9;
}

/*hovering over row & sorted column*/
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.display tbody tr.odd:hover > .sorting_1,
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_1 {
  background-color: #eaeaea;
}

table.dataTable th.dt-center,
table.dataTable td.dt-center,
table.dataTable td.dataTables_empty {
  text-align: center;
  font-family: AtlasGrotesk;
  font-size: .875em;
}

.dataTables_wrapper .dataTables_filter {
  text-align: right;
  padding: 0 8px 0 0 ;
  height: 43px;
  top: 0px;
  display: block;
}
.dataTables_wrapper .dataTables_filter input {
  margin-left: 0.4em;
  border: 1px solid #a6a6a6;
  background-color: #f9f9f9;
  font-family: AtlasGrotesk;
  font-size: 1.2em;
}

.dataTables_wrapper .dataTables_filter label{
font-family: AtlasGrotesk;
font-size: .875em;
color: transparent;
}