@media (min-width: 980px) {
    body { 
      padding-top: 0px; 
      font-size: 75%;
    }
  }

@media (max-width: 980px) {
  body { 
    padding-top: 0px; 
    font-size: 85%;
  }
}

*[hidden] {
  display: none;
}

/*Word Cloud*/
#canvas-container {
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
}
.canvas {
  margin: auto;
  display: block;
  position: relative;
  overflow: hidden;
}

.canvas.hide {
  display: none;
}

#html-canvas > span {
    transition: text-shadow 1s ease, opacity 1s ease;
  -webkit-transition: text-shadow 1s ease, opacity 1s ease;
  -ms-transition: text-shadow 1s ease, opacity 1s ease;
}

#html-canvas > span:hover {
  text-shadow: 0 0 10px, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
  opacity: 0.5;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: #000000;
  display: flex;
  flex-wrap: wrap;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  color: #ffffff;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 8px;
  transition: 0.3s;
  font-family: Verdana;
  font-size: 1.1rem;
  flex: 1 1 10ch;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgb(32, 32, 32);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: rgb(32, 32, 32);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 0px 0px;
  border: 0px; /*1px solid #ccc;*/
  /*border-top: none;*/
  /*height: 423px; */
  font-family: Verdana;
  overflow: hidden;
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Links */
.link {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  float: left;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-family: Verdana;
}

/* Change background color of links on hover */
.link:hover {
  background-color: #ddd;
}


/* Table Styles */

.table-wrapper{
margin: 5px 10px 10px;
box-shadow: 0px 10px 10px rgba( 0, 0, 0, 0.2 );
}

.fl-table {
border-radius: 5px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;
}

.fl-table td, .fl-table th {
text-align: center;
padding: 8px;
}

.fl-table td {
border-right: 1px solid #f8f8f8;
}

.fl-table thead th {
color: #ffffff;
background: #324960;
}


.fl-table thead th:nth-child(odd) {
color: #ffffff;
background: #324960;
}

.fl-table tr:nth-child(even) {
background: #F8F8F8;
}

/* Responsive */

@media (max-width: 767px) {
  .fl-table {
      display: block;
      width: 100%;
  }
  .table-wrapper:before{
      content: "Scroll horizontally >";
      display: block;
      text-align: right;
      color: white;
      padding: 0 0 10px;
  }
  .fl-table thead, .fl-table tbody, .fl-table thead th {
      display: block;
  }
  .fl-table thead th:last-child{
      border-bottom: none;
  }
  .fl-table thead {
      float: left;
  }
  .fl-table tbody {
      width: auto;
      position: relative;
      overflow-x: auto;
  }
  .fl-table td, .fl-table th {
      padding: 20px .625em .625em .625em;
      height: 60px;
      vertical-align: middle;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
      width: 120px;
      text-overflow: ellipsis;
  }
  .fl-table thead th {
      text-align: left;
      border-bottom: 1px solid #f7f7f9;
  }
  .fl-table tbody tr {
      display: table-cell;
  }
  .fl-table tbody tr:nth-child(odd) {
      background: none;
  }
  .fl-table tr:nth-child(even) {
      background: transparent;
  }
  .fl-table tr td:nth-child(odd) {
      background: #F8F8F8;
      border-right: 1px solid #E6E4E4;
  }
  .fl-table tr td:nth-child(even) {
      border-right: 1px solid #E6E4E4;
  }
  .fl-table tbody td {
      display: block;
      text-align: center;
  }
}