/* TABLES
   ------------------------------------------------------------------ */
   table {
      margin: 0 0 18px;
      margin: 0 0 1.5rem;
      border-collapse: collapse;
      border-spacing: 0;  /* old browsers may need 'cellspacing="0"' in the HTML */
      empty-cells: show;
      background: #fff;
      }

   caption,
   th,
   td { 
      text-align: left; 
      padding: .5em .75em;
      }

   caption {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      }

   th {
      white-space: nowrap; /* or use   between words or .nowrap helper class */
      font-weight: 700;
      }

   thead th {
      border-bottom: 1px solid #ccc;
      }

   tfoot th, 
   tfoot td {
      border-top: 1px solid #ccc;
      }

/* zebra stripe <table>
   ---------------------------------------------------- */
   .striped tr:nth-child(even), 
   .striped .alt td {
      background-color: #f5f5f5; /* Apply class="alt" on even <tr>s for backward compatibility with older IEs | TEST : ??? can background be applied to tr directly? */
      }

/* lined <table>
   ---------------------------------------------------- */
   .lined tbody td,
   .lined tbody th {
      border-top: 1px solid #eee;
      }

/* grid <table>
   ---------------------------------------------------- */
   .grid {
      Xmargin-left: 1px; /* BUG : Firefox expands the width of table with border by an extra 1px and moves it that distance to the left */
      border: 1px solid #ccc;
      border-width: 1px 0 0 1px;
      }

   .grid caption {
      border: 1px solid #888;
      background-color: #999;
      color: #fff;
      }

   .grid thead th {
      background: #ddd;
      color: #666;
      }

   .grid th,
   .grid td {
      border: 1px solid #ccc;
      border-width: 0 1px 1px 0;
      }

/* highlight table rows | does not work in some IE
   ---------------------------------------------------- */
   .highlighted tbody tr:hover td,
   .highlighted tbody tr:hover th,
   .highlighted tbody tr.over td {
      background-color: #ffc;
      }

/* centered <table>
   ---------------------------------------------------- */
   .centered th,
   .centered td { text-align: center; }

/* sorting
   ---------------------------------------------------- */
   .th--sortable {
     Xposition: relative;
      }

   .th--sortable:hover {
      cursor: pointer;
      background-color: #eee; /* #E7C001; */
      }

/* sort arrow up */
   .th--sortable b,
   .th--sortable i {
      position: absolute;
      margin: 2px 0 0 3px;
      content: " ";
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid #000;
      background: 0;
      opacity: .25;
      }

/* sort arrow down */
   .th--sortable i {
      margin-top: 10px;
      border-top: 5px solid #000;
      border-bottom: 0;
      }

   .th--sort-up b,
   .th--sort-down i {
      opacity: 1;
      }

/* jQuery DataTables
   ------------------------------------------------------------------ */
/* jQuery DataTables http://datatables.net/styling/ids_classes */
/* Self clearing - http://www.webtoolkit.info/css-clearfix.html */
   .dataTables_wrapper {
      padding: 1em 1.5em;
      }

   .dataTables_wrapper:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
      }

   html[xmlns] .dataTables_wrapper {
      display: block;
      }

   * html .dataTables_wrapper {
      height: 1%;
      }

/* table length (number of rows to show) selector */
   .dataTables_length {
      float: left;
      line-height: 3em;
      }

   .dataTables_length label {}

   .dataTables_length select {}

/* table search filter */
   .dataTables_filter {
      float: right;
      line-height: 3em;
      }

   .dataTables_filter label { margin-top: -1em; }

   .dataTables_filter input {}

/* DataTables table */
   .dataTables_wrapper table {
      clear: both;
      border-bottom: 3px double #CCC;
      }

   /* column sorting indicators */
   .sorting_asc {
      background: #eee url('/assets/img/sort_asc.png') no-repeat right center;
      color: #000;
      }

   .sorting_desc {
      background: #eee url('/assets/img/sort_desc.png') no-repeat right center;
      color: #000;
      }

   .sorting { background: transparent url('/assets/img/sort_both.png') no-repeat right center; }

   .sorting_disabled {}

   .sorting_1,
   .sorting_2,
   .sorting_3 {
      background-color: #eee;
      border-color: #ddd !important;
      }

   .dataTables_info {
      text-align: center;
      margin-top: 1em;
      margin-bottom: -3.5em;
      }

   .dataTables_paginate {
      overflow: hidden;
      margin-top: 2em;
      }

   .paging_two_button {}

   .paginate_disabled_previous,
   .paginate_enabled_previous {
      float: left;
      }

   .paginate_disabled_next,
   .paginate_enabled_next {
      float: right;
      }

   .dataTables_empty {
      background-color: #fcc;
      border: 3px solid #d21034 !important;
      font-size: 1.2em;
      padding: 1em;
      color: #a00;
      }

   .dataTables_empty:before {
      content: " ";
      display: inline;
      margin-right: .5rem;
      padding: 12px 8px 4px; /* padding can be used to align icon with text and is needed to give icon size when it is display inline */
      font-size: 0; /*inherit*/
      background-image: url("/assets/img/sprite8.png");
      background-repeat: no-repeat;
      background-position: -16px 0;
      }