.footable {
  border-collapse: separate;
  border-spacing: 0;
 
  font-family: 'Open Sans', sans-serif;
  font-size:1.4em;
  color: white;
  background: #333333;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  margin-bottom: 10em;
}

table.footable, table.footable-details {
    position: static;
}

.footable.breakpoint > tbody > tr.footable-row-detail {
  background: #eeeeee;  
}
.footable.breakpoint > tbody > tr:hover:not(.footable-row-detail) {
  cursor: pointer;
}
.footable.breakpoint > tbody > tr > td.footable-row-detail-cell {
  /*background: #fff;*/ /* breakpoint background color */
  background-color:currentColor;
  color:#3c3c3c;
}

.footable-row-detail-row {
    color:whitesmoke;
}
.footable > tbody img {
  vertical-align: middle;
}
.footable > tbody > tr:hover:not(.footable-row-detail) {
  background: #888888;  /* hover background color */
}
.footable > tbody > tr:hover:not(.footable-row-detail) > td {
  color: white;   /* hover text color */
}
.footable > tbody > tr:last-child > td {
  border-bottom: none;
}
/*must*/
.footable > tbody > tr > td {
  border-top:none; /* table row border */
  padding:0.3em 1em;
  text-align: left;
  border-left: none;
}
.footable > tbody > tr > td.footable-row-detail-cell,
.footable > tbody > tr > td.footable-first-column {
  border-left: none;
}
/*.footable > thead > tr > th {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  padding: 10px;
  text-align: left;
}*/
.footable > thead > tr > th,
.footable > thead > tr > td {
  background-color: #52b9e9;
  
  color: #ffffff;
  border-top: none;
  border-left: none;
  font-weight: normal;
}
.footable > thead > tr > th.footable-first-column,
.footable > thead > tr > td.footable-first-column {
  border-left: none;
}
.footable > tfoot > tr > th,
.footable > tfoot > tr > td {
  background-color: #52b9e9;
  border: 1px solid #52b9e9;
  color: #ffffff;
  border-top: none;
  border-left: none;
  padding: 1px;

}
.footable > tfoot .pagination {
  text-align: center;
}
.footable > tfoot .pagination ul {
  display: inline-block;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}
.footable > tfoot .pagination ul > li {
  display: inline;
}

.footable-page > tfoot .pagination ul > li > a,
.footable-page > tfoot .pagination ul > li > span {
  float: left !important;
  border: 2px solid transparent!important;
  margin: 0 1px!important;
  color: #ffffff!important;
  background: transparent!important;
  padding: 1px 5px!important;
  text-decoration: none!important;
}


.footable > tfoot .pagination ul > li.disabled > a {
  color: #888;
}
.footable > tfoot .pagination ul > li.active > a {
  border-color: #ffffff;
}
.footable > tfoot .pagination ul > li:first-child > a,
.footable > tfoot .pagination ul > li:last-child > a,
.footable > tfoot .pagination ul > li:first-child > span,
.footable > tfoot .pagination ul > li:last-child > span {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.footable.metro-red {
  border-color: #fa3031;
}
.footable.metro-red > tfoot > tr > th,
.footable.metro-red > thead > tr > th,
.footable.metro-red > tfoot > tr > td,
.footable.metro-red > thead > tr > td {
  background-color: #fa3031;
  border-color: #fa3031;
}
.footable.metro-purple {
  border-color: #932ab6;
}
.footable.metro-purple > tfoot > tr > th,
.footable.metro-purple > thead > tr > th,
.footable.metro-purple > tfoot > tr > td,
.footable.metro-purple > thead > tr > td {
  background-color: #932ab6;
  border-color: #932ab6;
}
.footable.metro-green {
  border-color: #43c83c;
}
.footable.metro-green > tfoot > tr > th,
.footable.metro-green > thead > tr > th,
.footable.metro-green > tfoot > tr > td,
.footable.metro-green > thead > tr > td {
  background-color: #43c83c;
  border-color: #43c83c;
}
.footable.metro-blue {
  border-color: #3c3c3c;
}
.footable.metro-blue > tfoot > tr > th,
.footable.metro-blue > thead > tr > th,
.footable.metro-blue > tfoot > tr > td,
.footable.metro-blue > thead > tr > td {
  background-color: #585858; /* table header background color */
  border-color: #585858; /* table border background color */
  font-family: 'Josefin Sans', sans-serif;
  font-size:0.9em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding:0.8em;
}
.footable-odd {
  background-color: #f7f7f7;
}

thead {
    -webkit-box-shadow: -1px 2px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: -1px 2px 3px 0px rgba(0,0,0,0.2);
    box-shadow: -1px 2px 3px 0px rgba(0,0,0,0.2);
}

tr:nth-of-type(2n) {
    background-color: #454545;
    -webkit-box-shadow: -1px 2px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: -1px 2px 3px 0px rgba(0,0,0,0.2);
    box-shadow: -1px 2px 3px 0px rgba(0,0,0,0.2);
}
table.footable > tbody > tr.footable-empty > td {
    text-align: left;
    height:10vh;
}

table.footable > tfoot > tr.footable-paging > td > ul.pagination {
    float:left;
}

table.footable > tbody > tr.footable-empty > td:hover {
    background-color:#282828;
    cursor:default;
}
table.footable > tbody > tr.footable-empty > td {
    background-color:#282828;
}

/*@media only screen and (min-device-width: 1290px) {
    table.footable.adjustForFixedTable {
        margin-left: 17px;
    }
}*/

table.footable > tbody > tr.series > td {
	display: table-cell;
}

@media only screen and (min-width: 769px) {
   .footable {
     margin-bottom: 0em;
   }
}

@media only screen and (min-width: 1400px){
    .footable > tbody > tr > td {
        padding: 0.7em 1em;
    }
}