/**
 *  Tidy Table
 *  Create a HTML table from JSON that can be sorted, selected
 *  and post-processed using a simple callback.
 *
 *  Copyright 2012-2016, Marc S. Brooks (https://mbrooks.info)
 *  Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 */

table.tidy_table {
  background-color: #FFFFFF;
  border-collapse: collapse;
  border: 1px solid #CCCCCC;
  cursor: pointer;
  white-space: nowrap;
}

.tidy_table thead {
  border: none;
}

.tidy_table .check_on {
  background-color: #F5F5F5;
}

.tidy_table .check_off {
  background-color: #FFFFFF;
}

.tidy_table th {
  background-color: #DDDDDD;
}

.tidy_table .sort_asc {
  background: #EEEEEE url( images/arrow_asc.gif ) no-repeat right center;
}

.tidy_table .sort_desc {
  background: #EEEEEE url( images/arrow_desc.gif ) no-repeat right center;
}

.tidy_table th,
.tidy_table td {
  padding: 6px 20px;
}

.tidy_table td {
  border-right: 1px solid #EEEEEE;
  border-top: 1px solid #CCCCCC;
  padding: 7px 20px;
}

.tidy_table th:nth-child(1),
.tidy_table td:nth-child(1) {
  width: 10px;
}

.tidy_table td:nth-child(1) {
  border-right: 1px solid #EEEEEE;
}

.tidy_table input[type=checkbox],
.tidy_table input[type=checkbox] {
  display: block;
  margin: 0px auto;
}

.tidy_table td:nth-last-child(1) {
  border-right: none;
}

.tidy_table td .label {
  display: none;
}

/**
 * Responsive (mobile devices)
 */
@media only screen and (min-device-width: 0px) and (max-device-width: 768px) {
  .tidy_media {
    margin: 0px !important;
    width: auto !important;
    overflow: none;
  }

  .tidy_media select {
    position: relative;
    right: 30px;
  }

  .tidy_media table {
    border: 0px;
    border-top: 1px solid #DDDDDD;
    width: 100%;
  }

  .tidy_media table tr {
    border-bottom: 1px solid #CCCCCC;
    position: relative;
  }

  .tidy_media table tbody tr:last-child {
    border: none;
  }

  .tidy_media table th,
  .tidy_media table td {
    box-sizing: border-box;
    border: 0px;
    clear: both;
    float: left;
    padding-left: 10px;
  }

  .tidy_media table th:first-child,
  .tidy_media table td:first-child {
    background-color: transparent;
    padding: 10px;
    position: absolute;
    right: 0px;
    top: 2px;
    width: auto;
  }

  .tidy_media table th {
    text-align: left;
    width: 100%;
  }

  .tidy_media table th:first-child {
    top: -40px;
  }

  .tidy_media table td {
    background-color: transparent;
  }
}